[IMP] Listview styling

bzr revid: al@openerp.com-20120420174427-unoupanegd83equ4
This commit is contained in:
Antony Lesuisse 2012-04-20 19:44:27 +02:00
parent b8deee7a56
commit 23207c8066
4 changed files with 129 additions and 90 deletions

View File

@ -1629,46 +1629,6 @@
.openerp .oe-listview-content {
width: 100%;
}
.openerp .oe-listview-content thead, .openerp .oe-listview-content tfoot {
border-bottom: 1px solid #cacaca;
background: #eeeeee;
}
.openerp .oe-listview-content tfoot {
border-bottom: 1px solid #cacaca;
font-weight: bold;
}
.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:nth-child(odd) td, .openerp .oe-listview-content tbody tr:nth-child(odd) th {
background-color: #f0f0fa;
background-color: #f0f0fa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6));
background-image: -webkit-linear-gradient(top, #f0f0fa, #eeeef6);
background-image: -moz-linear-gradient(top, #f0f0fa, #eeeef6);
background-image: -ms-linear-gradient(top, #f0f0fa, #eeeef6);
background-image: -o-linear-gradient(top, #f0f0fa, #eeeef6);
background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6);
}
.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));
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-listview-content td, .openerp .oe-listview-content th {
padding: 3px 6px;
line-height: 18px;
@ -1681,19 +1641,26 @@
-webkit-box-shadow: none;
-box-shadow: none;
}
.openerp .oe-listview-content .numeric {
text-align: right;
width: 82px;
.openerp .oe-listview-content thead {
border-bottom: 2px solid #cacaca;
background: #eeeeee;
vertical-align: top;
}
.openerp .oe-listview-content .numeric input {
text-align: right;
.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 table .sortdown:after, .openerp .oe-listview-content table .sortdown:hover:after {
.openerp .oe-listview-content thead th.sortup:after {
visibility: visible;
filter: alpha(opacity=60);
opacity: 0.6;
}
.openerp .oe-listview-content table .sortup:after {
.openerp .oe-listview-content thead th.sortdown:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
@ -1705,6 +1672,63 @@
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 tbody tr {
border-top: 1px solid #dddddd;
}
.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));
background-image: -webkit-linear-gradient(top, #f0f0fa, #eeeef6);
background-image: -moz-linear-gradient(top, #f0f0fa, #eeeef6);
background-image: -ms-linear-gradient(top, #f0f0fa, #eeeef6);
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));
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-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 .numeric {
text-align: right;
width: 82px;
}
.openerp .oe-listview-content .numeric input {
text-align: right;
}
.openerp .oe_kanban_group_title {
margin: 1px 1px 4px;
font-size: 15px;

View File

@ -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

View File

@ -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();
});

View File

@ -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"/>