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 {
line-height: 1.5;
margin : 0;
font-size: 1em;
}
.modal-body {
position : relative;
flex : 1 1 auto;
padding : 3rem 1rem 1rem 1rem;
font-size: 0.9em
//font-size: 0.9em
}
.modal-footer {
@ -1311,6 +1312,10 @@
border-radius : 0.25rem;
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;
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) {
@ -1338,22 +1343,22 @@ fieldset:disabled .btn {
.btn-primary {
color : #fff;
background-color: #0d6efd;
border-color : #0d6efd;
background-color: var(--keyColor-primary);
//border-color : #0d6efd;
}
.btn-primary:hover {
color : #fff;
background-color: #0b5ed7;
border-color : #0a58ca;
//background-color: #0b5ed7;
//border-color : #0a58ca;
}
.btn-check:focus+.btn-primary,
.btn-primary:focus {
color : #fff;
background-color: #0b5ed7;
border-color : #0a58ca;
box-shadow : 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
//background-color: #0b5ed7;
//border-color : #0a58ca;
//box-shadow : 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked+.btn-primary,
@ -1362,8 +1367,8 @@ fieldset:disabled .btn {
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
color : #fff;
background-color: #0a58ca;
border-color : #0a53be;
//background-color: #0a58ca;
//border-color : #0a53be;
}
.btn-check:checked+.btn-primary:focus,
@ -1371,7 +1376,7 @@ fieldset:disabled .btn {
.btn-primary:active:focus,
.btn-primary.active: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,

View file

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

View file

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

View file

@ -43,16 +43,22 @@
</div>
<sidebar-library-item :name="$root.getLz('term.recentlyAdded')"
svg-icon="./assets/feather/plus-circle.svg"
v-if="cfg.general.sidebarItems.recentlyAdded"
page="library-recentlyadded"></sidebar-library-item>
<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>
<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>
<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>
<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>
<sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg"
v-if="cfg.general.sidebarItems.podcasts"
page="podcasts">
</sidebar-library-item>
<template v-if="getPlaylistFolderChildren('p.applemusic').length != 0">

View file

@ -61,6 +61,68 @@
</select>
</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>
</b-tab>