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

ui overhaul episode 1

Browse source 
- replaced Inter with Pretendard
- starting overhaul for redmond style
  - moved search bar to the title bar
  - added cast button to bottom chrome
  - moved mini player button to title bar
  - moved playback progress above controls
  - artwork is now spaced out from the bottom corner
  - seperated artist and album text
- made mediaitems overall smaller to show more content
- media items now resize based on window size
- changed color of volume knob
- made default appearance slightly lighter
- made content area darker
- increase size of action buttons
This commit is contained in:
booploops 2022-05-23 23:35:01 -07:00
parent 120f4a4891
commit 2b2dcc8096
11 changed files with 266 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/renderer/assets/fonts/Pretendard/pretendardvariable.css Normal file
View file

@ -0,0 +1,16 @@
/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/
@font-face {
font-family: 'Pretendard Variable';
font-weight: 45 920;
font-style: normal;
font-display: swap;
src: local('Pretendard Variable'), url('./woff2/PretendardVariable.woff2') format('woff2-variations');
}

BIN
src/renderer/assets/fonts/Pretendard/woff2/PretendardVariable.woff2 Normal file
View file

Binary file not shown.

198
src/renderer/less/directives.less
View file

@ -4,22 +4,72 @@
#app.twopanel { #app.twopanel {
--chromeHeight1: 46px; --chromeHeight1: 46px;
--chromeHeight2: 76px; --chromeHeight2: 90px;
--chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2)); --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
.app-chrome { .app-chrome {
.app-mainmenu { .app-mainmenu {
width : 30px; width: 30px;
height: 30px; height: 30px;
} }
.search-input {
width: 300px;
}
height: var(--chromeHeight1); height: var(--chromeHeight1);
&.chrome-bottom { &.chrome-bottom {
background: var(--color2);
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
height : var(--chromeHeight2); height: var(--chromeHeight2);
box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
z-index : 1; z-index: 1;
.app-chrome-playback-duration-bottom {
width: 100%;
.col {
display: flex;
}
.col-sm-auto {
width: 4em;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8em;
}
input[type=range] {
appearance: none;
width: 100%;
height: 5px;
background-color: rgb(200 200 200 / 10%);
border-radius: 6px;
box-shadow: 0px 0px 0px 1px rgba(0 0 0 / 10%);
align-self: center;
&::-webkit-slider-thumb {
opacity: 0;
transform: scale(1);
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 100%;
background: var(--keyColor);
cursor: default;
transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
&:hover {
&::-webkit-slider-thumb {
opacity: 1;
}
}
}
}
} }
} }
@ -31,43 +81,44 @@
.app-playback-controls .actions { .app-playback-controls .actions {
align-self: center; align-self: center;
} }
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
.playback-button.play, .playback-button.play,
.playback-button.pause { .playback-button.pause {
width : 42px; width: 42px;
height : 42px; height: 42px;
background-color: rgb(200 200 200 / 20%); //background-color: rgb(200 200 200 / 20%);
border-radius : 50%; border-radius: 50%;
margin : 6px; margin: 6px;
box-shadow : 0px 0px 0px 2px var(--keyColor); //box-shadow: 0px 0px 0px 2px var(--keyColor);
} }
.app-chrome--center { .app-chrome--center {
display : flex; display: flex;
flex-direction: column; flex-direction: column;
.app-chrome-playback-controls { .app-chrome-playback-controls {
display : flex; display: flex;
z-index : 1; z-index: 1;
// margin-bottom: 12px; // margin-bottom: 12px;
} }
.app-chrome-playback-duration { .app-chrome-playback-duration {
position : relative; position: relative;
width : 80%; width: 80%;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
height : 16px; height: 16px;
.song-progress { .song-progress {
@bgColor : transparent; @bgColor: transparent;
height : 16px; height: 16px;
position : absolute; position: absolute;
bottom : 4px; bottom: 4px;
left : 0px; left: 0px;
right : 4px; right: 4px;
background: @bgColor; background: @bgColor;
z-index : 0; z-index: 0;
.song-duration { .song-duration {
@ -76,41 +127,41 @@
.song-duration p { .song-duration p {
font-weight: 400; font-weight: 400;
font-size : 10px; font-size: 10px;
height : 1.2em; height: 1.2em;
line-height: 1.3em; line-height: 1.3em;
overflow : hidden; overflow: hidden;
margin : 0 0 0 0.25em; margin: 0 0 0 0.25em;
} }
&:hover { &:hover {
>input[type=range] { > input[type=range] {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
opacity : 1; opacity: 1;
transform: scale(1); transform: scale(1);
z-index : 1; z-index: 1;
} }
} }
} }
input[type=range] { input[type=range] {
appearance : none; appearance: none;
width : 100%; width: 100%;
height : 4px; height: 4px;
background-color: rgb(200 200 200 / 10%); background-color: rgb(200 200 200 / 10%);
border-radius : 2px; border-radius: 2px;
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
opacity : 0; opacity: 0;
transform : scale(0.5); transform: scale(0.5);
-webkit-appearance: none; -webkit-appearance: none;
appearance : none; appearance: none;
width : 12px; width: 12px;
height : 12px; height: 12px;
border-radius : 100%; border-radius: 100%;
background : var(--keyColor); background: var(--keyColor);
cursor : default; cursor: default;
transition : opacity .10s var(--appleEase), transform .10s var(--appleEase); transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
} }
} }
} }
@ -119,42 +170,49 @@
} }
.app-chrome--left { .app-chrome--left {
width : 30%; width: 30%;
justify-content: flex-start; justify-content: flex-start;
align-items : flex-start; align-items: flex-start;
-webkit-app-region: no-drag!important; -webkit-app-region: no-drag !important;
.playback-controls { .playback-controls {
-webkit-app-region: no-drag!important; -webkit-app-region: no-drag !important;
.artwork { .artwork {
width : var(--chromeHeight2); --offset: 20px;
height : var(--chromeHeight2); --marginOffset: 2;
margin : 0px 6px 0px 0px; --size: calc(var(--chromeHeight2) - var(--offset));
box-shadow: unset; width: var(--size);
border : 0px; height: var(--size);
margin: 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset));
cursor: pointer;
.mediaitem-artwork, .mediaitem-artwork,
img { img {
border-radius: 0px; border-radius: calc(var(--mediaItemRadius) / 2);
box-shadow : unset;
border : 0px;
} }
} }
.playback-info { .playback-info {
align-items: flex-start; align-items: flex-start;
margin : 6px; margin: 6px;
.song-name { .song-name {
text-align : left; text-align: left;
font-size : 15px; font-size: 0.98em;
font-weight : initial; font-weight: 500;
width : 100%; width: 100%;
-webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%); -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
} }
.song-artist-album { .song-artist, .song-album {
width : 100%; font-size: 0.75em;
-webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%); opacity: 0.8;
cursor: pointer;
&:hover {
text-decoration: underline;
}
} }
.audio-type { .audio-type {
@ -163,23 +221,23 @@
.song-artist-album-content { .song-artist-album-content {
text-align: left; text-align: left;
font-size : 12px; font-size: 12px;
} }
} }
width : 100%; width: 100%;
height : 100%; height: 100%;
max-width: 100%; max-width: 100%;
border : 0px; border: 0px;
} }
flex: 0 0 auto; flex: 0 0 auto;
} }
.app-chrome--right { .app-chrome--right {
width : 30%; width: 30%;
flex : 0 0 auto; flex: 0 0 auto;
padding-right: 8px; padding-right: 8px;
} }
} }

34
src/renderer/less/elements.less
View file

@ -897,8 +897,10 @@
/* mediaitem-square */ /* mediaitem-square */
.cd-mediaitem-square { .cd-mediaitem-square {
width: 220px; --scaleRate: 1.25;
height: 238px; --scaleRateArtwork: 1;
width: 200px;
height: 200px;
display: inline-flex; display: inline-flex;
flex: 0 0 auto; flex: 0 0 auto;
flex-direction: column; flex-direction: column;
@ -911,8 +913,8 @@
position: relative; position: relative;
.artwork { .artwork {
height: 190px; height: 150px;
width: 190px; width: 150px;
background: blue; background: blue;
border-radius: var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
background: var(--artwork); background: var(--artwork);
@ -920,7 +922,6 @@
flex: 0 0 auto; flex: 0 0 auto;
margin: 6px; margin: 6px;
cursor: pointer; cursor: pointer;
.mediaitem-artwork { .mediaitem-artwork {
box-shadow: unset; box-shadow: unset;
} }
@ -993,6 +994,15 @@
} }
} }
@media (min-width: 1600px) {
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container>.artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
}
}
.info-rect { .info-rect {
width: 90%; width: 90%;
height: 100%; height: 100%;
@ -1074,8 +1084,6 @@
background: var(--spcolor); background: var(--spcolor);
height: 298px; height: 298px;
width: 230px; width: 230px;
max-width: 250px;
max-height: 500px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border-radius: calc(var(--mediaItemRadius) * 2); border-radius: calc(var(--mediaItemRadius) * 2);
@ -1157,6 +1165,15 @@
pointer-events: none; pointer-events: none;
border-radius: inherit; border-radius: inherit;
} }
//@media (min-width: 1600px) {
// width: calc(230px * 1.25);
// height: calc(298px * 1.25);
// .artwork-container>.artwork {
// width: calc(230px * 1.25);
// height: calc(230px * 1.25);
// }
//}
} }
} }
@ -1532,7 +1549,7 @@ input[type=checkbox][switch]:checked:active::before {
border-radius: 6px; border-radius: 6px;
font-size: 1em; font-size: 1em;
color: inherit; color: inherit;
background-size: 14px; background-size: 0.98em;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-color: transparent; background-color: transparent;
@ -1563,6 +1580,7 @@ input[type=checkbox][switch]:checked:active::before {
.playback-button--small.cast { .playback-button--small.cast {
background-image: url("./assets/cast_white.svg"); background-image: url("./assets/cast_white.svg");
background-size: 1.25em;
} }
.playback-button--small.miniplayer { .playback-button--small.miniplayer {

1
src/renderer/less/helpers.less
View file

@ -333,6 +333,7 @@
position : relative; position : relative;
width : 100%; width : 100%;
padding : 9px 14px; padding : 9px 14px;
align-items: center;
&::before { &::before {
background : var(--hover); background : var(--hover);

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

@ -3730,7 +3730,7 @@ const app = new Vue({
if (app.getThemeDirective("lcdArtworkSize") != "") { if (app.getThemeDirective("lcdArtworkSize") != "") {
artworkSize = app.getThemeDirective("lcdArtworkSize") artworkSize = app.getThemeDirective("lcdArtworkSize")
} else if (this.cfg.visual.directives.windowLayout == "twopanel") { } else if (this.cfg.visual.directives.windowLayout == "twopanel") {
artworkSize = 80 artworkSize = 110
} }
this.currentArtUrl = ''; this.currentArtUrl = '';
this.currentArtUrlRaw = ''; this.currentArtUrlRaw = '';

33
src/renderer/style.less
View file

@ -1,4 +1,4 @@
@import url("assets/fonts/Inter/inter.css"); @import url("assets/fonts/pretendard/pretendardvariable.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap");
@ -63,7 +63,7 @@ body {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background: #0000; background: #0000;
font-family: "Inter var experimental", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
transition: opacity .10s var(--appleEase); transition: opacity .10s var(--appleEase);
} }
@ -146,8 +146,16 @@ body.notransparency::before {
} }
#app { #app {
--color1: rgba(15, 15, 15, 30%); @panelBrightness : 0%;
--color2: rgba(30, 30, 30, 50%); @panelTransparency: 50%;
@msColor1 : #202020;
@msColor2 : #272727;
@msColor3 : #2b2b2b;
--panelColor1 : darken(mix(@msColor1, transparent, @panelTransparency), @panelBrightness);
--panelColor2 : darken(mix(@msColor2, transparent, @panelTransparency), @panelBrightness);
--color1 : var(--panelColor2);
--color2 : var(--panelColor1);
--color3 : rgb(0 0 0 / 20%);
--bgColor: transparent; --bgColor: transparent;
--bgWidth: 0px; --bgWidth: 0px;
--bgHeight: 0px; --bgHeight: 0px;
@ -399,7 +407,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
#app-content { #app-content {
background-color: var(--color2); background-color: var(--color3);
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: scroll;
@ -827,6 +835,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
color: #eee; color: #eee;
transition: transform 0.1s; transition: transform 0.1s;
text-align: left; text-align: left;
align-items: center;
&.app-sidebar-item-playlist { &.app-sidebar-item-playlist {
-webkit-user-drag: element; -webkit-user-drag: element;
@ -1006,22 +1015,12 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 14px; height: 14px;
width: 14px; width: 14px;
border-radius: 50%; border-radius: 50%;
background: rgb(50 50 50); background: #A5A8BA;
box-shadow: 0px 0px 0px 1px rgba(0 0 0 / 10%);
cursor: default; cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
transition: all var(--appleTransition); transition: all var(--appleTransition);
} }
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
.app-chrome .app-chrome-item.volume > input[type=range] { .app-chrome .app-chrome-item.volume > input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
height: 4px; height: 4px;

9
src/renderer/themes/sweetener.less
View file

@ -46,6 +46,13 @@
} }
.cd-mediaitem-square {
--transition: width 1s, height 1s;
transition: var(--transition);
.artwork {
transition: var(--transition);
}
}
.cd-mediaitem-square:not(.mediaitem-card) { .cd-mediaitem-square:not(.mediaitem-card) {
transition : transform .2s var(--appleEase); transition : transform .2s var(--appleEase);
@ -53,7 +60,7 @@
padding : 12px; padding : 12px;
// background-color: red; // background-color: red;
height: 250px; height: 220px;
.artwork-container {} .artwork-container {}

59
src/renderer/views/app/chrome-bottom.ejs
View file

@ -15,27 +15,17 @@
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'" v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
style="display: inline-block"></div> style="display: inline-block"></div>
</div> </div>
<div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
<div class="song-album" @click="getNowPlayingItemDetailed('album')" v-if='mk.nowPlayingItem["attributes"]["albumName"]'>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
</div>
<div class="chrome-icon-container"> <div class="chrome-icon-container">
<div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div> <div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
<div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div> <div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
</div> </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> </div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']"> <template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions"> <div class="actions">
@ -53,6 +43,19 @@
</div> </div>
<div class="app-chrome--center"> <div class="app-chrome--center">
<div class="app-chrome-playback-duration-bottom">
<b-row>
<b-col sm="auto">{{ convertTime(getSongProgress()) }}</b-col>
<b-col>
<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);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
@touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
:max="mk.currentPlaybackDuration" :value="getSongProgress()">
</b-col>
<b-col sm="auto">{{ convertTime(mk.currentPlaybackDuration) }}</b-col>
</b-row>
</div>
<div class="app-chrome-playback-controls"> <div class="app-chrome-playback-controls">
<div class="app-chrome-item"> <div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'" <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
@ -90,22 +93,6 @@
v-b-tooltip.hover></button> v-b-tooltip.hover></button>
</div> </div>
</div> </div>
<div class="app-chrome-playback-duration">
<div class="song-progress">
<div class="song-duration"
style="justify-content: space-between; height: 1px;">
<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);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
@touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
:max="mk.currentPlaybackDuration" :value="getSongProgress()">
</div>
</div>
</div> </div>
<div class="app-chrome--right"> <div class="app-chrome--right">
<div class="app-chrome-item volume"> <div class="app-chrome-item volume">
@ -118,10 +105,10 @@
v-b-tooltip.hover :title="formatVolumeTooltip()"> v-b-tooltip.hover :title="formatVolumeTooltip()">
</div> </div>
<div class="app-chrome-item generic"> <div class="app-chrome-item generic">
<button class="playback-button--small miniplayer" <button class="playback-button--small cast"
:title="$root.getLz('term.miniplayer')" :title="$root.getLz('term.cast')"
v-b-tooltip.hover v-b-tooltip.hover
@click="drawer.open = false; miniPlayer(true)"></button> @click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"></button>
</div> </div>
<div class="app-chrome-item generic"> <div class="app-chrome-item generic">
<button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}" <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"

28
src/renderer/views/app/chrome-top.ejs
View file

@ -138,8 +138,24 @@
</template> </template>
</div> </div>
<div class="app-title-text" v-if="false"> <div class="app-chrome-item" v-else>
Cider <div class="search-input-container">
<div class="search-input--icon"></div>
<input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true"
@blur="setTimeout(()=>{search.showHints = false}, 300)"
v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
@input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
ref="searchInput" class="search-input">
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
<div class="search-hints">
<button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
@click="search.term = hint;search.showHints = false;searchQuery(hint)">
{{ hint }}
</button>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="app-chrome--right"> <div class="app-chrome--right">
@ -180,6 +196,14 @@
</template> </template>
</div> </div>
</template> </template>
<template v-else>
<div class="app-chrome-item generic">
<button class="playback-button--small miniplayer"
:title="$root.getLz('term.miniplayer')"
v-b-tooltip.hover
@click="drawer.open = false; miniPlayer(true)"></button>
</div>
</template>
<div class="app-chrome-item full-height" id="window-controls-container" <div class="app-chrome-item full-height" id="window-controls-container"
v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls"> v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls">
<div class="window-controls"> <div class="window-controls">

38
src/renderer/views/app/sidebar.ejs
View file

@ -1,22 +1,26 @@
<div id="app-sidebar"> <div id="app-sidebar">
<div class="app-sidebar-header"> <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="search-input-container"> <div class="app-sidebar-header">
<div class="search-input--icon"></div> <div class="search-input-container">
<input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true" <div class="search-input--icon"></div>
@blur="setTimeout(()=>{search.showHints = false}, 300)" <input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true"
v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();" @blur="setTimeout(()=>{search.showHints = false}, 300)"
@input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term" v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
ref="searchInput" class="search-input"> @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
ref="searchInput" class="search-input">
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
<div class="search-hints">
<button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
@click="search.term = hint;search.showHints = false;searchQuery(hint)">
{{ hint }}
</button>
</div>
</div>
</div>
</div> </div>
</div> </template>
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
<div class="search-hints">
<button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
@click="search.term = hint;search.showHints = false;searchQuery(hint)">
{{ hint }}
</button>
</div>
</div>
<div class="app-sidebar-content" scrollaxis="y"> <div class="app-sidebar-content" scrollaxis="y">
<div class="app-sidebar-header-text" <div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider" @click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider"