added twopanel directive
This commit is contained in:
booploops
parent
d9081e0037
commit
e4030c10c0
6 changed files with 189 additions and 47 deletions
|
|
@ -959,6 +959,10 @@ const app = new Vue({
|
||||||
if (this.cfg.visual.window_background_style == "none") {
|
if (this.cfg.visual.window_background_style == "none") {
|
||||||
classes.simplebg = true
|
classes.simplebg = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(this.getThemeDirective('windowLayout') == 'twopanel') {
|
||||||
|
classes.twopanel = true
|
||||||
|
}
|
||||||
return classes
|
return classes
|
||||||
},
|
},
|
||||||
invokeDrawer(panel) {
|
invokeDrawer(panel) {
|
||||||
|
|
|
||||||
17
src/renderer/less/directives.less
Normal file
17
src/renderer/less/directives.less
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
#app.twopanel {
|
||||||
|
--chromeHeight1: 42px;
|
||||||
|
--chromeHeight2: 55px;
|
||||||
|
--chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
|
||||||
|
.app-chrome {
|
||||||
|
.app-mainmenu {
|
||||||
|
width: 88px;
|
||||||
|
}
|
||||||
|
height: var(--chromeHeight1);
|
||||||
|
&.chrome-bottom {
|
||||||
|
height: var(--chromeHeight2);
|
||||||
|
.app-chrome--left {
|
||||||
|
padding-left: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -3142,3 +3142,4 @@ body[platform='darwin'] {
|
||||||
@import url("less/macos.less");
|
@import url("less/macos.less");
|
||||||
@import url("less/linux.less");
|
@import url("less/linux.less");
|
||||||
@import url("less/compact.less");
|
@import url("less/compact.less");
|
||||||
|
@import url("less/directives.less");
|
||||||
|
|
|
||||||
115
src/renderer/views/app/chrome-bottom.ejs
Normal file
115
src/renderer/views/app/chrome-bottom.ejs
Normal file
|
|
@ -0,0 +1,115 @@
|
||||||
|
<div class="app-chrome chrome-bottom" v-if="getThemeDirective('windowLayout') == 'twopanel'" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
|
||||||
|
<div class="app-chrome--left">
|
||||||
|
<div class="app-chrome-item display--large">
|
||||||
|
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
|
||||||
|
@click="mk.shuffleMode = 1"></button>
|
||||||
|
<button class="playback-button--small shuffle active" v-else
|
||||||
|
@click="mk.shuffleMode = 0"></button>
|
||||||
|
</div>
|
||||||
|
<div class="app-chrome-item display--large">
|
||||||
|
<button class="playback-button previous" @click="prevButton()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="app-chrome-item display--large">
|
||||||
|
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
|
||||||
|
<button class="playback-button play" @click="mk.play()" v-else></button>
|
||||||
|
</div>
|
||||||
|
<div class="app-chrome-item display--large">
|
||||||
|
<button class="playback-button next" @click="skipToNextItem()"></button>
|
||||||
|
</div>
|
||||||
|
<div class="app-chrome-item display--large">
|
||||||
|
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
|
||||||
|
@click="mk.repeatMode = 1"></button>
|
||||||
|
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||||
|
v-else-if="mk.repeatMode == 1"></button>
|
||||||
|
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
|
||||||
|
v-else-if="mk.repeatMode == 2"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-chrome--center">
|
||||||
|
<div class="app-chrome-item playback-controls">
|
||||||
|
<template v-if="mkReady()">
|
||||||
|
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
|
||||||
|
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
|
||||||
|
<div class="artwork" @click="drawer.open = false; fullscreen(true)">
|
||||||
|
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
|
||||||
|
</div>
|
||||||
|
<div class="playback-info">
|
||||||
|
<div class="song-name"
|
||||||
|
:class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
|
||||||
|
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||||
|
<div class="explicit-icon"
|
||||||
|
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
|
||||||
|
style="display: inline-block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
|
||||||
|
<div class="song-artist-album">
|
||||||
|
<div class="song-artist-album-content"
|
||||||
|
:class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
|
||||||
|
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
|
||||||
|
<div class="item-navigate song-artist" style="display: inline-block"
|
||||||
|
@click="getNowPlayingItemDetailed(`artist`)">
|
||||||
|
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||||
|
</div>
|
||||||
|
<div class="song-artist item-navigate" style="display: inline-block"
|
||||||
|
@click="getNowPlayingItemDetailed('album')"
|
||||||
|
v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
|
||||||
|
<div class="separator" style="display: inline-block;">{{"—"}}</div>
|
||||||
|
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
|
||||||
|
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="song-progress">
|
||||||
|
<div class="song-duration"
|
||||||
|
style="justify-content: space-between; height: 1px;"
|
||||||
|
:style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
|
||||||
|
<p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
|
||||||
|
<p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="range" step="0.01" min="0" :style="progressBarStyle()"
|
||||||
|
@input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
|
||||||
|
@mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
|
||||||
|
:max="mk.currentPlaybackDuration" :value="getSongProgress()">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
|
||||||
|
<div class="actions">
|
||||||
|
<button class="lcdMenu" @click="nowPlayingContextMenu">
|
||||||
|
<div class="svg-icon"></div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-chrome--right">
|
||||||
|
<div class="app-chrome-item volume display--large">
|
||||||
|
<button class="volume-button--small volume" @click="muteButtonPressed()"
|
||||||
|
:class="{'active': this.cfg.audio.volume == 0}"></button>
|
||||||
|
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
|
||||||
|
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
|
||||||
|
</div>
|
||||||
|
<div class="app-chrome-item generic">
|
||||||
|
<button class="playback-button--small miniplayer"
|
||||||
|
@click="drawer.open = false; miniPlayer(true)"></button>
|
||||||
|
</div>
|
||||||
|
<div class="app-chrome-item generic">
|
||||||
|
<button class="playback-button--small queue" :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"
|
||||||
|
:class="{'active': drawer.panel == 'lyrics'}"
|
||||||
|
@click="invokeDrawer('lyrics')"></button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -16,33 +16,35 @@
|
||||||
@click="mainMenuVisibility(true)"
|
@click="mainMenuVisibility(true)"
|
||||||
:class="{active: chrome.menuOpened}"></button>
|
:class="{active: chrome.menuOpened}"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome-item display--large">
|
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
|
||||||
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
|
<div class="app-chrome-item display--large">
|
||||||
@click="mk.shuffleMode = 1"></button>
|
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
|
||||||
<button class="playback-button--small shuffle active" v-else
|
@click="mk.shuffleMode = 1"></button>
|
||||||
@click="mk.shuffleMode = 0"></button>
|
<button class="playback-button--small shuffle active" v-else
|
||||||
</div>
|
@click="mk.shuffleMode = 0"></button>
|
||||||
<div class="app-chrome-item display--large">
|
</div>
|
||||||
<button class="playback-button previous" @click="prevButton()"></button>
|
<div class="app-chrome-item display--large">
|
||||||
</div>
|
<button class="playback-button previous" @click="prevButton()"></button>
|
||||||
<div class="app-chrome-item display--large">
|
</div>
|
||||||
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
|
<div class="app-chrome-item display--large">
|
||||||
<button class="playback-button play" @click="mk.play()" v-else></button>
|
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
|
||||||
</div>
|
<button class="playback-button play" @click="mk.play()" v-else></button>
|
||||||
<div class="app-chrome-item display--large">
|
</div>
|
||||||
<button class="playback-button next" @click="skipToNextItem()"></button>
|
<div class="app-chrome-item display--large">
|
||||||
</div>
|
<button class="playback-button next" @click="skipToNextItem()"></button>
|
||||||
<div class="app-chrome-item display--large">
|
</div>
|
||||||
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
|
<div class="app-chrome-item display--large">
|
||||||
@click="mk.repeatMode = 1"></button>
|
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
|
||||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
@click="mk.repeatMode = 1"></button>
|
||||||
v-else-if="mk.repeatMode == 1"></button>
|
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
|
||||||
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
|
v-else-if="mk.repeatMode == 1"></button>
|
||||||
v-else-if="mk.repeatMode == 2"></button>
|
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
|
||||||
</div>
|
v-else-if="mk.repeatMode == 2"></button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome--center">
|
<div class="app-chrome--center">
|
||||||
<div class="app-chrome-item playback-controls">
|
<div class="app-chrome-item playback-controls" v-if="getThemeDirective('windowLayout') != 'twopanel'">
|
||||||
<template v-if="mkReady()">
|
<template v-if="mkReady()">
|
||||||
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
|
<div class="app-playback-controls" @mouseover="chrome.progresshover = true"
|
||||||
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
|
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
|
||||||
|
|
@ -105,28 +107,30 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-chrome--right">
|
<div class="app-chrome--right">
|
||||||
<div class="app-chrome-item volume display--large">
|
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
|
||||||
<button class="volume-button--small volume" @click="muteButtonPressed()"
|
<div class="app-chrome-item volume display--large">
|
||||||
:class="{'active': this.cfg.audio.volume == 0}"></button>
|
<button class="volume-button--small volume" @click="muteButtonPressed()"
|
||||||
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
|
:class="{'active': this.cfg.audio.volume == 0}"></button>
|
||||||
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
|
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
|
||||||
</div>
|
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
|
||||||
<div class="app-chrome-item generic">
|
</div>
|
||||||
<button class="playback-button--small miniplayer"
|
<div class="app-chrome-item generic">
|
||||||
@click="drawer.open = false; miniPlayer(true)"></button>
|
<button class="playback-button--small miniplayer"
|
||||||
</div>
|
@click="drawer.open = false; miniPlayer(true)"></button>
|
||||||
<div class="app-chrome-item generic">
|
</div>
|
||||||
<button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
|
<div class="app-chrome-item generic">
|
||||||
@click="invokeDrawer('queue')"></button>
|
<button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
|
||||||
</div>
|
@click="invokeDrawer('queue')"></button>
|
||||||
<div class="app-chrome-item generic">
|
</div>
|
||||||
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
|
<div class="app-chrome-item generic">
|
||||||
<button class="playback-button--small lyrics"
|
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
|
||||||
:class="{'active': drawer.panel == 'lyrics'}"
|
<button class="playback-button--small lyrics"
|
||||||
@click="invokeDrawer('lyrics')"></button>
|
:class="{'active': drawer.panel == 'lyrics'}"
|
||||||
</template>
|
@click="invokeDrawer('lyrics')"></button>
|
||||||
|
</template>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
<div class="app-chrome-item full-height" id="window-controls-container" v-if="chrome.windowControlPosition == 'right'">
|
<div class="app-chrome-item full-height" id="window-controls-container" v-if="chrome.windowControlPosition == 'right'">
|
||||||
<div class="window-controls">
|
<div class="window-controls">
|
||||||
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
|
<div class="minimize" @click="ipcRenderer.send('minimize')"></div>
|
||||||
|
|
|
||||||
|
|
@ -42,6 +42,7 @@
|
||||||
<div id="app-main" v-show="appMode == 'player'">
|
<div id="app-main" v-show="appMode == 'player'">
|
||||||
<%- include('app/chrome-top'); %>
|
<%- include('app/chrome-top'); %>
|
||||||
<%- include('app/app-navigation'); %>
|
<%- include('app/app-navigation'); %>
|
||||||
|
<%- include('app/chrome-bottom'); %>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
<transition name="fsModeSwitch">
|
<transition name="fsModeSwitch">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue