From 3cbfa48dec828dbc181646e3944853930ce66b92 Mon Sep 17 00:00:00 2001 From: Gerome Matilla Date: Wed, 10 Jun 2020 16:35:39 +0800 Subject: [PATCH] Add transition duration settings in dashboard (#22) * add animation speed settings in theme engine * readme --- README.md | 6 ++++-- css/theme-engine.css | 6 ++++-- index.html | 6 ++++++ js/theme-engine.js | 27 ++++++++++++++++++++++++--- 4 files changed, 38 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 9a3cd81..00ea850 100644 --- a/README.md +++ b/README.md @@ -56,11 +56,13 @@ ## Customization and Settings -#### Changing the colors and blur strength on-the-fly +#### Changing the colors, blur and animation speed strength on-the-fly + Open the dashboard by clicking the settings button on the dock. + Change the color and blur strength by setting it on the `Theme Engine` section. -+ Supports #RGB, #RRGGBBAA, and #RRGGBB. ++ Color settings supports `#RGB`, `#RRGGBB`, and `#RRGGBBAA`. ++ Blur strength settings only allows integer with `px` suffix. ++ Animation speed supports `s` and `ms`. #### Adding more buttons on the web menu diff --git a/css/theme-engine.css b/css/theme-engine.css index 69ed14d..afa6fdc 100644 --- a/css/theme-engine.css +++ b/css/theme-engine.css @@ -113,7 +113,8 @@ select::-ms-expand { .backgroundColorSetter, .foregroundColorSetter, -.blurSetter { +.blurSetter, +.animSpeedSetter { /*Align div inside horizontally*/ display: flex; flex-direction: row; @@ -149,7 +150,8 @@ select::-ms-expand { background: var(--panel-bg); } -#blurSet { +#blurSet, +#animSpeedSet { height: 32px; width: 100%; box-sizing: border-box; diff --git a/index.html b/index.html index 2035667..1ea5359 100644 --- a/index.html +++ b/index.html @@ -176,6 +176,12 @@ +
+ +
+ +
+
diff --git a/js/theme-engine.js b/js/theme-engine.js index 1588bdc..9fc3aa3 100644 --- a/js/theme-engine.js +++ b/js/theme-engine.js @@ -9,6 +9,7 @@ class ThemeEngine { this._foregroundOpacityTextBox = document.querySelector('#foregroundOpacitySet'); this._blurTextBox = document.querySelector('#blurSet'); + this._animSpeedTextBox = document.querySelector('#animSpeedSet'); this._applyTheme = document.querySelector('#themeEngineAsDefault'); this._resetTheme = document.querySelector('#themeEngineReset'); @@ -20,8 +21,9 @@ class ThemeEngine { const origBaseBG = this._localStorage.getItem('origBaseBG'); const origBaseColor = this._localStorage.getItem('origBaseColor'); const origBlurStrength = this._localStorage.getItem('origBlurStrength'); + const origAnimSpeed = this._localStorage.getItem('origAnimSpeed'); - if ((origBaseBG === null) || (origBaseColor === null) || (origBlurStrength) === null) { + if ((origBaseBG === null) || (origBaseColor === null) || (origBlurStrength === null) || (origAnimSpeed === null)) { this._localStorage.setItem( 'origBaseBG', @@ -35,6 +37,10 @@ class ThemeEngine { 'origBlurStrength', window.getComputedStyle(document.documentElement).getPropertyValue('--blur-strength') ); + this._localStorage.setItem( + 'origAnimSpeed', + window.getComputedStyle(document.documentElement).getPropertyValue('--transition-speed') + ); } } @@ -75,7 +81,7 @@ class ThemeEngine { return colorStr; } - _updateTextBoxValues = (bgColor, bgOpacity, fgColor, fgOpacity, blurPower) => { + _updateTextBoxValues = (bgColor, bgOpacity, fgColor, fgOpacity, blurPower, animSpeed) => { // Set placeholders this._backgroundTextBox.value = ''; @@ -92,6 +98,9 @@ class ThemeEngine { this._blurTextBox.value = ''; this._blurTextBox.placeholder = blurPower; + this._animSpeedTextBox.value = ''; + this._animSpeedTextBox.placeholder = animSpeed; + } _processTheme = () => { @@ -100,6 +109,7 @@ class ThemeEngine { let baseBG = this._localStorage.getItem('baseBG'); let baseColor = this._localStorage.getItem('baseColor'); let blurStrength = this._localStorage.getItem('blurStrength'); + let animSpeed = this._localStorage.getItem('animSpeed'); // If custom color doesn't exist, use the value in CSS if (baseBG === null) { @@ -114,10 +124,15 @@ class ThemeEngine { blurStrength = this._localStorage.getItem('origBlurStrength'); } + if (animSpeed === null) { + animSpeed = this._localStorage.getItem('origAnimSpeed'); + } + // Remove whitespace baseBG = baseBG.replace(/ /g,''); baseColor = baseColor.replace(/ /g,''); blurStrength = blurStrength.replace(/ /g,''); + animSpeed = animSpeed.replace(/ /g,''); // Check validity baseBG = this._checkColorValidity(baseBG); @@ -141,7 +156,8 @@ class ThemeEngine { backgroundOpacity, foregroundColor, foregroundOpacity, - blurStrength + blurStrength, + animSpeed ) } @@ -156,6 +172,8 @@ class ThemeEngine { const blurPower = (this._blurTextBox.value || this._blurTextBox.placeholder); + const animSpeed = (this._animSpeedTextBox.value || this._animSpeedTextBox.placeholder); + // Check color validity const bgColor = this._checkColorValidity(background); const fgColor = this._checkColorValidity(foreground); @@ -164,11 +182,13 @@ class ThemeEngine { document.documentElement.style.setProperty('--base-bg', bgColor); document.documentElement.style.setProperty('--base-color', fgColor); document.documentElement.style.setProperty('--blur-strength', blurPower); + document.documentElement.style.setProperty('--transition-speed', animSpeed); // Save custom color this._localStorage.setItem('baseBG', bgColor); this._localStorage.setItem('baseColor', fgColor); this._localStorage.setItem('blurStrength', blurPower); + this._localStorage.setItem('animSpeed', animSpeed); this._processTheme(); } @@ -186,6 +206,7 @@ class ThemeEngine { this._localStorage.removeItem('baseBG'); this._localStorage.removeItem('baseColor'); this._localStorage.removeItem('blurStrength'); + this._localStorage.removeItem('animSpeed'); this._saveDefaultCSS(); this._processTheme();