improvements to style editor
This commit is contained in:
booploops
parent
cbbeb8009f
commit
605360360d
2 changed files with 149 additions and 107 deletions
|
|
@ -283,6 +283,7 @@
|
|||
// top: 0;
|
||||
height : calc(100% - 60px - var(--navigationBarHeight));
|
||||
padding: 0px;
|
||||
|
||||
.inner-container {
|
||||
display: flex;
|
||||
height : calc(100% - var(--navigationBarHeight));
|
||||
|
|
@ -972,9 +973,11 @@
|
|||
display : flex;
|
||||
overflow: hidden;
|
||||
padding : 16px 32px;
|
||||
|
||||
>.latestRelease {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
>.topSongs {
|
||||
width: calc(100% - 250px);
|
||||
}
|
||||
|
|
@ -1016,6 +1019,37 @@
|
|||
.settings-page {
|
||||
padding: 0px;
|
||||
|
||||
.stylestack-editor {
|
||||
width: 100%;
|
||||
|
||||
.btn,
|
||||
.btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.themeLabel {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.removeItem {
|
||||
border: 0px;
|
||||
background: transparent;
|
||||
height: 32px;
|
||||
font-weight: bold;
|
||||
color: var(--textColor);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stylesDropdown {
|
||||
>.dropdown-menu {
|
||||
height : 300px;
|
||||
overflow-y: overlay;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
width : 90%;
|
||||
margin: 16px auto 0px;
|
||||
|
|
@ -1068,7 +1102,8 @@
|
|||
box-shadow : var(--mediaItemShadow-Shadow);
|
||||
background : black;
|
||||
|
||||
.spprev, .nextprev {
|
||||
.spprev,
|
||||
.nextprev {
|
||||
position : absolute;
|
||||
height : 100%;
|
||||
width : 64px;
|
||||
|
|
@ -1077,6 +1112,7 @@
|
|||
z-index : 1;
|
||||
border : 0px;
|
||||
transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
|
||||
|
||||
&:hover {
|
||||
background: var(--selected);
|
||||
transform : scale(1.1);
|
||||
|
|
@ -1104,6 +1140,7 @@
|
|||
|
||||
.spprev {
|
||||
left: 0;
|
||||
|
||||
&:before {
|
||||
-webkit-mask-image: url("./views/svg/chevron-left.svg");
|
||||
}
|
||||
|
|
@ -1112,6 +1149,7 @@
|
|||
|
||||
.nextprev {
|
||||
right: 0;
|
||||
|
||||
&:before {
|
||||
-webkit-mask-image: url("./views/svg/chevron-right.svg");
|
||||
}
|
||||
|
|
@ -1154,6 +1192,7 @@
|
|||
transform : scale(1.2) translate3d(0, 0, 0);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.spfade-leave-to {
|
||||
opacity : 1;
|
||||
transform : scale(1) translate3d(0, 0, 0);
|
||||
|
|
@ -1171,9 +1210,11 @@
|
|||
0% {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 0%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -843,13 +843,13 @@
|
|||
<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>
|
||||
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
<stylestack-editor :themes="themes"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
|
|
@ -954,24 +954,23 @@
|
|||
Vue.component('stylestack-editor', {
|
||||
/*html*/
|
||||
template: `
|
||||
<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>
|
||||
<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 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()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue