g_it/theming
g_it/theming
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update: Widgets and menu styling

Browse source
This commit is contained in:
Ronan 2020-01-17 17:25:07 +01:00
commit 94444594ab
20 changed files with 230 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md Normal file
View file

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

27
GoogleAnalyticsTheme.php Normal file
View file

@ -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
}
}

4
README.md
View file

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

2
config/config.php Normal file
View file

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

2
config/tracker.php Normal file
View file

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

5
docs/faq.md Normal file
View file

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

1
docs/index.md Normal file
View file

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

1
javascripts/theme.js Normal file
View file

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

31
plugin.json
View file

@ -1,30 +1,31 @@
{
"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",
"theme": true,
"require": {
"piwik": ">=3.7.0,<4.0.0-b1"
"piwik": ">=3.13.1-stable,<4.0.0-b1"
},
"stylesheet": "stylesheets/theme.less",
"homepage": "https://ronan-hello.fr",
"stylesheet": "stylesheets\/theme.less",
"javascript": "javascripts\/theme.js",
"homepage": "",
"license": "GPL v3+",
"keywords": [
"theme",
"google",
"analytics"
],
"keywords": [],
"support": {
"email": "contact@ronan-hello.fr",
"email": "",
"issues": "",
"forum": "https://forum.matomo.org",
"source": ""
"forum": "",
"irc": "",
"source": "",
"docs": "",
"wiki": "",
"rss": ""
},
"authors": [
{
"name": "Ronan HELLO",
"email": "contact@ronan-hello.fr",
"homepage": "https://ronan-hello.fr"
"name": "",
"email": "",
"homepage": ""
}
]
}

12
stylesheets/_colors.less Normal file
View file

@ -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;

10
stylesheets/_variables.less
View file

@ -1,9 +1 @@
//Main
@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;
@theme-fontFamily-base: Arial, Verdana, sans-serif;

11
stylesheets/components/_card.less Normal file
View file

@ -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 {
}
}
}

7
stylesheets/components/_header.less Normal file
View file

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

32
stylesheets/components/_menu.less Normal file
View file

@ -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;
}
}
}
}
}

4
stylesheets/components/_search.less Normal file
View file

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

24
stylesheets/components/_sparkline.less Normal file
View file

@ -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);
}

44
stylesheets/components/_widget.less Normal file
View file

@ -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);
}
}

2
stylesheets/layout/_header.less
View file

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

28
stylesheets/layout/_menu.less
View file

@ -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;
}
}

23
stylesheets/theme.less
View file

@ -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;