From e579ed8a99cebc61be18419c77a419d7254395cc Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Wed, 12 Jan 2022 07:36:20 -0800 Subject: [PATCH] added experimental flags and section in settings for temporary config settings, added compact ui experiment --- index.js | 1 + src/renderer/index.js | 5 + src/renderer/less/compact.less | 74 +++++++------- src/renderer/style.less | 1 + src/renderer/views/main.ejs | 2 +- src/renderer/views/pages/settings.ejs | 139 +++++++++++++++----------- 6 files changed, 127 insertions(+), 95 deletions(-) diff --git a/index.js b/index.js index ad570d3a..ed66de11 100644 --- a/index.js +++ b/index.js @@ -80,6 +80,7 @@ const configDefaults = { }, "advanced": { "AudioContext": false, + "experiments": [] } } diff --git a/src/renderer/index.js b/src/renderer/index.js index 1ef1f225..bb67dc27 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -635,6 +635,11 @@ const app = new Vue({ this.$forceUpdate() }, 500) }, + getAppClasses() { + if(this.cfg.advanced.experiments.includes('compactui')) { + return {compact: true} + } + }, invokeDrawer(panel) { if (this.drawer.panel == panel && this.drawer.open) { if (panel == "lyrics") { diff --git a/src/renderer/less/compact.less b/src/renderer/less/compact.less index 5e90b63d..21470df3 100644 --- a/src/renderer/less/compact.less +++ b/src/renderer/less/compact.less @@ -1,45 +1,49 @@ -.app-sidebar-content.compact { - padding:0px; - - - - .app-sidebar-header-text { - padding: 6px 10px; - margin: 0px; +#app.compact { + .content-inner { + zoom: 0.95; } - .app-sidebar-item { - display: flex; - width: 100%; - padding: 8px 12px; - font-size: 13px; - margin: 0px; - border: 1px solid transparent; - border-radius: 0px; - transition: unset; - transform: unset; + .app-sidebar-content { + padding:0px; - &:active { - background: var(--selected-click); + .app-sidebar-header-text { + padding: 6px 10px; + margin: 0px; + } + .app-sidebar-item { + display: flex; + width: 100%; + padding: 8px 12px; + font-size: 13px; + margin: 0px; + border: 1px solid transparent; + border-radius: 0px; + transition: unset; + transform: unset; + + &:active { + background: var(--selected-click); + } + + &::after { + display: none; + } + + &.active { + background: var(--keyColor-disabled); + } + } + .sidebar-icon { + width: 14px; + height: 16px; + margin-right: 8px; } - &::after { - display: none; - } - - &.active { - background: var(--keyColor-disabled); + .folder-body { + border-radius: 0px; + padding: 0px; } } - .sidebar-icon { - width: 14px; - height: 16px; - margin-right: 8px; - } - .folder-body { - border-radius: 0px; - padding: 0px; - } } // if page width is less than 951px diff --git a/src/renderer/style.less b/src/renderer/style.less index 1ce5f974..e838b37f 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -1883,6 +1883,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { font-size: 1em; font-family: inherit; padding: 8px 16px; + background: #404040; } optgroup { diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs index 64ac3734..0017746b 100644 --- a/src/renderer/views/main.ejs +++ b/src/renderer/views/main.ejs @@ -30,7 +30,7 @@ -
+
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs index 99156ca3..304ffd3b 100644 --- a/src/renderer/views/pages/settings.ejs +++ b/src/renderer/views/pages/settings.ejs @@ -477,77 +477,92 @@
- Unfinished / Non Functional + Experimental
- Theme + Compact UI
-
- +
+
-
-
- Theme Options +
+
+ Unfinished / Non Functional
-
- +
+
+ Theme +
+
+ +
-
-
-
- Scrollbars +
+
+ Theme Options +
+
+ +
-
- +
+
+ Scrollbars +
+
+ +
-
-
-
- Refresh Rate +
+
+ Refresh Rate +
+
+ +
-
- +
+
+ Close Button Behavior +
+
+ +
-
-
-
- Close Button Behavior -
-
- -
-
-
-
- Open Cider on Startup -
-
- +
+
+ Open Cider on Startup +
+
+ +
@@ -573,6 +588,12 @@ } }, methods: { + addExperiment(flag) { + app.cfg.advanced.experiments.push(flag); + }, + removeExperiment(flag) { + app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1); + }, toggleAudioContext: function(){ if (app.cfg.advanced.AudioContext){ CiderAudio.init();