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

tooltip improvements

Browse source
This commit is contained in:
booploops 2022-03-10 01:06:51 -08:00
parent 40c8925193
commit 37fd116f01
10 changed files with 9775 additions and 377 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/i18n/en_US.json
View file

@ -23,6 +23,8 @@
"term.about": "About",
"term.privateSession": "Private Session",
"term.queue": "Queue",
"term.lyrics": "Lyrics",
"term.miniplayer": "MiniPlayer",
"term.history": "History",
"term.search": "Search",
"term.library": "Library",

2
src/i18n/source/en_US.json
View file

@ -23,6 +23,8 @@
"term.about": "About",
"term.privateSession": "Private Session",
"term.queue": "Queue",
"term.lyrics": "Lyrics",
"term.miniplayer": "MiniPlayer",
"term.history": "History",
"term.search": "Search",
"term.library": "Library",

885
src/renderer/less/bootstrap-vue.min.css vendored
View file

File diff suppressed because it is too large Load diff

2638
src/renderer/less/bootstrap-vue.min.less vendored Normal file
View file

File diff suppressed because it is too large Load diff

6246
src/renderer/less/bootstrap.css vendored Normal file
View file

File diff suppressed because it is too large Load diff

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

@ -7506,6 +7506,7 @@ fieldset:disabled .btn {
font-size : 0.875rem;
word-wrap : break-word;
opacity : 0;
pointer-events: none;
}
.tooltip.show {

349
src/renderer/less/helpers.css Normal file
View file

@ -0,0 +1,349 @@
.notyf__toast {
-webkit-app-region: no-drag;
cursor: pointer;
}
.notyf-info {
background: var(--keyColor);
}
.tooltip-inner {
background: #2f2f2f;
opacity: 1;
border: 1px solid rgba(0, 0, 0, 0.35);
transition: all 0.3s ease-in-out;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
}
.modal-fullscreen {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.modal-fullscreen .modal-window {
background: #333;
border-radius: 10px;
box-shadow: var(--mediaItemShadow-Shadow);
display: flex;
flex-flow: column;
max-height: 500px;
max-width: 360px;
background: #121212;
width: 100%;
position: relative;
}
.modal-fullscreen .modal-window:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
box-shadow: var(--mediaItemShadow);
z-index: 1;
border-radius: inherit;
}
.modal-fullscreen .modal-window .modal-header {
width: 100%;
padding: 6px;
}
.modal-fullscreen .modal-window .modal-content {
width: 100%;
height: 100%;
overflow: hidden;
overflow-y: overlay;
}
.spatialproperties-panel .modal-window {
height: 700px;
max-height: 700px;
width: 800px;
max-width: 800px;
overflow: hidden;
}
.spatialproperties-panel .modal-window .info-header {
padding-left: 12px;
}
.spatialproperties-panel .modal-window .visual-container {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.spatialproperties-panel .modal-window .visual {
position: relative;
height: 250px;
width: 300px;
display: inline-flex;
align-items: flex-end;
justify-content: center;
filter: drop-shadow(2px 12px 6px rgba(0, 0, 0, 0.25));
margin: 0 auto;
}
.spatialproperties-panel .modal-window .visual .face {
position: absolute;
width: calc(12px * 6);
height: calc(12px * 6);
border-radius: 6px;
transform: rotateX(60deg) rotateZ(-45deg);
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
}
.spatialproperties-panel .modal-window .visual .listener {
position: absolute;
width: 32px;
height: 32px;
border-radius: 6px;
transform: rotateX(60deg) rotateZ(-45deg);
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
background: white;
color: black;
z-index: 2;
}
.spatialproperties-panel .modal-window .visual .audiosource {
position: absolute;
width: 32px;
height: 32px;
border-radius: 6px;
transform: rotateX(60deg) rotateZ(-45deg);
transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
background: yellow;
z-index: 2;
}
.spatialproperties-panel .modal-window .visual .face:nth-of-type(1) {
background: linear-gradient(45deg, #28223a, #1f2038);
z-index: 1;
}
.spatialproperties-panel .modal-window .visual .face:nth-of-type(2) {
background: linear-gradient(45deg, #7d53ad, #5763ff);
transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
opacity: 0.7;
z-index: 3;
}
.spatialproperties-panel .modal-window .modal-header {
padding: 16px;
position: relative;
overflow: hidden;
}
.spatialproperties-panel .modal-window .modal-header .modal-title {
text-align: center;
}
.spatialproperties-panel .modal-window .modal-header .close-btn {
width: 50px;
height: 100%;
background-image: var(--gfx-closeBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
appearance: none;
border: 0;
background-color: transparent;
position: absolute;
top: 0;
right: 0;
}
.spatialproperties-panel .modal-window .modal-header .close-btn:hover {
background-color: #c42b1c;
}
.addtoplaylist-panel .modal-window {
max-height: 600px;
max-width: 400px;
background: rgba(18, 18, 18, 0.9);
overflow: hidden;
backdrop-filter: blur(16px) saturate(180%);
}
.addtoplaylist-panel .modal-window .modal-header {
padding: 16px;
position: relative;
}
.addtoplaylist-panel .modal-window .modal-header .modal-title {
text-align: center;
}
.addtoplaylist-panel .modal-window .modal-header .close-btn {
width: 50px;
height: 100%;
background-image: var(--gfx-closeBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
appearance: none;
border: 0;
background-color: transparent;
position: absolute;
top: 0;
right: 0;
}
.addtoplaylist-panel .modal-window .modal-header .close-btn:hover {
background-color: #c42b1c;
}
.addtoplaylist-panel .modal-window .modal-search {
width: 100%;
padding: 0px 16px;
position: relative;
}
.addtoplaylist-panel .modal-window .playlist-item {
appearance: none;
border: 0px;
text-align: left;
width: 100%;
margin: 0;
display: flex;
background: rgba(32, 32, 32, 0.46);
color: #eee;
font-family: inherit;
font-size: 0.98em;
padding: 6px 12px;
align-items: center;
flex-flow: row;
}
.addtoplaylist-panel .modal-window .playlist-item .icon {
pointer-events: none;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 6px;
}
.addtoplaylist-panel .modal-window .playlist-item .name {
position: relative;
}
.addtoplaylist-panel .modal-window .playlist-item:hover {
background: var(--selected);
}
.addtoplaylist-panel .modal-window .playlist-item:active {
background: var(--selected-click);
}
.addtoplaylist-panel .modal-window .playlist-item.focused {
background: var(--keyColor);
}
.addtoplaylist-panel .modal-window .playlist-item:last-child {
border-bottom: 0px;
}
.menu-panel {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100001;
display: flex;
justify-content: center;
align-items: center;
-webkit-app-region: no-drag;
}
.menu-panel .menu-header-body {
padding: 6px;
display: flex;
background: rgba(200, 200, 200, 0.1);
}
.menu-panel .menu-header-body .menu-option-header {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--mediaItemRadius);
appearance: none;
border: 0;
background: transparent;
}
.menu-panel .menu-header-body .menu-option-header.active .sidebar-icon > .svg-icon {
--color: var(--keyColor);
}
.menu-panel .menu-header-body .menu-option-header:hover {
background: var(--selected);
}
.menu-panel .menu-header-body .menu-option-header:active {
background: var(--selected-click);
}
.menu-panel .menu-panel-body {
display: flex;
flex-flow: column;
background: #262626;
position: relative;
min-width: 200px;
box-shadow: var(--ciderShadow-Generic);
border-radius: var(--mediaItemRadius);
overflow: hidden;
font-size: 13px;
}
.menu-panel .menu-panel-body .menu-option {
text-align: left;
display: flex;
width: 100%;
padding: 9px 16px;
appearance: none;
border: 0px;
font: inherit;
background: transparent;
color: inherit;
}
.menu-panel .menu-panel-body .menu-option:hover {
background: var(--selected);
}
.menu-panel .menu-panel-body .menu-option:active {
background: var(--selected-click);
}
.menu-panel .menu-header-text {
margin: 18px 6px;
}
.menu-panel .menu-header-text .close-btn {
width: 50px;
height: 42px;
background-image: var(--gfx-closeBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
appearance: none;
border: 0;
background-color: transparent;
position: absolute;
top: 0;
right: 0;
}
.menu-panel .menu-header-text .close-btn:hover {
background-color: #c42b1c;
}
.menu-panel .menu-body {
overflow: overlay;
height: 100%;
}
.menu-panel .menu-footer {
width: 100%;
padding: 12px;
}
.queue-panel {
height: 100%;
width: 100%;
display: flex;
flex-flow: column;
}
.queue-panel .queue-header-text {
margin: 18px 6px;
}
.queue-panel .queue-body {
overflow: overlay;
height: 100%;
}
.queue-panel .queue-footer {
width: 100%;
padding: 12px;
}
.queue-panel .autoplay {
background: rgba(200, 200, 200, 0.15);
display: flex;
justify-content: center;
appearance: none;
border: 0;
border-radius: 6px;
height: 32px;
width: 32px;
}
.queue-panel .infinity {
content: url("assets/infinity.svg");
margin: auto;
}

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

@ -7,7 +7,13 @@
background: var(--keyColor);
}
.tooltip-inner {
background: #2f2f2f;
opacity: 1;
border: 1px solid rgb(0 0 0 / 35%);
transition: all 0.3s ease-in-out;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
}
.modal-fullscreen {
display: flex;

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

@ -101,22 +101,27 @@
</div>
<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>
<div class="app-chrome-item generic">
<button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
:title="$root.getLz('term.queue')"
v-b-tooltip.hover
@click="invokeDrawer('queue')"></button>
</div>
<div class="app-chrome-item generic">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<button class="playback-button--small lyrics"
:title="$root.getLz('term.lyrics')"
v-b-tooltip.hover
:class="{'active': drawer.panel == 'lyrics'}"
@click="invokeDrawer('lyrics')"></button>
</template>
<template v-else>
<button class="playback-button--small lyrics"
:style="{'opacity': 0.3, 'pointer-events': 'none'}"
@click="invokeDrawer('lyrics')"></button>
:style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
</template>
</div>

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

@ -117,22 +117,28 @@
</div>
<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>
<div class="app-chrome-item generic">
<button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
<button class="playback-button--small queue"
:title="$root.getLz('term.queue')"
v-b-tooltip.hover
:class="{'active': drawer.panel == 'queue'}"
@click="invokeDrawer('queue')"></button>
</div>
<div class="app-chrome-item generic">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<button class="playback-button--small lyrics"
:title="$root.getLz('term.lyrics')"
v-b-tooltip.hover
:class="{'active': drawer.panel == 'lyrics'}"
@click="invokeDrawer('lyrics')"></button>
</template>
<template v-else>
<button class="playback-button--small lyrics"
:style="{'opacity': 0.3, 'pointer-events': 'none'}"
@click="invokeDrawer('lyrics')"></button>
:style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
</template>
</div>
</template>