From a5a0c0399bcfea518330c4bad186da77f89ace6e Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Mon, 8 Jul 2019 23:10:00 +0200 Subject: [PATCH] WIP - Plugin to override default template colors * Adds a new core plugin to override default template colors * Adds a new hook when plugin settings are saved (`save_plugin_parameters`) * Use CSS native variables for main colors instead of SASS variables * Disable SASS sort order rules due to a bug in the plugin Fixes #1312 --- .dev/.sasslintrc | 8 ++- .gitignore | 1 + assets/default/scss/shaarli.scss | 58 +++++++++------- index.php | 1 + .../default_colors.css.template | 3 + plugins/default_colors/default_colors.meta | 5 ++ plugins/default_colors/default_colors.php | 68 +++++++++++++++++++ 7 files changed, 115 insertions(+), 29 deletions(-) create mode 100644 plugins/default_colors/default_colors.css.template create mode 100644 plugins/default_colors/default_colors.meta create mode 100644 plugins/default_colors/default_colors.php diff --git a/.dev/.sasslintrc b/.dev/.sasslintrc index ac406d7b..47c3145d 100644 --- a/.dev/.sasslintrc +++ b/.dev/.sasslintrc @@ -2,9 +2,11 @@ options: max-warnings: 0 rules: property-sort-order: - - 1 - - - order: 'concentric' + - 0 +# Sort order rule does not work with CSS variables: https://github.com/sasstools/sass-lint/issues/1161 +# - 1 +# - +# order: 'concentric' no-important: - 0 no-vendor-prefixes: diff --git a/.gitignore b/.gitignore index c54d9b69..b21d2118 100644 --- a/.gitignore +++ b/.gitignore @@ -28,6 +28,7 @@ phpdoc.xml # User plugin configuration plugins/*/config.php +plugins/default_colors/default_colors.css # HTML documentation doc/html/ diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss index 9e5464a0..1d89f998 100644 --- a/assets/default/scss/shaarli.scss +++ b/assets/default/scss/shaarli.scss @@ -25,9 +25,15 @@ $warning-text: #97600d; $form-input-border: #d8d8d8; $form-input-background: #eee; +:root { + --main-color: #{$main-green}; + --background-color: #{$background-color}; + --dark-main-color: #{$dark-green}; +} + // General body { - background: $background-color; + background: var(--background-color); } .strong { @@ -143,7 +149,7 @@ body, } .pure-alert-success { - background-color: $main-green; + background-color: var(--main-color); } .pure-alert-warning { @@ -169,7 +175,7 @@ body, top: 0; transition: max-height .5s; z-index: 999; - background: $main-green; + background: var(--main-color); width: 100%; // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 max-height: 45px; @@ -322,7 +328,7 @@ body, button { border: 0; border-radius: 2px; - background-color: $main-green; + background-color: var(--main-color); padding: 4px 8px 6px; color: $almost-white; } @@ -358,7 +364,7 @@ body, .search-tagcloud { button { &:hover { - color: $background-color; + color: var(--background-color); } } } @@ -389,7 +395,7 @@ body, position: fixed; visibility: hidden; z-index: 999; - background: $main-green; + background: var(--main-color); padding: 5px 0; width: 100%; height: 30px; @@ -411,7 +417,7 @@ body, margin: 0 0 5px; border: 1px solid $almost-white; border-radius: 2px; - background: $main-green; + background: var(--main-color); padding: 4px 0; width: 100px; height: 28px; @@ -419,7 +425,7 @@ body, &:hover { background: $almost-white; - color: $main-green; + color: var(--main-color); } } @@ -558,7 +564,7 @@ body, } .filter-on { - background: $main-green; + background: var(--main-color); color: $light-green; } @@ -697,7 +703,7 @@ body, &:visited { .linklist-link { - color: $dark-green; + color: var(--dark-main-color); } } @@ -708,7 +714,7 @@ body, } .linklist-link { - color: $main-green; + color: var(--main-color); font-size: 1.1em; &:hover { @@ -783,14 +789,14 @@ body, a { text-decoration: none; - color: $main-green; + color: var(--main-color); &:hover { color: $dark-grey; } &:visited { - color: $dark-green; + color: var(--dark-main-color); } } } @@ -888,7 +894,7 @@ body, &::before { display: block; margin: 10px auto; - background: linear-gradient(to right, $background-color, $dark-grey, $background-color); + background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color)); width: 80%; height: 1px; content: ''; @@ -917,7 +923,7 @@ body, margin: 15px 5px; border: 0; box-shadow: 1px 1px 1px $form-input-border, -1px -1px 6px $form-input-border, -1px 1px 2px $form-input-border, 1px -1px 2px $form-input-border; - background: $main-green; + background: var(--main-color); min-width: 150px; height: 35px; vertical-align: center; @@ -941,7 +947,7 @@ body, padding: 10px 0; width: 100%; text-align: center; - color: $main-green; + color: var(--main-color); } .window-subtitle { @@ -950,7 +956,7 @@ body, a { text-decoration: none; - color: $main-green; + color: var(--main-color); font-weight: bold; &.button { @@ -1278,7 +1284,7 @@ form { .pure-button { &:hover { - background-color: $main-green; + background-color: var(--main-color); background-image: none; color: $almost-white; } @@ -1362,7 +1368,7 @@ form { } .validate-rename-tag { - color: $main-green; + color: var(--main-color); } } @@ -1458,7 +1464,7 @@ form { &::after { display: block; margin: 10px auto; - background: linear-gradient(to right, $background-color, $dark-grey, $background-color); + background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color)); width: 90%; height: 1px; content: ''; @@ -1508,14 +1514,14 @@ form { .daily-entry-description { a { text-decoration: none; - color: $main-green; + color: var(--main-color); &:hover { text-shadow: 1px 1px $background-linklist-info; } &:visited { - color: $dark-green; + color: var(--dark-main-color); } } } @@ -1572,12 +1578,12 @@ form { } .pure-button-shaarli { - background-color: $main-green; + background-color: var(--main-color); } .progressbar { border-radius: 6px; - background-color: $main-green; + background-color: var(--main-color); padding: 1px; > div { @@ -1586,8 +1592,8 @@ form { -45deg, $almost-white, $almost-white 6px, - $background-color 6px, - $background-color 12px + var(--background-color) 6px, + var(--background-color) 12px ); width: 0%; height: 10px; diff --git a/index.php b/index.php index 957d8d9a..f0f71dbb 100644 --- a/index.php +++ b/index.php @@ -1567,6 +1567,7 @@ function ($a, $b) { if ($targetPage == Router::$PAGE_SAVE_PLUGINSADMIN) { try { if (isset($_POST['parameters_form'])) { + $pluginManager->executeHooks('save_plugin_parameters', $_POST); unset($_POST['parameters_form']); foreach ($_POST as $param => $value) { $conf->set('plugins.'. $param, escape($value)); diff --git a/plugins/default_colors/default_colors.css.template b/plugins/default_colors/default_colors.css.template new file mode 100644 index 00000000..4b269baf --- /dev/null +++ b/plugins/default_colors/default_colors.css.template @@ -0,0 +1,3 @@ +:root { + %s +} diff --git a/plugins/default_colors/default_colors.meta b/plugins/default_colors/default_colors.meta new file mode 100644 index 00000000..108962c6 --- /dev/null +++ b/plugins/default_colors/default_colors.meta @@ -0,0 +1,5 @@ +description="Override default theme colors. Use any CSS valid color." +parameters="DEFAULT_COLORS_MAIN;DEFAULT_COLORS_BACKGROUND;DEFAULT_COLORS_DARK_MAIN" +parameter.DEFAULT_COLORS_MAIN="Main color (navbar green)" +parameter.DEFAULT_COLORS_BACKGROUND="Background color (light grey)" +parameter.DEFAULT_COLORS_DARK_MAIN="Dark main color (e.g. visited links)" diff --git a/plugins/default_colors/default_colors.php b/plugins/default_colors/default_colors.php new file mode 100644 index 00000000..b898814b --- /dev/null +++ b/plugins/default_colors/default_colors.php @@ -0,0 +1,68 @@ +