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

improvements for small windows

Browse source
This commit is contained in:
booploops 2022-01-12 07:16:29 -08:00
parent 320a90e4b2
commit fab2e1ba33
5 changed files with 532 additions and 432 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/index.js
View file

@ -658,7 +658,7 @@ const app = new Vue({
})
},
select_hasMediaItem(id) {
let found = this.selectedMediaItems.find(item => item.id == id)
let found = this.selectedMediaItems.find(item => item.guid == id)
if (found) {
return true
} else {

50
src/renderer/less/compact.less Normal file
View file

@ -0,0 +1,50 @@
.app-sidebar-content.compact {
padding:0px;
.app-sidebar-header-text {
padding: 6px 10px;
margin: 0px;
}
.app-sidebar-item {
display: flex;
width: 100%;
padding: 8px 12px;
font-size: 13px;
margin: 0px;
border: 1px solid transparent;
border-radius: 0px;
transition: unset;
transform: unset;
&:active {
background: var(--selected-click);
}
&::after {
display: none;
}
&.active {
background: var(--keyColor-disabled);
}
}
.sidebar-icon {
width: 14px;
height: 16px;
margin-right: 8px;
}
.folder-body {
border-radius: 0px;
padding: 0px;
}
}
// if page width is less than 951px
@media (max-width: 951px) {
.content-inner {
zoom: 0.8;
}
}

17
src/renderer/style.less
View file

@ -332,6 +332,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
left: 0;
padding: 32px;
width: 100%;
transition: zoom 1s;
zoom: 1;
}
.content-inner.centered {
@ -423,6 +425,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.app-sidebar-footer {
padding: 11px;
.app-playback-controls {
.control-buttons {
display: flex;
justify-content: center;
align-content: center;
}
.volume {
display: flex;
}
}
}
.app-sidebar-button {
@ -2953,7 +2966,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
// list item compact
&.compact {
height: 40px;
font-size: 12px;
font-size: 13px;
.artwork {
display: none;
}
@ -4364,3 +4377,5 @@ body.no-gpu {
right: -300px;
}
}
@import url("less/compact.less");

3
src/renderer/views/components/mediaitem-list-item.ejs
View file

@ -7,8 +7,9 @@
:data-index="index"
:data-guid="guid"
:data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
:key="item.attributes.playParams.id ?? item.id"
class="cd-mediaitem-list-item"
:class="[{'mediaitem-selected': app.select_hasMediaItem(item.id)}, addClasses]">
:class="[{'mediaitem-selected': app.select_hasMediaItem(item.attributes.playParams.id ?? item.id)}, addClasses]">
<template v-if="isVisible">
<div class="isLibrary" v-if="showLibraryStatus == true">
<button @click="addToLibrary()"

48
src/renderer/views/main.ejs
View file

@ -48,23 +48,23 @@
<div class="app-chrome-item full-height" v-else>
<div class="app-title"></div>
</div>
<div class="app-chrome-item">
<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">
<div class="app-chrome-item display--large">
<button class="playback-button previous" @click="prevButton()"></button>
</div>
<div class="app-chrome-item">
<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">
<div class="app-chrome-item display--large">
<button class="playback-button next" @click="mk.skipToNextItem()"></button>
</div>
<div class="app-chrome-item">
<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 active" @click="mk.repeatMode = 2"
@ -239,9 +239,43 @@
</div>
</transition>
<div class="app-sidebar-footer">
<input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
v-model="mk.volume" @wheel="volumeWheel"
<div class="app-playback-controls display--small" v-if="mkReady()"
@contextmenu="nowPlayingContextMenu">
<div class="control-buttons">
<div class="app-chrome-item">
<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">
<button class="playback-button previous" @click="prevButton()"></button>
</div>
<div class="app-chrome-item">
<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">
<button class="playback-button next" @click="mk.skipToNextItem()"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
</div>
</div>
<div class="app-chrome-item volume">
<div class="app-chrome-item volume-icon"></div>
<div class="input-container">
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">
</div>
</div>
</div>
<button class="app-sidebar-button" style="width:100%"
:class="{active: chrome.menuOpened}"
@blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"