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

added <svg-icon/>

Browse source 
params:
- url: string - url of the svg icon
- name: string - the icon's name to help with theming
This commit is contained in:
booploops 2022-06-28 14:34:01 -07:00
parent 530d73ba81
commit 5309c987f0
5 changed files with 226 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
.notyf__toast { .notyf__toast {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
cursor : pointer; cursor: pointer;
} }
.notyf-info { .notyf-info {
@ -9,142 +9,145 @@
.tooltip-inner { .tooltip-inner {
background: #2f2f2f; background: #2f2f2f;
opacity : 1; opacity: 1;
border : 1px solid rgb(0 0 0 / 35%); border: 1px solid rgb(0 0 0 / 35%);
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
} }
.modal-fullscreen { .modal-fullscreen {
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
position : fixed; position: fixed;
top : 0; top: 0;
left : 0; left: 0;
width : 100%; width: 100%;
height : 100%; height: 100%;
background : rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
z-index : 1000; z-index: 1000;
.modal-window { .modal-window {
background : #333; background: #333;
border-radius: 10px; border-radius: 10px;
box-shadow : var(--mediaItemShadow-Shadow); box-shadow: var(--mediaItemShadow-Shadow);
display : flex; display: flex;
flex-flow : column; flex-flow: column;
max-height : 500px; max-height: 500px;
max-width : 360px; max-width: 360px;
background : #121212; background: #121212;
width : 100%; width: 100%;
position : relative; position: relative;
&:after { &:after {
content : ""; content: "";
position : absolute; position: absolute;
top : 0; top: 0;
left : 0; left: 0;
width : 100%; width: 100%;
height : 100%; height: 100%;
pointer-events: none; pointer-events: none;
box-shadow : var(--mediaItemShadow); box-shadow: var(--mediaItemShadow);
z-index : 1; z-index: 1;
border-radius : inherit; border-radius: inherit;
} }
.modal-header { .modal-header {
width : 100%; width: 100%;
padding: 6px; padding: 6px;
} }
.modal-content { .modal-content {
width : 100%; width: 100%;
height : 100%; height: 100%;
overflow : hidden; overflow: hidden;
overflow-y: overlay; overflow-y: overlay;
} }
.modal-footer {} .modal-footer {
}
} }
} }
.spatialproperties-panel { .spatialproperties-panel {
.modal-window { .modal-window {
&:not(.airplay-modal){ &:not(.airplay-modal) {
height : 700px; height: 700px;
max-height: 700px; max-height: 700px;
width : 800px; width: 800px;
max-width : 800px;} max-width: 800px;
overflow : hidden; }
overflow: hidden;
.info-header { .info-header {
padding-left: 12px; padding-left: 12px;
} }
.visual-container { .visual-container {
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
overflow : hidden; overflow: hidden;
} }
.visual { .visual {
position : relative; position: relative;
height : 250px; height: 250px;
width : 300px; width: 300px;
display : inline-flex; display: inline-flex;
align-items : flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
filter : drop-shadow(2px 12px 6px rgb(0 0 0 / 25%)); filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
margin : 0 auto; margin: 0 auto;
.face { .face {
position : absolute; position: absolute;
width : calc(12px * 6); width: calc(12px * 6);
height : calc(12px * 6); height: calc(12px * 6);
border-radius: 6px; border-radius: 6px;
transform : rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg);
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
} }
.listener { .listener {
position : absolute; position: absolute;
width : 32px; width: 32px;
height : 32px; height: 32px;
border-radius: 6px; border-radius: 6px;
transform : rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg);
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
background : white; background: white;
color : black; color: black;
z-index : 2; z-index: 2;
} }
.audiosource { .audiosource {
position : absolute; position: absolute;
width : 32px; width: 32px;
height : 32px; height: 32px;
border-radius: 6px; border-radius: 6px;
transform : rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg);
transition : transform 0.2s linear, width 0.2s linear, height 0.2s linear; transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
background : yellow; background: yellow;
z-index : 2; z-index: 2;
} }
.face:nth-of-type(1) { .face:nth-of-type(1) {
background: linear-gradient(45deg, #28223a, #1f2038); background: linear-gradient(45deg, #28223a, #1f2038);
z-index : 1; z-index: 1;
} }
.face:nth-of-type(2) { .face:nth-of-type(2) {
background: linear-gradient(45deg, #7d53ad, #5763ff); background: linear-gradient(45deg, #7d53ad, #5763ff);
transform : rotateX(60deg) rotateZ(-45deg) translateZ(30px); transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
opacity : 0.7; opacity: 0.7;
z-index : 3; z-index: 3;
} }
} }
.modal-header { .modal-header {
padding : 16px; padding: 16px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -162,14 +165,14 @@
.addtoplaylist-panel { .addtoplaylist-panel {
.modal-window { .modal-window {
max-height : 600px; max-height: 600px;
max-width : 400px; max-width: 400px;
background : rgb(18 18 18 / 90%); background: rgb(18 18 18 / 90%);
overflow : hidden; overflow: hidden;
backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
.modal-header { .modal-header {
padding : 16px; padding: 16px;
position: relative; position: relative;
.modal-title { .modal-title {
@ -182,34 +185,34 @@
} }
.modal-search { .modal-search {
width : 100%; width: 100%;
padding : 0px 16px; padding: 0px 16px;
position: relative; position: relative;
} }
.playlist-item { .playlist-item {
appearance : none; appearance: none;
border : 0px; border: 0px;
text-align : left; text-align: left;
width : 100%; width: 100%;
margin : 0; margin: 0;
display : flex; display: flex;
background : rgba(32, 32, 32, 0.46); background: rgba(32, 32, 32, 0.46);
color : #eee; color: #eee;
font-family: inherit; font-family: inherit;
font-size : 0.98em; font-size: 0.98em;
padding : 6px 12px; padding: 6px 12px;
align-items: center; align-items: center;
flex-flow : row; flex-flow: row;
.icon { .icon {
pointer-events : none; pointer-events: none;
width : 32px; width: 32px;
height : 32px; height: 32px;
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
margin-right : 6px; margin-right: 6px;
} }
.name { .name {
@ -236,35 +239,35 @@
} }
.menu-panel { .menu-panel {
width : 100%; width: 100%;
height : 100%; height: 100%;
position : fixed; position: fixed;
top : 0; top: 0;
left : 0; left: 0;
z-index : 100001; z-index: 100001;
display : flex; display: flex;
justify-content : center; justify-content: center;
align-items : center; align-items: center;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
.menu-header-body { .menu-header-body {
padding : 6px; padding: 6px;
display : flex; display: flex;
background: rgb(200 200 200 / 10%); background: rgb(200 200 200 / 10%);
.menu-option-header { .menu-option-header {
width : 40px; width: 40px;
height : 40px; height: 40px;
display : flex; display: flex;
justify-content: center; justify-content: center;
align-items : center; align-items: center;
border-radius : var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
appearance : none; appearance: none;
border : 0; border: 0;
background : transparent; background: transparent;
&.active { &.active {
.sidebar-icon>.svg-icon { .sidebar-icon > .svg-icon {
--color: var(--keyColor); --color: var(--keyColor);
} }
} }
@ -280,62 +283,62 @@
} }
.menu-panel-body { .menu-panel-body {
display : flex; display: flex;
flex-flow : column; flex-flow: column;
background : rgb(30 30 30 / 45%); background: rgb(30 30 30 / 45%);
backdrop-filter: blur(32px) saturate(180%); backdrop-filter: blur(32px) saturate(180%);
position : relative; position: relative;
min-width : 200px; min-width: 200px;
box-shadow : var(--ciderShadow-Generic); box-shadow: var(--ciderShadow-Generic);
border-radius : var(--panelRadius); border-radius: var(--panelRadius);
overflow : hidden; overflow: hidden;
font-size : 13px; font-size: 13px;
.menu-option { .menu-option {
text-align: left; text-align: left;
display : flex; display: flex;
appearance: none; appearance: none;
border : 0px; border: 0px;
font : inherit; font: inherit;
background: transparent; background: transparent;
color : inherit; color: inherit;
margin : 0 auto; margin: 0 auto;
position : relative; position: relative;
width : 100%; width: 100%;
padding : 9px 14px; padding: 9px 14px;
align-items: center; align-items: center;
&::before { &::before {
background : var(--hover); background: var(--hover);
border-radius: 6px; border-radius: 6px;
content : ""; content: "";
--sizeY : 3px; --sizeY: 3px;
--sizeX : 4px; --sizeX: 4px;
top : var(--sizeY); top: var(--sizeY);
left : var(--sizeX); left: var(--sizeX);
bottom : var(--sizeY); bottom: var(--sizeY);
right : var(--sizeX); right: var(--sizeX);
position : absolute; position: absolute;
opacity : 0; opacity: 0;
transform : scale(0.98); transform: scale(0.98);
z-index : -1; z-index: -1;
transition : transform .25s ease-out, opacity .25s ease-out; transition: transform .25s ease-out, opacity .25s ease-out;
} }
&:hover { &:hover {
&::before { &::before {
transition: transform 0s ease-in, opacity 0s ease-in; transition: transform 0s ease-in, opacity 0s ease-in;
opacity : 1; opacity: 1;
transform : scale(1); transform: scale(1);
} }
} }
&:active { &:active {
&::before { &::before {
transition: transform .1s ease-in-out, opacity .1s ease-in-out; transition: transform .1s ease-in-out, opacity .1s ease-in-out;
opacity : 1; opacity: 1;
transform : scale(0.98); transform: scale(0.98);
background: var(--selected-click); background: var(--selected-click);
} }
} }
@ -375,25 +378,25 @@
} }
.menu-body { .menu-body {
overflow : overlay; overflow: overlay;
height : 100%; height: 100%;
display : flex; display: flex;
flex-flow: column; flex-flow: column;
gap : 0px; gap: 0px;
padding : 0px; padding: 0px;
position : relative; position: relative;
} }
.menu-footer { .menu-footer {
width : 100%; width: 100%;
padding: 12px; padding: 12px;
} }
} }
.queue-panel { .queue-panel {
height : 100%; height: 100%;
width : 100%; width: 100%;
display : flex; display: flex;
flex-flow: column; flex-flow: column;
.queue-header-text { .queue-header-text {
@ -402,52 +405,52 @@
.queue-body { .queue-body {
overflow: overlay; overflow: overlay;
height : 100%; height: 100%;
} }
.queue-footer { .queue-footer {
width : 100%; width: 100%;
padding: 12px; padding: 12px;
} }
.autoplay { .autoplay {
background : rgb(200 200 200 / 15%); background: rgb(200 200 200 / 15%);
display : flex; display: flex;
justify-content: center; justify-content: center;
appearance : none; appearance: none;
border : 0; border: 0;
border-radius : 6px; border-radius: 6px;
height : 32px; height: 32px;
width : 32px; width: 32px;
} }
.infinity { .infinity {
content: url("./assets/infinity.svg"); content: url("./assets/infinity.svg");
margin : auto; margin: auto;
} }
} }
.moreinfo-modal { .moreinfo-modal {
.modal-window { .modal-window {
height : 70%; height: 70%;
max-height : 100%; max-height: 100%;
width : 45%; width: 45%;
max-width : 100%; max-width: 100%;
overflow : hidden; overflow: hidden;
line-height: 1.25; line-height: 1.25;
} }
.modal-content { .modal-content {
padding : 1em; padding: 1em;
font-size: 0.8rem; font-size: 0.8rem;
br { br {
display : block; display: block;
/* makes it have a width */ /* makes it have a width */
content : ""; content: "";
/* clears default height */ /* clears default height */
margin : 2em; margin: 2em;
margin-bottom: -0.6rem; margin-bottom: -0.6rem;
} }
} }
@ -457,7 +460,7 @@
.modal-title { .modal-title {
text-align: unset !important; text-align: unset !important;
width : 100%; width: 100%;
&:not(.modal-subtitle) { &:not(.modal-subtitle) {
font-size: 25px; font-size: 25px;
@ -479,8 +482,9 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
filter:blur(32px) brightness(50%) saturate(280%); filter: blur(32px) brightness(50%) saturate(280%);
} }
.popover-artwork { .popover-artwork {
width: 200px; width: 200px;
height: 200px; height: 200px;
@ -491,7 +495,8 @@
.song-name { .song-name {
font-weight: 600; font-weight: 600;
} }
.song-artist,.song-album {
.song-artist, .song-album {
opacity: 0.75; opacity: 0.75;
cursor: pointer; cursor: pointer;
@ -500,4 +505,14 @@
} }
} }
} }
}
._svg-icon {
--icon: url("./assets/chevron-left.svg");
width: 1em;
height: 1em;
-webkit-mask-image: var(--icon);
-webkit-mask-position: center;
background: white;
-webkit-mask-repeat: no-repeat;
} }

1
src/renderer/main/app.js
View file

@ -7,6 +7,7 @@ import {Events} from './events.js'
import { wsapi } from "./wsapi_interop.js" import { wsapi } from "./wsapi_interop.js"
import { MusicKitTools } from "./musickittools.js" import { MusicKitTools } from "./musickittools.js"
import { spawnMica } from "./mica.js" import { spawnMica } from "./mica.js"
import { svgIcon } from './components/svg-icon.js'
// Define window objects // Define window objects

16
src/renderer/main/components/svg-icon.js Normal file
View file

@ -0,0 +1,16 @@
export const svgIcon = Vue.component("svg-icon", {
template: `
<div class="_svg-icon" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
`,
props: {
name: {
type: String,
required: false
},
url: {
type: String,
required: true,
default: "./assets/repeat.svg"
}
}
})

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

@ -6,7 +6,7 @@
<b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex"> <b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex">
<b-tab> <b-tab>
<template #title> <template #title>
<div>⚙️</div> <div><svg-icon url="./assets/play.svg" name="settings-general" /></div>
<div> <div>
{{ $root.getLz('settings.header.general') }} {{ $root.getLz('settings.header.general') }}
</div> </div>
@ -234,7 +234,7 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div>🔊</div> <div><svg-icon url="./assets/play.svg" name="settings-audio" /></div>
<div> <div>
{{ $root.getLz('settings.header.audio') }} {{ $root.getLz('settings.header.audio') }}
</div> </div>
@ -372,7 +372,7 @@
</b-tab> </b-tab>
<b-tab v-if="app.cfg.advanced.AudioContext"> <b-tab v-if="app.cfg.advanced.AudioContext">
<template #title> <template #title>
<div>✨</div> <div><svg-icon url="./assets/play.svg" name="settings-audiolabs" /></div>
<div> <div>
{{ $root.getLz('settings.option.audio.audioLab') }} {{ $root.getLz('settings.option.audio.audioLab') }}
</div> </div>
@ -383,7 +383,7 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div>🎨</div> <div><svg-icon url="./assets/play.svg" name="settings-visual" /></div>
<div> <div>
{{ $root.getLz('settings.header.visual') }} {{ $root.getLz('settings.header.visual') }}
</div> </div>
@ -624,7 +624,7 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div>🎤</div> <div><svg-icon url="./assets/play.svg" name="settings-lyrics" /></div>
<div> <div>
{{ $root.getLz('settings.header.lyrics') }} {{ $root.getLz('settings.header.lyrics') }}
</div> </div>
@ -963,7 +963,7 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div>🔌</div> <div><svg-icon url="./assets/play.svg" name="settings-connectivity" /></div>
<div> <div>
{{ $root.getLz('settings.header.connectivity') }} {{ $root.getLz('settings.header.connectivity') }}
</div> </div>
@ -1143,7 +1143,7 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div>💻</div> <div><svg-icon url="./assets/play.svg" name="settings-advanced" /></div>
<div> <div>
{{$root.getLz('settings.header.advanced')}} {{$root.getLz('settings.header.advanced')}}
</div> </div>

1
src/renderer/views/pages/zoo.ejs
View file

@ -1,5 +1,6 @@
<script type="text/x-template" id="cider-zoo"> <script type="text/x-template" id="cider-zoo">
<div class="content-inner"> <div class="content-inner">
<svg-icon/>
<h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3> <h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
<button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button> <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
{{ $store.state.test }} {{ $store.state.test }}