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,43 +23,79 @@
 		min-height: 32px;
 	}
 
-	li {
+	.navbar-nav {
-		float: left;
+		padding-right: 15px;
+		padding-bottom: 15px;
 
-		&.new a {
+		li {
-			-webkit-animation: taskbar-active 3s infinite;
+			float: left;
-			-moz-animation: taskbar-active 3s infinite;
+
-			-o-animation: taskbar-active 3s infinite;
+			&.new a {
-			animation: taskbar-active 3s infinite;
+				-webkit-animation: taskbar-active 3s infinite;
-		}
+				-moz-animation: taskbar-active 3s infinite;
+				-o-animation: taskbar-active 3s infinite;
+				animation: taskbar-active 3s infinite;
+			}
 
-		a {
+			a {
-			padding: 3px 15px;
+				padding: 3px 15px;
-			font-size: 13px;
+				font-size: 13px;
 
-			> span {
+				border-radius: 50%;
-				max-width: 200px;
+				height: 50px;
-				text-overflow: ellipsis;
+				width: 50px;
-				white-space: nowrap;
+
-				overflow: hidden;
+				> span {
+					display: none;
+				}
 			}
-		}
 
-		img {
+			img {
-			max-width: 24px;
+				max-width: 24px;
-			max-height: 24px;
+				max-height: 24px;
-			margin-right: 1em;
+				margin-right: 1em;
-		}
+			}
 
-		&.pulse {
+			&.pulse {
-			-webkit-animation: pulsate 2500ms linear;
+				-webkit-animation: pulsate 2500ms linear;
-			-webkit-animation-iteration-count: infinite;
+				-webkit-animation-iteration-count: infinite;
-		}
+			}
+
+			@-webkit-keyframes pulsate {
+				0% { background: none; }
+				50% { background: #e5e5e5; }
+				100% { background: none; }
+			}
+
+			&.taskbar-composer {
+				a, a:hover, a:focus, a:active {
+					background: #f44336;
+				}
+			}
 
-		@-webkit-keyframes pulsate {
+			&.taskbar-chat {
-			0% { background: none; }
+				a, a:hover, a:focus, a:active {
-			50% { background: #e5e5e5; }
+					background: none;
-			100% { 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;
+					}
+				}
+			}
 		}
 	}