improvements to style editor

src/renderer/less/pages.less

@@ -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%;
   }

src/renderer/views/pages/settings.ejs

@@ -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-segment">
-
-                        <div class="md-option-line">
                                 <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>
+                            <b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
-                    <select size="6" v-model="selected" style="width:100%;">
+                            <b-col sm="auto">
-                        <option v-for="theme in $root.cfg.visual.styles" :value="theme">{{theme}}</option>
+                                <button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
-                    </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>
+                        </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)
+                styles.push(style)
-                this.newTheme = null
                 this.$root.reloadStyles()
             }
         }