Use more font icons instead of images (#12532)

* Use more font icons instead of images

* update ui files

* fix test

* update UI files

4 files changed, 24 insertions, 38 deletions

diff --git a/plugins/Overlay/javascripts/Piwik_Overlay.js b/plugins/Overlay/javascripts/Piwik_Overlay.js
index b409911e49..2b18578147 100644
--- a/plugins/Overlay/javascripts/Piwik_Overlay.js
+++ b/plugins/Overlay/javascripts/Piwik_Overlay.js
@@ -8,7 +8,7 @@
 var Piwik_Overlay = (function () {
 
     var $body, $iframe, $sidebar, $main, $location, $loading, $errorNotLoading;
-    var $rowEvolutionLink, $transitionsLink, $fullScreenLink, $visitorLogLink;
+    var $rowEvolutionLink, $transitionsLink, $visitorLogLink;
 
     var idSite, period, date, segment;
 
@@ -103,7 +103,6 @@ var Piwik_Overlay = (function () {
         $sidebar.hide();
         $location.hide();
 
-        $fullScreenLink.hide();
         $rowEvolutionLink.hide();
         $transitionsLink.hide();
         $visitorLogLink.hide();
@@ -114,7 +113,6 @@ var Piwik_Overlay = (function () {
     /** Hide the loading message */
     function hideLoading() {
         $loading.hide();
-        $fullScreenLink.show();
     }
 
     function getOverlaySegment(url) {
@@ -176,7 +174,6 @@ var Piwik_Overlay = (function () {
 
             $rowEvolutionLink = $('#overlayRowEvolution');
             $transitionsLink = $('#overlayTransitions');
-            $fullScreenLink = $('#overlayFullScreen');
             $visitorLogLink = $('#overlaySegmentedVisitorLog');
 
             adjustDimensions();
@@ -261,16 +258,6 @@ var Piwik_Overlay = (function () {
                 SegmentedVisitorLog.show('Actions.getPageUrls', $('#segment').val(), {});
                 return false;
             });
-
-            // handle full screen link
-            $fullScreenLink.click(function () {
-                var href = iframeSrcBase;
-                if (iframeCurrentPage) {
-                    href += '#' + iframeCurrentPage.replace(/#/g, '%23');
-                }
-                window.location.href = href;
-                return false;
-            });
         },
 
         /** This callback is used from within the iframe */
diff --git a/plugins/Overlay/javascripts/rowaction.js b/plugins/Overlay/javascripts/rowaction.js
index de063b990e..f4e733433d 100644
--- a/plugins/Overlay/javascripts/rowaction.js
+++ b/plugins/Overlay/javascripts/rowaction.js
@@ -65,8 +65,7 @@ DataTable_RowActions_Registry.register({
 
     name: 'Overlay',
 
-    dataTableIcon: 'plugins/Overlay/images/overlay_icon.png',
-    dataTableIconHover: 'plugins/Overlay/images/overlay_icon_hover.png',
+    dataTableIcon: 'icon-overlay',
 
     order: 30,
 
diff --git a/plugins/Overlay/stylesheets/overlay.css b/plugins/Overlay/stylesheets/overlay.css
index 257ae31d9a..42585250b3 100644
--- a/plugins/Overlay/stylesheets/overlay.css
+++ b/plugins/Overlay/stylesheets/overlay.css
@@ -16,7 +16,7 @@ body #header {
 }
 
 a#overlayTitle {
-    font-size: 12px;
+    font-size: 16px;
     text-decoration: none;
     color: #4d4d4d;
     margin-left: 10px;
@@ -27,8 +27,14 @@ a#overlayTitle .icon-help {
 
 #overlayDateRangeSelection {
     padding: 0 0 0 25px;
-    background: url(../../Morpheus/images/icon-calendar.png) 2px center no-repeat;
     margin: 20px 10px;
+    position: relative;
+}
+
+#overlayDateRangeSelection .icon-calendar {
+    position: absolute;
+    top: 18px;
+    left: 2px;
 }
 
 #overlayLocation, .overlaySegment {
@@ -62,7 +68,6 @@ a#overlayTitle .icon-help {
 #overlaySidebar h2 {
     font-size: 15px;
     margin: 0 0 8px 0;
-    color: #255792;
 }
 
 .overlayMainMetrics {
@@ -70,7 +75,6 @@ a#overlayTitle .icon-help {
 }
 
 a#overlaySegmentedVisitorLog,
-a#overlayFullScreen,
 a#overlayRowEvolution,
 a#overlayTransitions {
     display: block;
@@ -78,30 +82,24 @@ a#overlayTransitions {
     font-size: 13px;
     line-height: 15px;
     margin: 0 0 0 10px;
-    padding: 8px 10px 3px 25px;
+    padding: 8px 10px 3px 0;
     text-decoration: none;
 }
 
-a#overlayRowEvolution {
-    margin-top: 20px;
-    background: url(../../Morpheus/images/row_evolution_hover.png) no-repeat 0 7px;
-}
-
-a#overlayTransitions {
-    background: url(../../Transitions/images/transitions_icon_hover.png) no-repeat 0 6px;
-}
-
-a#overlaySegmentedVisitorLog {
-    background: url(../../Live/images/visitorlog-hover.png) no-repeat 0 8px;
+a#overlaySegmentedVisitorLog .icon,
+a#overlayRowEvolution .icon,
+a#overlayTransitions .icon {
+    font-size: 18px;
+    display: block;
+    float: left;
+    margin-right: 5px;
 }
 
-a#overlayFullScreen {
+a#overlayRowEvolution {
     margin-top: 20px;
-    background: url(../../Morpheus/images/fullscreen.png) no-repeat 3px 8px;
 }
 
 a#overlaySegmentedVisitorLog:hover,
-a#overlayFullScreen:hover,
 a#overlayRowEvolution:hover,
 a#overlayTransitions:hover {
     color: #E87500;
diff --git a/plugins/Overlay/templates/index.twig b/plugins/Overlay/templates/index.twig
index 8d51270764..f47b875fc7 100644
--- a/plugins/Overlay/templates/index.twig
+++ b/plugins/Overlay/templates/index.twig
@@ -14,6 +14,8 @@
         </a>
 
         <div id="overlayDateRangeSelection">
+
+            <span class="icon icon-calendar"></span>
             <select id="overlayDateRangeSelect" name="overlayDateRangeSelect">
                 <option value="day;today">{{ 'Intl_Today'|translate }}</option>
                 <option value="day;yesterday">{{ 'Intl_Yesterday'|translate }}</option>
@@ -49,9 +51,9 @@
 
         <div id="overlaySidebar"></div>
 
-        <a id="overlayRowEvolution">{{ 'General_RowEvolutionRowActionTooltipTitle'|translate }}</a>
-        <a id="overlayTransitions">{{ 'General_TransitionsRowActionTooltipTitle'|translate }}</a>
-        <a id="overlaySegmentedVisitorLog">{{ 'Live_RowActionTooltipTitle'|translate }}</a>
+        <a id="overlayRowEvolution"><span class="icon icon-evolution"></span>{{ 'General_RowEvolutionRowActionTooltipTitle'|translate }}</a>
+        <a id="overlayTransitions"><span class="icon icon-transition"></span>{{ 'General_TransitionsRowActionTooltipTitle'|translate }}</a>
+        <a id="overlaySegmentedVisitorLog"><span class="icon icon-visitor-profile"></span>{{ 'Live_RowActionTooltipTitle'|translate }}</a>
 
         {{ postEvent('Template.afterOverlaySidebar') }}
     </div>