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.

10 files changed, 475 insertions, 32 deletions

diff --git a/plugins/Morpheus/fonts/piwik.eot b/plugins/Morpheus/fonts/piwik.eot
new file mode 100644
index 0000000000..bd41afad9e
--- /dev/null
+++ b/plugins/Morpheus/fonts/piwik.eot
diff --git a/plugins/Morpheus/fonts/piwik.ttf b/plugins/Morpheus/fonts/piwik.ttf
new file mode 100644
index 0000000000..c81d69e10c
--- /dev/null
+++ b/plugins/Morpheus/fonts/piwik.ttf
diff --git a/plugins/Morpheus/stylesheets/base.less b/plugins/Morpheus/stylesheets/base.less
index dba6565672..bf2bfd1749 100644
--- a/plugins/Morpheus/stylesheets/base.less
+++ b/plugins/Morpheus/stylesheets/base.less
@@ -5,6 +5,7 @@
 @import "theme-advanced";
 @import "base/mixins";
 @import "base/bootstrap.css";
+@import "base/icons.css";
 
 /* General styles */
 @import "general/_default.less";
diff --git a/plugins/Morpheus/stylesheets/base/icons.css b/plugins/Morpheus/stylesheets/base/icons.css
new file mode 100644
index 0000000000..3424d8a655
--- /dev/null
+++ b/plugins/Morpheus/stylesheets/base/icons.css
@@ -0,0 +1,238 @@
+@font-face {
+    font-family: 'piwik';
+    src: url('../../fonts/piwik.eot');
+}
+@font-face {
+    font-family: 'piwik';
+    src: url('../../fonts/piwik.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+    font-family: 'piwik';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-alien:before {
+    content: "\e600";
+}
+.icon-add:before {
+    content: "\e630";
+}
+.icon-annotation:before {
+    content: "\e601";
+}
+.icon-arrow-bottom:before {
+    content: "\e63b";
+}
+.icon-arrow-collapsed:before {
+    content: "\e60b";
+}
+.icon-arrow-left:before {
+    content: "\e602";
+}
+.icon-arrow-right:before {
+    content: "\e603";
+}
+.icon-arrow-top:before {
+    content: "\e63a";
+}
+.icon-business:before {
+    content: "\e604";
+}
+.icon-calendar:before {
+    content: "\e605";
+}
+.icon-chart-bar:before {
+    content: "\e606";
+}
+.icon-chart-line:before {
+    content: "\e608";
+}
+.icon-chart-line-details:before {
+    content: "\e607";
+}
+.icon-chart-pie:before {
+    content: "\e609";
+}
+.icon-close:before {
+    content: "\e60a";
+}
+.icon-code:before {
+    content: "\e620";
+}
+.icon-configure:before {
+    content: "\e60c";
+}
+.icon-delete:before {
+    content: "\e60f";
+}
+.icon-document:before {
+    content: "\e610";
+}
+.icon-download:before {
+    content: "\e611";
+}
+.icon-drop:before {
+    content: "\e612";
+}
+.icon-ecommerce-abandoned-cart:before {
+    content: "\e613";
+}
+.icon-ecommerce-order:before {
+    content: "\e614";
+}
+.icon-edit:before {
+    content: "\e622";
+}
+.icon-email:before {
+    content: "\e615";
+}
+.icon-error:before {
+    content: "\e616";
+}
+.icon-export:before {
+    content: "\e617";
+}
+.icon-feed:before {
+    content: "\e618";
+}
+.icon-finance:before {
+    content: "\e619";
+}
+.icon-folder:before {
+    content: "\e61b";
+}
+.icon-folder-charts:before {
+    content: "\e61a";
+}
+.icon-fullscreen:before {
+    content: "\e61c";
+}
+.icon-goal:before {
+    content: "\e61d";
+}
+.icon-help:before {
+    content: "\e61f";
+}
+.icon-help-alt:before {
+    content: "\e61e";
+}
+.icon-hide:before {
+    content: "\e638";
+}
+.icon-image:before {
+    content: "\e623";
+}
+.icon-info:before {
+    content: "\e624";
+}
+.icon-insights:before {
+    content: "\e625";
+}
+.icon-locked:before {
+    content: "\e627";
+}
+.icon-locked-2:before {
+    content: "\e626";
+}
+.icon-locked-3:before {
+    content: "\e628";
+}
+.icon-locked-4:before {
+    content: "\e629";
+}
+.icon-maximise:before {
+    content: "\e62a";
+}
+.icon-minimise:before {
+    content: "\e62b";
+}
+.icon-minus:before {
+    content: "\e62c";
+}
+.icon-newtab:before {
+    content: "\e62d";
+}
+.icon-ok:before {
+    content: "\e62e";
+}
+.icon-open-source:before {
+    content: "\e62f";
+}
+.icon-play:before {
+    content: "\e643";
+}
+.icon-plus:before {
+    content: "\e630";
+}
+.icon-puzzle:before {
+    content: "\e631";
+}
+.icon-refresh:before {
+    content: "\e632";
+}
+.icon-reload:before {
+    content: "\e633";
+}
+.icon-search:before {
+    content: "\e634";
+}
+.icon-segment:before {
+    content: "\e635";
+}
+.icon-server:before {
+    content: "\e637";
+}
+.icon-server-alt:before {
+    content: "\e636";
+}
+.icon-show:before {
+    content: "\e639";
+}
+.icon-star:before {
+    content: "\e63c";
+}
+.icon-success:before {
+    content: "\e63d";
+}
+.icon-table:before {
+    content: "\e63f";
+}
+.icon-table-more:before {
+    content: "\e63e";
+}
+.icon-tag-cloud:before {
+    content: "\e640";
+}
+.icon-user:before {
+    content: "\e642";
+}
+.icon-user-add:before {
+    content: "\e641";
+}
+.icon-users:before {
+    content: "\e635";
+}
+.icon-visitor-profile:before {
+    content: "\e644";
+}
+.icon-warning:before {
+    content: "\e621";
+}
+.icon-zoom-in:before {
+    content: "\e645";
+}
+.icon-zoom-out:before {
+    content: "\e646";
+}
diff --git a/plugins/Morpheus/stylesheets/general/_forms.less b/plugins/Morpheus/stylesheets/general/_forms.less
index a7a963b1a2..49c5358f1d 100644
--- a/plugins/Morpheus/stylesheets/general/_forms.less
+++ b/plugins/Morpheus/stylesheets/general/_forms.less
@@ -89,14 +89,9 @@ select {
     }
 
     .form-help {
-        .alert;
-        .alert-info;
         float: right;
         width: 58%;
         margin-bottom: 0;
-        // Smaller padding to match input's heights
-        padding-top: 11px;
-        padding-bottom: 10px;
     }
 
     label .form-description {
@@ -120,6 +115,19 @@ select {
     }
 }
 
+// TODO Form helps are used outside of forms in UserCountry (old table layout)
+// Once this plugin uses the new form layout, move those rules back into ".form-group .form-help"
+.form-help {
+    .alert;
+    .alert-info;
+    // Smaller padding to match input's heights
+    padding: 11px 20px 10px;
+    &:before {
+        // Remove the icon
+        content: "";
+    }
+}
+
 .form-description {
     color: @theme-color-text-lighter;
     font-style: italic;
diff --git a/plugins/Morpheus/stylesheets/general/_typography.less b/plugins/Morpheus/stylesheets/general/_typography.less
index 717f049189..7c15478723 100644
--- a/plugins/Morpheus/stylesheets/general/_typography.less
+++ b/plugins/Morpheus/stylesheets/general/_typography.less
@@ -81,20 +81,10 @@ ul.widgetpreview-widgetlist, ul.widgetpreview-categorylist {
     background: none !important;
 }
 
-a#overlayTitle {
-    color: #4d4d4d !important;
-    .font-default(12px, 14px) !important;
-    margin-left: 15px !important;
-}
-
 a {
     color: @theme-color-link;
 }
 
-a.rowevolution-startmulti {
-    color: @theme-color-link !important;
-}
-
 .Piwik_Popover_Loading_Subject {
     color: @theme-color-link !important;
 }
diff --git a/plugins/Morpheus/stylesheets/main.less b/plugins/Morpheus/stylesheets/main.less
index 945ff6aeb5..f89c437fce 100644
--- a/plugins/Morpheus/stylesheets/main.less
+++ b/plugins/Morpheus/stylesheets/main.less
@@ -874,13 +874,6 @@ tr:hover #token_auth {
   background: #FFFFF7;
 }
 
-table#users {
-    .deleteuser:hover > span,
-    .edituser:hover > span {
-        text-decoration: underline;
-    }
-}
-
 // previous style overrides
 #header_message a {
     text-decoration: underline;
diff --git a/plugins/Morpheus/stylesheets/ui/_alerts.less b/plugins/Morpheus/stylesheets/ui/_alerts.less
index 2c95143d85..0b6ceebf95 100644
--- a/plugins/Morpheus/stylesheets/ui/_alerts.less
+++ b/plugins/Morpheus/stylesheets/ui/_alerts.less
@@ -1,10 +1,28 @@
-// Code taken from Bootstrap (can be removed in the future)
+.alert-icon-center-vertically(@font-size) {
+    @half-height: @font-size / 2;
+    // IE8 doesn't support calc(): it's OK, the icon will just be aligned to the top
+    top: calc(~'50% - @{half-height}');
+    // phantomjs only supports -webkit-calc()
+    top: -webkit-calc(~'50% - @{half-height}');
+}
+
 .alert {
-    padding: 20px;
+    padding: 20px 20px 20px 60px;
     margin-bottom: 20px;
     border: 1px solid transparent;
     border-radius: 2px;
     font-size: 14px;
+    position: relative;
+    &:before {
+        font-family: "piwik";
+        content: "\e625";
+        position: absolute;
+        left: 20px;
+        line-height: 100%; // line-height = font-size
+        font-size: 24px;
+        .alert-icon-center-vertically(24px);
+    }
+
     a {
         color: inherit;
         text-decoration: underline;
@@ -13,18 +31,36 @@
 .alert-success {
     color: #009874;
     border-color: #1AA282;
+    &:before {
+        content: "\e63d";
+        color: #1AA282;
+    }
 }
 .alert-info {
     color: #838383;
     background-color: #F5F5F5;
     font-size: 13px;
-    padding: 15px 20px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    &:before {
+        color: #afafaf;
+        font-size: 20px;
+        .alert-icon-center-vertically(20px);
+    }
 }
 .alert-warning {
     color: #CA8100;
     border-color: #DF9D27;
+    &:before {
+        content: "\e621";
+        color: #DF9D27;
+    }
 }
 .alert-danger {
     color: #D4291F;
     border-color: #D73F36;
+    &:before {
+        content: "\e616";
+        color: #D73F36;
+    }
 }
diff --git a/plugins/Morpheus/stylesheets/ui/_buttons.less b/plugins/Morpheus/stylesheets/ui/_buttons.less
index aac95e6dd1..ce5417007d 100644
--- a/plugins/Morpheus/stylesheets/ui/_buttons.less
+++ b/plugins/Morpheus/stylesheets/ui/_buttons.less
@@ -52,17 +52,30 @@ input[type="submit"]:not(.btn),
 }
 // See http://getbootstrap.com/css/#buttons-options
 .btn.btn-link {
-    // We have to use !important unfortunately because the default button style uses it...
-    background: transparent !important;
-    color: @theme-color-link !important;
-    text-decoration: underline !important;
+    background: transparent;
+    color: @theme-color-link;
+    text-decoration: underline;
     box-shadow: none;
 }
 .btn.btn-noop {
-    // We have to use !important unfortunately because the default button style uses it...
-    background: transparent !important;
-    color: @theme-color-text !important;
+    background: transparent;
+    color: @theme-color-text;
     pointer-events: none;
     cursor: not-allowed;
     box-shadow: none;
 }
+
+.btn.btn-flat {
+    background: transparent;
+    border-radius: 0;
+    color: @theme-color-text-light;
+    box-shadow: none;
+    padding: 5px 10px;
+    &:hover {
+        background-color: #eaeaea;
+        text-decoration: none;
+    }
+    &.btn-lg {
+        padding: 12px;
+    }
+}
diff --git a/plugins/Morpheus/templates/demo.twig b/plugins/Morpheus/templates/demo.twig
index de1f4da884..f95af42117 100644
--- a/plugins/Morpheus/templates/demo.twig
+++ b/plugins/Morpheus/templates/demo.twig
@@ -46,6 +46,15 @@
             border: 1px solid #e3e3e3;
             border-radius: 4px;
         }
+        .icons h4 {
+            padding-top: 15px;
+            padding-bottom: 10px;
+        }
+        .icons .icon {
+            font-family: monospace, monospace;
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
     </style>
 {% endblock %}
 
@@ -186,6 +195,30 @@
 &lt;a class=&quot;btn btn-lg btn-block&quot; href=&quot;#&quot;&gt;Large block button&lt;/a&gt;</pre>
         </div>
 
+        <h3>Link buttons</h3>
+
+        <div class="demo">
+            <a class="btn btn-link" href="#">Link button</a>
+        </div>
+        <div class="demo-code">
+            <pre>&lt;a class=&quot;btn btn-link&quot; href=&quot;#&quot;&gt;Flat button&lt;/a&gt;</pre>
+        </div>
+
+        <h3>Flat buttons</h3>
+
+        <div class="demo">
+            <a class="btn btn-flat" href="#">Flat button</a>
+            <a class="btn btn-flat" href="#"><span class="icon-add"></span></a>
+            <a class="btn btn-flat btn-lg" href="#">Flat button</a>
+            <a class="btn btn-flat btn-lg" href="#"><span class="icon-add"></span></a>
+        </div>
+        <div class="demo-code">
+            <pre>&lt;a class=&quot;btn btn-flat&quot; href=&quot;#&quot;&gt;Flat button&lt;/a&gt;
+&lt;a class=&quot;btn btn-flat&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;icon-add&quot;&gt;&lt;/span&gt;&lt;/a&gt;
+&lt;a class=&quot;btn btn-flat btn-lg&quot; href=&quot;#&quot;&gt;Flat button&lt;/a&gt;
+&lt;a class=&quot;btn btn-flat btn-lg&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;icon-add&quot;&gt;&lt;/span&gt;&lt;/a&gt;</pre>
+        </div>
+
         <h2>Alerts</h2>
 
         <div class="demo">
@@ -423,6 +456,137 @@
             <pre>&lt;table&gt;...&lt;/table&gt;</pre>
         </div>
 
+        <h2>Icons</h2>
+
+        <div id="icons" class="demo icons">
+        </div>
+        <div class="demo-code">
+            <pre>&lt;span class=&quot;icon-ok&quot;&gt;&lt;/span&gt;</pre>
+        </div>
+
+        <script>
+            $(function () {
+
+                var icons = {
+                    'Manage': [
+                        'add',
+                        'edit',
+                        'delete',
+                        'plus',
+                        'minus',
+                    ],
+                    'Alerts': [
+                        'error',
+                        'warning',
+                        'info',
+                        'success',
+                        'help',
+                        'help-alt',
+                        'ok',
+                    ],
+                    'Navigation': [
+                        'arrow-left',
+                        'arrow-right',
+                        'arrow-top',
+                        'arrow-bottom',
+                        'arrow-collapsed',
+                        'zoom-in',
+                        'zoom-out',
+                        'show',
+                        'hide',
+                        'search',
+                    ],
+                    'Window-Widget': [
+                        'minimise',
+                        'fullscreen',
+                        'close',
+                        'maximise',
+                        'newtab',
+                        'refresh',
+                        'reload',
+                    ],
+                    'Reports': [
+                        'table',
+                        'table-more',
+                        'chart-bar',
+                        'chart-pie',
+                        'chart-line',
+                        'chart-line-details',
+                    ],
+                    'Users': [
+                        'user',
+                        'user-add',
+                        'users',
+                        'alien',
+                    ],
+                    'Date-picker': [
+                        'calendar',
+                    ],
+                    'Annotations': [
+                        'annotation',
+                    ],
+                    'E-commerce': [
+                        'ecommerce-order',
+                        'ecommerce-abandoned-cart',
+                    ],
+                    'Goals': [
+                        'goal',
+                    ],
+                    'Insights': [
+                        'insights',
+                    ],
+                    'Segments': [
+                        'segment',
+                    ],
+                    'Visitors': [
+                        'visitor-profile',
+                    ],
+                    'Lock': [
+                        'locked',
+                        'locked-2',
+                        'locked-3',
+                        'locked-4',
+                    ],
+                    'Other': [
+                        'configure',
+                        'document',
+                        'email',
+                        'export',
+                        'feed',
+                        'download',
+                        'image',
+                        'code',
+                        'star',
+                        'drop',
+                        'business',
+                        'finance',
+                        'folder',
+                        'folder-charts',
+                        'open-source',
+                        'puzzle',
+                        'server',
+                        'server-alt',
+                        'tag-cloud',
+                        'play',
+                    ],
+                };
+
+                var iconsDiv = $('#icons');
+                for(var category in icons) {
+                    if (icons.hasOwnProperty(category)) {
+                        iconsDiv.append('<h4>' + category + '</h4>');
+                        var row = $('<div class="row"></div>');
+                        icons[category].forEach(function(icon) {
+                            icon = 'icon-' + icon;
+                            row.append('<div class="col-sm-4 icon"><span class="' + icon + '"></span> ' + icon + '</div>');
+                        });
+                        iconsDiv.append(row);
+                    }
+                }
+
+            });
+        </script>
+
     </div>
 
 {% endblock %}