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

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

View file

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

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

View file

@ -1,8 +1,10 @@
.app-sidebar-content.compact {
#app.compact {
.content-inner {
zoom: 0.95;
}
.app-sidebar-content {
padding:0px;
.app-sidebar-header-text {
padding: 6px 10px;
margin: 0px;
@ -42,6 +44,8 @@
}
}
}
// if page width is less than 951px
@media (max-width: 951px) {
.content-inner {

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 {

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>

View file

@ -476,6 +476,20 @@
<input type="checkbox" v-model="app.cfg.lastfm.enabledRemoveFeaturingArtists" switch/>
</div>
</div>
<div class="md-option-header">
<span>Experimental</span>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Compact UI
</div>
<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 style="opacity: 0.5; pointer-events: none">
<div class="md-option-header">
<span>Unfinished / Non Functional</span>
</div>
@ -552,6 +566,7 @@
</div>
</div>
</div>
</div>
</script>
<script>
@ -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();