[IMP] misc CSS improvements, mainly editable lists
authorFabien Pinckaers <fp@tinyerp.com>
Wed, 8 Aug 2012 19:38:42 +0000 (21:38 +0200)
committerFabien Pinckaers <fp@tinyerp.com>
Wed, 8 Aug 2012 19:38:42 +0000 (21:38 +0200)
bzr revid: fp@tinyerp.com-20120808193842-nxrk13vc8hv9wxlg

addons/web/static/src/css/base.css
addons/web/static/src/css/base.sass
addons/web/static/src/js/view_form.js
addons/web/static/src/js/view_list_editable.js
addons/web/static/src/xml/base.xml
addons/web_kanban/static/src/js/kanban.js

index dfd0a5a..5f4dd3b 100644 (file)
@@ -78,7 +78,7 @@
   background: white;
   /* http://www.quirksmode.org/dom/inputfile.html
    * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
-   */
+   */ */
 }
 .openerp :-moz-placeholder {
   color: #afafb6 !important;
 }
 .openerp .oe_form_field_many2one .oe_m2o_cm_button {
   line-height: 14px;
+  float: right;
+  padding-left: 2px;
 }
 .openerp .oe_form .oe_form_field_one2many > .oe_view_manager .oe_list_pager_single_page {
   display: none;
 }
+.openerp .oe_form_field_one2many > .oe_view_manager .oe_list_pager_single_page, .openerp .oe_form_field_many2many > .oe_view_manager .oe_list_pager_single_page {
+  display: none !important;
+}
+.openerp .oe_form_field_one2many .oe_form_field_one2many_list_row_add, .openerp .oe_form_field_many2many .oe_form_field_one2many_list_row_add {
+  font-weight: bold;
+}
 .openerp .oe_form_field_one2many .oe_list_content > thead, .openerp .oe_form_field_many2many .oe_list_content > thead {
   border-bottom: 1px;
 }
 .openerp .oe_form_field_one2many .oe_list_buttons.oe_editing .oe_list_save, .openerp .oe_form_field_many2many .oe_list_buttons.oe_editing .oe_list_save {
   visibility: hidden;
 }
+.openerp .oe_form_editable .oe_list_editable .oe_list_content td.oe_required {
+  background-color: #d2d2ff;
+}
+.openerp .oe_form_editable .oe_list_editable .oe_list_content td.oe_readonly {
+  background-color: #eeeeee;
+}
+.openerp .oe_list_editable .oe_list_content td.oe_list_field_cell {
+  padding: 4px 6px 3px 6px;
+}
+.openerp .oe_list.oe_list_editable td.oe_list_record_delete {
+  position: absolute;
+}
+.openerp .oe_list.oe_list_editable.oe_editing .oe_m2o_drop_down_button {
+  top: 5px;
+}
+.openerp .oe_list.oe_list_editable.oe_editing .oe_m2o_cm_button {
+  display: none;
+}
+.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field input {
+  height: 27px;
+}
+.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field input, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field textarea {
+  border: 1px solid #aaaaff;
+  border-radius: 0px;
+  margin: 0px;
+  -webkit-border-radius: 0px;
+}
+.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field textarea {
+  height: 60px;
+}
+.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_float input, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_view_integer input {
+  text-align: right;
+}
+.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime > span, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date > span {
+  width: 100%;
+}
+.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime input.oe_datepicker_master, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date input.oe_datepicker_master {
+  width: 100% !important;
+}
+.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field .oe_form_field_float, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field .oe_form_view_integer, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date {
+  min-width: 0 !important;
+  max-width: none !important;
+}
 .openerp .oe_form .oe_form_field_many2many > .oe_list .oe_list_pager_single_page {
   display: none;
 }
   background: #eeeeee;
   font-weight: bold;
 }
-.openerp .oe_list_content > tbody tr:hover td, .openerp .oe_list_content tbody tr:hover th {
-  background-color: #eeeeee;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dedede));
-  background-image: -webkit-linear-gradient(top, #eeeeee, #dedede);
-  background-image: -moz-linear-gradient(top, #eeeeee, #dedede);
-  background-image: -ms-linear-gradient(top, #eeeeee, #dedede);
-  background-image: -o-linear-gradient(top, #eeeeee, #dedede);
-  background-image: linear-gradient(to bottom, #eeeeee, #dedede);
-}
 .openerp .oe_list_content .numeric {
   text-align: right;
   width: 82px;
index 2570fee..75382b1 100644 (file)
@@ -1875,6 +1875,8 @@ $sheet-max-width: 860px
             right: 0px
         .oe_m2o_cm_button
             line-height: 14px
+            float: right
+            padding-left: 2px
     // }}}
     // FormView.one2many {{{
     .oe_form .oe_form_field_one2many > .oe_view_manager
@@ -1882,6 +1884,11 @@ $sheet-max-width: 860px
             display: none
     .oe_form_field_one2many,.oe_form_field_many2many
         // TODO: oe_form_field_one2many_list?
+        > .oe_view_manager
+            .oe_list_pager_single_page
+                display: none !important
+        .oe_form_field_one2many_list_row_add
+            font-weight: bold
         .oe_list_content
             > thead
                 border-bottom: 1px
@@ -1911,6 +1918,46 @@ $sheet-max-width: 860px
         .oe_list_buttons.oe_editing .oe_list_save
             // keep "save row" button hidden in o2m
             visibility: hidden
+    .oe_form_editable
+        .oe_list_editable
+            .oe_list_content
+                td.oe_required
+                    background-color: #d2d2ff
+                td.oe_readonly
+                    background-color: #eee
+    .oe_list_editable
+        .oe_list_content
+            td.oe_list_field_cell
+                padding: 4px 6px 3px 6px
+    .oe_list.oe_list_editable
+        td.oe_list_record_delete
+            position: absolute
+    .oe_list.oe_list_editable.oe_editing
+        .oe_m2o_drop_down_button
+            top: 5px
+        .oe_m2o_cm_button
+            display: none
+        .oe_form_field
+            input
+                height: 27px
+            input, textarea
+                border: 1px solid #aaf
+                border-radius: 0px
+                margin: 0px
+                -webkit-border-radius: 0px
+            textarea
+                height: 60px
+            &.oe_form_field_float,&.oe_form_view_integer
+                input
+                    text-align: right
+            &.oe_form_field_datetime,&.oe_form_field_date
+                > span
+                    width: 100%
+                input.oe_datepicker_master
+                    width: 100% !important
+            .oe_form_field_float,.oe_form_view_integer,&.oe_form_field_datetime,&.oe_form_field_date
+                min-width: 0 !important
+                max-width: none !important
     // }}}
     // FormView.many2many {{{
     .oe_form .oe_form_field_many2many > .oe_list
@@ -2005,8 +2052,6 @@ $sheet-max-width: 860px
             background: #eee
             font-weight: bold
 
-        > tbody tr:hover td, tbody tr:hover th
-            @include vertical-gradient(#eee, #dedede)
 
         .numeric
             text-align: right
index 22c8b99..b8acdfe 100644 (file)
@@ -161,7 +161,7 @@ instance.web.FormView = instance.web.View.extend(instance.web.form.FieldManagerM
         this.$element.find(".oe_form_field,label").on('click', function (e) {
             if(self.get("actual_mode") == "view") {
                 var $button = self.options.$buttons.find(".oe_form_button_edit");
-                $button.effect('bounce', {distance: 18, times: 7}, 200)
+                $button.effect('bounce', {distance: 18, times: 5}, 150)
             }
         });
 
@@ -3015,7 +3015,7 @@ instance.web.form.FieldOne2Many = instance.web.form.AbstractField.extend({
     },
     start: function() {
         this._super.apply(this, arguments);
-        this.$element.addClass('oe_form_field_one2many');
+        this.$element.addClass('oe_form_field oe_form_field_one2many');
 
         var self = this;
 
index b5890af..9a101a5 100644 (file)
@@ -248,10 +248,11 @@ openerp.web.list_editable = function (instance) {
             var $cell = $(cell);
             var position = $cell.position();
 
+            // jquery does not understand !important
+            field.$element.attr('style', 'width: '+$cell.outerWidth()+'px !important')
             field.$element.css({
                 top: position.top,
                 left: position.left,
-                width: $cell.outerWidth(),
                 minHeight: $cell.outerHeight()
             });
         },
index 5c7cfec..6de9286 100644 (file)
                     <t t-if="column.tag !== 'button'"><t t-esc="column.string"/></t>
                 </th>
             </t>
-            <th t-if="options.deletable" width="1"/>
+            <th t-if="options.deletable" width="13px"/>
         </tr>
     </thead>
     <tfoot>
         <t t-set="number" t-value="column.type === 'integer' or column.type == 'float'"/>
         <t t-set="modifiers" t-value="column.modifiers_for(asData)"/>
         <td t-if="!column.meta and column.invisible !== '1'" t-att-title="column.help"
-            t-attf-class="oe_list_field_cell oe_list_field_#{column.widget or column.type} #{number ? 'oe_number' : ''} #{column.tag === 'button' ? 'oe-button' : ''} #{modifiers.readonly ? 'oe_readonly' : ''}"
+            t-attf-class="oe_list_field_cell oe_list_field_#{column.widget or column.type} #{number ? 'oe_number' : ''} #{column.tag === 'button' ? 'oe-button' : ''} #{modifiers.readonly ? 'oe_readonly' : ''} #{modifiers.required ? 'oe_required' : ''}"
             t-att-data-field="column.id"
             ><t t-raw="render_cell(record, column)"/></td>
     </t>
-    <td t-if="options.deletable" class='oe_list_record_delete' width="1">
+    <td t-if="options.deletable" class='oe_list_record_delete' width="13px">
         <button type="button" name="delete" class="oe_i">d</button>
     </td>
 </tr>
         </t>
         <t t-if="!widget.get('effective_readonly')">
             <a t-if="! widget.get_definition_options().no_open" href="#" tabindex="-1"
-                class="oe_m2o_cm_button oe_e oe_right">/</a>
+                class="oe_m2o_cm_button oe_e">/</a>
             <div>
                 <input type="text"
                     t-att-id="widget.id_for_label"
index bbb243b..ef273ea 100644 (file)
@@ -433,7 +433,7 @@ instance.web_kanban.KanbanGroup = instance.web.OldWidget.extend({
         this.$records.click(function (ev) {
             if (ev.target == ev.currentTarget) {
                 if (!self.state.folded) {
-                    add_btn.effect('bounce', {distance: 18, times: 7}, 200)
+                    add_btn.effect('bounce', {distance: 18, times: 5}, 150)
                 } 
             }
         });