added customize sidebar items

This commit is contained in:
booploops 2022-03-30 22:56:35 -07:00
parent 2d41095643
commit 71c7b08916
5 changed files with 90 additions and 11 deletions

View file

@ -1074,13 +1074,14 @@
.modal-title { .modal-title {
line-height: 1.5; line-height: 1.5;
margin : 0; margin : 0;
font-size: 1em;
} }
.modal-body { .modal-body {
position : relative; position : relative;
flex : 1 1 auto; flex : 1 1 auto;
padding : 3rem 1rem 1rem 1rem; padding : 3rem 1rem 1rem 1rem;
font-size: 0.9em //font-size: 0.9em
} }
.modal-footer { .modal-footer {
@ -1311,6 +1312,10 @@
border-radius : 0.25rem; border-radius : 0.25rem;
font-family : inherit; font-family : inherit;
transition : color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition : color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
border: 1px solid rgba(100, 100, 100, 0.35);
border-top: 1px solid rgba(100, 100, 100, 0.5);
border-radius: 6px;
font-size: 14px;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
@ -1338,22 +1343,22 @@ fieldset:disabled .btn {
.btn-primary { .btn-primary {
color : #fff; color : #fff;
background-color: #0d6efd; background-color: var(--keyColor-primary);
border-color : #0d6efd; //border-color : #0d6efd;
} }
.btn-primary:hover { .btn-primary:hover {
color : #fff; color : #fff;
background-color: #0b5ed7; //background-color: #0b5ed7;
border-color : #0a58ca; //border-color : #0a58ca;
} }
.btn-check:focus+.btn-primary, .btn-check:focus+.btn-primary,
.btn-primary:focus { .btn-primary:focus {
color : #fff; color : #fff;
background-color: #0b5ed7; //background-color: #0b5ed7;
border-color : #0a58ca; //border-color : #0a58ca;
box-shadow : 0 0 0 0.25rem rgba(49, 132, 253, 0.5); //box-shadow : 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
} }
.btn-check:checked+.btn-primary, .btn-check:checked+.btn-primary,
@ -1362,8 +1367,8 @@ fieldset:disabled .btn {
.btn-primary.active, .btn-primary.active,
.show>.btn-primary.dropdown-toggle { .show>.btn-primary.dropdown-toggle {
color : #fff; color : #fff;
background-color: #0a58ca; //background-color: #0a58ca;
border-color : #0a53be; //border-color : #0a53be;
} }
.btn-check:checked+.btn-primary:focus, .btn-check:checked+.btn-primary:focus,
@ -1371,7 +1376,7 @@ fieldset:disabled .btn {
.btn-primary:active:focus, .btn-primary:active:focus,
.btn-primary.active:focus, .btn-primary.active:focus,
.show>.btn-primary.dropdown-toggle:focus { .show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); //box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
} }
.btn-primary:disabled, .btn-primary:disabled,

View file

@ -26,6 +26,7 @@
} }
} }
// Buttons // Buttons
.md-btn { .md-btn {
font-family: inherit; font-family: inherit;

View file

@ -37,6 +37,7 @@
--keyColor-deepPressed: #ff8a9c; --keyColor-deepPressed: #ff8a9c;
--keyColor-deepPressed-rgb: 255, 138, 156; --keyColor-deepPressed-rgb: 255, 138, 156;
--keyColor-disabled: rgba(250, 88, 106, 0.35); --keyColor-disabled: rgba(250, 88, 106, 0.35);
--keyColor-primary: #ff2b52a6;
--navigationBarHeight: 0px; --navigationBarHeight: 0px;
--modalBackground: #262626; --modalBackground: #262626;
--songProgressColor: var(--keyColor); --songProgressColor: var(--keyColor);
@ -3222,6 +3223,10 @@ body[platform='darwin'] {
content: '%'; content: '%';
} }
.modal .close {
color: transparent;
}
.spatialproperties-panel.modal-fullscreen{ .spatialproperties-panel.modal-fullscreen{
flex-direction: column; flex-direction: column;
} }

View file

@ -43,16 +43,22 @@
</div> </div>
<sidebar-library-item :name="$root.getLz('term.recentlyAdded')" <sidebar-library-item :name="$root.getLz('term.recentlyAdded')"
svg-icon="./assets/feather/plus-circle.svg" svg-icon="./assets/feather/plus-circle.svg"
v-if="cfg.general.sidebarItems.recentlyAdded"
page="library-recentlyadded"></sidebar-library-item> page="library-recentlyadded"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg" <sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
v-if="cfg.general.sidebarItems.songs"
page="library-songs"></sidebar-library-item> page="library-songs"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg" <sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg"
v-if="cfg.general.sidebarItems.albums"
page="library-albums"></sidebar-library-item> page="library-albums"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg" <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
v-if="cfg.general.sidebarItems.artists"
page="library-artists"></sidebar-library-item> page="library-artists"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg" <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg"
v-if="cfg.general.sidebarItems.videos"
page="library-videos"></sidebar-library-item> page="library-videos"></sidebar-library-item>
<sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg" <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg"
v-if="cfg.general.sidebarItems.podcasts"
page="podcasts"> page="podcasts">
</sidebar-library-item> </sidebar-library-item>
<template v-if="getPlaylistFolderChildren('p.applemusic').length != 0"> <template v-if="getPlaylistFolderChildren('p.applemusic').length != 0">

View file

@ -61,6 +61,68 @@
</select> </select>
</div> </div>
</div> </div>
<div class="md-option-line">
<div class="md-option-segment">
Customize Sidebar Items
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn" v-b-modal.modal-1>
Customize
</button>
</div>
<b-modal id="modal-1" centered size="lg" title="Customize Sidebar Items">
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
{{ $root.getLz('term.recentlyAdded') }}
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.general.sidebarItems.recentlyAdded" switch/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{ $root.getLz('term.songs') }}
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.general.sidebarItems.songs" switch/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{ $root.getLz('term.albums') }}
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.general.sidebarItems.albums" switch/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{ $root.getLz('term.artists') }}
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.general.sidebarItems.artists" switch/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{ $root.getLz('term.videos') }}
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.general.sidebarItems.videos" switch/>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{ $root.getLz('term.podcasts') }}
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.general.sidebarItems.podcasts" switch/>
</div>
</div>
</div>
</b-modal>
</div>
</div> </div>
</div> </div>
</b-tab> </b-tab>