update: Widgets and menu styling

CHANGELOG.md

@@ -0,0 +1,3 @@
+## Changelog
+
+Here goes the changelog text.

GoogleAnalyticsTheme.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ *
+ */
+
+namespace Piwik\Plugins\GoogleAnalyticsTheme;
+
+use Piwik\Plugin;
+
+class GoogleAnalyticsTheme extends Plugin
+{
+    public function getListHooksRegistered()
+    {
+        return [
+            'Theme.configureThemeVariables' => 'configureThemeVariables',
+        ];
+    }
+
+    public function configureThemeVariables(Plugin\ThemeStyles $vars)
+    {
+        //Nothing here
+    }
+}

README.md

@@ -1,3 +1,5 @@
-# Matomo: Google Analytics Theme
+# Matomo ATestTheme Theme
 
 ## Description
+
+Add your theme description here.

config/config.php

@@ -0,0 +1,2 @@
+<?php
+return array();

config/tracker.php

@@ -0,0 +1,2 @@
+<?php 
+return array();

docs/faq.md

@@ -0,0 +1,5 @@
+## FAQ
+
+__My question?__
+
+My answer

docs/index.md

@@ -0,0 +1 @@
+## Documentation

javascripts/theme.js

@@ -0,0 +1 @@
+console.log('TEST');

plugin.json

@@ -1,30 +1,31 @@
 {
-  "name": "Google Analytics Theme",
+    "name": "Google Analytics Theme",
-  "description": "Bring Google Analytics Colors to Matomo",
+    "description": "Matomo Platform showcase: example of how to create a simple Theme.",
-  "version": "0.1.0",
+    "version": "0.1.0",
-  "theme": true,
+    "theme": true,
-  "require": {
+    "require": {
-    "piwik": ">=3.7.0,<4.0.0-b1"
+        "piwik": ">=3.13.1-stable,<4.0.0-b1"
-  },
+    },
-  "stylesheet": "stylesheets/theme.less",
+    "stylesheet": "stylesheets\/theme.less",
-  "homepage": "https://ronan-hello.fr",
+    "javascript": "javascripts\/theme.js",
-  "license": "GPL v3+",
+    "homepage": "",
-  "keywords": [
+    "license": "GPL v3+",
-    "theme",
+    "keywords": [],
-    "google",
+    "support": {
-    "analytics"
+        "email": "",
-  ],
+        "issues": "",
-  "support": {
+        "forum": "",
-    "email": "contact@ronan-hello.fr",
+        "irc": "",
-    "issues": "",
+        "source": "",
-    "forum": "https://forum.matomo.org",
+        "docs": "",
-    "source": ""
+        "wiki": "",
-  },
+        "rss": ""
-  "authors": [
+    },
-    {
+    "authors": [
-      "name": "Ronan HELLO",
+        {
-      "email": "contact@ronan-hello.fr",
+            "name": "",
-      "homepage": "https://ronan-hello.fr"
+            "email": "",
-    }
+            "homepage": ""
-  ]
+        }
+    ]
 }

stylesheets/_colors.less

@@ -0,0 +1,12 @@
+@theme-color-brand: #1a73e8;
+@theme-color-background-base: #f8f9fa;
+@theme-color-header-background: #ffffff;
+@theme-color-header-text: #5f6368;
+
+@theme-color-widget-title-background: #f8f9fa;
+@theme-color-widget-title-text: #4a4a4a;
+
+@theme-color-menu-contrast-text: rgba(0,0,0,0.54);
+@theme-color-menu-contrast-textActive: #3c4043;
+@theme-color-menu-contrast-textSelected: #1a73e8;
+@theme-color-menu-contrast-background: transprent;

stylesheets/_variables.less

@@ -1,9 +1 @@
-//Main
+@theme-fontFamily-base: Arial, Verdana, sans-serif;
-@theme-color-background-base: #f8f9fa;
-@theme-color-brand: #4285f4;
-
-//Menu
-@theme-color-menu-contrast-text: #727273;
-@theme-color-menu-contrast-textSelected: #1a73e8;
-@theme-color-menu-contrast-textActive: #3c4043;
-@theme-color-menu-contrast-background: transparent;

stylesheets/components/_card.less

@@ -0,0 +1,11 @@
+.card {
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+
+  .card-content {
+
+    .card-title {
+
+    }
+
+  }
+}

stylesheets/components/_header.less

@@ -0,0 +1,7 @@
+nav {
+  box-shadow: none !important;
+
+  .nav-wrapper {
+    border-bottom: 1px solid #dadce0;
+  }
+}

stylesheets/components/_menu.less

@@ -0,0 +1,32 @@
+#secondNavBar {
+
+  ul {
+    & > li > ul > li.active > .item {
+      background-color: #e8f0fe !important;
+    }
+
+    li {
+
+      &.active > a {
+        background-color: #e8eaed !important;
+      }
+
+      a {
+        border-radius: 0 50em 50em 0;
+        font-weight: 500;
+        font-size: 14px;
+        //letter-spacing: .25px;
+        color: rgba(0,0,0,0.54);
+
+        &:focus {
+          outline: none !important;
+        }
+
+        &:hover {
+          background-color: #dadce1 !important;
+          transition: .2s ease all;
+        }
+      }
+    }
+  }
+}

stylesheets/components/_search.less

@@ -0,0 +1,4 @@
+.quick-access {
+  background-color: transparent;
+  box-shadow: none !important;
+}

stylesheets/components/_sparkline.less

@@ -0,0 +1,24 @@
+// sparkline colors
+.sparkline-colors[data-name=backgroundColor] {
+  color: white;
+}
+
+.sparkline-colors[data-name=lineColor] {
+  color: #058DC7;
+}
+
+.sparkline-colors[data-name=minPointColor] {
+  color: #058DC7 //darken(#058DC7, 10);
+}
+
+.sparkline-colors[data-name=maxPointColor] {
+  color: #058DC7 //darken(#058DC7, 10);
+}
+
+.sparkline-colors[data-name=lastPointColor] {
+  color: white; //hidden
+}
+
+.sparkline-colors[data-name=fillColor] {
+  color: lighten(#058DC7, 55);
+}

stylesheets/components/_widget.less

@@ -0,0 +1,44 @@
+.widget {
+  background-color: transparent;
+  box-shadow: none;
+  border: none !important;
+
+  &:hover {
+    box-shadow: none;
+  }
+
+  .widgetTop {
+    border: none;
+    background-color: transparent;
+    padding: 0 !important;
+
+    .buttons {
+      background: @theme-color-background-base;
+      top: 4px;
+      right: 0;
+      padding-left: 0;
+
+      .button {
+        margin-top: 0px;
+
+        &:first-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .widgetName {
+      padding: 0 0 15px 0 !important;
+      font-weight: 300;
+      color: #4a4a4a;
+    }
+  }
+
+  .widgetContent {
+    border-radius: 2px;
+    border: none;
+    padding: 14px;
+    background-color: #ffffff;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+  }
+}

stylesheets/layout/_header.less

@@ -1,2 +0,0 @@
-@theme-color-header-background: #ffffff;
-@theme-color-header-text: #5f6368;

stylesheets/layout/_menu.less

@@ -1,28 +0,0 @@
-
-
-#root #secondNavBar .navbar {
-  border-top: 1px solid rgba(0, 0, 0, 0.08);;
-}
-
-#root .borderedControl {
-  box-shadow: none;
-  background-color: transparent;
-  transition: .2s ease all;
-
-  &:hover {
-    background-color: rgba(158, 158, 158, 0.2);
-    transition: .2s ease all;
-  }
-}
-
-#root #secondNavBar .navbar > li .item {
-  padding: 10px 21px 10px 19px;
-  border-radius: 0 50em 50em 0;
-  background-color: transparent;
-  transition: .2s ease all;
-
-  &:hover {
-    background-color: #dadce0;
-    transition: .2s ease all;
-  }
-}

stylesheets/theme.less

@@ -1,3 +1,22 @@
+@import "_colors";
 @import "_variables";
-@import "layout/_header";
+
-@import "layout/_menu";
+@import "components/_card";
+@import "components/_header";
+@import "components/_menu";
+@import "components/_search";
+@import "components/_sparkline";
+@import "components/_widget";
+
+@theme-color-brand: #1a73e8;
+@theme-color-background-base: #f8f9fa;
+@theme-color-header-background: #ffffff;
+@theme-color-header-text: #5f6368;
+
+@theme-color-widget-title-background: #f8f9fa;
+@theme-color-widget-title-text: #4a4a4a;
+
+@theme-color-menu-contrast-text: rgba(0,0,0,0.54);
+@theme-color-menu-contrast-textActive: #3c4043;
+@theme-color-menu-contrast-textSelected: #1a73e8;
+@theme-color-menu-contrast-background: transprent;