Added more tooltips to UI

zettajs · Nov 8, 2014 · a09f876 · a09f876
1 parent c143637
commit a09f876
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 20 deletions.
diff --git a/src/partials/muted_characteristic.html b/src/partials/muted_characteristic.html
@@ -3,7 +3,17 @@ <h2 class="name pure-u-5-6 pure-u-md-11-12">Muted<span>:group</span></h2>
     <section class="devices pure-u-1">
     <div ng-class="{ open: !!characteristic.muteOpen, closed: !characteristic.muteOpen }" class="device row action pure-g animate-size closed" ng-repeat="characteristic in muted">
         <div class="switches pure-u-1-6 pure-u-md-1-12">
-          <b class="mute"ng-click="unmute(characteristic)">eye</b>&nbsp;<b class="pin" ng-click="pin(characteristic)">pushpin</b>
+            <b class="mute" 
+             ng-click="unmute(characteristic)"
+             mac-tooltip="Unmute {{characteristic.name | capitalize}}" 
+             mac-tooltip-direction="bottom"
+             >eye</b>
+            &nbsp;
+          <b class="pin" 
+             ng-click="pin(characteristic)"
+             mac-tooltip="Pin {{characteristic.name | capitalize}}" 
+             mac-tooltip-direction="bottom"
+             >pushpin</b>
         </div>
         <div class="name lone-name pure-u-5-6 pure-u-md-1-4">
           <a class="server-name" ng-click="loadServer(characteristic.device.server)">{{ characteristic.device.server.name }} &gt; </a>

diff --git a/src/partials/overview-action.html b/src/partials/overview-action.html
@@ -10,7 +10,13 @@
     </div>
     <div class="vis before-md pure-u-1 pure-u-md-5-12" ng-if="action.inputFields.length<2"></div>
     <div class="value pure-u-md-1-3">
-      <button class="pure-button {{ action.name + '-button' }}" ng-disabled="!action.available" ng-click="execute()">{{ action.name }}</button>
+      <button 
+        class="pure-button {{ action.name + '-button' }}" 
+        ng-disabled="!action.available"
+        ng-click="execute()"
+        mac-tooltip="{{device.name}} # {{action.name}}"
+        mac-tooltip-direction="bottom"        
+        >{{ action.name }}</button>
     </div>
 
 </form>
@@ -22,7 +28,11 @@
   <div class="vis before-md pure-u-1 pure-u-md-5-12"></div>
   <div class="value pure-u-1-2 pure-u-md-1-3">
     <form ng-repeat="val in action.radioField.value" class="pure-form">
-      <button class="pure-button {{ action.name + '-button' }}" ng-click="val.execute()">{{ val.title || val.value}}</button>
+      <button class="pure-button {{ action.name + '-button' }}" 
+        ng-click="val.execute()"
+        mac-tooltip="{{device.name}} # {{val.title || val.value}}"
+        mac-tooltip-direction="bottom"       
+        >{{ val.title || val.value}}</button>
     </form>
   </div>
 </div>
@@ -50,7 +60,14 @@
 
     <div class="pure-g">
         <div class="before-md pure-u-md-2-3"></div>
-        <div class="value pure-u-1 pure-u-md-1-3"><button class="pure-button {{ action.name + '-button' }}" ng-disabled="!action.available" ng-click="execute()">{{ action.name }}</button></div>
+        <div class="value pure-u-1 pure-u-md-1-3">
+            <button 
+                class="pure-button {{ action.name + '-button' }}" 
+                ng-disabled="!action.available" 
+                ng-click="execute()"
+                mac-tooltip="{{device.name}} # {{action.name}}"
+                mac-tooltip-direction="bottom" 
+                >{{ action.name }}</button></div>
     </div>
 
   </form>

diff --git a/src/partials/overview.html b/src/partials/overview.html
@@ -12,7 +12,7 @@ <h1><b class="back" ng-if="filter" onclick="window.history.back()">previous</b>{
           <div class="pure-g">
             <div class="search_icon pure-u-1-12">
               <b ng-if="!query.length">search</b>
-              <button type="button" class="icon" ng-click="clearQuery()" ng-if="query.length > 0">delete</button>
+              <button type="button" class="icon" ng-click="clearQuery()" ng-if="query.length > 0" mac-tooltip="Clear Query" mac-tooltip-direction="bottom">delete</button>
             </div>
             <div class="pure-u-11-12 pure-g">
               <div class="input pure-u-15-24">
@@ -62,7 +62,17 @@ <h2 class="name pure-u-1">Pinned<span>:group</span></h2>
       <div ng-repeat="characteristic in pinned" class="device row pure-g animate-size {{characteristic.type}}"
   ng-class="{ open: !!characteristic.pinOpen, closed: !characteristic.pinOpen, action: !characteristic.type, stream: !!characteristic.type, disabled: (!characteristic.type && !characteristic.available) }" >
         <div class="switches pure-u-1-6 pure-u-md-1-12">
-          <b class="mute" ng-click="mute(characteristic)">eye</b>&nbsp;<b class="pin" ng-click="unpin(characteristic)">pushpin</b>
+          <b class="mute" 
+             ng-click="mute(characteristic)"
+             mac-tooltip="Mute {{characteristic.name | capitalize}}" 
+             mac-tooltip-direction="bottom"
+             >eye</b>
+            &nbsp;
+          <b class="pin" 
+             ng-click="unpin(characteristic)"
+             mac-tooltip="Unpin {{characteristic.name | capitalize}}" 
+             mac-tooltip-direction="bottom"
+             >pushpin</b>
         </div>
         <!-- Stream -->
         <div class="pure-u-5-6 pure-u-md-11-12 pure-g" ng-if="characteristic.type">
@@ -100,7 +110,9 @@ <h2 class="name pure-u-2-3">
         :devices <span class="active_query" ng-if="activeQuery">{{ activeQuery }}</span>
       </span>
       <span ng-if="!filter">
-        <a ng-click="loadServer(server)">{{ server.name }}</a> : {{ server.type }} <span class="active_query" ng-if="activeQuery">{{ activeQuery }}</span>
+        <a ng-click="loadServer(server)">{{ server.name }}</a> : {{ server.type }}  <span class="active_query" ng-if="activeQuery"
+      mac-tooltip="Devices visible to {{ server.name }} are being filtered by this query"
+      mac-tooltip-direction="bottom"                                                     >{{ activeQuery }}</span>
       </span>
     </h2>
     <div class="server_endpoint pure-u-1-3">
@@ -113,7 +125,10 @@ <h2 class="name pure-u-2-3">
         <div class="row main pure-g">
           <div class="pure-u-1-6 pure-u-md-1-12 icon_column"><button class="icon" ng-click="toggleProperties(this)" mac-tooltip="{{ showProperties ? 'Hide Properties' : 'Show Properties' }}" mac-tooltip-direction="bottom">direct{{showProperties ? 'down':'right'}}</button></div>
           <div class="name pure-u-5-6 pure-u-md-11-12">
-            <a ng-click="resolve(device.href)">{{ device.properties.name || device.properties.type }}</a>
+            <a ng-click="resolve(device.href)"
+               mac-tooltip="Details for {{ device.properties.name || device.properties.type }}"
+               mac-tooltip-direction="bottom"
+               >{{ device.properties.name || device.properties.type }}</a>
           </div>
         </div>
         <div ng-if="showProperties">
@@ -129,7 +144,17 @@ <h2 class="name pure-u-2-3">
         <div ng-repeat="stream in device.streams" class="row stream pure-g animate-size closed {{stream.type}}" ng-show="!stream.muted" id="{{ stream.id }}" ng-class="{ open: !!stream.open, closed: !stream.open }">
           <div class="switches pure-u-1-6 pure-u-md-1-12">
             <div ng-class="{ pinned: stream.pinned }">
-              <b class="mute" ng-click="mute(stream)">eye</b>&nbsp;<b class="pin" ng-click="pin(stream)">pushpin</b>
+              <b class="mute" 
+                 ng-click="mute(stream)"
+                 mac-tooltip="Mute :{{stream.name | capitalize}}" 
+                 mac-tooltip-direction="bottom"
+                 >eye</b>
+                &nbsp;
+              <b class="pin" 
+                 ng-click="pin(stream)" 
+                 mac-tooltip="Pin :{{stream.name | capitalize}}" 
+                 mac-tooltip-direction="bottom"
+                 >pushpin</b>
             </div>
           </div>
           <div class="pure-u-5-6 pure-u-md-11-12 pure-g">
@@ -148,26 +173,46 @@ <h2 class="name pure-u-2-3">
                   <b>stop</b><b>stop</b><b>stop</b>
                 </div>
             </div>
-            <div class="value before-md pure-u-md-1-3">&nbsp;{{ stream.current }}</div>
+            <div class="value before-md pure-u-md-1-3">&nbsp;
+                <span
+                 mac-tooltip="{{ device.properties.name || device.properties.type }} : {{stream.name}}"
+                 mac-tooltip-direction="bottom"                                                  >{{ stream.current }}</span></div>
           </div>
         </div>
         <!-- Action -->
         <div class="row action animate-size closed" ng-repeat="action in device.actions" ng-show="!action.muted" id="{{ action.id }}" ng-class="{ open: !!action.open, closed: !action.open }">
           <div class="pure-g action-content">
             <div class="switches pure-u-1-6 pure-u-md-1-12">
               <div ng-class="{ pinned: action.pinned }">
-                <b ng-if="action.pinned" class="mute" ng-click="mute(action)">eye</b>&nbsp;<b class="pin" ng-click="pin(action)">pushpin</b>
-
+                  <b class="mute" 
+                     ng-click="mute(action)"
+                     mac-tooltip="Mute #{{action.name | capitalize}}" 
+                     mac-tooltip-direction="bottom"
+                     >eye</b>
+                    &nbsp;
+                  <b class="pin" 
+                     ng-click="pin(action)" 
+                     mac-tooltip="Pin #{{action.name | capitalize}}" 
+                     mac-tooltip-direction="bottom"
+                     >pushpin</b>
               </div>
             </div>
 
-            <zetta-overview-action value="action" context="'server'" class="pure-u-5-6 pure-u-md-11-12 pure-g"/>
+            <zetta-overview-action value="action" context="'server'" device="device.properties" class="pure-u-5-6 pure-u-md-11-12 pure-g"/>
 
           </div>
         </div>
       </section>
     </section>
-    <div class="device_count pure-u-1" ng-if="activeQuery">{{ availableDevices(server).length }} found</div>
+    <div class="device_count pure-u-1" ng-if="activeQuery">
+        <ng-pluralize 
+            count="availableDevices(server).length"
+            when="{'one': '1 device matched','other': '{} devices matched'}"
+            mac-tooltip="Devices Matched by Active Query"
+            mac-tooltip-direction="bottom"           
+            >
+        </ng-pluralize>
+    </div>
   </div>
 
   <!-- Muted Group -->

diff --git a/src/scripts/directives/overview-action.js b/src/scripts/directives/overview-action.js
@@ -2,7 +2,8 @@ angular.module('zetta').directive('zettaOverviewAction', [function() {
   var link = function(scope, element) {
 
     function isRadioButtons(action) {
-
+        scope.device.name = scope.device.name ?  scope.device.name : scope.device.type
+        console.log('devProps', scope.device.name);
       // one input plus hidden
       if (scope.action.fields.length !== 2) {
         return false;
@@ -81,7 +82,8 @@ angular.module('zetta').directive('zettaOverviewAction', [function() {
     restrict: 'E',
     scope: {
       action: '=value',
-      context: '='
+      context: '=',
+      device: '='
     },
     templateUrl: 'partials/overview-action.html',
     link: link

diff --git a/src/scripts/filters/filters.js b/src/scripts/filters/filters.js
@@ -89,4 +89,9 @@ angular.module('zetta')
 
     return purified;
   };
-});
+})
+.filter('capitalize', function() {
+    return function(input, all) {
+      return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) : '';
+    }
+  });
diff --git a/src/scripts/vendor/macgyver/macgyver-core.js b/src/scripts/vendor/macgyver/macgyver-core.js
@@ -1485,7 +1485,7 @@ angular.module("Mac").directive("macTooltip", [
         enabled = false;
         disabled = false;
         defaults = {
-          direction: "top",
+          direction: "bottom",
           trigger: "hover",
           inside: false
         };

diff --git a/src/styles/overview.less b/src/styles/overview.less
@@ -155,10 +155,12 @@ h1 {
 
 
     .switches{
-      padding:1.1rem 0 .9rem 0;
+      padding: 0;
       text-align: center;
       font-size: 1em;
       b{
+        display: inline-block;
+        padding: 1rem 0;
         color: @gray_10;
         &:hover {
           color: @apigee-gray;

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -1163,11 +1163,13 @@ h1 .back:hover {
   }
 }
 .devices .row .switches {
-  padding: 1.1rem 0 .9rem 0;
+  padding: 0;
   text-align: center;
   font-size: 1em;
 }
 .devices .row .switches b {
+  display: inline-block;
+  padding: 1rem 0;
   color: #e6e6e6;
 }
 .devices .row .switches b:hover {