Change header submenu behavior

src/apps/callcenter/app.js

@@ -161,15 +161,22 @@ var app = {
 	},
 
 	initHeaderSubmenu: function() {
+		var self = this;
 		var $headerMenu = $('#cc-header-menu');
-		$headerMenu.on('mouseenter', function(){
-			$(this).find('.js-header-menu-items').show();
-			$(this).find('.js-header-menu-title').hide();
-		}).on('mouseleave', function(){
-			$(this).find('.js-header-menu-items').hide();
-			$(this).find('.js-header-menu-title').show();
-		}).on('click', function(e){
+
+		$headerMenu.find('.js-header-menu-title').on('click', function(e) {
 			e.preventDefault();
+			$(this).hide();
+			$headerMenu.find('.js-header-menu-items').show();
+
+			if(self.vars.hasOwnProperty('headerMenuTimeoutId')) {
+				window.clearTimeout(self.vars.headerMenuTimeoutId);
+			}
+
+			self.vars.headerMenuTimeoutId = window.setTimeout(function(){
+				$headerMenu.find('.js-header-menu-items').hide();
+				$headerMenu.find('.js-header-menu-title').show();
+			}, 5000);
 		});
 	},
 
@@ -332,7 +339,8 @@ var app = {
 			map_agents[v.id] = 'logged_out';
 		});
 
-		self.global_timer = setInterval(huge_poll, polling_interval * 1000);
+		// TODO: uncomment next
+		//self.global_timer = setInterval(huge_poll, polling_interval * 1000);
 	},
 
 	get_queues_stats: function (callback) {

src/apps/callcenter/i18n/de-DE.json

@@ -83,6 +83,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/i18n/dk-DK.json

@@ -84,6 +84,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/i18n/en-NZ.json

@@ -84,6 +84,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/i18n/en-US.json

@@ -84,6 +84,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/i18n/es-ES.json

@@ -83,6 +83,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/i18n/fr-FR.json

@@ -82,6 +82,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/i18n/it-IT.json

@@ -82,6 +82,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/i18n/nl-NL.json

@@ -82,6 +82,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/i18n/pt-PT.json

@@ -84,6 +84,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/i18n/ro-RO.json

@@ -85,6 +85,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/i18n/ru-RU.json

@@ -83,6 +83,7 @@
 			"mediaSilence": "Без звука"
 		},
 		"headerMenu": {
+			"mainBtnText": "Меню",
 			"dashboard": "Инфо-панель",
 			"manageQueues": "Редактировать очереди"
 		}

src/apps/callcenter/i18n/zh-CN.json

@@ -82,6 +82,7 @@
 			"mediaSilence": "Silence"
 		},
 		"headerMenu": {
+			"mainBtnText": "Menu",
 			"dashboard": "Dashboard",
 			"manageQueues": "Manage Queues"
 		}

src/apps/callcenter/style/app.scss

@@ -1101,6 +1101,12 @@
         list-style: none;
     }
 
+	.header-menu-title,
+	.header-menu-title:hover {
+		color: #555;
+		padding: 5px 14px;
+	}
+
     .header-menu-badge,
     .btn {
         margin-right: 5px;
@@ -1108,8 +1114,6 @@
 
     .header-menu-badge {
         font-weight: 600;
-        padding-right: 20px;
-        padding-left: 20px;
         letter-spacing: 1px;
         display: inline-block;
         *display: inline;
@@ -1121,7 +1125,7 @@
         text-align: center;
         vertical-align: middle;
         cursor: default;
-        color: #333333;
+        color: #909099;
         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
         background: white;
         border-color: #e6e6e6 #e6e6e6 #bfbfbf;
@@ -1136,6 +1140,10 @@
         -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);
+
+		i {
+			color: #909099;
+		}
     }
 
     .btn {

src/apps/callcenter/views/dashboard.html

@@ -1,30 +1,30 @@
 <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;">
+	<a class="js-header-menu-title header-menu-title" href="">
+		<i class="fa fa-bars icon-small"></i> {{ i18n.callcenter.headerMenu.mainBtnText }}
+	</a>
+	<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>
+			<span class="header-menu-badge">
+				<i class="fa fa-desktop icon-small"></i> {{ i18n.callcenter.headerMenu.dashboard }}
+			</span>
 		</li>
 		<li>
 			<a href="" class="js-open-cc-settings btn">
-				<i class="fa fa-cog icon-small"></i> Manage Queues
+				<i class="fa fa-cog icon-small"></i> {{ i18n.callcenter.headerMenu.manageQueues }}
 			</a>
 		</li>
     </ul>
 </div>
 <div id="dashboard-content" class="clearfix page">
-    <div id="dashboard-topbar">
-        <div class="topbar-right">
-        </div>
-    </div>
-    <div id="callwaiting-list" class="sidebar list_panel"></div>
-    <div class="dashboard-bottom-right">
-        <div class="content">
-            <div id="dashboard-view">
-            </div>
-        </div>
-    </div>
+	<div id="dashboard-topbar">
+		<div class="topbar-right">
+		</div>
+	</div>
+	<div id="callwaiting-list" class="sidebar list_panel"></div>
+	<div class="dashboard-bottom-right">
+		<div class="content">
+			<div id="dashboard-view">
+			</div>
+		</div>
+	</div>
 </div>

src/apps/callcenter/views/settings.html

@@ -1,34 +1,34 @@
 <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> {{ i18n.callcenter.headerMenu.dashboard }}
-            </a>
-        </li>
-        <li>
-            <span class="header-menu-badge">
-                <i class="fa fa-cog icon-small"></i> {{ i18n.callcenter.headerMenu.manageQueues }}
-            </span>
-        </li>
-    </ul>
+	<a class="js-header-menu-title header-menu-title" href="">
+		<i class="fa fa-bars icon-small"></i> {{ i18n.callcenter.headerMenu.mainBtnText }}
+	</a>
+	<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> {{ i18n.callcenter.headerMenu.dashboard }}
+			</a>
+		</li>
+		<li>
+			<span class="header-menu-badge">
+				<i class="fa fa-cog icon-small"></i> {{ i18n.callcenter.headerMenu.manageQueues }}
+			</span>
+		</li>
+	</ul>
 </div>
 <div id="cc-settings">
-    <div class="container-fluid">
-        <div class="row-fluid">
-            <div class="sidebar-list-panel span2 well">
-                <h4 class="sidebar-list-panel__header">
-                    {{ i18n.callcenter.settings.sidebar.title }}
-                    <a href="" class="js-cc-create-queue btn btn-round">
-                        <i class="fa fa-plus icon-small"></i>
-                    </a>
-                </h4>
+	<div class="container-fluid">
+		<div class="row-fluid">
+			<div class="sidebar-list-panel span2 well">
+				<h4 class="sidebar-list-panel__header">
+					{{ i18n.callcenter.settings.sidebar.title }}
+					<a href="" class="js-cc-create-queue btn btn-round">
+						<i class="fa fa-plus icon-small"></i>
+					</a>
+				</h4>
 
-                <div id="queues-list-container"></div>
-            </div>
-            <div id="cc-settings-content" class="cc-settings-content span10"></div>
-        </div>
-    </div>
+				<div id="queues-list-container"></div>
+			</div>
+			<div id="cc-settings-content" class="cc-settings-content span10"></div>
+		</div>
+	</div>
 </div>