Merge pull request #544 from thevoiceofzeke/widgets

Replace widget action popovers with material tooltips

angularjs-portal-home/src/main/webapp/css/widget.less

@@ -264,56 +264,6 @@ weather {
   }
 }
 
-.list-content .widget-info,
-.widget-frame .widget-info, {
-  position: absolute;
-  left: -999em;
-  .tooltip-inner {
-    max-width:200px;
-    width:200px;
-  }
-}
-.list-content .widget-remove,
-.widget-frame .widget-remove {
-  position: absolute;
-  right: 999em;
-  .tooltip-inner {
-    max-width:200px;
-    width:200px;
-  }
-}
-
-.list-content:hover,
-.widget-frame:hover {
-  .widget-info {
-    display:inline;
-    position:absolute;
-    left:8px;
-    top:3px;
-    i {
-      color:#999;
-      &:hover {
-        cursor:pointer;
-        color:#666;
-      }
-    }
-  }
-
-  .widget-remove {
-    display:inline;
-    position:absolute;
-    right:8px;
-    top:3px;
-    i {
-      color:#999;
-      &:hover {
-        cursor:pointer;
-        color:#666;
-      }
-    }
-  }
-}
-
 .scroll-widget {
   max-height: 210px;
   overflow-y: scroll;
@@ -326,4 +276,4 @@ weather {
 .widget-middle {
   width : 315px;
   margin : auto;
-}
+}

angularjs-portal-home/src/main/webapp/my-app/layout/widget/partials/widget-card.html

@@ -3,16 +3,18 @@
   <!-- HEADER -->
   <md-card-header class="widget-header">
     <!-- Widget Chrome -->
-    <div class='widget-info'>
-      <i title="Info" class="fa fa-info-circle"
-      tooltip="{{portlet.description}}"
-      tooltip-trigger="mouseenter"
-      tooltip-placement="top"
-      tooltip-popup-delay="200"></i>
-    </div>
-    <div class='widget-remove' ng-hide='GuestMode || cantRemove'>
-      <i title="Remove" class="fa fa-times portlet-options" ng-click="widgetCtrl.removePortlet(portlet.nodeId, portlet.title)"><a aria-label="Remove this app" href="#"></a></i>
-    </div>
+    <md-button class="widget-action widget-info md-icon-button" aria-label="see a brief description of this app">
+      <md-tooltip md-direction="top" class="widget-action-tooltip">
+        {{portlet.description}}
+      </md-tooltip>
+      <md-icon>info</md-icon>
+    </md-button>
+    <md-button class="widget-action widget-remove md-icon-button"
+               aria-label="remove this widget from your home screen"
+               ng-click="widgetCtrl.removePortlet(portlet.nodeId, portlet.title)"
+               ng-hide="GuestMode || cantRemove">
+      <md-icon>close</md-icon>
+    </md-button>
 
     <md-card-header-text>
       <span class='md-title' style='text-align: center;' id="appTitle_portlet.title-{{portlet.nodeId}}" aria-labelledby="appTitle_portlet.title-{{portlet.nodeId}}" tabindex="0">{{ portlet.title }}</span>

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "pretest": "mvn clean package",
     "test": "karma start angularjs-portal-home/target/web/karma.conf.js  --single-run",
-	"prestart": "mvn package",
+	"prestart": "mvn clean package",
 	"start": "mvn jetty:run",
   "predocs" : "./build-docs-local.sh",
   "docs" : "cd doc_target/gh-pages/ && http-server",