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
parent
c03c90a13e
commit
a5a0c0399b
7 changed files with 115 additions and 29 deletions
|
|
@ -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
1
.gitignore
vendored
|
|
@ -28,6 +28,7 @@ phpdoc.xml
|
|||
|
||||
# User plugin configuration
|
||||
plugins/*/config.php
|
||||
plugins/default_colors/default_colors.css
|
||||
|
||||
# HTML documentation
|
||||
doc/html/
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
3
plugins/default_colors/default_colors.css.template
Normal file
3
plugins/default_colors/default_colors.css.template
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
%s
|
||||
}
|
||||
5
plugins/default_colors/default_colors.meta
Normal file
5
plugins/default_colors/default_colors.meta
Normal 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)"
|
||||
68
plugins/default_colors/default_colors.php
Normal file
68
plugins/default_colors/default_colors.php
Normal 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];
|
||||
}
|
||||
Loading…
Reference in a new issue