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

WIP settings panel, added #app[window-state]

Browse source
This commit is contained in:
booploops 2022-06-28 01:30:39 -07:00
parent c54b1ac363
commit f71ca88298
14 changed files with 2762 additions and 1019 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/main/base/browserwindow.ts
View file

@ -123,6 +123,7 @@ export class BrowserWindow {
"components/artist-chip",
"components/hello-world",
"components/inline-collection-list",
"components/settings-window",
],
appRoutes: [
{
@ -550,8 +551,10 @@ export class BrowserWindow {
app.get("/ciderlocal/:songs", (req, res) => {
const audio = atob(req.params.songs.replace(/_/g, '/').replace(/-/g, '+'));
console.log('auss', audio)
let data = {data:
this.localSongs.filter((f: any) => audio.split(',').includes(f.id))};
let data = {
data:
this.localSongs.filter((f: any) => audio.split(',').includes(f.id))
};
res.send(data);
});
@ -1273,7 +1276,8 @@ export class BrowserWindow {
// "name": metadata.common.title,
// "albumName": metadata.common.album,
// "artistName": metadata.common.artist}}
metadatalist.push(form)}
metadatalist.push(form)
}
} catch (e) { }
}
// console.log('metadatalist', metadatalist);
@ -1502,7 +1506,6 @@ export class BrowserWindow {
/* *********************************************************************************************
* Window Events
* **********************************************************************************************/
if (process.platform === "win32") {
let WND_STATE = {
MINIMIZED: 0,
NORMAL: 1,
@ -1518,19 +1521,23 @@ export class BrowserWindow {
const state = wndState;
if (isMinimized && state !== WND_STATE.MINIMIZED) {
wndState = WND_STATE.MINIMIZED;
BrowserWindow.win.webContents.send('window-state-changed', 'minimized');
} else if (isFullScreen && state !== WND_STATE.FULL_SCREEN) {
wndState = WND_STATE.FULL_SCREEN;
BrowserWindow.win.webContents.send('window-state-changed', 'fullscreen')
} else if (isMaximized && state !== WND_STATE.MAXIMIZED) {
wndState = WND_STATE.MAXIMIZED;
BrowserWindow.win.webContents.send('window-state-changed', 'maximized')
BrowserWindow.win.webContents.executeJavaScript(`app.chrome.maximized = true`);
} else if (state !== WND_STATE.NORMAL) {
wndState = WND_STATE.NORMAL;
BrowserWindow.win.webContents.send('window-state-changed', 'normal')
BrowserWindow.win.webContents.executeJavaScript(
`app.chrome.maximized = false`
);
}
});
}
let isQuiting = false

5
src/renderer/less/bootstrap.less vendored
View file

@ -2432,10 +2432,9 @@ fieldset:disabled .btn {
.nav-pills .nav-link {
background-color: transparent;
border: 0;
border-radius: 50px;
border-radius: 6px;
color: #eee;
-webkit-user-drag: none;
// transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
font-weight: 500;
margin: 0px 4px;
&:hover {
@ -2447,7 +2446,7 @@ fieldset:disabled .btn {
.nav-pills .show > .nav-link {
color: #fff;
background-color: var(--selected);
outline:2px solid var(--keyColor);
// outline:2px solid var(--keyColor);
}
.nav-fill > .nav-link,

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

@ -2168,12 +2168,20 @@ input[type=checkbox][switch]:checked:active::before {
}
// fancy pills
.fancy-pills {
.nav-pills {
position: relative;
.nav-link {
transition: transform .3s var(--appleEase);
position: relative;
background-color: transparent;
border: 0;
border-radius: 50px;
color: #eee;
-webkit-user-drag: none;
font-weight: 500;
margin: 0px 4px;
&:after {
@ -2271,6 +2279,7 @@ input[type=checkbox][switch]:checked:active::before {
pointer-events: none;
}
}
}
.grouping-container {
display: grid;

11
src/renderer/less/macos.less
View file

@ -6,6 +6,7 @@ body[platform="darwin"] {
&.notransparency::before {
display: none;
}
#app {
&.simplebg {
background: transparent;
@ -33,6 +34,16 @@ body[platform="darwin"] {
background-color: var(--macOSChromeColor);
}
}
// &::after {
// position: fixed;
// top:0;left:0;right:0;bottom:0;
// box-shadow: inset 0px 0px .5px 1px rgb(200 200 200 / 40%);
// border-radius: 10px;
// content: " ";
// z-index: 999999;
// pointer-events: none;
// }
}
#app-main {

177
src/renderer/less/pages.less
View file

@ -672,6 +672,7 @@
-webkit-mask-image: -webkit-radial-gradient(center, circle cover, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 75%);
border-radius: 0px;
}
.hero-tint {
position: absolute;
top: 0;
@ -906,7 +907,8 @@
transition: min-height 0.5s ease-in-out;
min-height: 200px;
.playlistInfo {}
.playlistInfo {
}
.mediaContainer {
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
@ -1331,23 +1333,6 @@
margin: 16px auto 0px;
}
.md-option-header {
padding : 0px 26px;
border-bottom: unset;
border-top : unset;
font-weight : 600;
background : rgb(255 255 255 / 0%);
font-size : 2em;
}
.settings-option-body-webview {
height: 100%;
width : 100%;
}
.settings-option-body {
margin: 16px;
}
}
// AudioLabs page
@ -1812,7 +1797,6 @@
}
&:hover {
transform: scale(1.10) translateZ(-1px) translateY(10px);
z-index: 1;
@ -1879,6 +1863,7 @@
&.close {
background-color: #fc3c44aa;
&:hover {
background-color: #fc3c44;
}
@ -1886,6 +1871,7 @@
&.min {
background-color: rgb(200 200 200 / 5%);
&:hover {
background-color: rgb(200 200 200 / 10%);
}
@ -1936,3 +1922,156 @@
}
}
}
.settings-panel {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(0 0 0 / 0);
display: flex;
justify-content: center;
align-items: center;
z-index: 16;
.settings-window {
background: var(--baseColorMix);
max-width: 1024px;
min-width: 850px;
height: 100%;
border-radius: 10px;
box-shadow: var(--ciderShadow-Generic);
max-height: 90%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex: 1;
backdrop-filter: var(--glassFilterHeavy);
transition: width 0.25s ease-in-out, height 0.25s ease-in-out, max-width 0.25s ease-in-out, max-height 0.25s ease-in-out;
.header-text {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
opacity: 0.9;
}
.nav-pills {
gap: 6px;
}
.nav-pills .nav-link {
display: flex;
gap: 10px;
align-items: center;
}
.md-option-header {
padding: 0px 26px;
border-bottom: unset;
border-top: unset;
font-weight: 600;
background: rgb(255 255 255 / 0%);
font-size: 2em;
}
.settings-option-body-webview {
height: 100%;
width: 100%;
}
.settings-option-body {
margin: 16px;
}
&.maxed {
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
border-radius: 0px;
box-shadow: unset;
}
.close-btn {
width: 36px;
height: 36px;
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
appearance: none;
border: 0;
background-color: transparent;
position: absolute;
top: 10px;
right: 10px;
border-radius: 50px;
display: grid;
align-content: center;
z-index: 9;
&:before {
content: "";
font-family: "codicon";
color: var(--textColor);
font-size: 20px;
}
&:hover {
background-color: rgb(196, 43, 28)
}
&.minmax-btn {
right: 52px;
&:before {
content: "";
}
&.min {
&:before {
content: "";
}
}
&:hover {
background-color: var(--selected);
}
}
}
.tabs {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
> .col-auto {
width: 230px;
}
.tab-content {
margin: 0 !important;
}
}
.tab-content {
overflow-y: overlay;
height: 100%;
background-color: var(--panelColor2);
padding-top: 48px;
border-left: 1px solid var(--borderColor);
}
}
}

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

@ -168,6 +168,7 @@ const app = new Vue({
location: "",
info: {}
},
windowState: "normal",
desiredPageTransition: "wpfade_transform",
hideUserInfo: ipcRenderer.sendSync("is-dev") || false,
artworkReady: false,
@ -217,6 +218,7 @@ const app = new Vue({
castMenu: false,
moreInfo: false,
airplayPW: false,
settings: false
},
socialBadges: {
badgeMap: {},
@ -849,6 +851,10 @@ const app = new Vue({
this.library.localsongs = data;
})
ipcRenderer.on('window-state-changed', (event, data) => {
this.chrome.windowState = data
})
ipcRenderer.on('SoundCheckTag', (event, tag) => {
// let replaygain = self.parseSCTagToRG(tag)
try {
@ -4325,7 +4331,8 @@ const app = new Vue({
"name": app.getLz('settings.option.audio.audioLab'),
"hidden": true,
"action": function () {
app.appRoute('audiolabs')
app.$store.state.pageState.settings.currentTabIndex = 2
app.modals.settings = true
}
},
]

4
src/renderer/main/vuex-store.js
View file

@ -12,6 +12,10 @@ const store = new Vuex.Store({
nextUrl: null,
items: [],
size: "normal"
},
settings: {
currentTabIndex: 0,
fullscreen: false
}
},
artwork: {

2
src/renderer/style.less
View file

@ -15,6 +15,7 @@
:root {
--appleEase: cubic-bezier(0.42, 0, 0.58, 1);
--borderColor: rgb(200 200 200 / 16%);
--mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
--mediaItemShadow-Shadow: 0 8px 40px rgb(0 0 0 / 0.55);
--mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%);
@ -50,6 +51,7 @@
--textColor: #eee;
--replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
--glassFilter: blur(16px) saturate(180%);
--glassFilterHeavy: blur(64px) saturate(280%);
--sidebarWidth: 260px;
}

2
src/renderer/views/app/app-navigation.ejs
View file

@ -105,7 +105,7 @@
$root.getLz("term.about")
}}</span>
</button>
<button class="usermenu-item" @click="appRoute('settings')">
<button class="usermenu-item" @click="modals.settings = true">
<span class="usermenu-item-icon">
<%- include("../svg/settings.svg") %>
</span>

3
src/renderer/views/app/panels.ejs
View file

@ -31,6 +31,9 @@
<transition name="modal">
<plugin-menu v-if="modals.pluginMenu"></plugin-menu>
</transition>
<transition name="modal">
<settings-window v-if="modals.settings"></settings-window>
</transition>
<transition name="modal">
<eq-view v-if="modals.equalizer"></eq-view>
</transition>

1560
src/renderer/views/components/settings-window.ejs Normal file
View file

File diff suppressed because it is too large Load diff

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

@ -71,7 +71,9 @@
<div id="LOADER">
<%- include("../assets/cider-round.svg") %>
</div>
<div id="app" :class="getAppClasses()" :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
<div id="app" :class="getAppClasses()"
:window-state="chrome.windowState"
:style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
<transition name="fsModeSwitch">
<div id="app-main" v-show="appMode == 'player'">
<%- include('app/chrome-top'); %>

4
src/renderer/views/pages/audiolabs.ejs
View file

@ -1,5 +1,5 @@
<script type="text/x-template" id="audiolabs-page">
<div class="content-inner audiolabs-page ">
<div class="audiolabs-page">
<div class="md-option-container">
<div class="settings-option-body">
<div class="md-option-line">
@ -120,7 +120,7 @@
</select>
</div>
</div>
<div style="opacity: 0.5; pointer-events: none">
<div style="opacity: 0.5; pointer-events: none" v-if="false">
<div class="md-option-header">
<span>{{$root.getLz('settings.header.unfinished')}}</span>
</div>

2
src/renderer/views/pages/cider-playlist.ejs
View file

@ -178,7 +178,7 @@
</div>
</div>
<div class="playlist-body scrollbody">
<b-tabs pills class="track-pills pilldim" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)">
<b-tabs pills class="track-pills pilldim fancy-pills" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)">
<b-tab :title="$root.getLz('term.tracks')">
<div @wheel="minClass(true)" @scroll="minClass(true)">
<div class="">