[IMP] misc CSS improvements, mainly editable lists

bzr revid: fp@tinyerp.com-20120808193842-nxrk13vc8hv9wxlg
2012-08-08 21:38:42 +02:00 · 2012-08-08 21:38:42 +02:00 · 3d48b3f877
parent 4d88bff8dd
commit 3d48b3f877
6 changed files with 108 additions and 20 deletions
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@ -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;
@ -2401,10 +2401,18 @@
 }
 .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;
 }
@ -2438,6 +2446,49 @@
 .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;
 }
@ -2556,15 +2607,6 @@
  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;
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@ -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
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@ -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;

--- a/addons/web/static/src/js/view_list_editable.js
+++ b/addons/web/static/src/js/view_list_editable.js
@ -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()
            });
        },
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@ -619,7 +619,7 @@
                    <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>
@ -671,11 +671,11 @@
        <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>
@ -977,7 +977,7 @@
        </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"
--- a/addons/web_kanban/static/src/js/kanban.js
+++ b/addons/web_kanban/static/src/js/kanban.js
@ -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)
                } 
            }
        });