diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css index dab8e6070af..8bf4208ba72 100644 --- a/addons/web/static/src/css/base.css +++ b/addons/web/static/src/css/base.css @@ -5,279 +5,342 @@ color: #4c4c4c; font-size: 13px; background: white; - position: relative; } - .openerp2 a { - text-decoration: none; } - .openerp2 .oe_webclient { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; } - .openerp2 .oe_webclient .oe_application { - position: absolute; - top: 32px; - bottom: 0; - left: 206px; - right: 0; } - .openerp2 .oe_content_full_screen .oe_application { - top: 0; - left: 0; } - .openerp2 .oe_content_full_screen .topbar, .openerp2 .oe_content_full_screen .leftbar { - display: none; } - .openerp2 .oe_topbar { - width: 100%; - height: 31px; - border-top: solid 1px #d3d3d3; - border-bottom: solid 1px black; - background-color: #646060; - background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626)); - background-image: -webkit-linear-gradient(top, #646060, #262626); - background-image: -moz-linear-gradient(top, #646060, #262626); - background-image: -ms-linear-gradient(top, #646060, #262626); - background-image: -o-linear-gradient(top, #646060, #262626); - background-image: linear-gradient(to bottom, #646060, #262626); } - .openerp2 .oe_topbar .oe_systray { - float: right; } - .openerp2 .oe_topbar .oe_systray > div { - float: left; - padding: 0 4px 0 4px; } - .openerp2 .oe_topbar .oe_topbar_item li { - float: left; } - .openerp2 .oe_topbar .oe_topbar_item li a { - display: block; - padding: 5px 10px 7px; - line-height: 20px; - height: 20px; - color: #eeeeee; - vertical-align: top; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } - .openerp2 .oe_topbar .oe_topbar_item li a:hover { - background: #303030; - color: white; - -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; - -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; - -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; } - .openerp2 .oe_topbar .oe_topbar_item .oe_active { - background: #303030; - font-weight: bold; - color: white; - -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; - -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; - -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; } - .openerp2 .oe_topbar .oe_topbar_avatar { - width: 24px; - height: 24px; - margin: -2px 2px 0 0; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; } - .openerp2 .oe_topbar .oe_topbar_avatar { - vertical-align: top; } - .openerp2 .oe_leftbar { - width: 205px; - height: 100%; - background: #f0eeee; - border-right: 1px solid #afafb6; - overflow: auto; - text-shadow: 0 1px 1px white; } - .openerp2 .oe_leftbar .oe_footer { - position: absolute; - width: 205px; - text-align: center; - bottom: 8px; } - .openerp2 a.oe_logo { - display: block; - text-align: center; - height: 70px; - line-height: 70px; } - .openerp2 a.oe_logo img { - height: 40px; - width: 157px; - margin: 14px 0; } - .openerp2 .oe_footer { - position: absolute; - width: 205px; - text-align: center; - bottom: 8px; } - .openerp2 .oe_footer a { - font-weight: 800; - font-family: serif; - font-size: 16px; - color: black; } - .openerp2 .oe_footer a span { - color: #c81010; - font-style: italic; } - .openerp2 .oe_menu { - float: left; - padding: 0; - margin: 0; } - .openerp2 .oe_menu li { - list-style-type: none; - float: left; } - .openerp2 .oe_menu a { - display: block; - padding: 5px 10px 7px; - line-height: 20px; - height: 20px; - color: #eeeeee; - vertical-align: top; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } - .openerp2 .oe_menu a:hover { - background: #303030; - color: white; - -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; - -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; - -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; } - .openerp2 .oe_menu .oe_active { - background: #303030; - font-weight: bold; - color: white; - -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; - -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; - -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; } - .openerp2 .oe_secondary_menu_section { - font-weight: bold; - margin-left: 8px; - color: #8a89ba; } - .openerp2 .oe_secondary_submenu { - padding: 2px 0 8px 0; - margin: 0; - width: 100%; - display: inline-block; } - .openerp2 .oe_secondary_submenu li { - position: relative; - padding: 1px 0 1px 16px; - list-style-type: none; } - .openerp2 .oe_secondary_submenu li a { - display: block; - color: #4c4c4c; - padding: 2px 4px 2px 0; } - .openerp2 .oe_secondary_submenu li .oe_menu_label { - position: absolute; - top: 1px; - right: 1px; - font-size: 10px; - background: #8a89ba; - color: white; - padding: 2px 4px; - margin: 1px 6px 0 0; - border: 1px solid lightGray; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); - -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); } - .openerp2 .oe_secondary_submenu .oe_active { - background: #8a89ba; - border-top: 1px solid lightGray; - border-bottom: 1px solid lightGray; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); - -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); } - .openerp2 .oe_secondary_submenu .oe_active a { - color: white; } - .openerp2 .oe_secondary_submenu .oe_active .oe_menu_label { - background: #eeeeee; - color: #8a89ba; - text-shadow: 0 1px 1px white; - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - -box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } - .openerp2 .oe_secondary_submenu .oe_menu_toggler:before { - width: 0; - height: 0; - display: inline-block; - content: "&darr"; - text-indent: -99999px; - vertical-align: top; - margin-left: -8px; - margin-top: 4px; - margin-right: 4px; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - border-left: 4px solid #4c4c4c; - filter: alpha(opacity=50); - opacity: 0.5; } - .openerp2 .oe_secondary_submenu .oe_menu_opened:before { - margin-top: 6px; - margin-left: -12px; - margin-right: 4px; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #4c4c4c; } - .openerp2 .oe_user_menu { - float: right; - padding: 0; - margin: 0; } - .openerp2 .oe_user_menu li { - list-style-type: none; - float: left; } - .openerp2 .oe_user_menu .oe_dropdown { - position: relative; } - .openerp2 .oe_user_menu .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; } - .openerp2 .oe_user_menu .oe_dropdown_options { - float: left; - background: #333333; - background: rgba(37, 37, 37, 0.9); - display: none; - position: absolute; - top: 32px; - 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; } - .openerp2 .oe_user_menu .oe_dropdown_options li { - float: none; - display: block; - background-color: none; } - .openerp2 .oe_user_menu .oe_dropdown_options li a { - display: block; - padding: 4px 15px; - clear: both; - font-weight: normal; - line-height: 18px; - color: #eeeeee; } - .openerp2 .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; } + position: relative; +} +.openerp2 a { + text-decoration: none; +} +.openerp2 .oe_webclient { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} +.openerp2 .oe_webclient .oe_application { + position: absolute; + top: 32px; + bottom: 0; + left: 206px; + right: 0; +} +.openerp2 .oe_content_full_screen .oe_application { + top: 0; + left: 0; +} +.openerp2 .oe_content_full_screen .topbar, .openerp2 .oe_content_full_screen .leftbar { + display: none; +} +.openerp2 .oe_topbar { + width: 100%; + height: 31px; + border-top: solid 1px #d3d3d3; + border-bottom: solid 1px black; + background-color: #646060; + background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626)); + background-image: -webkit-linear-gradient(top, #646060, #262626); + background-image: -moz-linear-gradient(top, #646060, #262626); + background-image: -ms-linear-gradient(top, #646060, #262626); + background-image: -o-linear-gradient(top, #646060, #262626); + background-image: linear-gradient(to bottom, #646060, #262626); +} +.openerp2 .oe_topbar .oe_systray { + float: right; +} +.openerp2 .oe_topbar .oe_systray > div { + float: left; + padding: 0 4px 0 4px; +} +.openerp2 .oe_topbar .oe_topbar_item li { + float: left; +} +.openerp2 .oe_topbar .oe_topbar_item li a { + display: block; + padding: 5px 10px 7px; + line-height: 20px; + height: 20px; + color: #eeeeee; + vertical-align: top; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); +} +.openerp2 .oe_topbar .oe_topbar_item li a:hover { + background: #303030; + color: white; + -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; + -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; + -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; +} +.openerp2 .oe_topbar .oe_topbar_item .oe_active { + background: #303030; + font-weight: bold; + color: white; + -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; + -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; + -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; +} +.openerp2 .oe_topbar .oe_topbar_avatar { + width: 24px; + height: 24px; + margin: -2px 2px 0 0; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; +} +.openerp2 .oe_topbar .oe_topbar_avatar { + vertical-align: top; +} +.openerp2 .oe_leftbar { + width: 205px; + height: 100%; + background: #f0eeee; + border-right: 1px solid #afafb6; + overflow: auto; + text-shadow: 0 1px 1px white; +} +.openerp2 .oe_leftbar .oe_footer { + position: absolute; + width: 205px; + text-align: center; + bottom: 8px; +} +.openerp2 a.oe_logo { + display: block; + text-align: center; + height: 70px; + line-height: 70px; +} +.openerp2 a.oe_logo img { + height: 40px; + width: 157px; + margin: 14px 0; +} +.openerp2 .oe_footer { + position: absolute; + width: 205px; + text-align: center; + bottom: 8px; +} +.openerp2 .oe_footer a { + font-weight: 800; + font-family: serif; + font-size: 16px; + color: black; +} +.openerp2 .oe_footer a span { + color: #c81010; + font-style: italic; +} +.openerp2 .oe_menu { + float: left; + padding: 0; + margin: 0; +} +.openerp2 .oe_menu li { + list-style-type: none; + float: left; +} +.openerp2 .oe_menu a { + display: block; + padding: 5px 10px 7px; + line-height: 20px; + height: 20px; + color: #eeeeee; + vertical-align: top; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); +} +.openerp2 .oe_menu a:hover { + background: #303030; + color: white; + -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; + -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; + -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; +} +.openerp2 .oe_menu .oe_active { + background: #303030; + font-weight: bold; + color: white; + -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; + -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; + -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; +} +.openerp2 .oe_menu_more_container { + position: relative; +} +.openerp2 .oe_menu_more_container .oe_menu_more { + position: absolute; + padding: 0; + background-color: #646060; + z-index: 1; + border: 1px solid black; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} +.openerp2 .oe_menu_more_container .oe_menu_more li { + float: none; +} +.openerp2 .oe_menu_more_container .oe_menu_more li a { + white-space: nowrap; +} +.openerp2 .oe_secondary_menu_section { + font-weight: bold; + margin-left: 8px; + color: #8a89ba; +} +.openerp2 .oe_secondary_submenu { + padding: 2px 0 8px 0; + margin: 0; + width: 100%; + display: inline-block; +} +.openerp2 .oe_secondary_submenu li { + position: relative; + padding: 1px 0 1px 16px; + list-style-type: none; +} +.openerp2 .oe_secondary_submenu li a { + display: block; + color: #4c4c4c; + padding: 2px 4px 2px 0; +} +.openerp2 .oe_secondary_submenu li .oe_menu_label { + position: absolute; + top: 1px; + right: 1px; + font-size: 10px; + background: #8a89ba; + color: white; + padding: 2px 4px; + margin: 1px 6px 0 0; + border: 1px solid lightGray; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); + -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); +} +.openerp2 .oe_secondary_submenu .oe_active { + background: #8a89ba; + border-top: 1px solid lightGray; + border-bottom: 1px solid lightGray; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); + -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); +} +.openerp2 .oe_secondary_submenu .oe_active a { + color: white; +} +.openerp2 .oe_secondary_submenu .oe_active .oe_menu_label { + background: #eeeeee; + color: #8a89ba; + text-shadow: 0 1px 1px white; + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + -box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); +} +.openerp2 .oe_secondary_submenu .oe_menu_toggler:before { + width: 0; + height: 0; + display: inline-block; + content: "&darr"; + text-indent: -99999px; + vertical-align: top; + margin-left: -8px; + margin-top: 4px; + margin-right: 4px; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 4px solid #4c4c4c; + filter: alpha(opacity=50); + opacity: 0.5; +} +.openerp2 .oe_secondary_submenu .oe_menu_opened:before { + margin-top: 6px; + margin-left: -12px; + margin-right: 4px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #4c4c4c; +} +.openerp2 .oe_user_menu { + float: right; + padding: 0; + margin: 0; +} +.openerp2 .oe_user_menu li { + list-style-type: none; + float: left; +} +.openerp2 .oe_user_menu .oe_dropdown { + position: relative; +} +.openerp2 .oe_user_menu .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; +} +.openerp2 .oe_user_menu .oe_dropdown_options { + float: left; + background: #333333; + background: rgba(37, 37, 37, 0.9); + display: none; + position: absolute; + top: 32px; + 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; +} +.openerp2 .oe_user_menu .oe_dropdown_options li { + float: none; + display: block; + background-color: none; +} +.openerp2 .oe_user_menu .oe_dropdown_options li a { + display: block; + padding: 4px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: #eeeeee; +} +.openerp2 .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; +} diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass index 56a735c98fd..89d4c785967 100644 --- a/addons/web/static/src/css/base.sass +++ b/addons/web/static/src/css/base.sass @@ -194,6 +194,20 @@ $colour4: #8a89ba font-weight: bold color: white @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset) + .oe_menu_more_container + position: relative + .oe_menu_more + position: absolute + padding: 0 + background-color: #646060 + z-index: 1 + border: 1px solid black + border-bottom-left-radius: 5px + border-bottom-right-radius: 5px + li + float: none + a + white-space: nowrap .oe_secondary_menu_section font-weight: bold margin-left: 8px diff --git a/addons/web/static/src/js/chrome.js b/addons/web/static/src/js/chrome.js index 4a449d1152c..25d41c37257 100644 --- a/addons/web/static/src/js/chrome.js +++ b/addons/web/static/src/js/chrome.js @@ -635,11 +635,13 @@ openerp.web.Menu = openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{ init: function() { this._super.apply(this, arguments); this.has_been_loaded = $.Deferred(); + this.maximum_visible_links = 'auto'; // # of menu to show. 0 = do not crop, 'auto' = algo }, start: function() { this._super.apply(this, arguments); this.$secondary_menus = this.getParent().$element.find('.oe_secondary_menus_container'); this.$secondary_menus.on('click', 'a[data-menu]', this.on_menu_click); + $('html').bind('click', this.do_hide_more); }, do_reload: function() { var self = this; @@ -650,14 +652,40 @@ openerp.web.Menu = openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{ }); }, on_loaded: function(data) { + var self = this; this.data = data; this.renderElement(); + this.limit_entries(); this.$element.on('click', 'a[data-menu]', this.on_menu_click); + this.$element.on('click', 'a.oe_menu_more_link', function() { + self.$element.find('.oe_menu_more').toggle(); + return false; + }); this.$secondary_menus.html(QWeb.render("Menu.secondary", { widget : this })); // Hide second level submenus this.$secondary_menus.find('.oe_menu_toggler').siblings('.oe_secondary_submenu').hide(); this.has_been_loaded.resolve(); }, + limit_entries: function() { + var maximum_visible_links = this.maximum_visible_links; + if (maximum_visible_links === 'auto') { + maximum_visible_links = this.auto_limit_entries(); + } + if (maximum_visible_links) { + var $more = $(QWeb.render('Menu.more')), + $index = this.$element.find('li').eq(maximum_visible_links - 1); + $index.after($more); + $more.find('.oe_menu_more').append($index.next().nextAll()); + } + }, + auto_limit_entries: function() { + // TODO: auto detect overflow and bind window on resize + var width = $(window).width(); + return Math.floor(width / 125); + }, + do_hide_more: function() { + this.$element.find('.oe_menu_more').hide(); + }, /** * Opens a given menu by id, as if a user had browsed to that menu by hand * except does not trigger any event on the way @@ -702,6 +730,7 @@ openerp.web.Menu = openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{ } }, on_menu_click: function(ev, id) { + this.do_hide_more(); id = id || 0; var $clicked_menu, manual = false; diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml index c8a6762ab34..5b3a79391a7 100644 --- a/addons/web/static/src/xml/base.xml +++ b/addons/web/static/src/xml/base.xml @@ -332,6 +332,12 @@ + +
  • + More... +