Removes color customization options in favor of user.css.

kalvn · Sep 27, 2017 · 538dfb2 · 538dfb2
1 parent a1668e6
commit 538dfb2
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,11 +9,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Tag list view
 - Creation date when editing a link
 - Filter in the toolbar to display only untagged links
+- Batch link selection and deletion
 - Icons from iconfont in toolbar, Tools page, floating add button, etc.
 - 3rd party plugins and application on Tools page
+- Icon for notes in link list
 
 ### Changed
 - Plugin error design is better integrated
 
+### Removed
+- config.MATERIAL_COLOR, config.MATERIAL_COLOR_FOCUS and config.MATERIAL_COLOR_ACTIVE customization options. The first one is still present but only acts on a meta tag in `<head>`. They are replaced by `data/user.css` with an example in `user.example.css`.
+
 ### Fixed
 - Auto-complete plugin for search field is now only initialized once
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ If you install an older version, please read the README.md file you'll find in t
 
 
 ## Compatibility
-Shaarli Material was tested and validated on *Shaarli 0.9.0*.
+Shaarli Material was tested and validated on *Shaarli 0.9.1*.
 
 
 ## Installation
@@ -33,6 +33,8 @@ Please refer to the README file within the root folder of the version you downlo
 
 
 ## Customization
+You can add your own CSS rules in file `data/user.css`. You'll find an example that shows how to change the whole theme color in `user.example.css`.
+
 You can customize a few things using the `data/config.json.php` file of your Shaarli installation. If the file doesn't exist, just create it. Be careful to respect the JSON format notation (end lines with a comma except for the last item, just before the closing curly brace), otherwise you'll get errors.
 
 Here are parameters you can set.
@@ -42,9 +44,7 @@ Here are parameters you can set.
 - **config.MATERIAL_NO_QRCODE**: OPTIONAL: Removes the QR code control of the theme. To completely get rid of QR Codes, you of course need to disable the qrcode plugin as well.
 - **config.MATERIAL_DATE_FROMNOW**: OPTIONAL: If set to true, enables dates to be displayed with the 'from now' notation. ex: 2 days ago. Set it to false to disable this.
 - **config.MATERIAL_DATE_PATTERN**: OPTIONAL (but REQUIRED if MATERIAL_DATE_FROMNOW is enabled): This date pattern MUST match the MATERIAL_PHP_DATE_PATTERN option but doesn't use the same notation. Check this for more information about the notation: http://momentjs.com/docs/#/parsing/string-format/ ex: 'DD/MM/YYYY'. It's used to correctly convert dates to the 'from now' notation.
-- **config.MATERIAL_COLOR**: OPTIONAL: Customizes the theme's colors. I suggest picking colors from here : https://www.google.com/design/spec/style/color.html#color-color-palette with the shades 500, 600 and 700 for the 3 following settings, respectively. MATERIAL_COLOR is mandatory and represents the main color (used for the toolbar or the buttons).
-- **config.MATERIAL_COLOR_FOCUS**: OPTIONAL: Used for the hover and focus effects on buttons.
-- **config.MATERIAL_COLOR_ACTIVE**: OPTIONAL: Used for the active effect on button (when they are clicked).
+- **config.MATERIAL_COLOR**: OPTIONAL: Customizes the theme's colors. It's used for example on Android for notification bar. It will generate `<meta name="theme-color" content="YOURCOLORHERE">`.
 
 
 Here is an example of what you can configure (in real life, there will be other parameters in the file, just add those to the different categories):
@@ -60,9 +60,7 @@ Here is an example of what you can configure (in real life, there will be other
         "MATERIAL_NO_QRCODE": true,
         "MATERIAL_DATE_FROMNOW": true,
         "MATERIAL_DATE_PATTERN": "DD/MM/YYYY HH:mm:ss",
-        "MATERIAL_COLOR": "#607D8B",
-        "MATERIAL_COLOR_FOCUS": "#546E7A",
-        "MATERIAL_COLOR_ACTIVE": "#455A64"
+        "MATERIAL_COLOR": "#607D8B"
     }
 }
 ```

diff --git a/material/build/styles.min.css b/material/build/styles.min.css
diff --git a/material/includes.html b/material/includes.html
@@ -18,64 +18,9 @@
 <meta name="msapplication-TileColor" content="#603cba">
 <meta name="msapplication-config" content="images/favicons/browserconfig.xml">
 <link type="text/css" rel="stylesheet" href="build/styles.min.css" />
-{if="$conf->get('config.MATERIAL_COLOR')"}
-{$materialColor=$conf->get('config.MATERIAL_COLOR')}
-{$materialColorFocus=$conf->get('config.MATERIAL_COLOR_FOCUS') ? $conf->get('config.MATERIAL_COLOR_FOCUS') : $materialColor}
-{$materialColorActive=$conf->get('config.MATERIAL_COLOR_ACTIVE') ? $conf->get('config.MATERIAL_COLOR_ACTIVE') : $materialColor}
-<meta name="theme-color" content="{$materialColor}">
-<style type="text/css">
-    div.awesomplete > ul > li[aria-selected=true],
-    .button-primary,
-    [type="radio"]:checked + label:after,
-    [type="radio"].with-gap:checked + label:after,
-    [type=checkbox].filled-in:checked + label:after,
-    .switch label input[type=checkbox]:checked + .lever:after,
-    .header-main {
-        background-color: {$materialColor};
-    }
-    .button-primary:hover, .button-primary:focus{
-        background-color: {$materialColorFocus};
-    }
-    .button-primary:active{
-        background-color: {$materialColorActive};
-    }
-
-    a,
-    label.active {
-        color: {$materialColor}; 
-    }
-
-    a:hover, a:focus {
-        color: {$materialColorFocus}; 
-    }
-
-    a:active {
-        color: {$materialColorActive}; 
-    }
-
-    input[type=text]:focus,
-    input[type=search]:focus,
-    input[type=number]:focus,
-    input[type=password]:focus,
-    textarea:focus {
-        border-color: {$materialColor};
-        box-shadow: 0 1px 0 {$materialColor};
-        outline: none; 
-    }
-    input.input-big:focus{
-        box-shadow: none;
-    }
-
-    select:focus,
-    [type="radio"]:checked + label:after,
-    [type="radio"].with-gap:checked + label:before,
-    [type="radio"].with-gap:checked + label:after,
-    [type="checkbox"]:checked + label:before,
-    [type="checkbox"] :indeterminate + label:before,
-    [type=checkbox].filled-in:checked + label:after {
-        border-color: {$materialColor};
-    }
-</style>
+{if="$conf->get('config.THEME_COLOR')"}
+{$themeColor=$conf->get('config.THEME_COLOR')}
+<meta name="theme-color" content="{$themeColor}">
 {else}
 <meta name="theme-color" content="#2196f3">
 {/if}

diff --git a/material/scss/components/_header.scss b/material/scss/components/_header.scss
@@ -93,10 +93,12 @@
     margin-left: 7px;
     border-radius: 50%;
     font-size: 18px;
+    color: #fff;
 
     &:focus,
     &:hover{
         background-color: rgba(255, 255, 255, .2);
+        color: #fff;
     }
 
     &.filter-on{

diff --git a/user.example.css b/user.example.css
@@ -0,0 +1,62 @@
+/*
+This is an example of data/user.css file to change colors from Blue to Teal.
+Example color palettes available here: https://material.io/guidelines/style/color.html#color-color-palette
+- Base color: #009688
+- Focus color: #00796B
+- Active color: #004D40
+ */
+div.awesomplete > ul > li[aria-selected=true],
+.button-primary,
+[type="radio"]:checked + label:after,
+[type="radio"].with-gap:checked + label:after,
+[type=checkbox].filled-in:checked + label:after,
+.switch label input[type=checkbox]:checked + .lever:after,
+.header-main {
+    background-color: #009688;
+}
+.button-primary:hover, .button-primary:focus{
+    background-color: #00796B;
+}
+.button-primary:active{
+    background-color: #004D40;
+}
+
+a,
+label.active {
+    color: #009688; 
+}
+
+a:hover, a:focus {
+    color: #00796B; 
+}
+
+a:active {
+    color: #004D40; 
+}
+
+input[type=text]:focus,
+input[type=search]:focus,
+input[type=number]:focus,
+input[type=password]:focus,
+textarea:focus {
+    border-color: #009688;
+    box-shadow: 0 1px 0 #009688;
+    outline: none; 
+}
+input.input-big:focus{
+    box-shadow: none;
+}
+
+select:focus,
+[type="radio"]:checked + label:after,
+[type="radio"].with-gap:checked + label:before,
+[type="radio"].with-gap:checked + label:after,
+[type="checkbox"]:checked + label:before,
+[type="checkbox"] :indeterminate + label:before,
+[type=checkbox].filled-in:checked + label:after {
+    border-color: #009688;
+}
+
+.subheader{
+    background-color: #00796B;
+}