Styling

src/apps/callcenter/style/app.scss

@@ -206,46 +206,78 @@
 		}
 	}
 
-	#callwaiting-list {
-		position:relative;
+	.call-waiting-list {
 		float: left;
+		width: 220px;
+		padding: 0 0 0 30px;
+		background-color: #fff;
+		/*-webkit-border-radius: 6px;
+		-moz-border-radius: 6px;
+		border-radius: 6px;
+		-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
+		-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);*/
+
+		ul {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+
+		li > a {
+			display: block;
+			margin: 0 0 -1px;
+			padding: 8px 14px;
+			border: 1px solid #e5e5e5;
+			color: #414141;
+		}
 
-		.add_flow {
-			line-height: 60px;
-			cursor: default;
-			color: #22A5FF;
-			font-size: 14px;
-			font-weight: bold;
+		li:first-child > a {
+			border-top-left-radius: 6px;
+			border-top-right-radius: 6px;
 		}
 
-		.list-panel-anchor ul li {
-			cursor: default;
+		li:last-child > a {
+			border-bottom-left-radius: 6px;
+			border-bottom-right-radius: 6px;
 		}
 
-		.list-panel-anchor ul li a {
-			padding-left: 5px;
-			width: 110px;
-			float: left;
-			overflow: hidden;
-			white-space: nowrap;
+		.active > a {
+			position: relative;
+			z-index: 2;
+			padding: 9px 15px;
+			border: 0;
+			text-shadow: 0 1px 0 rgba(0,0,0,.15);
+			-webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+			-moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+			box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
 		}
 
-		.list-panel-anchor ul li:hover,
-		.list-panel-anchor ul li.selected {
-			background: #333;
+		.icon-right {
+			float: right;
+			margin-top: 2px;
+			margin-right: -6px;
+			opacity: .25;
 		}
 
-		.list-panel-anchor ul li .timer {
-			float: left;
-			width: 45px;
-			height: 27px;
-			line-height: 27px;
-			color: #22A5FF;
+		.call-waiting-item {
+			.cw-item-name {
+				display: inline-block;
+				width: 140px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				vertical-align: top;
+			}
+
+			.cw-item-timer {
+				display: inline-block;
+				vertical-align: top;
+			}
 		}
 	}
 
 	.dashboard-bottom-right {
-		padding: 10px 10px 10px 220px;
+		padding: 10px 10px 10px 229px;
 
 		#agents-view {
 			padding-left: 22px;
@@ -471,10 +503,6 @@
 	}
 }
 
-.timer {
-    float: right;
-}
-
 .list-panel-anchor ul li{
     height:27px;
     width: 210px;

src/apps/callcenter/views/calls_dashboard.html

@@ -1,14 +1,19 @@
-<div>
-    {{#each waits}}
-        <li title="{{status}}" class="call-waiting list-element" style="display: block;" data-call_id="{{call_id}}" data-queue_id="{{queue_id}}">
-            <a href="#" data-module="activate" data-action="media">{{friendly_title}}</a>
-            <span class="timer">{{friendly_duration}}</span>
-        </li>
-    {{/each}}
-    {{#each progress}}
-        <li title="{{status}}" class="call-waiting list-element" style="display: block;" data-call_id="{{call_id}}" data-queue_id="{{queue_id}}">
-            <a href="#" data-module="activate" data-action="media">{{friendly_title}}</a>
-            <span class="timer">{{friendly_duration}}</span>
-        </li>
-    {{/each}}
-</div>
+<ul>
+	{{#each waits}}
+	<li title="{{status}}" class="call-waiting-item" data-call_id="{{call_id}}" data-queue_id="{{queue_id}}">
+		<a href="#" data-module="activate" data-action="media">
+			<span class="cw-item-name">{{friendly_title}}</span>
+			<span class="cw-item-timer">{{friendly_duration}}</span>
+		</a>
+	</li>
+	{{/each}}
+
+	{{#each progress}}
+	<li title="{{status}}" class="call-waiting-item" data-call_id="{{call_id}}" data-queue_id="{{queue_id}}">
+		<a href="#" data-module="activate" data-action="media">
+			<span class="cw-item-name">{{friendly_title}}</span>
+			<span class="cw-item-timer">{{friendly_duration}}</span>
+		</a>
+	</li>
+	{{/each}}
+</ul>

src/apps/callcenter/views/dashboard.html

@@ -20,7 +20,7 @@
 		<div class="topbar-right">
 		</div>
 	</div>
-	<div id="callwaiting-list" class="sidebar list_panel"></div>
+	<div id="callwaiting-list" class="call-waiting-list nav nav-list"></div>
 	<div class="dashboard-bottom-right">
 		<div class="content">
 			<div id="dashboard-view">

src/apps/callcenter/views/settings.html

@@ -18,7 +18,7 @@
 <div id="cc-settings">
 	<div class="container-fluid">
 		<div class="row-fluid">
-			<div class="sidebar-list-panel span2 well">
+			<div class="sidebar-list-panel span3 well">
 				<h4 class="sidebar-list-panel__header">
 					{{ i18n.callcenter.settings.sidebar.title }}
 					<a href="" class="js-cc-create-queue btn btn-round">
@@ -28,7 +28,7 @@
 
 				<div id="queues-list-container"></div>
 			</div>
-			<div id="cc-settings-content" class="cc-settings-content span10"></div>
+			<div id="cc-settings-content" class="cc-settings-content span9"></div>
 		</div>
 	</div>
 </div>