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

adds style stack editor

Browse source
This commit is contained in:
booploops 2022-04-11 12:39:19 -07:00
parent 4cda5a5303
commit 51e78ee866
3 changed files with 133 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/main/base/store.ts
View file

@ -115,6 +115,7 @@ export class Store {
},
"visual": {
"theme": "",
"styles": [],
"scrollbars": 0, // 0 = show on hover, 2 = always hide, 3 = always show
"refresh_rate": 0,
"window_background_style": "artwork", // "none", "artwork", "color"

31
src/renderer/main/vueapp.js
View file

@ -465,9 +465,9 @@ const app = new Vue({
history.forward()
},
getHTMLStyle() {
if(app.cfg.visual.uiScale != 1) {
if (app.cfg.visual.uiScale != 1) {
document.querySelector("#app").style.zoom = app.cfg.visual.uiScale
}else{
} else {
document.querySelector("#app").style.zoom = ""
}
},
@ -956,6 +956,31 @@ const app = new Vue({
less.refresh()
}
},
async reloadStyles() {
const styles = this.cfg.visual.styles
document.querySelectorAll(`[id*='less']`).forEach(el => {
el.remove()
});
this.chrome.appliedTheme.info = {}
await asyncForEach(styles, async (style) => {
let styleEl = document.createElement("link")
styleEl.id = `less-${style.replace(".less", "")}`
styleEl.rel = "stylesheet/less"
styleEl.href = `themes/${style}`
styleEl.type = "text/css"
document.head.appendChild(styleEl)
try {
let infoResponse = await fetch("themes/" + style.replace("index.less", "theme.json"))
this.chrome.appliedTheme.info = Object.assign(this.chrome.appliedTheme.info, await infoResponse.json())
} catch (e) {
e = null
console.warn("failed to get theme.json")
}
})
less.registerStylesheetsImmediately()
less.refresh(true, true, true)
this.$forceUpdate()
},
macOSEmu() {
this.chrome.forceDirectives["macosemu"] = {
value: true
@ -3811,7 +3836,7 @@ const app = new Vue({
]
}
}
if(this.cfg.advanced.AudioContext) {
if (this.cfg.advanced.AudioContext) {
menus.normal.items.find(i => i.id === 'audioLab').hidden = false
menus.normal.items.find(i => i.id === 'equalizer').hidden = false
}

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

@ -840,6 +840,17 @@
</div>
</div>
<div class="md-option-line">
<!-- Do not translate -->
<div class="md-option-segment">
Style Stack Editor
</div>
</div>
<div class="md-option-line">
<stylestack-editor :themes="themes"/>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.experimental.unknownPlugin')}}
@ -938,6 +949,77 @@
</div>
</script>
<script>
// do not translate
Vue.component('stylestack-editor', {
/*html*/
template: `
<b-row>
<b-col>
<select size="6" v-model="selected" style="width:100%;">
<option v-for="theme in $root.cfg.visual.styles" :value="theme">{{theme}}</option>
</select>
<div class="btn-group" style="width: 100%">
<button @click="moveUp" class="md-btn md-btn-small">Up</button>
<button @click="remove" class="md-btn md-btn-small">Remove</button>
<button @click="moveDown" class="md-btn md-btn-small">Down</button>
</div>
</b-col>
<b-col>
<select class="md-select" style="width:100%;" v-model="newTheme">
<option v-for="theme in themes" :value="theme.file">{{theme.name}}</option>
</select>
<button class="md-btn" @click="addStyle()">Add</button>
</b-col>
</b-row>
`,
props: {
themes: {
type: Array,
default: []
}
},
data: function () {
return {
selected: null,
newTheme: null
}
},
methods: {
moveUp() {
const styles = this.$root.cfg.visual.styles
const index = styles.indexOf(this.selected)
if (index > 0) {
styles.splice(index, 1)
styles.splice(index - 1, 0, this.selected)
}
this.$root.reloadStyles()
},
moveDown() {
const styles = this.$root.cfg.visual.styles
const index = styles.indexOf(this.selected)
if (index < styles.length - 1) {
styles.splice(index, 1)
styles.splice(index + 1, 0, this.selected)
}
this.$root.reloadStyles()
},
remove() {
const styles = this.$root.cfg.visual.styles
const index = styles.indexOf(this.selected)
styles.splice(index, 1)
this.$root.reloadStyles()
},
addStyle() {
const styles = this.$root.cfg.visual.styles
styles.push(this.newTheme)
this.newTheme = null
this.$root.reloadStyles()
}
}
})
</script>
<script>
Vue.component('cider-settings', {
template: "#cider-settings",
@ -960,13 +1042,13 @@
methods: {
windowBgStyleChange() {
this.$root.getNowPlayingArtworkBG(undefined, true)
if(this.$root.cfg.visual.window_background_style == "mica") {
if (this.$root.cfg.visual.window_background_style == "mica") {
this.$root.spawnMica()
}
},
reinstallWidevineCDM () {
bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok)=>{
if(ok) {
reinstallWidevineCDM() {
bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
if (ok) {
ipcRenderer.invoke("reinstall-widevine-cdm");
}
})
@ -1018,7 +1100,8 @@
CiderAudio.spatialOn()
CiderAudio.hierarchical_loading();
}
}})
}
})
}
else {
CiderAudio.init();
@ -1057,16 +1140,16 @@
if (app.cfg.main.UPDATABLE) return;
let updateFields = document.getElementsByClassName('update-check');
for (let i=0; i < updateFields.length; i++) {
for (let i = 0; i < updateFields.length; i++) {
updateFields[i].style = "opacity: 0.5; pointer-events: none;";
updateFields[i].title = "Not available on this type of build";
}
},
promptForRelaunch(){
promptForRelaunch() {
bootbox.confirm(app.getLz('action.relaunch.confirm'), function (result) {
if (result) {
ipcRenderer.send('relaunchApp','');
ipcRenderer.send('relaunchApp', '');
}
});
}