From 678101afb0eb92cda51ca8dbc5adac576d89d81a Mon Sep 17 00:00:00 2001
From: Fabien Pinckaers <fp@tinyerp.com>
Date: Fri, 15 Jun 2012 18:59:33 +0200
Subject: [PATCH] [IMP] factorization of view manager design; split global VS
 one2many CSS

bzr revid: fp@tinyerp.com-20120615165933-80vj5e6n6lzmgw0p
---
 addons/web/static/src/css/base.css  | 289 ++++++++++++++--------------
 addons/web/static/src/css/base.sass | 213 ++++++++++----------
 addons/web/static/src/xml/base.xml  |   3 -
 3 files changed, 261 insertions(+), 244 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index d82bf69380a..b3766a0d947 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -48,7 +48,7 @@
   background: white;
   /* http://www.quirksmode.org/dom/inputfile.html
    * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
-   */
+   */ */
 }
 .openerp a {
   text-decoration: none;
@@ -866,8 +866,149 @@
 .openerp .oe_application a:hover {
   text-decoration: underline;
 }
-.openerp .oe_view_manager_header {
+.openerp .oe_view_manager .oe_view_manager_header {
   width: 100%;
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_header_row {
+  clear: both;
+  text-shadow: 0 1px 1px white;
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_header_row:last-child td {
+  padding-top: 0;
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_view_manager_sidebar {
+  margin: 0px auto;
+  width: 400px;
+  text-align: center;
+}
+.openerp .oe_view_manager .oe_view_manager_header td {
+  line-height: 26px;
+}
+.openerp .oe_view_manager .oe_view_manager_header h2 {
+  font-size: 18px;
+  margin: 0;
+  float: left;
+}
+.openerp .oe_view_manager .oe_view_manager_header h2 a {
+  color: #8a89ba;
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_button_group {
+  display: inline-block;
+  border: 1px solid #ababab;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_button_group li {
+  float: left;
+  border-right: 1px solid #ababab;
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_button_group li:last-child {
+  border: none;
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_button_group a {
+  color: #4c4c4c;
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_button_group a:hover {
+  text-decoration: none;
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_button_group .active {
+  background: #999999;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_button_group .active a {
+  color: white;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+.openerp .oe_view_manager .oe_view_manager_header .oe_view_manager_buttons {
+  white-space: nowrap;
+}
+.openerp .oe_view_manager .oe_view_manager_pager {
+  line-height: 26px;
+}
+.openerp .oe_view_manager .oe_pager_value {
+  float: left;
+  margin-right: 8px;
+}
+.openerp .oe_view_manager .oe_pager_group {
+  float: left;
+  height: 24px;
+  line-height: 24px;
+  display: inline-block;
+  border: 1px solid #ababab;
+  cursor: pointer;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+.openerp .oe_view_manager .oe_pager_group li {
+  height: 24px;
+  line-height: 24px;
+  padding: 0;
+  float: left;
+  border-right: 1px solid #ababab;
+}
+.openerp .oe_view_manager .oe_pager_group li:last-child {
+  border: none;
+}
+.openerp .oe_view_manager .oe_pager_group a {
+  color: #4c4c4c;
+  padding: 0 8px;
+}
+.openerp .oe_view_manager .oe_pager_group a:hover {
+  text-decoration: none;
+}
+.openerp .oe_view_manager .oe_pager_group .active {
+  background: #999999;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
+}
+.openerp .oe_view_manager .oe_pager_group .active a {
+  color: white;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+.openerp .oe_view_manager .oe_view_manager_switch li {
+  text-align: center;
+  width: 24px;
+  height: 24px;
+  line-height: 16px;
+}
+.openerp .oe_view_manager .oe_view_manager_switch li a {
+  position: relative;
+}
+.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_list:after, .openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_tree:after {
+  padding: 2px;
+  content: "i";
+}
+.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_graph:after {
+  font-family: "mnmliconsRegular" !important;
+  font-size: 21px;
+  font-weight: 300 !important;
+  content: "}";
+  top: -2px;
+  position: relative;
+}
+.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_gantt:after {
+  font-family: "mnmliconsRegular" !important;
+  font-size: 21px;
+  font-weight: 300 !important;
+  content: "y";
+  top: -2px;
+  position: relative;
+}
+.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_calendar:after {
+  content: "P";
+}
+.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_kanban:after {
+  content: "k";
+}
+.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_diagram:after {
+  content: "f";
+}
+.openerp .oe_view_manager_global > .oe_view_manager_header {
   border-top: 1px solid #cacaca;
   border-bottom: 1px solid #cacaca;
   background-color: #fcfcfc;
@@ -881,150 +1022,14 @@
   -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 9px rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 9px rgba(0, 0, 0, 0.1);
 }
-.openerp .oe_view_manager_header .oe_header_row {
-  clear: both;
-  text-shadow: 0 1px 1px white;
-}
-.openerp .oe_view_manager_header .oe_header_row td {
+.openerp .oe_view_manager_global > .oe_view_manager_header .oe_header_row td {
   padding: 8px;
 }
-.openerp .oe_view_manager_header .oe_header_row:last-child td {
-  padding-top: 0;
-}
-.openerp .oe_view_manager_header .oe_header_row:first-child td {
+.openerp .oe_view_manager_global > .oe_view_manager_header .oe_header_row:first-child td {
   padding-top: 8px;
 }
-.openerp .oe_view_manager_header .oe_view_manager_sidebar {
-  margin: 0px auto;
-  width: 400px;
-  text-align: center;
-}
-.openerp .oe_view_manager_header td {
-  line-height: 26px;
-}
-.openerp .oe_view_manager_header h2 {
-  font-size: 18px;
-  margin: 0;
-  float: left;
-}
-.openerp .oe_view_manager_header h2 a {
-  color: #8a89ba;
-}
-.openerp .oe_view_manager_header .oe_button_group {
-  display: inline-block;
-  border: 1px solid #ababab;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-}
-.openerp .oe_view_manager_header .oe_button_group li {
-  float: left;
-  border-right: 1px solid #ababab;
-}
-.openerp .oe_view_manager_header .oe_button_group li:last-child {
-  border: none;
-}
-.openerp .oe_view_manager_header .oe_button_group a {
-  color: #4c4c4c;
-}
-.openerp .oe_view_manager_header .oe_button_group a:hover {
-  text-decoration: none;
-}
-.openerp .oe_view_manager_header .oe_button_group .active {
-  background: #999999;
-  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
-}
-.openerp .oe_view_manager_header .oe_button_group .active a {
-  color: white;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-.openerp .oe_view_manager_header .oe_view_manager_buttons {
-  white-space: nowrap;
-}
-.openerp .oe_view_manager_pager {
-  line-height: 26px;
-}
-.openerp .oe_pager_value {
-  float: left;
-  margin-right: 8px;
-}
-.openerp .oe_pager_group {
-  float: left;
-  height: 24px;
-  line-height: 24px;
-  display: inline-block;
-  border: 1px solid #ababab;
-  cursor: pointer;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-}
-.openerp .oe_pager_group li {
-  height: 24px;
-  line-height: 24px;
-  padding: 0;
-  float: left;
-  border-right: 1px solid #ababab;
-}
-.openerp .oe_pager_group li:last-child {
-  border: none;
-}
-.openerp .oe_pager_group a {
-  color: #4c4c4c;
-  padding: 0 8px;
-}
-.openerp .oe_pager_group a:hover {
-  text-decoration: none;
-}
-.openerp .oe_pager_group .active {
-  background: #999999;
-  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
-}
-.openerp .oe_pager_group .active a {
-  color: white;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-.openerp .oe_view_manager_switch li {
-  text-align: center;
-  width: 24px;
-  height: 24px;
-  line-height: 16px;
-}
-.openerp .oe_view_manager_switch li a {
-  position: relative;
-}
-.openerp .oe_view_manager_switch .oe_vm_switch_list:after, .openerp .oe_view_manager_switch .oe_vm_switch_tree:after {
-  padding: 2px;
-  content: "i";
-}
-.openerp .oe_view_manager_switch .oe_vm_switch_graph:after {
-  font-family: "mnmliconsRegular" !important;
-  font-size: 21px;
-  font-weight: 300 !important;
-  content: "}";
-  top: -2px;
-  position: relative;
-}
-.openerp .oe_view_manager_switch .oe_vm_switch_gantt:after {
-  font-family: "mnmliconsRegular" !important;
-  font-size: 21px;
-  font-weight: 300 !important;
-  content: "y";
-  top: -2px;
-  position: relative;
-}
-.openerp .oe_view_manager_switch .oe_vm_switch_calendar:after {
-  content: "P";
-}
-.openerp .oe_view_manager_switch .oe_vm_switch_kanban:after {
-  content: "k";
-}
-.openerp .oe_view_manager_switch .oe_vm_switch_diagram:after {
-  content: "f";
+.openerp .oe_form_field_one2many > .oe_view_manager .oe_header_row_top {
+  display: none;
 }
 .openerp .oe_form_dropdown_section {
   position: relative;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index ab29ee4e0f2..f83afcfb08d 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -704,49 +704,79 @@ $colour4: #8a89ba
             &:hover
                 text-decoration: underline
     // }}}
-    // ViewManager.header {{{
-    .oe_view_manager_header
-        width: 100%
-        border-top: 1px solid #cacaca
-        border-bottom: 1px solid #cacaca
-        @include vertical-gradient(#fcfcfc, #dedede)
-        @include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))
-        .oe_header_row
-            //min-height: 26px
-            //line-height: 26px
-            clear: both
-            text-shadow: 0 1px 1px white
+
+    // ViewManager common styles
+    .oe_view_manager
+        // ViewManager.header {{{
+        .oe_view_manager_header
+            width: 100%
+            .oe_header_row
+                //min-height: 26px
+                //line-height: 26px
+                clear: both
+                text-shadow: 0 1px 1px white
+            .oe_header_row:last-child
+                td
+                    padding-top: 0
+            .oe_view_manager_sidebar
+                margin: 0px auto
+                width: 400px
+                text-align: center
             td
-                padding: 8px
-        .oe_header_row:last-child
-            td
-                padding-top: 0
-        .oe_header_row:first-child
-            td
-                padding-top: 8px
-        .oe_view_manager_sidebar
-            margin: 0px auto
-            width: 400px
-            text-align: center
-        td
+                line-height: 26px
+            h2
+                font-size: 18px
+                margin: 0
+                float: left
+                a
+                    color: $colour4
+            .oe_button_group
+                display: inline-block
+                border: 1px solid #ababab
+                @include radius(5px)
+                li
+                    float: left
+                    border-right: 1px solid #ababab
+                    &:last-child
+                        border: none
+                a
+                    color: #4c4c4c
+                    &:hover
+                        text-decoration: none
+                .active
+                    background: #999
+                    @include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
+                    a
+                        color: #fff
+                        text-shadow: 0 1px 2px rgba(0,0,0,0.4)
+            .oe_view_manager_buttons
+                white-space: nowrap
+        // }}}
+        // ViewManager.pager {{{
+        .oe_view_manager_pager
             line-height: 26px
-        h2
-            font-size: 18px
-            margin: 0
+        .oe_pager_value
             float: left
-            a
-                color: $colour4
-        .oe_button_group
+            margin-right: 8px
+        .oe_pager_group
+            float: left
+            height: 24px
+            line-height: 24px
             display: inline-block
             border: 1px solid #ababab
+            cursor: pointer
             @include radius(5px)
             li
+                height: 24px
+                line-height: 24px
+                padding: 0
                 float: left
                 border-right: 1px solid #ababab
                 &:last-child
                     border: none
             a
                 color: #4c4c4c
+                padding: 0 8px
                 &:hover
                     text-decoration: none
             .active
@@ -755,76 +785,61 @@ $colour4: #8a89ba
                 a
                     color: #fff
                     text-shadow: 0 1px 2px rgba(0,0,0,0.4)
-        .oe_view_manager_buttons
-            white-space: nowrap
-    // }}}
-    // ViewManager.pager {{{
-    .oe_view_manager_pager
-        line-height: 26px
-    .oe_pager_value
-        float: left
-        margin-right: 8px
-    .oe_pager_group
-        float: left
-        height: 24px
-        line-height: 24px
-        display: inline-block
-        border: 1px solid #ababab
-        cursor: pointer
-        @include radius(5px)
-        li
-            height: 24px
-            line-height: 24px
-            padding: 0
-            float: left
-            border-right: 1px solid #ababab
-            &:last-child
-                border: none
-        a
-            color: #4c4c4c
-            padding: 0 8px
-            &:hover
-                text-decoration: none
-        .active
-            background: #999
-            @include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
-            a
-                color: #fff
-                text-shadow: 0 1px 2px rgba(0,0,0,0.4)
-    // }}}
-    // ViewManager.switches {{{
-    .oe_view_manager_switch
-        li
-            text-align: center
-            width: 24px
-            height: 24px
-            line-height: 16px
-            a
+        // }}}
+        // ViewManager.switches {{{
+        .oe_view_manager_switch
+            li
+                text-align: center
+                width: 24px
+                height: 24px
+                line-height: 16px
+                a
+                    position: relative
+            .oe_vm_switch_list:after, .oe_vm_switch_tree:after
+                padding: 2px
+                content: "i"
+            .oe_vm_switch_graph:after
+                font-family: "mnmliconsRegular" !important
+                font-size: 21px
+                font-weight: 300 !important
+                content: "}"
+                top: -2px
                 position: relative
-        .oe_vm_switch_list:after, .oe_vm_switch_tree:after
-            padding: 2px
-            content: "i"
-        .oe_vm_switch_graph:after
-            font-family: "mnmliconsRegular" !important
-            font-size: 21px
-            font-weight: 300 !important
-            content: "}"
-            top: -2px
-            position: relative
-        .oe_vm_switch_gantt:after
-            font-family: "mnmliconsRegular" !important
-            font-size: 21px
-            font-weight: 300 !important
-            content: "y"
-            top: -2px
-            position: relative
-        .oe_vm_switch_calendar:after
-            content: "P"
-        .oe_vm_switch_kanban:after
-            content: "k"
-        .oe_vm_switch_diagram:after
-            content: "f"
-    // }}}
+            .oe_vm_switch_gantt:after
+                font-family: "mnmliconsRegular" !important
+                font-size: 21px
+                font-weight: 300 !important
+                content: "y"
+                top: -2px
+                position: relative
+            .oe_vm_switch_calendar:after
+                content: "P"
+            .oe_vm_switch_kanban:after
+                content: "k"
+            .oe_vm_switch_diagram:after
+                content: "f"
+        // }}}
+
+    // ViewManager top header specific style
+    .oe_view_manager_global
+        > .oe_view_manager_header
+            border-top: 1px solid #cacaca
+            border-bottom: 1px solid #cacaca
+            @include vertical-gradient(#fcfcfc, #dedede)
+            @include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))
+            .oe_header_row
+                td
+                    padding: 8px
+            .oe_header_row:first-child
+                td
+                    padding-top: 8px
+
+    // ViewManager one2many specific style
+    .oe_form_field_one2many > .oe_view_manager
+        .oe_header_row_top
+            display: none
+
+
     // ViewManager.sidebar {{{
     .oe_form_dropdown_section
         position: relative
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index ca4ce011bb3..32bd5e210fd 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -433,7 +433,6 @@
             </tr>
         </table>
 
-
         <div class="oe_view_manager_body">
             <t t-foreach="widget.views_src" t-as="view">
                 <div t-attf-class="oe_view_manager_view_#{view.view_type}"/>
@@ -1178,8 +1177,6 @@
 </t>
 
 <t t-name="One2Many.viewmanager" t-extend="ViewManager">
-    <t t-jquery=".oe_header_row_top" t-operation="replace"/>
-
     <t t-jquery=".oe-view-manager-header">
         this.attr('t-if', 'views.length != 1');
     </t>