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

Added drawer, added mouse overs

Browse source
This commit is contained in:
booploops 2021-11-22 23:40:48 -08:00
parent cf833bf959
commit 8bb6d81802
4 changed files with 38 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.js
View file

@ -19,8 +19,8 @@ function CreateWindow() {
app.win = app.ame.win.CreateBrowserWindow() // Create the BrowserWindow
/** CIDER **/
// const cider = require("./resources/functions/cider-win")
// cider.CreateBrowserWindow()
const cider = require("./resources/functions/cider-win")
cider.CreateBrowserWindow()
/** CIDER **/
app.ame.handler.WindowStateHandler(); // Handling the Window
app.ame.handler.PlaybackStateHandler(); // Playback Change Listener

8
resources/cider-ui-tests/index.html
View file

@ -18,7 +18,7 @@
<div id="app-main">
<div class="app-chrome">
<div class="app-chrome--left">
<div class="app-chrome-item">
<div class="app-chrome-item full-height">
<div class="app-title"></div>
</div>
<div class="app-chrome-item">
@ -72,7 +72,7 @@
<div class="app-chrome-item generic">
<button class="playback-button--small lyrics"></button>
</div>
<div class="app-chrome-item">
<div class="app-chrome-item full-height">
<div class="window-controls">
<div class="minimize"></div>
<div class="minmax"></div>
@ -140,9 +140,13 @@
</div>
<br>
<br>
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
<button class="md-btn">Button</button>
<button class="md-btn md-btn-primary">Button</button>
</div>
<div class="app-drawer" v-if="drawertest">
</div>
</div>
</div>
<div class="bg-artwork"></div>

2
resources/cider-ui-tests/index.js
View file

@ -1,6 +1,6 @@
var app = new Vue({
el: "#app",
data: {
drawertest: false
}
})

34
resources/cider-ui-tests/style.css
View file

@ -140,9 +140,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
#app-sidebar {
/* background-color: var(--color1); */
height:100%;
width:320px;
width:260px;
display:flex;
flex-direction: column;
flex: 0 0 auto;
}
#app-content {
background-color: var(--color2);
@ -157,6 +158,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
border-top: 1px solid rgb(0 0 0 / 25%);
}
.app-drawer {
width: 300px;
border-left: 1px solid rgb(0 0 0 / 25%);
flex: 0 0 auto;
border-top: 1px solid rgb(0 0 0 / 25%);
}
.search-input-container {
position: relative;
}
@ -287,7 +296,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.app-sidebar-item.active {
border: 1px solid rgb(200 200 200 / 5%);
background: rgb(200 200 200 / 15%);
transform: scale(0.98);
transform: scale(1);
transition: transform 0s;
}
@ -344,10 +353,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
justify-content: center;
align-items: center;
-webkit-app-region: no-drag;
height: auto;
}
.app-chrome .app-chrome-item.generic {
width: 60px;
width: 50px;
opacity: 0.70;
}
@ -391,6 +401,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
width: 60px;
}
.app-chrome .app-chrome-item.full-height {
height: 100%;
}
.app-chrome .app-chrome-item>.app-title {
width: 100px;
font-size: 13px;
@ -496,7 +510,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height:12px;
border-radius: 2px;
background: var(--keyColor);
cursor: pointer;
cursor: ew-resize;
}
.app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range]::-moz-range-thumb {
@ -660,7 +674,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.playback-button {
font-size: 2em;
width: 40px;
height: 64px;
height: 36px;
padding: 0px;
background: transparent;
border: 0px;
@ -670,6 +684,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
background-position: center;
background-repeat: no-repeat;
opacity: 0.70;
border-radius: 6px;
}
.playback-button:active {
@ -677,6 +692,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.playback-button--small {
border-radius: 6px;
font-size: 1em;
color: inherit;
background-size: 14px;
@ -689,6 +705,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
box-shadow: unset;
}
.playback-button:hover, .playback-button--small:hover {
background-color: rgb(200 200 200 / 10%);
}
.playback-button:active, .playback-button--small:active {
transform: scale(0.9);
}
.playback-button--small.active {
background-color: rgb(200 200 200 / 10%);
}