From: Antony Lesuisse <al@openerp.com>
Date: Fri, 20 Apr 2012 17:44:27 +0000 (+0200)
Subject: [IMP] Listview styling
X-Git-Tag: 7.0-server~3547^2~51
X-Git-Url: http://git.inspyration.org/?a=commitdiff_plain;h=23207c806670ced81733492c2287d3a1148c6726;p=odoo%2Fodoo.git

[IMP] Listview styling

bzr revid: al@openerp.com-20120420174427-unoupanegd83equ4
---

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 2b90d47..22d3990 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1629,28 +1629,69 @@
 .openerp .oe-listview-content {
   width: 100%;
 }
-.openerp .oe-listview-content thead, .openerp .oe-listview-content tfoot {
-  border-bottom: 1px solid #cacaca;
+.openerp .oe-listview-content td, .openerp .oe-listview-content th {
+  padding: 3px 6px;
+  line-height: 18px;
+}
+.openerp .oe-listview-content td button, .openerp .oe-listview-content th button {
+  border: none;
+  background: transparent;
+  padding: 0;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  -box-shadow: none;
+}
+.openerp .oe-listview-content thead {
+  border-bottom: 2px solid #cacaca;
   background: #eeeeee;
+  vertical-align: top;
 }
-.openerp .oe-listview-content tfoot {
-  border-bottom: 1px solid #cacaca;
-  font-weight: bold;
+.openerp .oe-listview-content thead th:after {
+  content: "";
+  float: right;
+  margin-top: 7px;
+  border-width: 0 4px 4px;
+  border-style: solid;
+  border-color: black transparent;
+  visibility: hidden;
+}
+.openerp .oe-listview-content thead th.sortup:after {
+  visibility: visible;
+  filter: alpha(opacity=60);
+  opacity: 0.6;
+}
+.openerp .oe-listview-content thead th.sortdown:after {
+  border-bottom: none;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid black;
+  visibility: visible;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  -box-shadow: none;
+  filter: alpha(opacity=60);
+  opacity: 0.6;
+}
+.openerp .oe-listview-content thead th:hover:after {
+  border-bottom: none;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid black;
+  visibility: visible;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  -box-shadow: none;
+  filter: alpha(opacity=60);
+  opacity: 0.6;
 }
 .openerp .oe-listview-content tbody {
   cursor: pointer;
   background: white;
 }
-.openerp .oe-listview-content thead {
-  vertical-align: top;
-}
-.openerp .oe-listview-content td.oe_list_checkbox:first-child, .openerp .oe-listview-content th.oe_list_checkbox:first-child {
-  width: 17px;
-}
-.openerp .oe-listview-content td.oe_list_checkbox:first-child:after, .openerp .oe-listview-content th.oe_list_checkbox:first-child:after {
-  border-width: 0;
+.openerp .oe-listview-content tbody tr {
+  border-top: 1px solid #dddddd;
 }
-.openerp .oe-listview-content tbody tr:nth-child(odd) td, .openerp .oe-listview-content tbody tr:nth-child(odd) th {
+.openerp .oe-listview-content tbody tr:nth-child(odd) {
   background-color: #f0f0fa;
   background-color: #f0f0fa;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6));
@@ -1660,6 +1701,12 @@
   background-image: -o-linear-gradient(top, #f0f0fa, #eeeef6);
   background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6);
 }
+.openerp .oe-listview-content tfoot {
+  border-top: 2px solid #cacaca;
+  border-bottom: 1px solid #cacaca;
+  background: #eeeeee;
+  font-weight: bold;
+}
 .openerp .oe-listview-content tbody tr:hover td, .openerp .oe-listview-content tbody tr:hover th {
   background-color: #eeeeee;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dedede));
@@ -1669,17 +1716,11 @@
   background-image: -o-linear-gradient(top, #eeeeee, #dedede);
   background-image: linear-gradient(to bottom, #eeeeee, #dedede);
 }
-.openerp .oe-listview-content td, .openerp .oe-listview-content th {
-  padding: 3px 6px;
-  line-height: 18px;
+.openerp .oe-listview-content td.oe_list_checkbox:first-child, .openerp .oe-listview-content th.oe_list_checkbox:first-child {
+  width: 17px;
 }
-.openerp .oe-listview-content td button, .openerp .oe-listview-content th button {
-  border: none;
-  background: transparent;
-  padding: 0;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  -box-shadow: none;
+.openerp .oe-listview-content td.oe_list_checkbox:first-child:after, .openerp .oe-listview-content th.oe_list_checkbox:first-child:after {
+  border-width: 0;
 }
 .openerp .oe-listview-content .numeric {
   text-align: right;
@@ -1688,23 +1729,6 @@
 .openerp .oe-listview-content .numeric input {
   text-align: right;
 }
-.openerp .oe-listview-content table .sortdown:after, .openerp .oe-listview-content table .sortdown:hover:after {
-  visibility: visible;
-  filter: alpha(opacity=60);
-  opacity: 0.6;
-}
-.openerp .oe-listview-content table .sortup:after {
-  border-bottom: none;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid black;
-  visibility: visible;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  -box-shadow: none;
-  filter: alpha(opacity=60);
-  opacity: 0.6;
-}
 .openerp .oe_kanban_group_title {
   margin: 1px 1px 4px;
   font-size: 15px;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index fc645a9..db999f2 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1375,26 +1375,6 @@ $colour4: #8a89ba
             font-size: 125%
     .oe-listview-content
         width: 100%
-        thead, tfoot
-            border-bottom: 1px solid #cacaca
-            background: #eee
-        tfoot
-            border-bottom: 1px solid #cacaca
-            font-weight: bold
-        tbody
-            cursor: pointer
-            background: white
-        thead
-            vertical-align: top
-        td.oe_list_checkbox:first-child, th.oe_list_checkbox:first-child
-            width: 17px
-            &:after
-                border-width: 0
-        tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th
-            background-color: #f0f0fa
-            @include vertical-gradient(#f0f0fa, #eeeef6)
-        tbody tr:hover td, tbody tr:hover th
-            @include vertical-gradient(#eee, #dedede)
         td, th
             padding: 3px 6px
             line-height: 18px
@@ -1403,30 +1383,64 @@ $colour4: #8a89ba
                 background: transparent
                 padding: 0
                 @include box-shadow(none)
+        thead
+            border-bottom: 2px solid #cacaca
+            background: #eee
+            vertical-align: top
+            th:after
+                content: ""
+                float: right
+                margin-top: 7px
+                border-width: 0 4px 4px
+                border-style: solid
+                border-color: #000 transparent
+                visibility: hidden
+            th.sortup:after
+                visibility: visible
+                @include opacity(0.6)
+            th.sortdown:after
+                border-bottom: none
+                border-left: 4px solid transparent
+                border-right: 4px solid transparent
+                border-top: 4px solid #000
+                visibility: visible
+                @include box-shadow(none)
+                @include opacity(0.6)
+            // TODO mit
+            //th:hover:after
+            //    border-bottom: none
+            //    border-left: 4px solid transparent
+            //    border-right: 4px solid transparent
+            //    border-top: 4px solid #000
+            //    visibility: visible
+            //    @include box-shadow(none)
+            //    @include opacity(0.6)
+        tbody
+            cursor: pointer
+            background: white
+            tr
+                border-top: 1px solid #ddd
+            tr:nth-child(odd)
+                background-color: #f0f0fa
+                @include vertical-gradient(#f0f0fa, #eeeef6)
+        tfoot
+            border-top: 2px solid #cacaca
+            border-bottom: 1px solid #cacaca
+            background: #eee
+            font-weight: bold
+
+        tbody tr:hover td, tbody tr:hover th
+            @include vertical-gradient(#eee, #dedede)
+
+        td.oe_list_checkbox:first-child, th.oe_list_checkbox:first-child
+            width: 17px
+            &:after
+                border-width: 0
         .numeric
             text-align: right
             width: 82px
             input
                 text-align: right
-        //thead th:after
-            //content: ""
-            //float: right
-            //margin-top: 7px
-            //border-width: 0 4px 4px
-            //border-style: solid
-            //border-color: #000 transparent
-            //visibility: hidden
-        table .sortdown:after, table .sortdown:hover:after
-            visibility: visible
-            @include opacity(0.6)
-        table .sortup:after
-            border-bottom: none
-            border-left: 4px solid transparent
-            border-right: 4px solid transparent
-            border-top: 4px solid #000
-            visibility: visible
-            @include box-shadow(none)
-            @include opacity(0.6)
     // }}}
     // KanbanView {{{
     .oe_kanban_group_title
diff --git a/addons/web/static/src/js/view_list.js b/addons/web/static/src/js/view_list.js
index 1fa3ca4..ced7279 100644
--- a/addons/web/static/src/js/view_list.js
+++ b/addons/web/static/src/js/view_list.js
@@ -256,11 +256,12 @@ instance.web.ListView = instance.web.View.extend( /** @lends instance.web.ListVi
             e.stopPropagation();
             var $this = $(this);
             self.dataset.sort($this.data('id'));
-            if ($this.find('span').length) {
-                $this.find('span').toggleClass( 'ui-icon-triangle-1-s ui-icon-triangle-1-n');
+            if($this.hasClass("sortdown") || $this.hasClass("sortup"))  {
+                $this.toggleClass("sortdown").toggleClass("sortup");
             } else {
-                $this.append('<span class="ui-icon ui-icon-triangle-1-n">') .siblings('.oe-sortable').find('span').remove();
+                $this.toggleClass("sortdown");
             }
+            $this.siblings('.oe-sortable').removeClass("sortup sortdown");
 
             self.reload_content();
         });
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 57970c1..64998b4 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -607,7 +607,7 @@
 <table t-name="ListView" class="oe-listview-content">
     <t t-set="columns_count" t-value="visible_columns.length + (options.selectable ? 1 : 0) + (options.deletable ? 1 : 0) + (options.isClarkGable ? 1 : 0)"/>
     <thead>
-        <tr t-if="options.action_buttons !== false or options.pager !== false">
+        <tr t-if="(!!options.action_buttons and !options.$buttons) or (!!options.pager and !options.$pager)">
             <th t-att-colspan="columns_count">
                 <div class="oe_list_buttons"/>
                 <div class="oe_list_sidebar"/>