tooltips

app/app/components/layout/zone-navigation.js

@@ -11,12 +11,13 @@
 
 import Ember from 'ember';
 import netUtil from '../../utils/net';
+import TooltipMixin from '../../mixins/tooltip';
 
 const {
 	inject: { service }
 } = Ember;
 
-export default Ember.Component.extend({
+export default Ember.Component.extend(TooltipMixin, {
 	folderService: service('folder'),
 	folder: null,
 	appMeta: service(),
@@ -51,6 +52,17 @@ export default Ember.Component.extend({
 		this.set('view.search', (route === 'search') ? true : false);
 	},
 
+	didRender() {
+		if (this.get('session.isAdmin')) {
+			this.addTooltip(document.getElementById("workspace-settings"));
+		}
+		if (this.get("session.authenticated")) {
+			this.addTooltip(document.getElementById("workspace-logout"));
+		} else {
+			this.addTooltip(document.getElementById("workspace-login"));
+		}
+	},
+
 	actions: {
 		switchAccount(domain) {
 			this.audit.record('switched-account');

app/app/components/search/search-results.js

@@ -20,20 +20,20 @@ export default Ember.Component.extend({
 		let temp = _.groupBy(results, 'documentId');
 		let documents = [];
 
-        _.each(temp, function(document) {
+		_.each(temp, function (document) {
 			let refs = [];
 
 			if (document.length > 1) {
 				refs = document.slice(1);
 			}
 
-			_.each(refs, function(ref, index) {
+			_.each(refs, function (ref, index) {
-				ref.comma = index === refs.length-1 ? "" : ", ";
+				ref.comma = index === refs.length - 1 ? "" : ", ";
 			});
 
 			let hasRefs = refs.length > 0;
 
-            documents.pushObject( {
+			documents.pushObject({
 				doc: document[0],
 				ref: refs,
 				hasReferences: hasRefs
@@ -45,7 +45,6 @@ export default Ember.Component.extend({
 		if (results.length > 0) {
 			let references = results.length === 1 ? "reference" : "references";
 			let i = results.length;
-            let j = documents.length;
 			phrase = `${i} ${references}`;
 		}
 

app/app/styles/widget/widget-notification.scss

@@ -9,6 +9,7 @@
 	text-align: left;
 	border-radius: 2px;
 	@extend .z-depth-1;
+	z-index: 999;
 
 	> .message {
 		margin: 3px 0;

app/app/styles/widget/widget-tooltip.scss

@@ -3,23 +3,32 @@
 .tooltip-element {
 	z-index: 999;
 	box-sizing: border-box;
-  &:after, &:before {
+
+	&:after,
+	&:before {
 		box-sizing: border-box;
 	}
+
 	* {
 		box-sizing: border-box;
-    &:after, &:before {
+
+		&:after,
+		&:before {
 			box-sizing: border-box;
 		}
 	}
 	position: absolute;
 	display: none;
+
 	&.tooltip-open {
 		display: block;
 	}
+
 	&.tooltip-theme-arrows {
+		z-index: 999;
 		max-width: 100%;
 		max-height: 100%;
+
 		.tooltip-content {
 			border-radius: 2px;
 			position: relative;
@@ -29,6 +38,7 @@
 			padding: 0.5em;
 			font-size: 0.8em;
 			line-height: 1.1em;
+
 			&:before {
 				content: "";
 				display: block;
@@ -40,8 +50,10 @@
 				border-style: solid;
 			}
 		}
+
 		&.tooltip-element-attached-bottom.tooltip-element-attached-center .tooltip-content {
 			margin-bottom: 8px;
+
 			&:before {
 				top: 100%;
 				left: 50%;
@@ -49,8 +61,10 @@
 				border-top-color: $color-tooltip;
 			}
 		}
+
 		&.tooltip-element-attached-top.tooltip-element-attached-center .tooltip-content {
 			margin-top: 8px;
+
 			&:before {
 				bottom: 100%;
 				left: 50%;
@@ -58,8 +72,10 @@
 				border-bottom-color: $color-tooltip;
 			}
 		}
+
 		&.tooltip-element-attached-right.tooltip-element-attached-middle .tooltip-content {
 			margin-right: 8px;
+
 			&:before {
 				left: 100%;
 				top: 50%;
@@ -67,8 +83,10 @@
 				border-left-color: $color-tooltip;
 			}
 		}
+
 		&.tooltip-element-attached-left.tooltip-element-attached-middle .tooltip-content {
 			margin-left: 8px;
+
 			&:before {
 				right: 100%;
 				top: 50%;
@@ -76,17 +94,21 @@
 				border-right-color: $color-tooltip;
 			}
 		}
+
 		&.tooltip-element-attached-top {
 			&.tooltip-element-attached-left.tooltip-target-attached-bottom .tooltip-content {
 				margin-top: 8px;
+
 				&:before {
 					bottom: 100%;
 					left: 8px;
 					border-bottom-color: $color-tooltip;
 				}
 			}
+
 			&.tooltip-element-attached-right.tooltip-target-attached-bottom .tooltip-content {
 				margin-top: 8px;
+
 				&:before {
 					bottom: 100%;
 					right: 8px;
@@ -94,17 +116,21 @@
 				}
 			}
 		}
+
 		&.tooltip-element-attached-bottom {
 			&.tooltip-element-attached-left.tooltip-target-attached-top .tooltip-content {
 				margin-bottom: 8px;
+
 				&:before {
 					top: 100%;
 					left: 8px;
 					border-top-color: $color-tooltip;
 				}
 			}
+
 			&.tooltip-element-attached-right.tooltip-target-attached-top .tooltip-content {
 				margin-bottom: 8px;
+
 				&:before {
 					top: 100%;
 					right: 8px;
@@ -112,17 +138,21 @@
 				}
 			}
 		}
+
 		&.tooltip-element-attached-top {
 			&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
 				margin-right: 8px;
+
 				&:before {
 					top: 8px;
 					left: 100%;
 					border-left-color: $color-tooltip;
 				}
 			}
+
 			&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
 				margin-left: 8px;
+
 				&:before {
 					top: 8px;
 					right: 100%;
@@ -130,17 +160,21 @@
 				}
 			}
 		}
+
 		&.tooltip-element-attached-bottom {
 			&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
 				margin-right: 8px;
+
 				&:before {
 					bottom: 8px;
 					left: 100%;
 					border-left-color: $color-tooltip;
 				}
 			}
+
 			&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
 				margin-left: 8px;
+
 				&:before {
 					bottom: 8px;
 					right: 100%;
@@ -149,14 +183,17 @@
 			}
 		}
 		pointer-events: none;
+
 		.tooltip-content {
 			padding: 0.5em 1em;
 		}
 	}
 	opacity: 0;
+
 	&.tooltip-open-transitionend {
 		display: block;
 	}
+
 	&.tooltip-after-open {
 		transition: opacity 600ms 400ms;
 		opacity: 1;

app/app/templates/components/layout/zone-navigation.hbs

@@ -29,14 +29,14 @@
 
 	    <ul class="bottom-zone">
 			{{#if session.session.content.authenticated.user.admin}}
-				<li class="{{if view.settings 'selected'}}">
+				<li id="workspace-settings" class="{{if view.settings 'selected'}}" data-tooltip="Settings" data-tooltip-position="right center">
 		            {{#link-to 'customize.general'}}
 		                <i class="material-icons icon-tool">tune</i>
 		            {{/link-to}}
 				</li>
 			{{/if}}
 	        {{#if session.authenticated}}
-				<li>
+				<li id="workspace-logout" data-tooltip="Logout" data-tooltip-position="right center">
 		            {{#link-to 'auth.logout'}}
 		                <i class="material-icons icon-tool">exit_to_app</i>
 		            {{/link-to}}
@@ -49,7 +49,7 @@
 		            {{/link-to}}
 				</li>
 	        {{else}}
-				<li>
+				<li id="workspace-login" data-tooltip="Login" data-tooltip-position="right center">
 	                {{#link-to 'auth.login'}}
 						<i class="material-icons icon-tool">lock_open</i>
 					{{/link-to}}