[IMP] Improved field type image's control buttons (makes them overlay)

bzr revid: fme@openerp.com-20120604144211-hoyz2bekmoc7hods

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 47c047a..826465b 100644 (file)
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1928,8 +1928,35 @@
   margin: 0;
   padding: 0;
 }
-.openerp .oe_form .oe_binary_image {
+.openerp .oe_form .oe_form_field_image {
+  padding: 0;
+  position: relative;
   display: inline-block;
+  width: auto;
+  vertical-align: top;
+}
+.openerp .oe_form .oe_form_field_image > img {
+  min-width: 100px;
+}
+.openerp .oe_form .oe_form_field_image .oe_form_field_image_controls {
+  position: absolute;
+  top: 1px;
+  padding: 3px 0 0 0;
+  margin: 0 1px;
+  filter: alpha(opacity=70);
+  opacity: 0.7;
+  width: 99%;
+  text-align: center;
+  background: url(/web/static/src/img/form_sheetbg.png);
+  border-bottom: 1px dotted black;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.openerp .oe_form .oe_form_field_image:hover .oe_form_field_image_controls {
+  filter: alpha(opacity=100);
+  opacity: 1;
 }
 .openerp .oe_horizontal_border {
   border-bottom: 1px solid black;

diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 894e6ff..c005609 100644 (file)
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1566,8 +1566,30 @@ $colour4: #8a89ba
             -ms-filter: "alpha(opacity=0)"
             margin: 0
             padding: 0
-        .oe_binary_image
+        .oe_form_field_image
+            > img
+                min-width: 100px
+            padding: 0
+            position: relative
             display: inline-block
+            width: auto
+            vertical-align: top
+            .oe_form_field_image_controls
+                position: absolute
+                top: 1px
+                padding: 3px 0 0 0
+                margin: 0 1px
+                @include opacity(0.7)
+                width: 99%
+                text-align: center
+                background: url(/web/static/src/img/form_sheetbg.png)
+                border-bottom: 1px dotted black
+                -moz-box-sizing: border-box
+                -webkit-box-sizing: border-box
+                -ms-box-sizing: border-box
+                box-sizing: border-box
+            &:hover .oe_form_field_image_controls
+                @include opacity(1)
     // }}}
     // FormView.separator {{{
     .oe_horizontal_border

diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index be78ce8..9a674e7 100644 (file)
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -4055,11 +4055,11 @@ instance.web.form.FieldBinaryImage = instance.web.form.FieldBinary.extend({
     template: 'FieldBinaryImage',
     initialize_content: function() {
         this._super();
-        this.$placeholder = $(".oe_form_field-binary-image-placeholder", this.$element);
-        if (!this.get("effective_readonly"))
-            this.$element.find('.oe-binary').show();
-        else
-            this.$element.find('.oe-binary').hide();
+        if (!this.get("effective_readonly")) {
+            this.$element.find('.oe_form_field_image_controls').show();
+        } else {
+            this.$element.find('.oe_form_field_image_controls').hide();
+        }
     },
     set_value: function(value_) {
         this._super.apply(this, arguments);
@@ -4075,8 +4075,9 @@ instance.web.form.FieldBinaryImage = instance.web.form.FieldBinary.extend({
         } else {
             url = "/web/static/src/img/placeholder.png";
         }
-        var rendered = QWeb.render("FieldBinaryImage-img", {widget: this, url: url});;
-        this.$placeholder.html(rendered);
+        var img = QWeb.render("FieldBinaryImage-img", { widget: this, url: url });
+        this.$element.find('> img').remove();
+        this.$element.prepend(img);
     },
     on_file_change: function() {
         this.render_value();

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 152fd22..aaecd25 100644 (file)
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1042,9 +1042,8 @@
     <div class="oe_clear"/>
 </t>
 <t t-name="FieldBinaryImage">
-    <span class="oe_form_field oe_binary_image">
-        <div class="oe_form_field-binary-image-placeholder"></div>
-        <div class="oe-binary">
+    <span class="oe_form_field oe_form_field_image">
+        <div class="oe_form_field_image_controls">
             <div class="oe-binary-file-set">
                 <form class="oe-binary-form" t-att-target="widget.iframe"
                     method="post" enctype="multipart/form-data" action="/web/binary/upload">
@@ -1062,21 +1061,20 @@
             <button class="oe_button oe-binary-file-clear" type="button" title="Clear">
                 <img t-att-src='_s + "/web/static/src/img/icons/STOCK_MISSING_IMAGE.png"'/>
             </button>
+            <div class="oe-binary-progress" style="display: none">
+                <img t-att-src='_s + "/web/static/src/img/throbber.gif"' width="16" height="16"/>
+                <b>Uploading ...</b>
+            </div>
+            <iframe t-att-id="widget.iframe" t-att-name="widget.iframe" style="display: none"/>
         </div>
-        <div class="oe-binary-progress" style="display: none">
-            <img t-att-src='_s + "/web/static/src/img/throbber.gif"' width="16" height="16"/>
-            <b>Uploading ...</b>
-        </div>
-        <iframe t-att-id="widget.iframe" t-att-name="widget.iframe" style="display: none"/>
     </span>
 </t>
 <t t-name="FieldBinaryImage-img">
-    <img t-att-src='url' class="oe-binary-image field_image"
+    <img t-att-src='url'
         t-att-border="widget.readonly ? 0 : 1"
         t-att-name="widget.name"
         t-att-width="widget.node.attrs.img_width || widget.node.attrs.width"
         t-att-height="widget.node.attrs.img_height || widget.node.attrs.height"
-        t-att-style="'max-width: ' + (widget.$element.width() > 60 ? widget.$element.width() : 60) + 'px'"
     />
 </t>
 <t t-name="FieldBinaryFile">