This commit is contained in:
booploops 2022-07-20 23:35:41 -07:00
parent 94a1cabf30
commit d96dc940d5
6 changed files with 15 additions and 14 deletions

View file

@ -2,7 +2,7 @@ import {html} from "../html.js"
export const sidebarLibraryItem = Vue.component("sidebar-library-item", {
template: html`
<button class="app-sidebar-item"
<button class="app-sidebar-item" v-ripple
:class="$root.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
<svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''"/>
<span class="sidebar-item-text">{{ name }}</span>

View file

@ -889,6 +889,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
text-align : left;
align-items : center;
gap : 12px;
position: relative;
&.app-sidebar-item-playlist {
-webkit-user-drag: element;

View file

@ -149,27 +149,27 @@
v-b-tooltip.hover :title="formatVolumeTooltip()">
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small cast"
<button class="playback-button--small cast" v-ripple
:title="$root.getLz('term.cast')"
v-b-tooltip.hover
@click="cfg.advanced.AudioContext ? modals.castMenu = true : (cfg.advanced.AudioContext = true, modals.castMenu = true)"></button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
<button class="playback-button--small queue" v-ripple :class="{'active': drawer.panel == 'queue'}"
:title="$root.getLz('term.queue')"
v-b-tooltip.hover
@click="invokeDrawer('queue')"></button>
</div>
<div class="app-chrome-item generic">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<button class="playback-button--small lyrics"
<button class="playback-button--small lyrics" v-ripple
:title="$root.getLz('term.lyrics')"
v-b-tooltip.hover
:class="{'active': drawer.panel == 'lyrics'}"
@click="invokeDrawer('lyrics')"></button>
</template>
<template v-else>
<button class="playback-button--small lyrics"
<button class="playback-button--small lyrics" v-ripple
:style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
</template>

View file

@ -16,19 +16,19 @@
<template v-if="getThemeDirective('appNavigation') != 'seperate'">
<div class="vdiv" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
<button class="playback-button navigation" v-ripple @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
v-b-tooltip.hover>
<svg-icon url="./views/svg/chevron-left.svg"></svg-icon>
</button>
</div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateForward()"
<button class="playback-button navigation" v-ripple @click="navigateForward()"
:title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
<svg-icon url="./views/svg/chevron-right.svg"></svg-icon>
</button>
</div>
<div class="app-chrome-item" v-if="getThemeDirective('windowLayout') == 'twopanel'">
<button class="playback-button collapseLibrary" v-b-tooltip.hover
<button class="playback-button collapseLibrary" v-ripple v-b-tooltip.hover
:title="chrome.sidebarCollapsed ? getLz('action.showLibrary') : getLz('action.hideLibrary')"
@click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
<transition name="fade">
@ -230,21 +230,21 @@
:title="formatVolumeTooltip()" />
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small cast" :title="$root.getLz('term.cast')"
<button class="playback-button--small cast" :title="$root.getLz('term.cast')" v-ripple
@click="cfg.advanced.AudioContext ? modals.castMenu = true : (cfg.advanced.AudioContext = true, modals.castMenu = true)"
v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small queue" :title="$root.getLz('term.queue')" v-b-tooltip.hover
<button class="playback-button--small queue" :title="$root.getLz('term.queue')" v-b-tooltip.hover v-ripple
:class="{'active': drawer.panel == 'queue'}" @click="invokeDrawer('queue')"></button>
</div>
<div class="app-chrome-item generic">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<button class="playback-button--small lyrics" :title="$root.getLz('term.lyrics')" v-b-tooltip.hover
<button class="playback-button--small lyrics" :title="$root.getLz('term.lyrics')" v-b-tooltip.hover v-ripple
:class="{'active': drawer.panel == 'lyrics'}" @click="invokeDrawer('lyrics')"></button>
</template>
<template v-else>
<button class="playback-button--small lyrics" :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
<button class="playback-button--small lyrics" :style="{'opacity': 0.3, 'pointer-events': 'none'}" v-ripple></button>
</template>
</div>
</template>

View file

@ -1,6 +1,6 @@
<script type="text/x-template" id="sidebar-playlist">
<div class="sidebar-playlist" :key="item.id">
<button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id"
<button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-ripple
:class="item.type != 'library-playlist-folders' ? {'active': $root.page.includes(item.id)} : ['playlist-folder', {'folder-button-active': folderOpened}, isPlaylistSelected]"
@contextmenu="playlistContextMenu($event, item.id)"
@dragstart="startDrag($event, item)"

View file

@ -9,7 +9,7 @@
</animatedartwork-view>
<div class="header-content" style="pointer-events: all;">
<div class="row">
<div class="col-sm" style="width: auto;">
<div class="col-auto" style="width: auto;">
<div class="artist-image"
v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))&& !hasHero()">
<mediaitem-artwork