From 2209b65940b0d501e060b8ab90763f81dc23ecd9 Mon Sep 17 00:00:00 2001 From: Fred Tempez Date: Fri, 22 May 2020 17:57:03 +0200 Subject: [PATCH] 10.1.001.dev Theme admin - test darkmode --- core/core.js.php | 3 ++- core/core.php | 14 ++++++++------ core/module/theme/view/admin/admin.js.php | 17 +++++++++-------- core/vendor/tinycolorpicker/init.js | 4 ++-- 4 files changed, 21 insertions(+), 17 deletions(-) diff --git a/core/core.js.php b/core/core.js.php index 8e72590d..9abb42c6 100755 --- a/core/core.js.php +++ b/core/core.js.php @@ -52,7 +52,8 @@ core.colorVariants = function(rgba) { "normal": "rgba(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + "," + rgba[3] + ")", "darken": "rgba(" + Math.max(0, rgba[0] - 15) + "," + Math.max(0, rgba[1] - 15) + "," + Math.max(0, rgba[2] - 15) + "," + rgba[3] + ")", "veryDarken": "rgba(" + Math.max(0, rgba[0] - 20) + "," + Math.max(0, rgba[1] - 20) + "," + Math.max(0, rgba[2] - 20) + "," + rgba[3] + ")", - "text": core.relativeLuminanceW3C(rgba) > .22 ? "inherit" : "white" + //"text": core.relativeLuminanceW3C(rgba) > .22 ? "inherit" : "white" + "text": core.relativeLuminanceW3C(rgba) > .22 ? "#222" : "#DDD" }; }; diff --git a/core/core.php b/core/core.php index adc6fd61..4d2d9529 100755 --- a/core/core.php +++ b/core/core.php @@ -1529,22 +1529,24 @@ class core extends common { if(empty($cssVersion[1]) OR $cssVersion[1] !== md5(json_encode($this->getData(['admin'])))) { // Version $css = '/*' . md5(json_encode($this->getData(['admin']))) . '*/'; - $css .= '#site{background-color:' . $this->getData(['admin','backgroundColor']) . ';}'; + $colors = helper::colorVariants($this->getData(['admin','backgroundColor'])); + $css .= '#site{background-color:' . $colors['normal']. ';}'; $css .= 'body, .row > div {font:' . $this->getData(['admin','fontSize']) . ' "' . $this->getData(['admin','fontText']) . '", sans-serif;}'; $css .= 'body h1, h2, h3, h4, h5, h6 {font-family:' . $this->getData(['admin','fontTitle' ]) . ', sans-serif;color:' . $this->getData(['admin','colorTitle' ]) . ';}'; - $css .= 'body:not(.editorWysiwyg),.block h4,input[type=email],input[type=text],input[type=password],.inputFile,select,textarea:not(.editorWysiwyg),.inputFile,span .zwiico-help,.button.buttonGrey {color:' . $this->getData(['admin','colorText']) . ';}'; + $css .= 'body:not(.editorWysiwyg),span .zwiico-help {color:' . $colors['text'] . ';}'; + $css .= 'table tr,input[type=email],input[type=text],input[type=password],select,textarea:not(.editorWysiwyg),.inputFile{color: #222;}'; $colors = helper::colorVariants($this->getData(['admin','backgroundColorButton'])); $css .= '.button,input[type="checkbox"]:checked + label::before,.speechBubble{ background-color:' . $colors['normal'] . ';color:' . $this->getData(['admin','colorButtonText']) . ';}'; $css .= '.speechBubble::before {border-color:' . $colors['normal'] . ' transparent transparent transparent;}'; $css .= '.button:hover, button[type=submit]:hover { background-color:' . $colors['darken'] . ';}'; $colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonGrey'])); - $css .= '.button.buttonGrey {background: ' . $colors['normal'] . ';}.button.buttonGrey:hover {background:' . $colors['darken'] . '}.button.buttonGrey:active {background:' . $colors['veryDarken'] . '}'; + $css .= '.button.buttonGrey {background: ' . $colors['normal'] . ';color: ' . $this->getData(['admin','colorButtonText']) . ';}.button.buttonGrey:hover {background:' . $colors['darken'] .';color: ' . $this->getData(['admin','colorButtonText']) . '}.button.buttonGrey:active {background:' . $colors['veryDarken'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}'; $colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonRed'])); - $css .= '.button.buttonRed {background: ' . $colors['normal'] . ';}.button.buttonRed:hover {background:' . $colors['darken'] . '}.button.buttonRed:active {background:' . $colors['veryDarken'] . '}'; + $css .= '.button.buttonRed {background: ' . $colors['normal'] . ';color: ' . $this->getData(['admin','colorButtonText']) . ';}.button.buttonRed:hover {background:' . $colors['darken'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}.button.buttonRed:active {background:' . $colors['veryDarken'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}'; $colors = helper::colorVariants($this->getData(['admin','backgroundColorButtonGreen'])); - $css .= 'button[type=submit] {background-color: ' . $colors['normal']. ';color: ' . $this->getData(['admin','colorButtonText']) . '}button[type=submit]:hover {background-color: ' . $colors['darken'] . ';}'; + $css .= 'button[type=submit] {background-color: ' . $colors['normal'] . ';color: ' . $this->getData(['admin','colorButtonText']) . '}button[type=submit]:hover {background-color: ' . $colors['darken'] . ';color: ' . $this->getData(['admin','colorButtonText']) .';}button[type=submit]:active {background-color: ' . $colors['darken'] . ';color: ' . $this->getData(['admin','colorButtonText']) .';}'; $colors = helper::colorVariants($this->getData(['admin','backgroundBlockColor'])); - $css .= '.block {border: 1px solid ' . $this->getData(['admin','borderBlockColor']) . ';}.block h4 {background: ' . $colors['normal'] . ';color:' . $colors['text']. ';}'; + $css .= '.block {border: 1px solid ' . $this->getData(['admin','borderBlockColor']) . ';}.block h4 {background-color: ' . $colors['normal'] . ';color:' . $colors['text'] . ';}'; // Enregistre la personnalisation file_put_contents(self::DATA_DIR.'admin.css', $css); } diff --git a/core/module/theme/view/admin/admin.js.php b/core/module/theme/view/admin/admin.js.php index 2818bf39..4b1083d8 100755 --- a/core/module/theme/view/admin/admin.js.php +++ b/core/module/theme/view/admin/admin.js.php @@ -18,23 +18,24 @@ $("input, select").on("change", function() { var titleFont = $("#adminFontTitle").val(); var textFont = $("#adminFontText").val(); var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');"; - - var css = "#site{background-color:" + $("#adminBackgroundColor").val() + ";}"; - css += "body, .row > div {font:" + $("#adminFontTextSize").val() + " '" + textFont + "', sans-serif;}"; + var colors = core.colorVariants($("#adminBackgroundColor").val()); + var css = "#site{background-color:" + colors.normal + ";}"; + css += "body, .row > div {font:" + $("#adminFontTextSize").val() + " '" + $("#adminColorTitle").val() + "', sans-serif;}"; css += "body h1, h2, h3, h4, h5, h6 {font-family:'" + titleFont + "', sans-serif; color:" + $("#adminColorTitle").val() + ";}"; - css += "body:not(.editorWysiwyg),.block h4,input[type=email],input[type=text],input[type=password],.inputFile,select,textarea:not(.editorWysiwyg),.inputFile,span .zwiico-help,.button.buttonGrey {color:" + $("#adminColorText").val() + ";}"; + css += "body:not(.editorWysiwyg),span .zwiico-help {color:" + colors.text + ";}"; + css += "input[type=email],input[type=text],input[type=password],select,textarea:not(.editorWysiwyg),.inputFile{color: #222;}"; var colors = core.colorVariants($("#adminColorButton").val()); css += ".button,input[type='checkbox']:checked + label::before,.speechBubble{ background-color:" + colors.normal + "; color:" + $("#adminColorButtonText").val() + ";}"; css += ".speechBubble::before {border-color:" + colors.normal + " transparent transparent transparent;}"; css += ".button:hover, button[type=submit]:hover { background-color:" + colors.darken + ";}"; var colors = core.colorVariants($("#adminColorGrey").val()); - css += ".button.buttonGrey {background: " + colors.normal + ";}.button.buttonGrey:hover {background:" + colors.darken + "}.button.buttonGrey:active {background:" + colors.veryDarken + "}"; + css += ".button.buttonGrey {background: " + colors.normal + ";color:" + $("#adminColorButtonText").val() + ";}.button.buttonGrey:hover {background:" + colors.darken + ";color:" + $("#adminColorButtonText").val() + "}.button.buttonGrey:active {background:" + colors.veryDarken + ";color:" + $("#adminColorButtonText").val() + ";}"; var colors = core.colorVariants($("#adminColorRed").val()); - css += ".button.buttonRed {background: " + colors.normal + ";}.button.buttonRed:hover {background:" + colors.darken + "}.button.buttonRed:active {background:" + colors.veryDarken + "}"; + css += ".button.buttonRed {background: " + colors.normal + ";color:" + $("#adminColorButtonText").val() + ";}.button.buttonRed:hover {background:" + colors.darken + ";color:" + $("#adminColorButtonText").val() + "}.button.buttonRed:active {background:" + colors.veryDarken + ";color:" + $("#adminColorButtonText").val() + "}"; var colors = core.colorVariants($("#adminColorGreen").val()); - css += "button[type=submit] {background-color: " + colors.normal + ";color: " + $("#adminColorButtonText").val() + "}button[type=submit]:hover {background-color: " + colors.darken + ";}"; + css += "button[type=submit] {background-color: " + colors.normal + ";color: " + ";color:" + $("#adminColorButtonText").val() + "}button[type=submit]:hover {background-color: " + colors.darken + ";color:" + $("#adminColorButtonText").val() + ";}button[type=submit]:active {background:" + colors.veryDarken + ";color:" + $("#adminColorButtonText").val() + "}"; var colors = core.colorVariants($("#adminBackGroundBlockColor").val()); - css += ".block {border: 1px solid " + $("#adminBorderBlockColor").val() + ";}.block h4 {background: " + colors.normal + ";color:" + colors.text + ";}"; + css += ".block {border: 1px solid " + $("#adminBorderBlockColor").val() + ";}.block h4 {background-color: " + colors.normal + ";color:" + colors.text + ";}"; // Ajout du css au DOM $("#themePreview").remove(); diff --git a/core/vendor/tinycolorpicker/init.js b/core/vendor/tinycolorpicker/init.js index 50708879..b56beb13 100755 --- a/core/vendor/tinycolorpicker/init.js +++ b/core/vendor/tinycolorpicker/init.js @@ -19,8 +19,8 @@ $(function() { $(element).trigger("change"); } }, - dark: "inherit", - light: "white", + dark: "#222", + light: "#DDD", forceAlpha: true }) }); \ No newline at end of file