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

Merge branch 'ciderapp:develop' into develop

Browse source
This commit is contained in:
Gabriel Davila 2022-04-11 20:55:50 -03:00 • committed by GitHub
commit 2acfe5da43
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 153 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -281,13 +281,14 @@
// Podcast Page // Podcast Page
.content-inner.library-artists-page { .content-inner.library-artists-page {
// top: 0; // top: 0;
height: calc(100% - 60px - var(--navigationBarHeight)); height : calc(100% - 60px - var(--navigationBarHeight));
padding: 0px; padding: 0px;
.inner-container { .inner-container {
display: flex; display: flex;
height : calc(100% - var(--navigationBarHeight)); height : calc(100% - var(--navigationBarHeight));
padding: 0px; padding: 0px;
height: 100%; height : 100%;
.list-flat { .list-flat {
border-radius: 0px; border-radius: 0px;
@ -331,7 +332,7 @@
} }
.episodes-list { .episodes-list {
height: calc(100% + 60px); height : calc(100% + 60px);
width : 100%; width : 100%;
background: rgb(200 200 200 / 6%); background: rgb(200 200 200 / 6%);
overflow-y: overlay; overflow-y: overlay;
@ -568,7 +569,7 @@
font-size : 1.6rem; font-size : 1.6rem;
//margin-bottom: 6px; //margin-bottom: 6px;
margin-right : 6px; margin-right : 6px;
margin-bottom: 6px; margin-bottom : 6px;
flex-shrink : unset; flex-shrink : unset;
} }
@ -972,9 +973,11 @@
display : flex; display : flex;
overflow: hidden; overflow: hidden;
padding : 16px 32px; padding : 16px 32px;
>.latestRelease { >.latestRelease {
width: 250px; width: 250px;
} }
>.topSongs { >.topSongs {
width: calc(100% - 250px); width: calc(100% - 250px);
} }
@ -1016,18 +1019,49 @@
.settings-page { .settings-page {
padding: 0px; padding: 0px;
.stylestack-editor {
width: 100%;
.btn,
.btn-group {
width: 100%;
}
.themeLabel {
display:flex;
align-items: center;
}
.removeItem {
border: 0px;
background: transparent;
height: 32px;
font-weight: bold;
color: var(--textColor);
cursor: pointer;
}
.stylesDropdown {
>.dropdown-menu {
height : 300px;
overflow-y: overlay;
}
}
}
.nav { .nav {
width: 90%; width : 90%;
margin: 16px auto 0px; margin: 16px auto 0px;
} }
.md-option-header { .md-option-header {
padding: 0px 26px; padding : 0px 26px;
border-bottom: unset; border-bottom: unset;
border-top: unset; border-top : unset;
font-weight: 600; font-weight : 600;
background: rgb(255 255 255 / 0%); background : rgb(255 255 255 / 0%);
font-size: 2em; font-size : 2em;
} }
.settings-option-body { .settings-option-body {
@ -1050,36 +1084,38 @@
.carousel-item>img { .carousel-item>img {
object-fit: cover; object-fit: cover;
width:100%; width : 100%;
} }
.spprofile-line { .spprofile-line {
height: 300px; height : 300px;
width: 100%; width : 100%;
max-width: 1024px; max-width: 1024px;
padding: 16px; padding : 16px;
margin: 0 auto; margin : 0 auto;
.spprofile-viewport { .spprofile-viewport {
height: 100%; height : 100%;
position: relative; position : relative;
border-radius: var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
overflow: hidden; overflow : hidden;
box-shadow: var(--mediaItemShadow-Shadow); box-shadow : var(--mediaItemShadow-Shadow);
background: black; background : black;
.spprev, .nextprev { .spprev,
position: absolute; .nextprev {
height: 100%; position : absolute;
width: 64px; height : 100%;
top: 0; width : 64px;
top : 0;
background: rgb(0 0 0 / 20%); background: rgb(0 0 0 / 20%);
z-index: 1; z-index : 1;
border: 0px; border : 0px;
transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase); transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
&:hover { &:hover {
background: var(--selected); background: var(--selected);
transform: scale(1.1); transform : scale(1.1);
} }
&:active { &:active {
@ -1088,22 +1124,23 @@
} }
&:before { &:before {
content: ''; content : '';
position: absolute; position : absolute;
top: 0; top : 0;
left: 0; left : 0;
width: 100%; width : 100%;
height: 100%; height : 100%;
background: #eee; background : #eee;
opacity: 1; opacity : 1;
-webkit-mask-position: center; -webkit-mask-position: center;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat : no-repeat;
-webkit-mask-size: 1em; -webkit-mask-size : 1em;
} }
} }
.spprev { .spprev {
left: 0; left: 0;
&:before { &:before {
-webkit-mask-image: url("./views/svg/chevron-left.svg"); -webkit-mask-image: url("./views/svg/chevron-left.svg");
} }
@ -1112,6 +1149,7 @@
.nextprev { .nextprev {
right: 0; right: 0;
&:before { &:before {
-webkit-mask-image: url("./views/svg/chevron-right.svg"); -webkit-mask-image: url("./views/svg/chevron-right.svg");
} }
@ -1119,25 +1157,25 @@
} }
.spslide { .spslide {
position: absolute; position : absolute;
width: 100%; width : 100%;
height: 100%; height : 100%;
overflow: hidden; overflow : hidden;
background: black; background: black;
>img { >img {
WIDTH: 100%; WIDTH : 100%;
height: 100%; height : 100%;
object-fit: cover; object-fit: cover;
} }
.sptitle { .sptitle {
position: absolute; position : absolute;
bottom: 0px; bottom : 0px;
left: 0; left : 0;
width: 100%; width : 100%;
text-align: center; text-align : center;
font-size: 18px; font-size : 18px;
text-shadow: 0px 2px 4px #00000033; text-shadow: 0px 2px 4px #00000033;
} }
} }
@ -1145,18 +1183,19 @@
.spfade-enter-active, .spfade-enter-active,
.spfade-leave-active { .spfade-leave-active {
--transitionTime: 0.2s; --transitionTime: 0.2s;
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase); transition : opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
will-change: opacity, transform; will-change : opacity, transform;
} }
.spfade-enter { .spfade-enter {
opacity: 0; opacity : 0;
transform: scale(1.2) translate3d(0,0,0); transform : scale(1.2) translate3d(0, 0, 0);
will-change: opacity, transform; will-change: opacity, transform;
} }
.spfade-leave-to { .spfade-leave-to {
opacity: 1; opacity : 1;
transform: scale(1) translate3d(0,0,0); transform : scale(1) translate3d(0, 0, 0);
will-change: opacity, transform; will-change: opacity, transform;
} }
} }
@ -1171,9 +1210,11 @@
0% { 0% {
background-position: 0% 0%; background-position: 0% 0%;
} }
50% { 50% {
background-position: 100% 0%; background-position: 100% 0%;
} }
100% { 100% {
background-position: 0% 0%; background-position: 0% 0%;
} }
@ -1181,31 +1222,31 @@
//Home //Home
.home-page { .home-page {
top : 0; top : 0;
//padding-top: var(--navbarHeight); //padding-top: var(--navbarHeight);
.md-btn-replay { .md-btn-replay {
background-image: linear-gradient(-45deg, #2e2173, #925042); background-image: linear-gradient(-45deg, #2e2173, #925042);
animation: gradient-animation 5s ease-in-out infinite; animation : gradient-animation 5s ease-in-out infinite;
background-size: 400% 400%; background-size : 400% 400%;
border : 0px; border : 0px;
box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2); box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
text-transform: uppercase; text-transform : uppercase;
font-weight : bold; font-weight : bold;
} }
.md-btn-replay--hero { .md-btn-replay--hero {
font-size : 1em; font-size : 1em;
padding : 16px; padding : 16px;
background-image: linear-gradient(-45deg, #2e2173, #925042); background-image: linear-gradient(-45deg, #2e2173, #925042);
animation: gradient-animation 5s ease-in-out infinite; animation : gradient-animation 5s ease-in-out infinite;
background-size: 400% 400%; background-size : 400% 400%;
border : 0px; border : 0px;
box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%); box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
margin-top : 1em; margin-top : 1em;
font-size : 0.9em; font-size : 0.9em;
text-transform: uppercase; text-transform : uppercase;
font-weight : bold; font-weight : bold;
} }
.artist-feed-card { .artist-feed-card {
@ -1375,12 +1416,12 @@
.replay-viewport { .replay-viewport {
background-image: linear-gradient(-45deg, #2e2173, #925042); background-image: linear-gradient(-45deg, #2e2173, #925042);
animation: gradient-animation 5s ease-in-out infinite; animation : gradient-animation 5s ease-in-out infinite;
background-size: 400% 400%; background-size : 400% 400%;
padding : 16px 40px; padding : 16px 40px;
border-radius: 10px; border-radius : 10px;
box-shadow : var(--mediaItemShadow), var(--mediaItemShadow-Shadow); box-shadow : var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
color : rgb(238 238 238 / 86%); color : rgb(238 238 238 / 86%);
.replay-header { .replay-header {
text-align : center; text-align : center;

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

@ -960,12 +960,13 @@ const app = new Vue({
} }
}, },
async reloadStyles() { async reloadStyles() {
document.querySelector("body").style.opacity = 0
document.querySelector("body").style.overflow = "hidden"
const styles = this.cfg.visual.styles const styles = this.cfg.visual.styles
document.querySelectorAll(`[id*='less']`).forEach(el => { document.querySelectorAll(`[id*='less']`).forEach(el => {
el.remove() if(el.id != "less:style") {
el.remove()
}
}); });
this.chrome.appliedTheme.info = {} this.chrome.appliedTheme.info = {}
await asyncForEach(styles, async (style) => { await asyncForEach(styles, async (style) => {
let styleEl = document.createElement("link") let styleEl = document.createElement("link")
@ -985,10 +986,6 @@ const app = new Vue({
less.registerStylesheetsImmediately() less.registerStylesheetsImmediately()
less.refresh(true, true, true) less.refresh(true, true, true)
this.$forceUpdate() this.$forceUpdate()
setTimeout(() => {
document.querySelector("body").style.opacity = ""
document.querySelector("body").style.overflow = ""
}, 500)
}, },
macOSEmu() { macOSEmu() {
this.chrome.forceDirectives["macosemu"] = { this.chrome.forceDirectives["macosemu"] = {

57
src/renderer/views/pages/settings.ejs
View file

@ -843,12 +843,12 @@
<div class="md-option-line"> <div class="md-option-line">
<!-- Do not translate --> <!-- Do not translate -->
<div class="md-option-segment"> <div class="md-option-segment">
Style Stack Editor Style Editor<br>
<small>Mix and match various theme components to get Cider looking exactly how you want.</small>
</div>
<div class="md-option-segment">
<stylestack-editor :themes="themes"/>
</div> </div>
</div>
<div class="md-option-line">
<stylestack-editor :themes="themes"/>
</div> </div>
<div class="md-option-line"> <div class="md-option-line">
@ -954,24 +954,23 @@
Vue.component('stylestack-editor', { Vue.component('stylestack-editor', {
/*html*/ /*html*/
template: ` template: `
<b-row> <div class="stylestack-editor">
<b-col> <draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
<select size="6" v-model="selected" style="width:100%;"> <b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
<option v-for="theme in $root.cfg.visual.styles" :value="theme">{{theme}}</option> <b-row>
</select> <b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
<div class="btn-group" style="width: 100%"> <b-col sm="auto">
<button @click="moveUp" class="md-btn md-btn-small">Up</button> <button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
<button @click="remove" class="md-btn md-btn-small">Remove</button> </b-col>
<button @click="moveDown" class="md-btn md-btn-small">Down</button> </b-row>
</div> </b-list-group-item>
</b-col> <b-list-group-item variant="dark">
<b-col> <b-dropdown class="stylesDropdown" variant="primary" text="Add Style...">
<select class="md-select" style="width:100%;" v-model="newTheme"> <b-dropdown-item v-for="theme in themes" @click="addStyle(theme.file)">{{theme.name}}</b-dropdown-item>
<option v-for="theme in themes" :value="theme.file">{{theme.name}}</option> </b-dropdown>
</select> </b-list-group-item>
<button class="md-btn" @click="addStyle()">Add</button> </draggable>
</b-col> </div>
</b-row>
`, `,
props: { props: {
themes: { themes: {
@ -986,6 +985,9 @@
} }
}, },
methods: { methods: {
getThemeName(filename) {
return this.themes.find(theme => theme.file === filename).name;
},
moveUp() { moveUp() {
const styles = this.$root.cfg.visual.styles const styles = this.$root.cfg.visual.styles
const index = styles.indexOf(this.selected) const index = styles.indexOf(this.selected)
@ -1004,16 +1006,15 @@
} }
this.$root.reloadStyles() this.$root.reloadStyles()
}, },
remove() { remove(style) {
const styles = this.$root.cfg.visual.styles const styles = this.$root.cfg.visual.styles
const index = styles.indexOf(this.selected) const index = styles.indexOf(style)
styles.splice(index, 1) styles.splice(index, 1)
this.$root.reloadStyles() this.$root.reloadStyles()
}, },
addStyle() { addStyle(style) {
const styles = this.$root.cfg.visual.styles const styles = this.$root.cfg.visual.styles
styles.push(this.newTheme) styles.push(style)
this.newTheme = null
this.$root.reloadStyles() this.$root.reloadStyles()
} }
} }