Header-menu

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') {

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;
+    }
+
+}
+

views/dashboard.html

@@ -1,7 +1,19 @@
-<div class="cc-buttons-panel">
-    <a href="" class="js-open-cc-settings btn">
-        <i class="fa fa-cog icon-small"></i> Settings
-    </a>
+<div id="cc-header-menu" class="cc-header-menu">
+    <span class="js-header-menu-title">
+        <i class="fa fa-bars icon-small"></i> Menu
+    </span>
+    <ul class="js-header-menu-items cc-header-menu-list" style="display: none;">
+		<li>
+            <span class="header-menu-badge">
+                <i class="fa fa-desktop icon-small"></i> Dashboard
+            </span>
+		</li>
+		<li>
+			<a href="" class="js-open-cc-settings btn">
+				<i class="fa fa-cog icon-small"></i> Manage Queues
+			</a>
+		</li>
+    </ul>
 </div>
 <div id="dashboard-content" class="clearfix page">
     <div id="dashboard-topbar">

views/settings.html

@@ -1,9 +1,21 @@
+<div id="cc-header-menu" class="cc-header-menu">
+    <span class="js-header-menu-title">
+        <i class="fa fa-bars icon-small"></i> Menu
+    </span>
+    <ul class="js-header-menu-items cc-header-menu-list" style="display: none;">
+        <li>
+            <a href="" class="js-open-cc-dashboard btn">
+                <i class="fa fa-desktop icon-small"></i> Dashboard
+            </a>
+        </li>
+        <li>
+            <span class="header-menu-badge">
+                <i class="fa fa-cog icon-small"></i> Manage Queues
+            </span>
+        </li>
+    </ul>
+</div>
 <div id="cc-settings">
-    <div class="cc-buttons-panel">
-        <a href="" class="js-open-cc-dashboard btn">
-            <i class="fa fa-cog icon-small"></i> Dashboard
-        </a>
-    </div>
     <div class="container-fluid">
         <div class="row-fluid">
             <div class="sidebar-list-panel span2 well">