Merge pull request #8488 from piwik/icons

Fixes #7618, add new icons to Piwik & use where appropriate. Also includes slight re-designs to entity management tables & a new CSS API using the icons easily.

plugins/CoreAdminHome/templates/generalSettings.twig

@@ -246,8 +246,8 @@
                 {% for hostIdx, host in trustedHosts %}
                     <li>
                         <input name="trusted_host" type="text" value="{{ host }}"/>
-                        <a href="#" class="remove-trusted-host" title="{{ 'General_Delete'|translate }}">
-                            <img alt="{{ 'General_Delete'|translate }}" src="plugins/Morpheus/images/ico_delete.png" />
+                        <a href="#" class="remove-trusted-host btn btn-flat btn-lg" title="{{ 'General_Delete'|translate }}">
+                            <span class="icon-minus"></span>
                         </a>
                     </li>
                 {% endfor %}
@@ -256,8 +256,8 @@
             <div class="add-trusted-host">
                 <input type="text" placeholder="{{ 'CoreAdminHome_AddNewTrustedHost'|translate|e('html_attr') }}" readonly/>
 
-                <a href="#" title="{{ 'General_Delete'|translate }}">
-                    <img alt="{{ 'General_Delete'|translate }}" src="plugins/Morpheus/images/add.png"/>
+                <a href="#" class="btn btn-flat btn-lg" title="{{ 'General_Add'|translate }}">
+                    <span class="icon-add"></span>
                 </a>
 
             </div>

plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.html

@@ -11,12 +11,12 @@
            target="_blank"
            href="{{ helpUrl }}"
            title="{{ 'CoreHome_ExternalHelp'|translate }}"
-           class="helpIcon"></a>
+           class="helpIcon"><span class="icon-help"></span></a>
 
         <a ng-if="inlineHelp"
            title="{{ 'General_Help'|translate }}"
            ng-click="view.showInlineHelp=!view.showInlineHelp"
-           class="helpIcon"></a>
+           class="helpIcon"><span class="icon-help"></span></a>
 
         <div class="ratingIcons"
              piwik-rate-feature
@@ -31,4 +31,4 @@
            href="{{ helpUrl }}"
            class="readMore">{{ 'General_MoreDetails'|translate }}</a>
     </div>
-</div>
+</div>
\ No newline at end of file

plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less

 .inlineHelp {
-  display: none;
+    display: none;
 }
 
 .enrichedHeadline {
-  min-height: 22px;
+    min-height: 22px;
 
-  a.title {
-    cursor: pointer;
-  }
-
-  .title {
-    color: @color-black-piwik;
-  }
-
-  .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;
+    a.title {
+        cursor: pointer;
+    }
 
-    .readMore {
-      margin-top: 10px;
-      display: inline-block;
-      font-weight: bold;
+    .title {
+        color: @color-black-piwik;
     }
-  }
 
-  .ratingIcons {
-    display:inline-block;
-    vertical-align: bottom;
-  }
+    .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;
+        }
+    }
 
-  .helpIcon:hover {
-    opacity: 0.9;
-  }
+    .ratingIcons {
+        display: inline-block;
+        vertical-align: bottom;
+    }
 
-  .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;
-  }
-}
+    .helpIcon {
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 0 -1px 4px;
+        opacity: 0.3;
+        font-size: 15px;
+        &:hover {
+            opacity: 0.9;
+        }
+    }
\ No newline at end of file
+}

plugins/CoreHome/angularjs/notification/notification.directive.html

@@ -3,6 +3,6 @@
     <strong ng-if="title">{{ title }}</strong>
 
     <!-- ng-transclude causes directive child elements to be added here -->
-    <div ng-transclude style="display:inline-block"></div>
+    <div ng-transclude></div>
 
-</div>
+</div>
\ No newline at end of file

plugins/CoreHome/javascripts/dataTable_rowactions.js

@@ -360,7 +360,7 @@ DataTable_RowActions_RowEvolution.prototype.showRowEvolution = function (apiMeth
 
         if (self.dataTable !== null) {
             // remember label for multi row evolution
-            box.find('a.rowevolution-startmulti').click(function () {
+            box.find('.rowevolution-startmulti').click(function () {
                 Piwik_Popover.onClose(false); // unbind listener that resets multiEvolutionRows
                 Piwik_Popover.close();
                 return false;

plugins/CoreHome/stylesheets/dataTable/_reportDocumentation.less

@@ -17,9 +17,8 @@ table.dataTable th .columnDocumentation {
 }
 
 table.dataTable th .columnDocumentationTitle {
-  background: url(plugins/Morpheus/images/help.png) no-repeat;
   line-height: 14px;
-  padding: 2px 0 3px 21px;
+  padding: 3px 0;
   font-weight: bold;
 }
 
@@ -41,21 +40,3 @@ table.dataTable th .columnDocumentationTitle {
   color: @theme-color-text-light;
   font-size: 12px;
 }
-
-.reportDocumentationIcon {
-  display: block;
-  width: 16px;
-  height: 16px;
-  margin: 10px 0;
-  background: url(plugins/Morpheus/images/help.png) no-repeat;
-}
-
-h2 .reportDocumentationIcon {
-  position: absolute;
-  margin: 4px 0 0 0;
-  display: none;
-}
-
-h2 .reportDocumentationIcon.hidden {
-  background: none;
-}
\ No newline at end of file

plugins/CoreHome/templates/_dataTableHead.twig

@@ -5,6 +5,7 @@
                {% if properties.metrics_documentation[column]|default is not empty %}
                    <div class="columnDocumentation">
                        <div class="columnDocumentationTitle">
+                           <span class="icon-help"></span>
                            {{ properties.translations[column]|default(column)|raw }}
                        </div>
                        {{ properties.metrics_documentation[column]|raw }}

plugins/CoreHome/templates/_headerMessage.twig

@@ -6,7 +6,7 @@
 {% set updateCheck %}
 <div id="updateCheckLinkContainer">
     <span class='loadingPiwik' style="display:none;"><img src='plugins/Morpheus/images/loading-blue.gif'/></span>
-    <img class="icon" src="plugins/Morpheus/images/reload.png"/>
+    <span class="icon icon-reload"></span>
     <a href="#" id="checkForUpdates"><em>{{ 'CoreHome_CheckForUpdates'|translate }}</em></a>
 </div>
 {% endset %}
@@ -44,4 +44,4 @@
         {{ 'General_YouAreCurrentlyUsing'|translate(piwik_version) }}
     </span>
 </span>
-{% endif %}
+{% endif %}
\ No newline at end of file

plugins/CoreHome/templates/_warningInvalidHost.twig

 {# untrusted host warning #}
 {% if (isValidHost is defined and invalidHostMessage is defined and isValidHost == false) %}
     {% set invalidHostText %}
-        <a style="float:right;" href="http://piwik.org/faq/troubleshooting/#faq_171" rel="noreferrer" target="_blank"><img src="plugins/Morpheus/images/help.png"/></a>
+        <a class="btn btn-link" style="float:right;" href="http://piwik.org/faq/troubleshooting/#faq_171" rel="noreferrer" target="_blank">
+            <span class="icon-help"></span>
+            {{ 'General_Help'|translate }}
+        </a>
         <strong>{{ 'General_Warning'|translate }}:&nbsp;</strong>{{ invalidHostMessage|raw }}
 
         <br>
         <br>
 
-        <small>{{ invalidHostMessageHowToFix|raw }}
-        <br/><br/><a style="float:right;" href="http://piwik.org/faq/troubleshooting/#faq_171" rel="noreferrer" target="_blank">{{ 'General_Help'|translate }}
-        <img style="vertical-align: bottom;" src="plugins/Morpheus/images/help.png"/></a><br/>
-        </small>
+        {{ invalidHostMessageHowToFix|raw }}
     {% endset %}
 
     <div style="clear:both;width:800px;">

plugins/CoreHome/templates/getMultiRowEvolutionPopover.twig

@@ -23,7 +23,7 @@
                 </tr>
             {% endfor %}
         </table>
-        <a href="#" class="rowevolution-startmulti">&raquo; {{ 'RowEvolution_PickAnotherRow'|translate }}</a>
+        <a href="#" class="rowevolution-startmulti btn btn-flat">» {{ 'RowEvolution_PickAnotherRow'|translate }}</a>
     </div>
     {% if availableMetrics|length > 1 %}
         <div class="metric-selectbox">

plugins/CoreHome/templates/getRowEvolutionPopover.twig

@@ -7,7 +7,7 @@
     <div class="metrics-container">
         <h2>{{ availableMetricsText|raw }}</h2>
 
-        <div class="rowevolution-documentation">
+        <div class="alert alert-info">
             {{ 'RowEvolution_Documentation'|translate }}
         </div>
         <table class="metrics" border="0" cellpadding="0" cellspacing="0" data-thing="{{ seriesColorCount }}">
@@ -31,9 +31,9 @@
     <div class="compare-container">
         <h2>{{ 'RowEvolution_CompareRows'|translate }}</h2>
 
-        <div class="rowevolution-documentation">
+        <div class="alert alert-info">
             {{ 'RowEvolution_CompareDocumentation'|translate|raw }}
         </div>
-        <a href="#" class="rowevolution-startmulti">&raquo; {{ 'RowEvolution_PickARow'|translate }}</a>
+        <a href="#" class="rowevolution-startmulti btn btn-flat">» {{ 'RowEvolution_PickARow'|translate }}</a>
     </div>
 </div>

plugins/CoreVisualizations/stylesheets/jqplot.css

@@ -165,14 +165,6 @@
     color: #f00;
 }
 
-.rowevolution-documentation {
-    font-size: 12px;
-    margin: 2px 0 5px 0;
-    padding: 5px 0 5px 23px;
-    color: #888;
-    background: url(../../Morpheus/images/help.png) no-repeat left center;
-}
-
 .rowevolution .metric-selectbox,
 .rowevolution .compare-container {
     padding: 15px 0 5px 0;
@@ -185,17 +177,6 @@
     padding: 0;
 }
 
-a.rowevolution-startmulti {
-    font-size: 12px;
-    color: #7E7363;
-    font-weight: bold;
-    text-decoration: none;
-}
-
-a.rowevolution-startmulti:hover {
-    color: #444;
-}
-
 /**
  * SERIES PICKER FOR CHARTS
  */
@@ -258,4 +239,4 @@ a.rowevolution-startmulti:hover {
 .jqplot-seriespicker-popover p.pickColumn,
 .jqplot-seriespicker-popover p.pickRow {
     cursor: pointer;
-}
+}
\ No newline at end of file

plugins/Dashboard/templates/_widgetFactoryTemplate.twig

 <div id="widgetTemplate" style="display:none;">
-  <div class="widget">
-    <div class="widgetTop">
-      <div class="button" id="close">
-        <img src="plugins/Morpheus/images/close.png" title="{{ 'General_Close'|translate }}" />
-      </div>
-      <div class="button" id="maximise">
-        <img src="plugins/Morpheus/images/maximise.png" title="{{ 'Dashboard_Maximise'|translate }}" />
-      </div>
-      <div class="button" id="minimise">
-        <img src="plugins/Morpheus/images/minimise.png" title="{{ 'Dashboard_Minimise'|translate }}" />
-      </div>
-      <div class="button" id="refresh">
-        <img src="plugins/Morpheus/images/refresh.png" title="{{ 'General_Refresh'|translate }}" />
-      </div>
-      <h3 class="widgetName">{% if widgetName is defined %}{{ widgetName }}{% endif %}
-        <div class="widgetNameOffScreen">
-          {{ 'General_Widget'|translate }}
+    <div class="widget">
+        <div class="widgetTop">
+            <div class="button" id="close">
+                <span class="icon-close" title="{{ 'General_Close'|translate }}"></span>
+            </div>
+            <div class="button" id="maximise">
+                <span class="icon-fullscreen" title="{{ 'Dashboard_Maximise'|translate }}"></span>
+            </div>
+            <div class="button" id="minimise">
+                <span class="icon-minimise" title="{{ 'Dashboard_Minimise'|translate }}"></span>
+            </div>
+            <div class="button" id="refresh">
+                <span class="icon-reload" title="{{ 'General_Refresh'|translate }}"></span>
+            </div>
+            <h3 class="widgetName">{% if widgetName is defined %}{{ widgetName }}{% endif %}
+                <div class="widgetNameOffScreen">
+                    {{ 'General_Widget'|translate }}
+                </div>
+            </h3>
+        </div>
+        <div class="widgetContent">
+            <div class="widgetLoading">{{ 'Dashboard_LoadingWidget'|translate }}</div>
         </div>
-      </h3>
-    </div>
-    <div class="widgetContent">
-      <div class="widgetLoading">{{ 'Dashboard_LoadingWidget'|translate }}</div>
     </div>
-  </div>
 </div>

plugins/Goals/javascripts/goalsForm.js

@@ -37,11 +37,11 @@ function showCancel() {
 }
 
 function showCreateGoal() {
-    $("div[name=linkAddNewGoal]").show();
+    $("#add-goal").show();
 }
 
 function hideCreateGoal() {
-    $("div[name=linkAddNewGoal]").hide();
+    $("#add-goal").hide();
 }
 
 function onMatchAttributeChange(matchAttribute)
@@ -134,7 +134,7 @@ function bindGoalForm() {
         return false;
     });
 
-    $('div[name=linkAddNewGoal]').click(function () {
+    $('#add-goal').click(function () {
         initAndShowAddGoalForm();
         piwikHelper.lazyScrollTo('#goal_name');
     });
@@ -203,13 +203,13 @@ function editGoal(goalId)
 }
 
 function bindListGoalEdit() {
-    $('a[name=linkEditGoal]').click(function () {
+    $('.edit-goal').click(function () {
         var goalId = $(this).attr('id');
         editGoal(goalId);
         return false;
     });
 
-    $('a[name=linkDeleteGoal]').click(function () {
+    $('.delete-goal').click(function () {
         var goalId = $(this).attr('id');
         var goal = piwik.goals[goalId];
 

plugins/Goals/templates/_listGoalEdit.twig

@@ -29,18 +29,18 @@
                             {{ 'Goals_Pattern'|translate }} {{ goal.pattern_type }}: {{ goal.pattern }}
                         {% endif %}
                     </td>
-                    <td>{% if goal.revenue==0 %}-{% else %}{{ goal.revenue|money(idSite)|raw }}{% endif %}</td>
-                    <td>
-                        <a href='#' name="linkEditGoal" id="{{ goal.idgoal }}" class="link_but withIcon">
-                            <img src='plugins/Morpheus/images/ico_edit.png' border="0"/>
-                            {{ 'General_Edit'|translate }}
-                        </a>
+                    <td class="text-center">
+                        {% if goal.revenue==0 %}-{% else %}{{ goal.revenue|money(idSite)|raw }}{% endif %}
                     </td>
-                    <td>
-                        <a href='#' name="linkDeleteGoal" id="{{ goal.idgoal }}" class="link_but withIcon">
-                            <img src='plugins/Morpheus/images/ico_delete.png' border="0"/>
-                            {{ 'General_Delete'|translate }}
-                        </a>
+                    <td class="text-center">
+                        <button id="{{ goal.idgoal }}" class="edit-goal btn btn-flat btn-lg" title="{{ 'General_Edit'|translate }}">
+                            <span class="icon-edit"></span>
+                        </button>
+                    </td>
+                    <td class="text-center">
+                        <button id="{{ goal.idgoal }}" class="delete-goal btn btn-flat btn-lg" title="{{ 'General_Delete'|translate }}">
+                            <span class="icon-delete"></span>
+                        </button>
                     </td>
                 </tr>
             {% endfor %}
@@ -48,11 +48,12 @@
     </table>
 
     {% if onlyShowAddNewGoal is not defined %}
-        <br/>
-        <div name="linkAddNewGoal" class="addrow"><img src='plugins/Morpheus/images/add.png'/> {{ 'Goals_AddNewGoal'|translate }}</div>
-        <br/>
-        <br/>
-
+        <p>
+            <button id="add-goal" class="btn btn-lg btn-flat">
+                <span class="icon-add"></span>
+                {{ 'Goals_AddNewGoal'|translate }}
+            </button>
+        </p>
     {% endif %}
 </div>
 

plugins/Installation/stylesheets/installation.css

@@ -85,3 +85,20 @@ p.next-step:first-child {
 .warning img {
     vertical-align: bottom;
 }
+
+.system-check .icon-ok, .system-check-legend .icon-ok {
+    color: #1AA282;
+    margin-right: 10px;
+}
+.system-check .icon-warning, .system-check-legend .icon-warning {
+    color: #DF9D27;
+    margin-right: 10px;
+}
+.system-check .icon-error, .system-check-legend .icon-error {
+    color: #D73F36;
+    margin-right: 10px;
+}
+
+.system-check-legend {
+    font-size: 13px;
+}

plugins/Installation/stylesheets/systemCheckPage.less

@@ -18,3 +18,15 @@
     margin: 10px;
 }
 
+.system-check .icon-ok {
+    color: #1AA282;
+    margin-right: 10px;
+}
+.system-check .icon-warning {
+    color: #DF9D27;
+    margin-right: 10px;
+}
+.system-check .icon-error {
+    color: #D73F36;
+    margin-right: 10px;
+}

plugins/Installation/templates/_systemCheckLegend.twig

-<div id="systemCheckLegend">
-    <span style="font-size: small;">
-        <h2>{{ 'Installation_Legend'|translate }}</h2>
-        <br/>
-        <img src='plugins/Morpheus/images/warning.png'/> <span class="warn">{{ 'General_Warning'|translate }}: {{ 'Installation_SystemCheckWarning'|translate }}</span>
-        <br/>
-        <img src='plugins/Morpheus/images/error.png'/> <span style="color:red;font-weight:bold;">{{ 'General_Error'|translate }}
-            : {{ 'Installation_SystemCheckError'|translate }} </span><br/>
-        <img src='plugins/Morpheus/images/ok.png'/> <span style="color:#26981C;font-weight:bold;">{{ 'General_Ok'|translate }}</span><br/>
-    </span>
+<div class="system-check-legend">
+    <h2>{{ 'Installation_Legend'|translate }}</h2>
+
+    <p>
+        <span class="icon-ok"></span>
+        {{ 'General_Ok'|translate }}
+    </p>
+    <p>
+        <span class="icon-warning"></span>
+        {{ 'General_Warning'|translate }}: {{ 'Installation_SystemCheckWarning'|translate }}
+    </p>
+    <p>
+        <span class="icon-error"></span>
+        {{ 'General_Error'|translate }}: {{ 'Installation_SystemCheckError'|translate }}
+    </p>
 </div>
 
 <p class="next-step">

plugins/Installation/templates/_systemCheckSection.twig

@@ -15,9 +15,9 @@
     {% set error = constant('Piwik\\Plugins\\Diagnostics\\Diagnostic\\DiagnosticResult::STATUS_ERROR') %}
     {% set warning = constant('Piwik\\Plugins\\Diagnostics\\Diagnostic\\DiagnosticResult::STATUS_WARNING') %}
 
-    {% set errorIcon %}<img src='plugins/Morpheus/images/error.png' />{% endset %}
-    {% set warningIcon %}<img src='plugins/Morpheus/images/warning.png' />{% endset %}
-    {% set okIcon %}<img src='plugins/Morpheus/images/ok.png' />{% endset %}
+    {% set errorIcon %} <span class="icon-error"></span> {% endset %}
+    {% set warningIcon %} <span class="icon-warning"></span> {% endset %}
+    {% set okIcon %} <span class="icon-ok"></span> {% endset %}
 
     {% for result in results %}
         <tr>

plugins/Installation/templates/systemCheck.twig

@@ -22,7 +22,7 @@
 
     {% if not showNextStep %}
         <p>
-            <img src='plugins/Morpheus/images/link.gif'/> &nbsp;
+            <span class="icon-export"></span>
             <a href="?module=Proxy&action=redirect&url=http://piwik.org/docs/requirements/" target="_blank">{{ 'Installation_Requirements'|translate }}</a>
         </p>
         {% include "@Installation/_systemCheckLegend.twig" %}