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

improvements to style editor

Browse source
This commit is contained in:
booploops 2022-04-11 16:38:23 -07:00
parent cbbeb8009f
commit 605360360d
2 changed files with 149 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -843,12 +843,12 @@
<div class="md-option-line">
<!-- Do not translate -->
<div class="md-option-segment">
Style Stack Editor
Style Editor<br>
<small>Mix and match various theme components to get Cider looking exactly how you want.</small>
</div>
<div class="md-option-segment">
<stylestack-editor :themes="themes"/>
</div>
</div>
<div class="md-option-line">
<stylestack-editor :themes="themes"/>
</div>
<div class="md-option-line">
@ -954,24 +954,23 @@
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>
<div class="stylestack-editor">
<draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
<b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
<b-row>
<b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
<b-col sm="auto">
<button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
</b-col>
</b-row>
</b-list-group-item>
<b-list-group-item variant="dark">
<b-dropdown class="stylesDropdown" variant="primary" text="Add Style...">
<b-dropdown-item v-for="theme in themes" @click="addStyle(theme.file)">{{theme.name}}</b-dropdown-item>
</b-dropdown>
</b-list-group-item>
</draggable>
</div>
`,
props: {
themes: {
@ -986,6 +985,9 @@
}
},
methods: {
getThemeName(filename) {
return this.themes.find(theme => theme.file === filename).name;
},
moveUp() {
const styles = this.$root.cfg.visual.styles
const index = styles.indexOf(this.selected)
@ -1004,16 +1006,15 @@
}
this.$root.reloadStyles()
},
remove() {
remove(style) {
const styles = this.$root.cfg.visual.styles
const index = styles.indexOf(this.selected)
const index = styles.indexOf(style)
styles.splice(index, 1)
this.$root.reloadStyles()
},
addStyle() {
addStyle(style) {
const styles = this.$root.cfg.visual.styles
styles.push(this.newTheme)
this.newTheme = null
styles.push(style)
this.$root.reloadStyles()
}
}