From 6da5650b9837e4c8749d8c2773617ab918ab4eea Mon Sep 17 00:00:00 2001 From: Risto Lahtela <24460436+Rsl1122@users.noreply.github.com> Date: Tue, 5 May 2020 11:22:57 +0300 Subject: [PATCH] Night mode improvements for login page --- .../assets/plan/web/js/color-selector.js | 70 ++++++++++--------- .../resources/assets/plan/web/js/graphs.js | 6 -- .../main/resources/assets/plan/web/login.html | 4 +- .../resources/assets/plan/web/register.html | 4 +- 4 files changed, 40 insertions(+), 44 deletions(-) diff --git a/Plan/common/src/main/resources/assets/plan/web/js/color-selector.js b/Plan/common/src/main/resources/assets/plan/web/js/color-selector.js index 2b9503900..2b44c1a23 100644 --- a/Plan/common/src/main/resources/assets/plan/web/js/color-selector.js +++ b/Plan/common/src/main/resources/assets/plan/web/js/color-selector.js @@ -1,17 +1,17 @@ (function ($) { - var bgElements = ['.sidebar', '.btn', 'body']; - var textElements = ['a', 'button']; + const bgElements = ['.sidebar', '.btn', 'body']; + const textElements = ['a', 'button']; - var colors = ['plan', + const colors = ['plan', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey']; - var selectedColor = window.localStorage.getItem('themeColor'); - var themeDefaultColor = 'plan'; - var currentColor = 'plan'; + const selectedColor = window.localStorage.getItem('themeColor'); + const themeDefaultColor = 'plan'; + let currentColor = 'plan'; if (selectedColor === null) { window.localStorage.setItem('themeColor', currentColor); @@ -23,18 +23,18 @@ return; } - for (i in bgElements) { - var element = bgElements[i]; - $(element + '.bg-' + currentColor + ":not(.color-chooser)") - .removeClass('bg-' + currentColor) - .addClass('bg-' + nextColor); - } - for (i in textElements) { - var element = textElements[i]; - $(element + '.col-' + currentColor) - .removeClass('col-' + currentColor) - .addClass('col-' + nextColor); - } + let bgElementSelector = ''; + bgElements.map(element => element + '.bg-' + currentColor + ":not(.color-chooser)") + .forEach(selector => bgElementSelector += selector + ','); + $(bgElementSelector.substr(0, bgElementSelector.length - 1)) + .removeClass('bg-' + currentColor) + .addClass('bg-' + nextColor); + let textElementSelector = ''; + textElements.map(element => element + '.col-' + currentColor) + .forEach(selector => textElementSelector += selector + ','); + $(textElementSelector.substr(0, textElementSelector.length - 1)) + .removeClass('col-' + currentColor) + .addClass('col-' + nextColor); if (nextColor != 'night') { window.localStorage.setItem('themeColor', nextColor); } @@ -49,11 +49,12 @@ } } - for (i in colors) { - var color = colors[i]; - var func = colorSetter(i); - $('#choose-' + color).on('click', func); - $('#choose-' + color).addClass('bg-' + color); + for (let i in colors) { + const color = colors[i]; + const func = colorSetter(i); + $('#choose-' + color) + .on('click', func) + .addClass('bg-' + color); } } @@ -61,7 +62,7 @@ function disableColorSetters() { for (i in colors) { - var color = colors[i]; + const color = colors[i]; $('#choose-' + color).addClass('disabled').unbind('click'); } } @@ -69,28 +70,29 @@ // Change the color of the theme setColor(selectedColor ? selectedColor : themeDefaultColor); - var nightMode = window.localStorage.getItem('nightMode') == 'true'; + let nightMode = window.localStorage.getItem('nightMode') == 'true'; - var saturationReduction = 0.70; + const saturationReduction = 0.70; // From https://stackoverflow.com/a/3732187 function withReducedSaturation(colorHex) { // To RGB - var r = parseInt(colorHex.substr(1, 2), 16); // Grab the hex representation of red (chars 1-2) and convert to decimal (base 10). - var g = parseInt(colorHex.substr(3, 2), 16); - var b = parseInt(colorHex.substr(5, 2), 16); + let r = parseInt(colorHex.substr(1, 2), 16); // Grab the hex representation of red (chars 1-2) and convert to decimal (base 10). + let g = parseInt(colorHex.substr(3, 2), 16); + let b = parseInt(colorHex.substr(5, 2), 16); // To HSL r /= 255; g /= 255; b /= 255; - var max = Math.max(r, g, b), min = Math.min(r, g, b); - var h, s, l = (max + min) / 2; + const max = Math.max(r, g, b), min = Math.min(r, g, b); + let h, s; + const l = (max + min) / 2; if (max === min) { h = s = 0; // achromatic } else { - var d = max - min; + const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: @@ -209,10 +211,10 @@ // Background colors from dracula theme $('head').append('