merge

www/analytics/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline-directive.js

@@ -0,0 +1,66 @@
+/*!
+ * Piwik - Web Analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Usage:
+ *
+ * <h2 piwik-enriched-headline>All Websites Dashboard</h2>
+ * -> uses "All Websites Dashboard" as featurename
+ *
+ * <h2 piwik-enriched-headline feature-name="All Websites Dashboard">All Websites Dashboard (Total: 309 Visits)</h2>
+ * -> custom featurename
+ *
+ * <h2 piwik-enriched-headline help-url="http://piwik.org/guide">All Websites Dashboard</h2>
+ * -> shows help icon and links to external url
+ *
+ * <h2 piwik-enriched-headline>All Websites Dashboard
+ *     <div class="inlineHelp>My <strong>inline help</strong></div>
+ * </h2>
+ * -> shows help icon to display inline help on click. Note: You can combine inlinehelp and help-url
+ */
+angular.module('piwikApp').directive('piwikEnrichedHeadline', function($document, piwik, $filter){
+    var defaults = {
+        helpUrl: ''
+    };
+
+    return {
+        transclude: true,
+        restrict: 'A',
+        scope: {
+            helpUrl: '@',
+            featureName: '@'
+        },
+        templateUrl: 'plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.html?cb=' + piwik.cacheBuster,
+        compile: function (element, attrs) {
+
+            for (var index in defaults) {
+               if (!attrs[index]) { attrs[index] = defaults[index]; }
+            }
+
+            return function (scope, element, attrs) {
+
+                var helpNode = $('[ng-transclude] .inlineHelp', element);
+
+                if ((!helpNode || !helpNode.length) && element.next()) {
+                    // hack for reports :(
+                    helpNode = element.next().find('.reportDocumentation');
+                }
+
+                if (helpNode && helpNode.length) {
+                    if ($.trim(helpNode.text())) {
+                        scope.inlineHelp = $.trim(helpNode.html());
+                    }
+                    helpNode.remove();
+                }
+
+                if (!attrs.featureName) {
+                    attrs.featureName = $.trim(element.text());
+                }
+            };
+        }
+    };
+});

www/analytics/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.html

@@ -0,0 +1,29 @@
+<div class="enrichedHeadline"
+    ng-mouseenter="view.showIcons=true" ng-mouseleave="view.showIcons=false">
+    <span ng-transclude></span>
+
+    <span ng-show="view.showIcons">
+        <a ng-if="helpUrl && !inlineHelp"
+           target="_blank"
+           href="{{ helpUrl }}"
+           title="{{ 'CoreHome_ExternalHelp'|translate }}"
+           class="helpIcon"></a>
+
+        <a ng-if="inlineHelp"
+           title="{{ 'General_Help'|translate }}"
+           ng-click="view.showInlineHelp=!view.showInlineHelp"
+           class="helpIcon"></a>
+
+        <div class="ratingIcons"
+             piwik-rate-feature
+             title="{{ featureName }}"></div>
+    </span>
+
+    <div class="inlineHelp" ng-show="view.showIcons && view.showInlineHelp">
+        <div ng-bind-html="inlineHelp"></div>
+        <a ng-if="helpUrl"
+           target="_blank"
+           href="{{ helpUrl }}"
+           class="readMore">{{ 'General_MoreDetails'|translate }}</a>
+    </div>
+</div>

www/analytics/plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.less

@@ -0,0 +1,44 @@
+.inlineHelp {
+  display: none;
+}
+
+.enrichedHeadline {
+  min-height: 22px;
+
+  .inlineHelp {
+    display:block;
+    background: #F7F7F7;
+    font-size: 12px;
+    font-weight: normal;
+    border: 1px solid #E4E5E4;
+    margin: 10px 0 10px 0;
+    padding: 10px;
+    border-radius: 4px;
+    max-width: 500px;
+
+    .readMore {
+      margin-top: 10px;
+      display: inline-block;
+      font-weight: bold;
+    }
+  }
+
+  .ratingIcons {
+    display:inline-block;
+    vertical-align: bottom;
+  }
+
+  .helpIcon:hover {
+    opacity: 0.9;
+  }
+
+  .helpIcon {
+    cursor: pointer;
+    display:inline-block;
+    margin: 0px 0px -1px 4px;
+    width: 16px;
+    opacity: 0.3;
+    height: 16px;
+    background: url(plugins/CoreHome/angularjs/enrichedheadline/help.png) no-repeat;
+  }
+}