[WIP] UserMenu cropdown
bzr revid: fme@openerp.com-20120619205530-t0uuaerrspja3084
This commit is contained in:
Fabien Meghazi
@@ -359,6 +359,33 @@
|
||||
.openerp .ui-tabs-hide {
|
||||
display: none;
|
||||
}
|
||||
.openerp .oe_cropdown, .openerp .oe_cropdown_hover, .openerp .oe_cropdown_toggle {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.openerp .oe_cropdown_hover:hover .oe_cropdown_menu, .openerp .oe_cropdown_menu.oe_opened {
|
||||
display: block;
|
||||
}
|
||||
.openerp .oe_cropdown_menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.openerp .oe_cropdown_arrow:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
content: "&darr";
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
margin-top: 8px;
|
||||
margin-left: 4px;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top-color: #404040;
|
||||
filter: alpha(opacity=50);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.openerp .oe_dropdown_toggle:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
@@ -373,7 +400,6 @@
|
||||
opacity: 0.5;
|
||||
margin-top: 7px;
|
||||
margin-left: 6px;
|
||||
border-top-color: #404040;
|
||||
}
|
||||
.openerp .oe_dropdown_menu {
|
||||
display: none;
|
||||
@@ -717,20 +743,45 @@
|
||||
.openerp .oe_topbar .oe_topbar_avatar {
|
||||
vertical-align: top;
|
||||
}
|
||||
.openerp .oe_topbar .oe_dropdown_toggle:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
content: "&darr";
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
margin-top: 8px;
|
||||
margin-left: 4px;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid white;
|
||||
filter: alpha(opacity=50);
|
||||
opacity: 0.5;
|
||||
.openerp .oe_topbar .oe_cropdown_menu {
|
||||
background: #333333;
|
||||
background: rgba(37, 37, 37, 0.9);
|
||||
padding: 6px 0;
|
||||
border-color: #999999;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px;
|
||||
-moz-border-radius: 0 0 6px 6px;
|
||||
-webkit-border-radius: 0 0 6px 6px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
-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);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.openerp .oe_topbar .oe_cropdown_menu li {
|
||||
float: none;
|
||||
display: block;
|
||||
}
|
||||
.openerp .oe_topbar .oe_cropdown_menu li a {
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.openerp .oe_topbar .oe_cropdown_menu li a:hover {
|
||||
background-color: #292929;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#191919));
|
||||
background-image: -webkit-linear-gradient(top, #292929, #191919);
|
||||
background-image: -moz-linear-gradient(top, #292929, #191919);
|
||||
background-image: -ms-linear-gradient(top, #292929, #191919);
|
||||
background-image: -o-linear-gradient(top, #292929, #191919);
|
||||
background-image: linear-gradient(to bottom, #292929, #191919);
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.openerp .oe_leftbar {
|
||||
display: none;
|
||||
@@ -779,66 +830,11 @@
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
}
|
||||
.openerp .oe_user_menu .oe_dropdown {
|
||||
position: relative;
|
||||
.openerp .oe_user_menu.oe_cropdown_toggle:after, .openerp .oe_user_menu .oe_cropdown_toggle:after {
|
||||
border-top: 4px solid white;
|
||||
}
|
||||
.openerp .oe_user_menu .oe_dropdown_options {
|
||||
float: left;
|
||||
background: #333333;
|
||||
background: rgba(37, 37, 37, 0.9);
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
.openerp .oe_user_menu .oe_cropdown_menu {
|
||||
right: -1px;
|
||||
border: 0;
|
||||
z-index: 900;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 6px 0;
|
||||
zoom: 1;
|
||||
border-color: #999999;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px;
|
||||
-moz-border-radius: 0 0 6px 6px;
|
||||
-webkit-border-radius: 0 0 6px 6px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
-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);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.openerp .oe_user_menu .oe_dropdown_options li {
|
||||
float: none;
|
||||
display: block;
|
||||
background-color: none;
|
||||
}
|
||||
.openerp .oe_user_menu .oe_dropdown_options li a {
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.openerp .oe_user_menu .oe_dropdown_options li a:hover {
|
||||
background-color: #292929;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#191919));
|
||||
background-image: -webkit-linear-gradient(top, #292929, #191919);
|
||||
background-image: -moz-linear-gradient(top, #292929, #191919);
|
||||
background-image: -ms-linear-gradient(top, #292929, #191919);
|
||||
background-image: -o-linear-gradient(top, #292929, #191919);
|
||||
background-image: linear-gradient(to bottom, #292929, #191919);
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.openerp .oe_user_menu .oe_dropdown_options li hr {
|
||||
border-top: 1px solid #999999;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.openerp .oe_systray > div {
|
||||
float: left;
|
||||
@@ -847,61 +843,6 @@
|
||||
.openerp .oe_systray {
|
||||
float: right;
|
||||
}
|
||||
.openerp .oe_systray .oe_systray_dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.openerp .oe_systray .oe_systray_dropdown:hover .oe_systray_dropdown_options {
|
||||
display: block;
|
||||
}
|
||||
.openerp .oe_systray .oe_systray_dropdown_options {
|
||||
background: #333333;
|
||||
background: rgba(37, 37, 37, 0.9);
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 900;
|
||||
border: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 6px 0;
|
||||
border-color: #999999;
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px;
|
||||
-moz-border-radius: 0 0 6px 6px;
|
||||
-webkit-border-radius: 0 0 6px 6px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
-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);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.openerp .oe_systray .oe_systray_dropdown_options li {
|
||||
float: none;
|
||||
display: block;
|
||||
background-color: none;
|
||||
}
|
||||
.openerp .oe_systray .oe_systray_dropdown_options li a {
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.openerp .oe_systray .oe_systray_dropdown_options li a:hover {
|
||||
background-color: #292929;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#191919));
|
||||
background-image: -webkit-linear-gradient(top, #292929, #191919);
|
||||
background-image: -moz-linear-gradient(top, #292929, #191919);
|
||||
background-image: -ms-linear-gradient(top, #292929, #191919);
|
||||
background-image: -o-linear-gradient(top, #292929, #191919);
|
||||
background-image: linear-gradient(to bottom, #292929, #191919);
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.openerp .oe_menu {
|
||||
float: left;
|
||||
padding: 0;
|
||||
@@ -1811,9 +1752,6 @@
|
||||
top: -4px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.openerp .oe_form .oe_form_field_text textarea {
|
||||
resize: none;
|
||||
}
|
||||
.openerp .oe_form .oe_form_field {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
|
||||
@@ -314,6 +314,30 @@ $colour4: #8a89ba
|
||||
display: none
|
||||
// }}}
|
||||
// Dropdown {{{
|
||||
.oe_cropdown, .oe_cropdown_hover, .oe_cropdown_toggle
|
||||
position: relative
|
||||
cursor: pointer
|
||||
.oe_cropdown_hover:hover .oe_cropdown_menu, .oe_cropdown_menu.oe_opened
|
||||
display: block
|
||||
.oe_cropdown_menu
|
||||
display: none
|
||||
position: absolute
|
||||
z-index: 1
|
||||
.oe_cropdown_arrow:after
|
||||
width: 0
|
||||
height: 0
|
||||
display: inline-block
|
||||
content: "&darr"
|
||||
text-indent: -99999px
|
||||
vertical-align: top
|
||||
margin-top: 8px
|
||||
margin-left: 4px
|
||||
border-left: 4px solid transparent
|
||||
border-right: 4px solid transparent
|
||||
border-top-color: #404040
|
||||
@include opacity(0.5)
|
||||
|
||||
|
||||
.oe_dropdown_toggle:after
|
||||
width: 0
|
||||
height: 0
|
||||
@@ -327,7 +351,6 @@ $colour4: #8a89ba
|
||||
@include opacity(0.5)
|
||||
margin-top: 7px
|
||||
margin-left: 6px
|
||||
border-top-color: #404040
|
||||
.oe_dropdown_menu
|
||||
display: none
|
||||
position: absolute
|
||||
@@ -580,19 +603,28 @@ $colour4: #8a89ba
|
||||
@include radius(3px)
|
||||
.oe_topbar_avatar
|
||||
vertical-align: top
|
||||
.oe_dropdown_toggle:after
|
||||
width: 0
|
||||
height: 0
|
||||
display: inline-block
|
||||
content: "&darr"
|
||||
text-indent: -99999px
|
||||
vertical-align: top
|
||||
margin-top: 8px
|
||||
margin-left: 4px
|
||||
border-left: 4px solid transparent
|
||||
border-right: 4px solid transparent
|
||||
border-top: 4px solid white
|
||||
@include opacity(0.5)
|
||||
.oe_cropdown_menu
|
||||
background: #333
|
||||
background: rgba(37,37,37,0.9)
|
||||
padding: 6px 0
|
||||
border-color: #999
|
||||
border-color: rgba(0, 0, 0, 0.2)
|
||||
border-style: solid
|
||||
border-width: 0 1px 1px
|
||||
@include radius(0 0 6px 6px)
|
||||
@include box-shadow(0 1px 4px rgba(0,0,0,0.3))
|
||||
@include background-clip()
|
||||
li
|
||||
float: none
|
||||
display: block
|
||||
a
|
||||
white-space: nowrap
|
||||
display: block
|
||||
padding: 4px 15px
|
||||
color: #eee
|
||||
&:hover
|
||||
@include vertical-gradient(#292929, #191919)
|
||||
@include box-shadow(none)
|
||||
// }}}
|
||||
// Webclient.leftbar {{{
|
||||
.oe_leftbar
|
||||
@@ -636,48 +668,10 @@ $colour4: #8a89ba
|
||||
li
|
||||
list-style-type: none
|
||||
float: left
|
||||
.oe_dropdown
|
||||
position: relative
|
||||
|
||||
.oe_dropdown_options
|
||||
float: left
|
||||
background: #333
|
||||
background: rgba(37,37,37,0.9)
|
||||
display: none
|
||||
position: absolute
|
||||
top: 32px
|
||||
&.oe_cropdown_toggle:after, .oe_cropdown_toggle:after
|
||||
border-top: 4px solid white
|
||||
.oe_cropdown_menu
|
||||
right: -1px
|
||||
border: 0
|
||||
z-index: 900
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
padding: 6px 0
|
||||
zoom: 1
|
||||
border-color: #999
|
||||
border-color: rgba(0, 0, 0, 0.2)
|
||||
border-style: solid
|
||||
border-width: 0 1px 1px
|
||||
@include radius(0 0 6px 6px)
|
||||
@include box-shadow(0 1px 4px rgba(0,0,0,0.3))
|
||||
@include background-clip()
|
||||
li
|
||||
float: none
|
||||
display: block
|
||||
background-color: none
|
||||
a
|
||||
white-space: nowrap
|
||||
display: block
|
||||
padding: 4px 15px
|
||||
clear: both
|
||||
font-weight: normal
|
||||
line-height: 18px
|
||||
color: #eee
|
||||
&:hover
|
||||
@include vertical-gradient(#292929, #191919)
|
||||
@include box-shadow(none)
|
||||
hr
|
||||
border-top: 1px solid #999
|
||||
border-bottom: 0
|
||||
// }}}
|
||||
// Systray {{{
|
||||
.oe_systray > div
|
||||
@@ -686,41 +680,6 @@ $colour4: #8a89ba
|
||||
.oe_systray
|
||||
float: right
|
||||
|
||||
.oe_systray_dropdown
|
||||
position: relative
|
||||
.oe_systray_dropdown:hover .oe_systray_dropdown_options
|
||||
display: block
|
||||
.oe_systray_dropdown_options
|
||||
background: #333
|
||||
background: rgba(37,37,37,0.9)
|
||||
display: none
|
||||
position: absolute
|
||||
z-index: 900
|
||||
border: 0
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
padding: 6px 0
|
||||
border-color: #999
|
||||
border-color: rgba(0, 0, 0, 0.2)
|
||||
border-style: solid
|
||||
border-width: 0 1px 1px
|
||||
@include radius(0 0 6px 6px)
|
||||
@include box-shadow(0 1px 4px rgba(0,0,0,0.3))
|
||||
@include background-clip()
|
||||
li
|
||||
float: none
|
||||
display: block
|
||||
background-color: none
|
||||
a
|
||||
display: block
|
||||
padding: 4px 15px
|
||||
clear: both
|
||||
font-weight: normal
|
||||
line-height: 18px
|
||||
color: #eee
|
||||
&:hover
|
||||
@include vertical-gradient(#292929, #191919)
|
||||
@include box-shadow(none)
|
||||
// }}}
|
||||
// Menu {{{
|
||||
.oe_menu
|
||||
|
||||
@@ -723,20 +723,12 @@ instance.web.UserMenu = instance.web.Widget.extend({
|
||||
start: function() {
|
||||
var self = this;
|
||||
this._super.apply(this, arguments);
|
||||
$('html').bind('click', function() {
|
||||
self.$element.find('.oe_dropdown_options').hide();
|
||||
});
|
||||
this.$element.find('.oe_dropdown_toggle').click(function() {
|
||||
self.$element.find('.oe_dropdown_options').toggle();
|
||||
return false;
|
||||
});
|
||||
this.$element.on('click', '.oe_dropdown_options li a[data-menu]', function() {
|
||||
this.$element.on('click', '.oe_cropdown_menu li a[data-menu]', function(ev) {
|
||||
ev.preventDefault();
|
||||
var f = self['on_menu_' + $(this).data('menu')];
|
||||
if (f) {
|
||||
f($(this));
|
||||
}
|
||||
self.$element.find('.oe_dropdown_options').hide();
|
||||
return false;
|
||||
});
|
||||
},
|
||||
change_password :function() {
|
||||
@@ -880,6 +872,17 @@ instance.web.WebClient = instance.web.Widget.extend({
|
||||
this.$element.on('mouseenter', '.oe_systray > div:not([data-tipsy=true])', function() {
|
||||
$(this).attr('data-tipsy', 'true').tipsy().trigger('mouseenter');
|
||||
});
|
||||
this.$element.on('click', '.oe_cropdown_toggle', function(ev) {
|
||||
var $menu = $(this).find('.oe_cropdown_menu');
|
||||
var state = $menu.is('.oe_opened');
|
||||
setTimeout(function() {
|
||||
// Do not alter propagation
|
||||
$menu.toggleClass('oe_opened', !state);
|
||||
}, 0);
|
||||
});
|
||||
instance.web.bus.on('click', this, function() {
|
||||
self.$element.find('.oe_cropdown_menu.oe_opened').removeClass('oe_opened');
|
||||
});
|
||||
},
|
||||
show_common: function() {
|
||||
var self = this;
|
||||
|
||||
@@ -316,15 +316,15 @@
|
||||
</t>
|
||||
|
||||
<t t-name="UserMenu">
|
||||
<a href="#" class="oe_user_menu oe_topbar_item oe_dropdown_toggle">
|
||||
<span class="oe_user_menu oe_topbar_item oe_cropdown_toggle oe_cropdown_arrow">
|
||||
<img class="oe_topbar_avatar" t-att-data-default-src="_s + '/web/static/src/img/user_menu_avatar.png'"/>
|
||||
<span class="oe_topbar_name"/>
|
||||
<ul class="oe_dropdown_options">
|
||||
<ul class="oe_cropdown_menu">
|
||||
<li><a href="#" data-menu="about">About OpenERP</a></li>
|
||||
<li><a href="#" data-menu="settings">Preferences</a></li>
|
||||
<li><a href="#" data-menu="logout">Log out</a></li>
|
||||
</ul>
|
||||
</a>
|
||||
</span>
|
||||
</t>
|
||||
<t t-name="UserMenu.about">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user