settings page layout update

src/i18n/en_US.json

@@ -392,6 +392,7 @@
   "settings.option.advanced.playlistTrackMapping.description": "Enables deep scanning of playlists to determine which tracks are in which playlists.  Playlist cache build times can increase significantly.",
   "settings.option.visual.transparent": "Transparent frame",
   "settings.option.visual.transparent.description": "Transparent frame (needs Theme Support , requires relaunch)",
+  "settings.header.advanced": "Advanced",
   "spatial.notTurnedOn": "Audio Spatialization is disabled. To use, please enable it first.",
   "spatial.spatialProperties": "Spatial Properties",
   "spatial.width": "Width",
@@ -414,5 +415,15 @@
   "settings.header.unfinished": "Unfinished",
   "remote.web.title": "Cider Remote",
   "remote.web.description": "Scan the QR code to pair your phone up with this Cider instance",
+  "share.platform.twitter.tweet": "Listen to {{song}} on Apple Music.\n\n{{url}}\n\n#AppleMusic #Cider",
+  "share.platform.twitter": "Twitter",
+  "share.platform.facebook": "Facebook",
+  "share.platform.reddit": "Reddit",
+  "share.platform.telegram": "Telegram",
+  "share.platform.whatsapp": "WhatsApp",
+  "share.platform.messenger": "Messenger",
+  "share.platform.email": "Email",
+  "share.platform.songLink": "Copy with song.link",
+  "share.platform.clipboard": "Copy Link",
   "about.thanks": "Major thanks to the Cider Collective Team and all of our contributors."
 }

src/i18n/source/en_US.json

@@ -392,6 +392,7 @@
   "settings.option.advanced.playlistTrackMapping.description": "Enables deep scanning of playlists to determine which tracks are in which playlists.  Playlist cache build times can increase significantly.",
   "settings.option.visual.transparent": "Transparent frame",
   "settings.option.visual.transparent.description": "Transparent frame (needs Theme Support , requires relaunch)",
+  "settings.header.advanced": "Advanced",
   "spatial.notTurnedOn": "Audio Spatialization is disabled. To use, please enable it first.",
   "spatial.spatialProperties": "Spatial Properties",
   "spatial.width": "Width",

src/renderer/less/bootstrap.less

@@ -2350,6 +2350,33 @@ fieldset:disabled .btn {
 
 // Tabs
 
+.nav {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+}
+
+.nav-link:hover, .nav-link:focus {
+  text-decoration: none;
+}
+
+.nav-link.disabled {
+  color: #6c757d;
+  pointer-events: none;
+  cursor: default;
+}
+
+
 .nav-tabs {
   border-bottom: 1px solid #dee2e6;
 }
@@ -2382,14 +2409,22 @@ fieldset:disabled .btn {
 }
 
 .nav-pills .nav-link {
-  background: none;
+  background-color: transparent;
   border: 0;
-  border-radius: 0.25rem;
+  border-radius: 50px;
+  color: #eee;
+  -webkit-user-drag: none;
+  transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
+  font-weight: 500;
+  &:hover {
+    transition: transform .35s var(--appleEase), background-color 0s var(--appleEase);
+    background-color: var(--hover);
+  }
 }
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
   color: #fff;
-  background-color: #0d6efd;
+  background-color: var(--selected);
 }
 
 .nav-fill > .nav-link,

src/renderer/less/pages.less

@@ -827,6 +827,11 @@
 .settings-page {
   padding: 0px;
 
+  .nav {
+    width: 90%;
+    margin: 16px auto 0px;
+  }
+
   .md-option-header {
     padding      : 1.25em 1.25em;
     border-bottom: unset;

src/renderer/views/pages/settings.ejs

@@ -1,5 +1,7 @@
 <script type="text/x-template" id="cider-settings">
     <div class="content-inner settings-page">
+        <b-tabs pills fill content-class="mt-3">
+            <b-tab :title="$root.getLz('settings.header.general')" active>
                 <div class="md-option-container">
                     <!-- General Settings -->
                     <div class="md-option-header">
@@ -60,7 +62,10 @@
                             </div>
                         </div>
                     </div>
-
+                </div>
+            </b-tab>
+            <b-tab :title="$root.getLz('settings.header.audio')">
+                <div class="md-option-container">
                     <!-- Audio Settings -->
                     <div class="md-option-header">
                         <span>{{$root.getLz('settings.header.audio')}}</span>
@@ -73,7 +78,7 @@
                             <div class="md-option-segment md-option-segment_auto">
                                 <select class="md-select" style="width:180px;" v-model="app.cfg.audio.quality"
                                         v-on:change="changeAudioQuality">
-                            <!-- <option value="">{{$root.getLz('settings.header.audio.quality.hireslossless')}}</option> -->
+                                    <!-- // <option value="">{{$root.getLz('settings.header.audio.quality.hireslossless')}}</option> -->
                                     <!-- <option value="">{{$root.getLz('settings.header.audio.quality.lossless')}}</option> -->
                                     <option value="HIGH">{{$root.getLz('settings.header.audio.quality.high')}} ({{$root.getLz('settings.header.audio.quality.high.description')}})</option>
                                     <option value="STANDARD">{{$root.getLz('settings.header.audio.quality.standard')}} ({{$root.getLz('settings.header.audio.quality.standard.description')}})</option>
@@ -141,7 +146,10 @@
                             </div>
                         </div>
                     </div>
-
+                </div>
+            </b-tab>
+            <b-tab :title="$root.getLz('settings.header.visual')">
+                <div class="md-option-container">
                     <!-- Visual Settings -->
                     <div class="md-option-header">
                         <span>{{$root.getLz('settings.header.visual')}}</span>
@@ -183,9 +191,11 @@
                                         v-model="app.cfg.visual.window_background_style">
                                     <option value="none">{{$root.getLz('settings.header.visual.windowBackgroundStyle.none')}}
                                     </option>
-                            <option value="artwork">{{$root.getLz('settings.header.visual.windowBackgroundStyle.artwork')}}
+                                    <option value="artwork">
+                                        {{$root.getLz('settings.header.visual.windowBackgroundStyle.artwork')}}
                                     </option>
-                            <option value="image">{{$root.getLz('settings.header.visual.windowBackgroundStyle.image')}}
+                                    <option value="image">
+                                        {{$root.getLz('settings.header.visual.windowBackgroundStyle.image')}}
                                     </option>
                                     <option value="mica">
                                         Mica (Beta)
@@ -221,7 +231,8 @@
                                     </option>
                                     <option value="2">{{$root.getLz('settings.header.visual.animatedArtworkQuality.high')}}
                                     </option>
-                            <option value="3">{{$root.getLz('settings.header.visual.animatedArtworkQuality.veryHigh')}}
+                                    <option value="3">
+                                        {{$root.getLz('settings.header.visual.animatedArtworkQuality.veryHigh')}}
                                     </option>
                                     <option value="4">{{$root.getLz('settings.header.visual.animatedArtworkQuality.extreme')}}
                                     </option>
@@ -263,7 +274,6 @@
                             </div>
                         </div>
                     </div>
-
                     <!-- Window Settings -->
                     <div class="md-option-header">
                         <span>{{$root.getLz('settings.header.window')}}</span>
@@ -278,7 +288,10 @@
                             </div>
                         </div>
                     </div>
-
+                </div>
+            </b-tab>
+            <b-tab :title="$root.getLz('settings.header.lyrics')">
+                <div class="md-option-container">
                     <!-- Lyric Settings -->
                     <div class="md-option-header">
                         <span>{{$root.getLz('settings.header.lyrics')}}</span>
@@ -584,7 +597,10 @@
                             </div>
                         </div>
                     </div>
-
+                </div>
+            </b-tab>
+            <b-tab :title="$root.getLz('settings.header.connectivity')">
+                <div class="md-option-container">
                     <!-- Connectivity Settings -->
                     <div class="md-option-header">
                         <span>{{$root.getLz('settings.header.connectivity')}}</span>
@@ -665,7 +681,10 @@
                             </div>
                         </div>
                     </div>
-
+                </div>
+            </b-tab>
+            <b-tab :title="$root.getLz('settings.header.advanced')">
+                <div class="md-option-container">
                     <!-- Debug Settings -->
                     <div class="md-option-header">
                         <span>{{$root.getLz('settings.header.debug')}}</span>
@@ -809,51 +828,9 @@
                             </div>
                         </div>
                     </div>
-
-            <!-- Unfinished Settings -->
-            <div class="md-option-header">
-                <span>{{$root.getLz('settings.header.unfinished')}}</span>
-            </div>
-            <div class="settings-option-body" style="opacity: 0.5; pointer-events: none">
-
-                    <div class="md-option-line">
-                        <div class="md-option-segment">
-                            Theme Options
-                        </div>
-                        <div class="md-option-segment md-option-segment_auto">
-                            <button class="btn">Theme Options</button>
-                        </div>
-                    </div>
-                    <div class="md-option-line">
-                        <div class="md-option-segment">
-                            Scrollbars
-                        </div>
-                        <div class="md-option-segment md-option-segment_auto">
-                            <select class="md-select">
-                                <option value="0">Show on hover</option>
-                                <option value="1">Always show</option>
-                                <option value="2">Hidden</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="md-option-line">
-                        <div class="md-option-segment">
-                            Refresh Rate
-                        </div>
-                        <div class="md-option-segment md-option-segment_auto">
-                            <select class="md-select">
-                                <option value='0'>Automatic</option>
-                                <option value='30'>30</option>
-                                <option value='60'>60</option>
-                                <option value='144'>144</option>
-                                <option value='175'>175</option>
-                                <option value='240'>240</option>
-                                <option value='360'>30</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
                 </div>
+            </b-tab>
+        </b-tabs>
     </div>
 </script>