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
This commit is contained in:
ArthurHoaro 2019-07-08 23:10:00 +02:00
parent c03c90a13e
commit a5a0c0399b
7 changed files with 115 additions and 29 deletions

View File

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

1
.gitignore vendored
View File

@ -28,6 +28,7 @@ phpdoc.xml
# User plugin configuration
plugins/*/config.php
plugins/default_colors/default_colors.css
# HTML documentation
doc/html/

View File

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

View File

@ -1567,6 +1567,7 @@ function renderPage($conf, $pluginManager, $LINKSDB, $history, $sessionManager,
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));

View File

@ -0,0 +1,3 @@
:root {
%s
}

View File

@ -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)"

View File

@ -0,0 +1,68 @@
<?php
/**
* Plugin default_colors.
*
* Allow users to easily overrides colors of the default theme.
*/
use Shaarli\Plugin\PluginManager;
const DEFAULT_COLORS_PLACEHOLDERS = [
'DEFAULT_COLORS_MAIN',
'DEFAULT_COLORS_BACKGROUND',
'DEFAULT_COLORS_DARK_MAIN',
];
/**
* When plugin parameters are saved
*/
function hook_default_colors_save_plugin_parameters($data)
{
$file = PluginManager::$PLUGINS_PATH . '/default_colors/default_colors.css';
$template = file_get_contents(PluginManager::$PLUGINS_PATH . '/default_colors/default_colors.css.template');
$content = '';
foreach (DEFAULT_COLORS_PLACEHOLDERS as $rule) {
$content .= ! empty($data[$rule])
? default_colors_format_css_rule($data, $rule) .';'. PHP_EOL
: '';
}
file_put_contents($file, sprintf($template, $content));
return $data;
}
/**
* When linklist is displayed, include isso CSS file.
*
* @param array $data - header data.
*
* @return mixed - header data with isso CSS file added.
*/
function hook_default_colors_render_includes($data)
{
$file = PluginManager::$PLUGINS_PATH . '/default_colors/default_colors.css';
if (file_exists($file )) {
$data['css_files'][] = $file ;
}
return $data;
}
/**
* This function is never called, but contains translation calls for GNU gettext extraction.
*/
function default_colors_translation()
{
// meta
t('Override default theme colors. Use any CSS valid color.');
t('Main color (navbar green)');
t('Background color (light grey)');
t('Dark main color (e.g. visited links)');
}
function default_colors_format_css_rule($data, $parameter)
{
$key = str_replace('DEFAULT_COLORS_', '', $parameter);
$key = str_replace('_', '-', strtolower($key)) .'-color';
return ' --'. $key .': '. $data[$parameter];
}