diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2acce55 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +# Created by .ignore support plugin (hsz.mobi) +.idea/ diff --git a/CHANGELOG.md b/CHANGELOG.md index 8546318..0f2a1ae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,5 @@ ## Changelog -Here goes the changelog text. +- Write documentation, description and FAQ. +- Change the style of the search bar (QuickAccess) +- Change the style of the small buttons at the top of the dashboard. diff --git a/README.md b/README.md index dba8e31..00b837a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,15 @@ # Google Theme +Want to find the design of the current Google Analytics interface? This theme allows you to keep a visual aspect fairly close to the Google Analytics interface, without losing the organization and the power of Matomo's functionalities. ## Description -Want to find the design of the current Google Analytics interface? This theme allows you to keep a visual aspect fairly close to the Google Analytics interface, without losing the organization and the power of Matomo's functionalities. \ No newline at end of file +The theme is realized in LESS and uses the variables predefined in Matomo for better maintenance of the project in the long term. +However, some CSS classes have been rewritten in order to have a more coherent visual rendering. +This theme was created to set the interface of Matomo more user-friendly with users who used to use Google Analytics before. + +If you enjoy this theme, I will do my best to keep it updated regularly, and to stay as faithful as possible to the current design of Google Analytics. +This theme is only visual, it does not add any functionality, and does not in any way modify the HTML structure of Matomo, so there should never be any conflict with your installation of Matomo. + +__Thank you for installing !__ + +## Want more ? +If you want to have your own theme or want to develop a theme for your customers, please contact me using my email in the marketplace official page or go to https://lazuli.agency (french) \ No newline at end of file diff --git a/docs/faq.md b/docs/faq.md index dde17aa..6ca3da4 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -1,5 +1,22 @@ ## FAQ -__My question?__ +__How to install this theme__ + +This theme is available in the official marketplace of Matomo. You have to install the same way as a plugin +- Go to the administration panel +- Look for the Marketplace section and select "Theme" in the dropdown +- Then search for 'Google Theme' and install it. +- Activate the theme and you're done ! + +__Is the theme active for all Matomo users in my instance ?__ + +Yes, if you choose this theme for your Matomo instance, all users will see it. + +__How can I contribute to this theme ?__ + +You can help me developping this theme by contacting me. You can also fork the project and ask for an integration. All way you consider as legit to contribute are welcome. + +__How long this theme will be maintained ?__ + +As long as possible, I have many project to maintain, I'm the first user of this theme and I use Matomo on many project, if I see errors, I'll patch this theme faster as possible ! -My answer \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 70135e8..ddfb61d 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1 +1,16 @@ -## Documentation \ No newline at end of file +## Documentation + +This theme use LESS to override current CSS. All files and assets are in the "stylesheets" folder at the root of the theme. +To make it more readable, all differents parts are splitted in the "component" folder. + +If you want to contribute, please download the folder and continue in this direction using small and maintainable components. + +Consider this is my first Matomo theme, be compliant and please tell me how to make it better if you see any errors. + +### Overrided componants +- Page card style +- Dashboard widgets +- Header +- Site menu +- Search bar +- Sparkline (thank to https://lw1.at for showing the right way) \ No newline at end of file diff --git a/plugin.json b/plugin.json index 5bd63e6..3f52dce 100644 --- a/plugin.json +++ b/plugin.json @@ -1,7 +1,7 @@ { "name": "GoogleTheme", "description": "A sublime Google Analytics theme for Matomo", - "version": "0.1.11", + "version": "1.0.0", "theme": true, "require": { "piwik": ">=3.13.1-stable,<4.0.0-b1" @@ -11,12 +11,11 @@ "homepage": "https://lazuli.agency", "license": "GPL v3+", "keywords": [ - "Modern", "Google" + "Google Analytics", "Google", "Modern", "GA" ], "support": { "email": "contact@ronan-hello.fr", "issues": "https://lazuli.agency", - "forum": "https://lazuli.agency", "source": "https://lazuli.agency" }, "authors": [ diff --git a/screenshots/a-soft-dashboard.png b/screenshots/a-soft-dashboard.png new file mode 100644 index 0000000..e8ba4a9 Binary files /dev/null and b/screenshots/a-soft-dashboard.png differ diff --git a/screenshots/better-readability.png b/screenshots/better-readability.png new file mode 100644 index 0000000..d4331da Binary files /dev/null and b/screenshots/better-readability.png differ diff --git a/screenshots/dashboard.png b/screenshots/dashboard.png deleted file mode 100644 index c1f27cb..0000000 Binary files a/screenshots/dashboard.png and /dev/null differ diff --git a/screenshots/google-analytics-like-navigation.png b/screenshots/google-analytics-like-navigation.png new file mode 100644 index 0000000..e95dbf0 Binary files /dev/null and b/screenshots/google-analytics-like-navigation.png differ diff --git a/screenshots/new_card_design.png b/screenshots/new_card_design.png new file mode 100644 index 0000000..f5efd9e Binary files /dev/null and b/screenshots/new_card_design.png differ diff --git a/stylesheets/components/_admin_users_list.less b/stylesheets/components/_admin_users_list.less new file mode 100644 index 0000000..7ccc313 --- /dev/null +++ b/stylesheets/components/_admin_users_list.less @@ -0,0 +1,3 @@ +.userListFilters { + margin-bottom: 20px !important; +} \ No newline at end of file diff --git a/stylesheets/components/_button.less b/stylesheets/components/_button.less new file mode 100644 index 0000000..0d987c7 --- /dev/null +++ b/stylesheets/components/_button.less @@ -0,0 +1,9 @@ +.btn, input[type="button"], .button { + box-shadow: none; + text-decoration: none; + + &:hover { + opacity: 0.8; + box-shadow: none; + } +} \ No newline at end of file diff --git a/stylesheets/components/_card.less b/stylesheets/components/_card.less index 753411d..e46b831 100644 --- a/stylesheets/components/_card.less +++ b/stylesheets/components/_card.less @@ -1,11 +1,21 @@ .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); + //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); + box-shadow: none; + border: 1px solid #e6e6e6; + border-radius: 8px; + overflow: hidden; .card-content { + padding: 5px 20px 20px 20px !important; + } - .card-title { - - } + .card-table { + margin: 0 -20px !important; + border: 0; + } + .enrichedHeadline .title, .card-title { + position: relative; + font-weight: 300 !important; } } \ No newline at end of file diff --git a/stylesheets/components/_control.less b/stylesheets/components/_control.less new file mode 100644 index 0000000..00c26f7 --- /dev/null +++ b/stylesheets/components/_control.less @@ -0,0 +1,25 @@ +#root .borderedControl { + background-color: transparent; + border: 1px solid #e6e6e6; //#dadce1; + box-shadow: none; + transition: .2s ease all; + border-radius: 3px; + font-size: 11px; + font-weight: bold; + color: rgba(0, 0, 0, .65) !important; + min-width: 18px; + + .title { + color: rgba(0, 0, 0, .65) !important; + } + + &:hover { + transition: .2s ease all; + background: #e6e6e6 !important; + color: rgba(0, 0, 0, .75) !important; + + .title { + color: rgba(0, 0, 0, .75) !important; + } + } +} \ No newline at end of file diff --git a/stylesheets/components/_menu.less b/stylesheets/components/_menu.less index 638bf2d..50851cf 100644 --- a/stylesheets/components/_menu.less +++ b/stylesheets/components/_menu.less @@ -16,7 +16,8 @@ font-weight: 500; font-size: 14px; //letter-spacing: .25px; - color: rgba(0,0,0,0.54); + color: rgba(0, 0, 0, 0.54); + padding: 9px 21px 10px 19px !important; &:focus { outline: none !important; @@ -29,4 +30,8 @@ } } } +} + +#root #secondNavBar .navbar > li > ul li .item { + padding-left: 65px !important; } \ No newline at end of file diff --git a/stylesheets/components/_visitor_log.less b/stylesheets/components/_visitor_log.less new file mode 100644 index 0000000..81f2bfa --- /dev/null +++ b/stylesheets/components/_visitor_log.less @@ -0,0 +1,9 @@ +.theWidgetContent h2 { + font-weight: 300 !important; +} + +.dataTableVizVisitorLog .card { + box-shadow: none; + border: 1px solid #e6e6e6; + border-radius: 8px; +} \ No newline at end of file diff --git a/stylesheets/components/_widget.less b/stylesheets/components/_widget.less index 83af5eb..bcb360c 100644 --- a/stylesheets/components/_widget.less +++ b/stylesheets/components/_widget.less @@ -35,10 +35,21 @@ } .widgetContent { - border-radius: 2px; + background-color: #ffffff; + /*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); + 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);*/ + + padding-top: 15px; + box-shadow: none; + border: 1px solid #e6e6e6; + border-radius: 8px; + overflow: hidden; + + .dataTable, .card { + margin-top: -15px; + border: none !important; + } } } \ No newline at end of file diff --git a/stylesheets/theme.less b/stylesheets/theme.less index 1e6a7c8..9ba7633 100644 --- a/stylesheets/theme.less +++ b/stylesheets/theme.less @@ -1,11 +1,15 @@ @import "_colors"; @import "_variables"; +@import "components/_admin_users_list"; +@import "components/_button"; @import "components/_card"; +@import "components/_control"; @import "components/_header"; @import "components/_menu"; @import "components/_search"; @import "components/_sparkline"; +@import "components/_visitor_log"; @import "components/_widget"; @theme-color-brand: #1a73e8;