diff --git a/app.js b/app.js index cacf082..25d3d42 100644 --- a/app.js +++ b/app.js @@ -117,6 +117,19 @@ var app = { }); }, + initHeaderSubmenu: function() { + var $headerMenu = $('#cc-header-menu'); + $headerMenu.on('mouseenter', function(){ + $(this).find('.js-header-menu-items').fadeIn(); + $(this).find('.js-header-menu-title').hide(); + }).on('mouseleave', function(){ + $(this).find('.js-header-menu-items').hide(); + $(this).find('.js-header-menu-title').fadeIn(); + }).on('click', function(e){ + e.preventDefault(); + }); + }, + queue_eavesdrop: function (callback) { var self = this; @@ -533,6 +546,7 @@ var app = { // account switching for monster-ui self.accountId = monster.apps.auth.accountId; + self.clean_timers(); self.fetch_all_data(function(data) { @@ -559,6 +573,7 @@ var app = { } self.dashboardBindEvents(container); + self.initHeaderSubmenu(); }); }, @@ -568,7 +583,7 @@ var app = { $container.find('.js-open-cc-settings').on('click', function(e) { e.preventDefault(); self.settingsRender($container); - }).click(); // TODO: remove ".click()" after development + }); }, settingsShowMessage: function(msg, msgType, $container) { @@ -614,6 +629,7 @@ var app = { var html = $(monster.template(self, 'settings', {})); $container.empty().append(html); self.settingsInit($container, callback); + self.initHeaderSubmenu(); }, settingsInit: function($container, callback) { @@ -629,7 +645,6 @@ var app = { self.settingsBindEvents($container); - // TODO: remove after development $('#queues-list li:first-child a').click(); if(typeof(callback) === 'function') { diff --git a/style/app.scss b/style/app.scss index 64f17da..2b1df2d 100644 --- a/style/app.scss +++ b/style/app.scss @@ -676,9 +676,7 @@ } #cc-settings { - .cc-buttons-panel { - padding: 13px 20px; - } + padding-top: 23px; .cc-settings-content > h1 { font-weight: normal; @@ -1019,3 +1017,61 @@ } } +.cc-header-menu { + position: absolute; + top: 72px; + text-align: center; + width: 400px; + left: -webkit-calc(50% - 200px); + left: -moz-calc(50% - 200px); + left: calc(50% - 200px); + + ul li { + display: inline-block; + vertical-align: top; + list-style: none; + } + + .header-menu-badge, + .btn { + margin-right: 5px; + } + + .header-menu-badge { + font-weight: 600; + padding-right: 20px; + padding-left: 20px; + letter-spacing: 1px; + display: inline-block; + *display: inline; + *zoom: 1; + padding: 4px 12px; + margin-bottom: 0; + font-size: 14px; + line-height: 20px; + text-align: center; + vertical-align: middle; + cursor: default; + color: #333333; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + background: white; + border-color: #e6e6e6 #e6e6e6 #bfbfbf; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border: 1px solid #cccccc; + *border: 0; + border-bottom-color: #b3b3b3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + *margin-left: .3em; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); + } + + .btn { + padding: 4px 12px; + } + +} + diff --git a/views/dashboard.html b/views/dashboard.html index 785a63e..43a3287 100644 --- a/views/dashboard.html +++ b/views/dashboard.html @@ -1,7 +1,19 @@ -