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

settings page layout update

Browse source
This commit is contained in:
booploops 2022-03-23 16:35:57 -07:00
parent 4635173427
commit 141e3c3c60
5 changed files with 879 additions and 850 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/i18n/en_US.json
View file

@ -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."
}

1
src/i18n/source/en_US.json
View file

@ -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",

41
src/renderer/less/bootstrap.less vendored
View file

@ -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,

5
src/renderer/less/pages.less
View file

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

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

@ -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>