material design style taskbar

lib/persona.js

@@ -1,5 +1,7 @@
 "use strict";
 
+/*globals config, utils*/
+
 $(document).ready(function() {
 	setupSlideMenu();
 
@@ -40,6 +42,23 @@ $(document).ready(function() {
 				$('.navbar-header button').click();
 			}
 		});
+
+		$(window).on('filter:taskbar.push', function(ev, data) {
+			data.options.className = 'taskbar-' + data.module;
+
+			if (data.module === 'composer') {
+				data.options.icon = 'fa-plus';
+			} else if (data.module === 'chat') {
+				data.options.icon = 'fa-spinner fa-spin';
+
+				$.getJSON(config.relative_path + '/api/user/' + utils.slugify(data.options.title), function(user) {
+					var el = $('#taskbar [data-uuid="' + data.uuid + '"] a');
+					el.find('i').remove();
+					el.css('background-image', 'url(' + user.picture + ')');
+				});
+			}
+			
+		});
 	}
 
 

modules/taskbar.less

@@ -3,11 +3,13 @@
 .taskbar {
 	display: none;
 	z-index: 10001;
-	-moz-opacity: 0.75;
-	opacity: 0.75;
+
 	margin-top: 0;
 	.transition(.15s ease-in opacity);
 
+	background: none;
+	border: none;
+
 	&[data-active="1"] {
 		display: block;
 	}
@@ -21,6 +23,10 @@
 		min-height: 32px;
 	}
 
+	.navbar-nav {
+		padding-right: 15px;
+		padding-bottom: 15px;
+
 		li {
 			float: left;
 
@@ -35,11 +41,12 @@
 				padding: 3px 15px;
 				font-size: 13px;
 
+				border-radius: 50%;
+				height: 50px;
+				width: 50px;
+
 				> span {
-				max-width: 200px;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				overflow: hidden;
+					display: none;
 				}
 			}
 
@@ -59,6 +66,37 @@
 				50% { background: #e5e5e5; }
 				100% { background: none; }
 			}
+
+			&.taskbar-composer {
+				a, a:hover, a:focus, a:active {
+					background: #f44336;
+				}
+			}
+
+			&.taskbar-chat {
+				a, a:hover, a:focus, a:active {
+					background: none;
+					background-size: cover;
+
+					i {
+						color: @gray;
+					}
+				}
+			}
+
+			&.taskbar-composer, &.taskbar-chat {
+				a {
+					text-align: center;
+					margin-left: 15px;
+
+					i {
+						font-size: 18px;
+						margin-top: 12px;
+						color: #FFF;
+					}
+				}
+			}
+		}
 	}