okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added experimental flags and section in settings for temporary config settings, added compact ui experiment

Browse source
This commit is contained in:
booploops 2022-01-12 07:36:20 -08:00
parent fab2e1ba33
commit e579ed8a99
6 changed files with 127 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.js
View file

@ -80,6 +80,7 @@ const configDefaults = {
}, },
"advanced": { "advanced": {
"AudioContext": false, "AudioContext": false,
"experiments": []
} }
} }

5
src/renderer/index.js
View file

@ -635,6 +635,11 @@ const app = new Vue({
this.$forceUpdate() this.$forceUpdate()
}, 500) }, 500)
}, },
getAppClasses() {
if(this.cfg.advanced.experiments.includes('compactui')) {
return {compact: true}
}
},
invokeDrawer(panel) { invokeDrawer(panel) {
if (this.drawer.panel == panel && this.drawer.open) { if (this.drawer.panel == panel && this.drawer.open) {
if (panel == "lyrics") { if (panel == "lyrics") {

74
src/renderer/less/compact.less
View file

@ -1,45 +1,49 @@
.app-sidebar-content.compact { #app.compact {
padding:0px; .content-inner {
zoom: 0.95;
.app-sidebar-header-text {
padding: 6px 10px;
margin: 0px;
} }
.app-sidebar-item { .app-sidebar-content {
display: flex; padding:0px;
width: 100%;
padding: 8px 12px;
font-size: 13px;
margin: 0px;
border: 1px solid transparent;
border-radius: 0px;
transition: unset;
transform: unset;
&:active { .app-sidebar-header-text {
background: var(--selected-click); 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 { .folder-body {
display: none; border-radius: 0px;
} padding: 0px;
&.active {
background: var(--keyColor-disabled);
} }
} }
.sidebar-icon {
width: 14px;
height: 16px;
margin-right: 8px;
}
.folder-body {
border-radius: 0px;
padding: 0px;
}
} }
// if page width is less than 951px // if page width is less than 951px

1
src/renderer/style.less
View file

@ -1883,6 +1883,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-size: 1em; font-size: 1em;
font-family: inherit; font-family: inherit;
padding: 8px 16px; padding: 8px 16px;
background: #404040;
} }
optgroup { optgroup {

2
src/renderer/views/main.ejs
View file

@ -30,7 +30,7 @@
</head> </head>
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>"> <body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
<div id="app"> <div id="app" :class="getAppClasses()">
<transition name="fsModeSwitch"> <transition name="fsModeSwitch">
<div id="app-main" v-show="appMode == 'player'"> <div id="app-main" v-show="appMode == 'player'">
<div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div> <div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>

139
src/renderer/views/pages/settings.ejs
View file

@ -477,77 +477,92 @@
</div> </div>
</div> </div>
<div class="md-option-header"> <div class="md-option-header">
<span>Unfinished / Non Functional</span> <span>Experimental</span>
</div> </div>
<div class="md-option-line"> <div class="md-option-line">
<div class="md-option-segment"> <div class="md-option-segment">
Theme Compact UI
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto" >
<select class="md-select"> <button class="md-btn" :class="{'md-btn-primary': app.cfg.advanced.experiments.includes('compactui')}" @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')">
<option value="0">Cider</option> {{app.cfg.advanced.experiments.includes('compactui') ? 'Enabled' : 'Disabled'}}
</select> </button>
</div> </div>
</div> </div>
<div class="md-option-line"> <div style="opacity: 0.5; pointer-events: none">
<div class="md-option-segment"> <div class="md-option-header">
Theme Options <span>Unfinished / Non Functional</span>
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-line">
<button class="btn">Theme Options</button> <div class="md-option-segment">
Theme
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select">
<option value="0">Cider</option>
</select>
</div>
</div> </div>
</div> <div class="md-option-line">
<div class="md-option-line"> <div class="md-option-segment">
<div class="md-option-segment"> Theme Options
Scrollbars </div>
<div class="md-option-segment md-option-segment_auto">
<button class="btn">Theme Options</button>
</div>
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-line">
<select class="md-select"> <div class="md-option-segment">
<option value="0">Show on hover</option> Scrollbars
<option value="1">Always show</option> </div>
<option value="2">Hidden</option> <div class="md-option-segment md-option-segment_auto">
</select> <select class="md-select">
<option value="0">Show on hover</option>
<option value="1">Always show</option>
<option value="2">Hidden</option>
</select>
</div>
</div> </div>
</div> <div class="md-option-line">
<div class="md-option-line"> <div class="md-option-segment">
<div class="md-option-segment"> Refresh Rate
Refresh Rate </div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select">
<option value='0'>Automatic</option>
<option value='30'>30</option>
<option value='60'>60</option>
<option value='144'>144</option>
<option value='175'>175</option>
<option value='240'>240</option>
<option value='360'>30</option>
</select>
</div>
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-line">
<select class="md-select"> <div class="md-option-segment">
<option value='0'>Automatic</option> Close Button Behavior
<option value='30'>30</option> </div>
<option value='60'>60</option> <div class="md-option-segment md-option-segment_auto">
<option value='144'>144</option> <select class="md-select">
<option value='175'>175</option> <option value='0'>Minimize to system tray</option>
<option value='240'>240</option> <option value='1'>Minimize to taskbar ? dock</option>
<option value='360'>30</option> <option value='2'>Quit Cider</option>
</select> </select>
</div>
</div> </div>
</div> <div class="md-option-line">
<div class="md-option-line"> <div class="md-option-segment">
<div class="md-option-segment"> Open Cider on Startup
Close Button Behavior </div>
</div> <div class="md-option-segment md-option-segment_auto">
<div class="md-option-segment md-option-segment_auto"> <select class="md-select">
<select class="md-select"> <option value='0'>Never</option>
<option value='0'>Minimize to system tray</option> <option value='1'>Always</option>
<option value='1'>Minimize to taskbar ? dock</option> <option value='2'>Always, minimized</option>
<option value='2'>Quit Cider</option> <option value='2'>Always, hidden in tray</option>
</select> </select>
</div> </div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Open Cider on Startup
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select">
<option value='0'>Never</option>
<option value='1'>Always</option>
<option value='2'>Always, minimized</option>
<option value='2'>Always, hidden in tray</option>
</select>
</div> </div>
</div> </div>
</div> </div>
@ -573,6 +588,12 @@
} }
}, },
methods: { 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(){ toggleAudioContext: function(){
if (app.cfg.advanced.AudioContext){ if (app.cfg.advanced.AudioContext){
CiderAudio.init(); CiderAudio.init();