Styling of sidebar dropdown menu

bzr revid: mit@openerp.com-20120402155650-6wuiymgslior2vfz
This commit is contained in:
Minh Tran 2012-04-02 17:56:50 +02:00
parent 674d995341
commit 037793e811
4 changed files with 251 additions and 8 deletions

View File

@ -137,6 +137,66 @@
background-image: -o-linear-gradient(top, #dc5f59, #b33630);
background-image: linear-gradient(to bottom, #dc5f59, #b33630);
}
.openerp2 table {
padding: 0;
font-size: 13px;
border-collapse: collapse;
}
.openerp2 thead {
font-weight: bold;
background-color: #f0f0f0;
}
.openerp2 thead th {
border-right: 1px dotted #afafb6;
}
.openerp2 thead th:last-child {
border-right: none;
}
.openerp2 th, .openerp2 td {
padding: 0;
line-height: 18px;
text-align: left;
}
.openerp2 th {
font-weight: bold;
vertical-align: middle;
}
.openerp2 td {
vertical-align: top;
}
.openerp2 .zebra tbody tr:nth-child(odd) td {
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);
}
.openerp2 .zebra tbody tr:hover td {
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);
}
.openerp2 .numeric {
text-align: right;
width: 82px;
}
.openerp2 .numeric input {
text-align: right;
}
.openerp2 ul, .openerp2 li {
margin: 0;
padding: 0;
}
.openerp2 li {
list-style-type: none;
}
.openerp2 .oe_left {
float: left;
}
@ -337,7 +397,6 @@
margin: 0;
}
.openerp2 .oe_menu li {
list-style-type: none;
float: left;
}
.openerp2 .oe_menu a {
@ -396,7 +455,6 @@
.openerp2 .oe_secondary_submenu li {
position: relative;
padding: 1px 0 1px 16px;
list-style-type: none;
}
.openerp2 .oe_secondary_submenu li a {
display: block;
@ -517,7 +575,6 @@
.openerp2 .oe_form_topbar ul li {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
vertical-align: top;
border-right: 1px solid #cacaca;
@ -650,8 +707,128 @@
border-bottom-color: transparent;
cursor: default;
}
.openerp2 .oe_form_label_help[for], .openerp2 .oe_form_label[for] {
white-space: nowrap;
.openerp2 .oe_form_dropdown_section {
position: relative;
display: inline-block;
margin-right: 4px;
}
.openerp2 .oe_dropdown_toggle:after {
width: 0;
height: 0;
display: inline-block;
content: "&darr";
text-indent: -99999px;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid white;
filter: alpha(opacity=50);
opacity: 0.5;
margin-top: 7px;
margin-left: 6px;
border-top-color: #404040;
}
.openerp2 .oe_dropdown_menu {
display: none;
position: absolute;
top: 28px;
left: 0px;
padding: 8px;
border: 1px solid #afafb6;
width: 120px;
overflow-x: hidden;
z-index: 900;
background: white;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.openerp2 .oe_dropdown_menu li {
list-style-type: none;
float: none;
display: block;
background-color: none;
}
.openerp2 .oe_dropdown_menu li a {
display: block;
padding: 3px 6px;
clear: both;
font-weight: normal;
line-height: 14px;
color: #4c4c4c;
text-decoration: none;
}
.openerp2 .oe_dropdown_menu li a:hover {
text-decoration: none;
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);
-moz-box-shadow: none;
-webkit-box-shadow: none;
-box-shadow: none;
}
.openerp2 .oe_kanban_group_title {
margin: 1px 1px 4px;
font-size: 15px;
font-weight: bold;
text-shadow: 0 1px 0 white;
}
.openerp2 .oe_kanban_column, .openerp2 .oe_kanban_group_header {
width: 240px;
vertical-align: top;
padding: 6px 7px 6px 6px;
background: #f0eeee;
border-left: 1px solid #f0f8f8;
border-right: 1px solid #b9b9b9;
}
.openerp2 .oe_kanban_record {
position: relative;
display: block;
min-height: 50px;
background: white;
border: 1px solid #d8d8d8;
border-bottom-color: #b9b9b9;
padding: 6px;
margin: 6px 0;
display: block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.openerp2 .oe_kanban_record:last-child {
margin-bottom: 0;
}
.openerp2 .oe_kanban_record:hover {
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}
.openerp2 .oe_kanban_record .oe_kanban_title {
font-weight: bold;
margin: 2px 4px;
}
.openerp2 .oe_kanban_gravatar {
width: 20px;
height: 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.openerp2 .oe_application a {
color: #8a89ba;
}
.openerp2 .oe_application a:hover {
text-decoration: underline;
}
.openerp .oe_form_field_many2one td:first-child {

View File

@ -587,6 +587,59 @@ $colour4: #8a89ba
border-bottom-color: transparent
cursor: default
.oe_form_dropdown_section
position: relative
display: inline-block
margin-right: 4px
.oe_dropdown_toggle:after
width: 0
height: 0
display: inline-block
content: "&darr"
text-indent: -99999px
vertical-align: top
border-left: 4px solid transparent
border-right: 4px solid transparent
border-top: 4px solid white
@include opacity(0.5)
margin-top: 7px
margin-left: 6px
border-top-color: #404040
.oe_dropdown_menu
display: none
position: absolute
top: 28px
left: 0px
padding: 8px
border: 1px solid #afafb6
width: 120px
overflow-x: hidden
z-index: 900
background: white
@include radius(3px)
@include box-shadow(0 1px 4px rgba(0,0,0,0.3))
li
list-style-type: none
float: none
display: block
background-color: none
a
display: block
padding: 3px 6px
clear: both
font-weight: normal
line-height: 14px
color: #4c4c4c
text-decoration: none
&:hover
text-decoration: none
@include vertical-gradient(#f0f0fa, #eeeef6)
@include box-shadow(none)
// }}}
// Kanban view {{{
.oe_kanban_group_title

View File

@ -793,9 +793,22 @@ session.web.Sidebar = session.web.Widget.extend({
this.items = {};
this.sections = {};
},
start: function() {
var self = this;
this._super(this);
this.$element.find('.oe_dropdown_toggle').click(function() {
self.$element.find('.oe_dropdown_menu').toggle();
return false;
});
this.$element.on('click', '.oe_dropdown_menu li a', function() {
var f = self['on_menu_' + $(this).data('menu')];
f && f($(this));
self.$element.find('.oe_dropdown_menu').hide();
return false;
});
},
add_default_sections: function() {
var self = this;
var view = this.getParent();
@ -905,7 +918,7 @@ session.web.Sidebar = session.web.Widget.extend({
var $ul = $section.find('ul');
if(!$ul.length) {
$ul = $('<ul/>').appendTo($section);
$ul = $('<ul class="oe_dropdown_menu"/>').appendTo($section);
}
$items.appendTo($ul);
}

View File

@ -514,8 +514,8 @@
</div>
</t>
<t t-name="Sidebar.section">
<div t-att-id="section_id" t-att-class="classname">
<h2><t t-esc="name"/></h2>
<div t-att-id="section_id" t-attf-class="#{classname} oe_form_dropdown_section ">
<button class="oe_dropdown_toggle"><t t-esc="name"/></button>
</div>
</t>
<t t-name="Sidebar.section.items">