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

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

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

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

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

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

@ -3730,7 +3730,7 @@ const app = new Vue({
if (app.getThemeDirective("lcdArtworkSize") != "") {
artworkSize = app.getThemeDirective("lcdArtworkSize")
} else if (this.cfg.visual.directives.windowLayout == "twopanel") {
artworkSize = 80
artworkSize = 110
}
this.currentArtUrl = '';
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+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");
@ -63,7 +63,7 @@ body {
background-size: cover;
background-position: center;
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);
}
@ -146,8 +146,16 @@ body.notransparency::before {
}
#app {
--color1: rgba(15, 15, 15, 30%);
--color2: rgba(30, 30, 30, 50%);
@panelBrightness : 0%;
@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;
--bgWidth: 0px;
--bgHeight: 0px;
@ -399,7 +407,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
#app-content {
background-color: var(--color2);
background-color: var(--color3);
height: 100%;
width: 100%;
overflow-y: scroll;
@ -827,6 +835,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
color: #eee;
transition: transform 0.1s;
text-align: left;
align-items: center;
&.app-sidebar-item-playlist {
-webkit-user-drag: element;
@ -1006,22 +1015,12 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 14px;
width: 14px;
border-radius: 50%;
background: rgb(50 50 50);
background: #A5A8BA;
box-shadow: 0px 0px 0px 1px rgba(0 0 0 / 10%);
cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
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] {
-webkit-appearance: none;
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) {
transition : transform .2s var(--appleEase);
@ -53,7 +60,7 @@
padding : 12px;
// background-color: red;
height: 250px;
height: 220px;
.artwork-container {}

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

@ -15,27 +15,17 @@
v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
style="display: inline-block"></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="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>
<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>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions">
@ -53,6 +43,19 @@
</div>
<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-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
@ -90,22 +93,6 @@
v-b-tooltip.hover></button>
</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 class="app-chrome--right">
<div class="app-chrome-item volume">
@ -118,10 +105,10 @@
v-b-tooltip.hover :title="formatVolumeTooltip()">
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small miniplayer"
:title="$root.getLz('term.miniplayer')"
<button class="playback-button--small cast"
:title="$root.getLz('term.cast')"
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 class="app-chrome-item generic">
<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>
</div>
<div class="app-title-text" v-if="false">
Cider
<div class="app-chrome-item" v-else>
<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 class="app-chrome--right">
@ -180,6 +196,14 @@
</template>
</div>
</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"
v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls">
<div class="window-controls">

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

@ -1,22 +1,26 @@
<div id="app-sidebar">
<div class="app-sidebar-header">
<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">
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-sidebar-header">
<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 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>
</template>
<div class="app-sidebar-content" scrollaxis="y">
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.cider = !cfg.general.sidebarCollapsed.cider"