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

5
src/renderer/index.js
View file

@ -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") {

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

@ -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

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-family: inherit;
padding: 8px 16px;
background: #404040;
}
optgroup {

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

@ -30,7 +30,7 @@
</head>
<body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
<div id="app">
<div id="app" :class="getAppClasses()">
<transition name="fsModeSwitch">
<div id="app-main" v-show="appMode == 'player'">
<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 class="md-option-header">
<span>Unfinished / Non Functional</span>
<span>Experimental</span>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Theme
Compact UI
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select">
<option value="0">Cider</option>
</select>
<div class="md-option-segment md-option-segment_auto" >
<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')">
{{app.cfg.advanced.experiments.includes('compactui') ? 'Enabled' : 'Disabled'}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Theme Options
<div style="opacity: 0.5; pointer-events: none">
<div class="md-option-header">
<span>Unfinished / Non Functional</span>
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="btn">Theme Options</button>
<div class="md-option-line">
<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 class="md-option-line">
<div class="md-option-segment">
Scrollbars
<div class="md-option-line">
<div class="md-option-segment">
Theme Options
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="btn">Theme Options</button>
</div>
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select">
<option value="0">Show on hover</option>
<option value="1">Always show</option>
<option value="2">Hidden</option>
</select>
<div class="md-option-line">
<div class="md-option-segment">
Scrollbars
</div>
<div class="md-option-segment md-option-segment_auto">
<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 class="md-option-line">
<div class="md-option-segment">
Refresh Rate
<div class="md-option-line">
<div class="md-option-segment">
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 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 class="md-option-line">
<div class="md-option-segment">
Close Button Behavior
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select">
<option value='0'>Minimize to system tray</option>
<option value='1'>Minimize to taskbar ? dock</option>
<option value='2'>Quit Cider</option>
</select>
</div>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Close Button Behavior
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select">
<option value='0'>Minimize to system tray</option>
<option value='1'>Minimize to taskbar ? dock</option>
<option value='2'>Quit Cider</option>
</select>
</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 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>
@ -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();