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

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

@ -283,6 +283,7 @@
// top: 0;
height : calc(100% - 60px - var(--navigationBarHeight));
padding: 0px;
.inner-container {
display: flex;
height : calc(100% - var(--navigationBarHeight));
@ -972,9 +973,11 @@
display : flex;
overflow: hidden;
padding : 16px 32px;
>.latestRelease {
width: 250px;
}
>.topSongs {
width: calc(100% - 250px);
}
@ -1016,6 +1019,37 @@
.settings-page {
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 {
width : 90%;
margin: 16px auto 0px;
@ -1068,7 +1102,8 @@
box-shadow : var(--mediaItemShadow-Shadow);
background : black;
.spprev, .nextprev {
.spprev,
.nextprev {
position : absolute;
height : 100%;
width : 64px;
@ -1077,6 +1112,7 @@
z-index : 1;
border : 0px;
transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
&:hover {
background: var(--selected);
transform : scale(1.1);
@ -1104,6 +1140,7 @@
.spprev {
left: 0;
&:before {
-webkit-mask-image: url("./views/svg/chevron-left.svg");
}
@ -1112,6 +1149,7 @@
.nextprev {
right: 0;
&:before {
-webkit-mask-image: url("./views/svg/chevron-right.svg");
}
@ -1154,6 +1192,7 @@
transform : scale(1.2) translate3d(0, 0, 0);
will-change: opacity, transform;
}
.spfade-leave-to {
opacity : 1;
transform : scale(1) translate3d(0, 0, 0);
@ -1171,9 +1210,11 @@
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}

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

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

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

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