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

added accent color and window color tinting

Browse source 
- rearranged some of visual tab in settings
- added advanced section to visual
This commit is contained in:
booploops 2022-06-06 01:46:41 -07:00
parent 11586b251c
commit d0c2d6d36e
7 changed files with 156 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/i18n/en_US.json
View file

@ -450,10 +450,14 @@
"settings.header.visual": "Visual",
"settings.header.visual.description": "Adjust the visual settings for Cider.",
"settings.option.visual.windowStyle": "Window Style",
"settings.option.visual.customAccentColor": "Custom Accent Color",
"settings.option.visual.accentColor": "Accent Color",
"settings.option.visual.windowColor": "Window Tint Color",
"settings.option.visual.windowBackgroundStyle": "Window Background Style",
"settings.header.visual.windowBackgroundStyle.none": "None",
"settings.header.visual.windowBackgroundStyle.artwork": "Artwork",
"settings.header.visual.windowBackgroundStyle.image": "Image",
"settings.header.visual.windowBackgroundStyle.color": "Color Tint",
"settings.option.visual.animatedArtwork": "Animated Artwork",
"settings.header.visual.animatedArtwork.always": "Always",
"settings.header.visual.animatedArtwork.limited": "Limited to pages and special entries",

5
src/main/base/store.ts
View file

@ -205,7 +205,10 @@ export class Store {
},
"windowControlPosition": 0, // 0 default right
"nativeTitleBar": false,
"uiScale": 1.0
"uiScale": 1.0,
"windowColor": "#000000",
"customAccentColor": false,
"accentColor": "#fc3c44"
},
"lyrics": {
"enable_mxm": false,

4
src/renderer/less/ameframework.less
View file

@ -23,6 +23,10 @@
padding: 14px;
background: var(--opaquePageBGColor);
font-size: 0.85em;
&.child {
background: rgb(0 0 0 / 15%);
}
}
.md-option-segment.md-option-segment_auto {

11
src/renderer/main/vueapp.js
View file

@ -283,6 +283,17 @@ const app = new Vue({
ipcRenderer.invoke("renderer-ready", true)
document.querySelector("#LOADER").remove()
},
getAppStyle() {
let finalStyle = {}
if(this.cfg.visual.window_background_style === "color") {
finalStyle["background-color"] = this.cfg.visual.windowColor
}
if(this.cfg.visual.customAccentColor) {
finalStyle["--keyColor"] = this.cfg.visual.accentColor
finalStyle["--songProgressColor"] = this.cfg.visual.accentColor
}
return finalStyle
},
setTimeout(func, time) {
return setTimeout(func, time);
},

1
src/renderer/style.less
View file

@ -31,6 +31,7 @@
--selected-click: rgb(80 80 80 / 30%);
--hover: rgb(200 200 200 / 10%);
// --keyColor: #fa586a;
--keyColorDefault: @keyColor;
--keyColor: @keyColor;
--keyColor-rgb: 250, 88, 106;
--keyColor-rollover: #ff8a9c;

2
src/renderer/views/main.ejs
View file

@ -71,7 +71,7 @@
<div id="LOADER">
<%- include("../assets/cider-round.svg") %>
</div>
<div id="app" :class="getAppClasses()" :window-style="cfg.visual.directives.windowLayout">
<div id="app" :class="getAppClasses()" :style="getAppStyle()" :window-style="cfg.visual.directives.windowLayout">
<transition name="fsModeSwitch">
<div id="app-main" v-show="appMode == 'player'">
<%- include('app/chrome-top'); %>

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

@ -96,7 +96,8 @@
<option value="listen_now">{{$root.getLz('term.listenNow')}}</option>
<option value="browse">{{$root.getLz('term.browse')}}</option>
<option value="radio">{{$root.getLz('term.radio')}}</option>
<option value="library-recentlyadded">{{$root.getLz('term.recentlyAdded')}}</option>
<option value="library-recentlyadded">{{$root.getLz('term.recentlyAdded')}}
</option>
<option value="library-songs">{{$root.getLz('term.songs')}}</option>
<option value="library-albums">{{$root.getLz('term.albums')}}</option>
<option value="library-artists">{{$root.getLz('term.artists')}}</option>
@ -124,7 +125,8 @@
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.general.sidebarItems.recentlyAdded"
<input type="checkbox"
v-model="app.cfg.general.sidebarItems.recentlyAdded"
switch/>
</label>
</div>
@ -135,7 +137,8 @@
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.general.sidebarItems.songs" switch/>
<input type="checkbox" v-model="app.cfg.general.sidebarItems.songs"
switch/>
</label>
</div>
</div>
@ -191,7 +194,7 @@
{{$root.getLz('settings.option.general.keybindings')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn" @click="app.appRoute('keybinds-settings')" >
<button class="md-btn" @click="app.appRoute('keybinds-settings')">
{{$root.getLz('settings.option.general.keybindings.open')}}
</button>
</div>
@ -241,7 +244,8 @@
<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')}}
<option value="STANDARD">
{{$root.getLz('settings.header.audio.quality.standard')}}
({{$root.getLz('settings.header.audio.quality.standard.description')}})
</option>
</select>
@ -334,7 +338,8 @@
</label>
</div>
</div>
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext && app.cfg.audio.normalization">
<div class="md-option-line"
v-show="app.cfg.advanced.AudioContext && app.cfg.audio.normalization">
<div class="md-option-segment">
{{$root.getLz('settings.option.audio.dbspl.display')}}
<br>
@ -408,6 +413,9 @@
<option value="image">
{{$root.getLz('settings.header.visual.windowBackgroundStyle.image')}}
</option>
<option value="color">
{{$root.getLz('settings.header.visual.windowBackgroundStyle.color')}}
</option>
<option value="mica">
Mica (Beta)
</option>
@ -415,6 +423,113 @@
</label>
</div>
</div>
<div class="md-option-line child" v-if="app.cfg.visual.window_background_style == 'color'">
<div class="md-option-segment">
{{$root.getLz('settings.option.visual.windowColor')}}
</div>
<div class="md-option-segment_auto">
<input type="color" v-model="app.cfg.visual.windowColor"/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.visual.customAccentColor')}}
</div>
<div class="md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.visual.customAccentColor" switch/>
</div>
</div>
<div class="md-option-line child" v-if="app.cfg.visual.customAccentColor">
<div class="md-option-segment">
{{$root.getLz('settings.option.visual.accentColor')}}
</div>
<div class="md-option-segment_auto">
<input type="color" v-model="app.cfg.visual.accentColor"/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
<small>({{$root.getLz('settings.option.visual.hardwareAcceleration.description')}})</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<select class="md-select" style="width:180px;"
v-model="app.cfg.visual.hw_acceleration" @change="promptForRelaunch()">
<option value="default">
{{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
</option>
<option value="webgpu">
{{$root.getLz('settings.header.visual.hardwareAcceleration.webGPU')}}
</option>
<option value="disabled">{{$root.getLz('term.disabled')}}</option>
</select>
</label>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.visual.showPersonalInfo')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.visual.showuserinfo"
v-on:change="toggleUserInfo"
switch/>
</label>
</div>
</div>
</div>
<!-- Window Settings -->
<div class="md-option-header">
<span>{{$root.getLz('settings.header.window')}}</span>
</div>
<div class="settings-option-body">
<div class="md-option-line" v-show="app.platform !== 'darwin'">
<div class="md-option-segment">
{{$root.getLz("settings.option.window.close_button_hide")}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
</label>
</div>
</div>
<div class="md-option-line" v-show="app.platform !== 'darwin'">
<div class="md-option-segment">
{{$root.getLz("settings.option.window.useNativeTitleBar")}}<br>
<small>({{$root.getLz("settings.option.visual.hardwareAcceleration.description")}})</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
@change="promptForRelaunch()"/>
</label>
</div>
</div>
<div class="md-option-line" v-show="app.platform !== 'darwin'">
<div class="md-option-segment">
{{$root.getLz("settings.option.window.windowControlStyle")}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<select class="md-select" v-model="app.cfg.visual.windowControlPosition">
<option value="0">
{{$root.getLz("settings.option.window.windowControlStyle.right")}}
</option>
<option value="1">
{{$root.getLz("settings.option.window.windowControlStyle.left")}}
</option>
</select>
</label>
</div>
</div>
</div>
<!-- Advanced Visual -->
<div class="md-option-header">
<span>{{$root.getLz('settings.header.advanced')}}</span>
</div>
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.visual.animatedArtwork')}}
@ -483,83 +598,8 @@
</label>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
<small>({{$root.getLz('settings.option.visual.hardwareAcceleration.description')}})</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<select class="md-select" style="width:180px;" v-model="app.cfg.visual.hw_acceleration" @change="promptForRelaunch()">
<option value="default">
{{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
</option>
<option value="webgpu">
{{$root.getLz('settings.header.visual.hardwareAcceleration.webGPU')}}
</option>
<option value="disabled">{{$root.getLz('term.disabled')}}</option>
</select>
</label>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.visual.showPersonalInfo')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.visual.showuserinfo"
v-on:change="toggleUserInfo"
switch/>
</label>
</div>
</div>
</div>
<!-- Window Settings -->
<div class="md-option-header">
<span>{{$root.getLz('settings.header.window')}}</span>
</div>
<div class="settings-option-body">
<div class="md-option-line" v-show="app.platform !== 'darwin'">
<div class="md-option-segment">
{{$root.getLz("settings.option.window.close_button_hide")}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
</label>
</div>
</div>
<div class="md-option-line" v-show="app.platform !== 'darwin'">
<div class="md-option-segment">
{{$root.getLz("settings.option.window.useNativeTitleBar")}}<br>
<small>({{$root.getLz("settings.option.visual.hardwareAcceleration.description")}})</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
@change="promptForRelaunch()"/>
</label>
</div>
</div>
<div class="md-option-line" v-show="app.platform !== 'darwin'">
<div class="md-option-segment">
{{$root.getLz("settings.option.window.windowControlStyle")}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<select class="md-select" v-model="app.cfg.visual.windowControlPosition">
<option value="0">
{{$root.getLz("settings.option.window.windowControlStyle.right")}}
</option>
<option value="1">
{{$root.getLz("settings.option.window.windowControlStyle.left")}}
</option>
</select>
</label>
</div>
</div>
</div>
</div>
</b-tab>
<b-tab :title="$root.getLz('settings.header.lyrics')">
@ -1047,7 +1087,8 @@
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.lastfm.enabledRemoveFeaturingArtists" switch/>
<input type="checkbox" v-model="app.cfg.lastfm.enabledRemoveFeaturingArtists"
switch/>
</label>
</div>
</div>
@ -1185,7 +1226,8 @@
<select class="md-select" @change="$root.setLz('');$root.setLzManual()"
v-model="app.cfg.general.language">
<optgroup :label="index" v-for="(categories, index) in getLanguages()">
<option v-for="lang in categories" :value="lang.code">{{lang.nameNative}} ({{
<option v-for="lang in categories" :value="lang.code">{{lang.nameNative}}
({{
lang.nameEnglish }})
</option>
</optgroup>
@ -1451,7 +1493,7 @@
ipcRenderer.send('cc-logout')
},
reloadDiscordRPC() {
ipcRenderer.send('reloadRPC')
ipcRenderer.send('reloadRPC')
}
}
})