replaced style editor in settings with manage styles
This commit is contained in:
booploops
parent
6b59db98fc
commit
0abc06da18
4 changed files with 427 additions and 192 deletions
|
|
@ -46,6 +46,7 @@ export class BrowserWindow {
|
|||
"pages/library-artists",
|
||||
"pages/browse",
|
||||
"pages/settings",
|
||||
"pages/installed-themes",
|
||||
"pages/listen_now",
|
||||
"pages/home",
|
||||
"pages/artist-feed",
|
||||
|
|
@ -178,6 +179,10 @@ export class BrowserWindow {
|
|||
page: "settings",
|
||||
component: `<cider-settings></cider-settings>`,
|
||||
condition: `page == 'settings'`
|
||||
}, {
|
||||
page: "installed-themes",
|
||||
component: `<installed-themes></installed-themes>`,
|
||||
condition: `page == 'installed-themes'`
|
||||
}, {
|
||||
page: "search",
|
||||
component: `<cider-search :search="search"></cider-search>`,
|
||||
|
|
|
|||
|
|
@ -497,12 +497,14 @@
|
|||
flex-direction: column;
|
||||
height : 100%;
|
||||
overflow : hidden;
|
||||
|
||||
.cd-mediaitem-list-item {
|
||||
&:hover {
|
||||
.heart-icon {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.heart-icon {
|
||||
left: -25px;
|
||||
}
|
||||
|
|
@ -522,7 +524,8 @@
|
|||
|
||||
.mediaContainer {
|
||||
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
|
||||
width: 260px;height:260px;
|
||||
width : 260px;
|
||||
height : 260px;
|
||||
}
|
||||
|
||||
.playlist-body {
|
||||
|
|
@ -547,6 +550,7 @@
|
|||
height : 100%;
|
||||
overflow: hidden;
|
||||
margin : 0px;
|
||||
|
||||
.tab-pane {
|
||||
height : 100%;
|
||||
overflow-y : overlay;
|
||||
|
|
@ -554,6 +558,7 @@
|
|||
padding : var(--contentInnerPadding);
|
||||
padding-inline : 40px;
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent, white 20px);
|
||||
|
||||
.well {
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
@ -824,9 +829,7 @@
|
|||
transition: min-height 0.5s ease-in-out;
|
||||
min-height: 200px;
|
||||
|
||||
.playlistInfo {
|
||||
|
||||
}
|
||||
.playlistInfo {}
|
||||
|
||||
.mediaContainer {
|
||||
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
|
||||
|
|
@ -1123,9 +1126,46 @@
|
|||
|
||||
/* Artist Page End */
|
||||
|
||||
// Settings page
|
||||
.settings-page {
|
||||
|
||||
.installed-themes-page {
|
||||
|
||||
.themeContextMenu {
|
||||
background: transparent;
|
||||
color : var(--keyColor);
|
||||
border : 0px;
|
||||
}
|
||||
|
||||
.repo-header {
|
||||
font-size : 16px;
|
||||
position : sticky;
|
||||
top : 0;
|
||||
left : 0;
|
||||
right : 0;
|
||||
width : 100%;
|
||||
height : 50px;
|
||||
z-index : 1;
|
||||
background : rgba(36, 36, 36, 0.5);
|
||||
display : flex;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
backdrop-filter: var(--glassFilter);
|
||||
overflow : hidden;
|
||||
border-bottom : 1px solid rgb(0 0 0 / 18%);
|
||||
border-top : 1px solid rgb(135 135 135 / 18%);
|
||||
}
|
||||
|
||||
.style-editor-container {
|
||||
height : 100%;
|
||||
flex : 1;
|
||||
background: var(--color2);
|
||||
padding : 0px;
|
||||
overflow-y: overlay;
|
||||
|
||||
.list-group-item {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.stylestack-editor {
|
||||
width: 100%;
|
||||
|
|
@ -1156,7 +1196,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Settings page
|
||||
.settings-page {
|
||||
padding: 0px;
|
||||
|
||||
.nav {
|
||||
width : 90%;
|
||||
|
|
@ -1176,6 +1220,7 @@
|
|||
height: 100%;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
.settings-option-body {
|
||||
margin: 16px;
|
||||
}
|
||||
|
|
|
|||
291
src/renderer/views/pages/installed-themes.ejs
Normal file
291
src/renderer/views/pages/installed-themes.ejs
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
<script type="text/x-template" id="installed-themes">
|
||||
<div class="content-inner github-themes-page installed-themes-page">
|
||||
<div class="gh-header">
|
||||
<div class="row">
|
||||
<div class="col nopadding">
|
||||
<h1 class="header-text">
|
||||
Manage Styles
|
||||
</h1>
|
||||
</div>
|
||||
<div class="col-auto flex-center">
|
||||
<button class="md-btn md-btn-small md-btn-block" @click="openThemesFolder()">
|
||||
{{$root.getLz('settings.option.visual.theme.github.openfolder')}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto nopadding flex-center">
|
||||
<button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()">
|
||||
{{$root.getLz('settings.option.visual.theme.github.download')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-content">
|
||||
<div class="repos-list">
|
||||
<div class="repo-header">
|
||||
<h4>Available</h4>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li @click="addStyle(theme.file)"
|
||||
@contextmenu="contextMenu"
|
||||
class="list-group-item list-group-item-dark"
|
||||
v-for="theme in themes" :value="theme.file"
|
||||
v-if="!$root.cfg.visual.styles.includes(theme.file)">
|
||||
|
||||
<b-row>
|
||||
<b-col class="themeLabel">{{theme.name}}</b-col>
|
||||
<b-col sm="auto">
|
||||
<button @click.stop="contextMenu" class="themeContextMenu codicon codicon-list-unordered"></button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="style-editor-container">
|
||||
<div class="repo-header">
|
||||
<h4>Applied</h4>
|
||||
</div>
|
||||
<stylestack-editor ref="stackEditor" v-if="themes.length != 0" :themes="themes"/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// do not translate
|
||||
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 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>
|
||||
</draggable>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
themes: {
|
||||
type: Array,
|
||||
default: [],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
selected: null,
|
||||
newTheme: null,
|
||||
themeList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.themes)
|
||||
this.themeList = [...this.themes]
|
||||
this.themeList.unshift({
|
||||
name: "Acrylic Grain",
|
||||
file: "grain.less"
|
||||
})
|
||||
this.themeList.unshift({
|
||||
name: "Sweetener",
|
||||
file: "sweetener.less"
|
||||
})
|
||||
this.themeList.unshift({
|
||||
name: "Reduce Visuals",
|
||||
file: "reduce_visuals.less"
|
||||
})
|
||||
this.themeList.unshift({
|
||||
name: "Inline Drawer",
|
||||
file: "inline_drawer.less"
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
gitHubExplore() {
|
||||
this.$root.appRoute("themes-github")
|
||||
},
|
||||
getThemeName(filename) {
|
||||
try {
|
||||
return this.themeList.find(theme => theme.file === filename).name;
|
||||
} catch (e) {
|
||||
return filename;
|
||||
}
|
||||
},
|
||||
moveUp() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(this.selected)
|
||||
if (index > 0) {
|
||||
styles.splice(index, 1)
|
||||
styles.splice(index - 1, 0, this.selected)
|
||||
}
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
moveDown() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(this.selected)
|
||||
if (index < styles.length - 1) {
|
||||
styles.splice(index, 1)
|
||||
styles.splice(index + 1, 0, this.selected)
|
||||
}
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
remove(style) {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(style)
|
||||
styles.splice(index, 1)
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
addStyle(style) {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
styles.push(style)
|
||||
this.$root.reloadStyles()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('installed-themes', {
|
||||
template: "#installed-themes",
|
||||
props: [],
|
||||
data: function () {
|
||||
return {
|
||||
repos: [],
|
||||
openRepo: {
|
||||
id: -1,
|
||||
name: '',
|
||||
description: '',
|
||||
html_url: '',
|
||||
stargazers_count: 0,
|
||||
owner: {
|
||||
avatar_url: ''
|
||||
},
|
||||
readme: ""
|
||||
},
|
||||
themesInstalled: [],
|
||||
themes: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.themes = ipcRenderer.sendSync("get-themes")
|
||||
// this.getRepos();
|
||||
this.getInstalledThemes();
|
||||
// app.checkForThemeUpdates()
|
||||
},
|
||||
methods: {
|
||||
contextMenu(event) {
|
||||
let menu = {
|
||||
items: [{
|
||||
name: "Uninstall",
|
||||
action: () => {
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "View Info",
|
||||
action: () => {
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.$root.showMenuPanel(menu, event)
|
||||
},
|
||||
openThemesFolder() {
|
||||
ipcRenderer.invoke("open-path", "themes")
|
||||
},
|
||||
getInstalledThemes() {
|
||||
let self = this
|
||||
const themes = ipcRenderer.sendSync("get-themes")
|
||||
// for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
|
||||
themes.forEach(theme => {
|
||||
if (theme.github_repo !== "" && typeof theme.commit != "") {
|
||||
self.themesInstalled.push(theme.github_repo.toLowerCase())
|
||||
}
|
||||
})
|
||||
},
|
||||
addStyle(filename) {
|
||||
this.$refs.stackEditor.addStyle(filename)
|
||||
},
|
||||
showRepo(repo) {
|
||||
const self = this
|
||||
const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(readmeUrl, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = self.convertReadMe(result);
|
||||
})
|
||||
.catch(error => {
|
||||
self.openRepo = repo
|
||||
self.openRepo.readme = `This repository doesn't have a README.md file.`;
|
||||
console.log('error', error)
|
||||
});
|
||||
},
|
||||
convertReadMe(text) {
|
||||
return marked.parse(text)
|
||||
},
|
||||
installThemeRepo(repo) {
|
||||
let self = this
|
||||
let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
|
||||
repo: repo.full_name
|
||||
});
|
||||
bootbox.confirm(msg, (res) => {
|
||||
if (res) {
|
||||
ipcRenderer.once("theme-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
self.getInstalledThemes()
|
||||
notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-theme", repo.html_url)
|
||||
}
|
||||
})
|
||||
},
|
||||
installThemeURL() {
|
||||
let self = this
|
||||
bootbox.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
|
||||
if (result) {
|
||||
ipcRenderer.once("theme-installed", (event, arg) => {
|
||||
if (arg.success) {
|
||||
self.themes = ipcRenderer.sendSync("get-themes")
|
||||
notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
|
||||
} else {
|
||||
notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
|
||||
}
|
||||
});
|
||||
ipcRenderer.invoke("get-github-theme", result)
|
||||
}
|
||||
});
|
||||
},
|
||||
getRepos() {
|
||||
let self = this
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true", requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
let items = JSON.parse(result).items
|
||||
self.repos = items
|
||||
})
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1224,8 +1224,8 @@
|
|||
<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 class="md-option-segment md-option-segment_auto">
|
||||
<button class="md-btn" @click="app.appRoute('installed-themes')">Manage Styles</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1436,112 +1436,6 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// do not translate
|
||||
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 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 slot="footer" style="-webkit-user-drag: none" variant="dark">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-dropdown class="stylesDropdown" variant="primary" text="Add Style...">
|
||||
<b-dropdown-item v-for="theme in themeList" @click="addStyle(theme.file)">{{theme.name}}</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-btn @click="gitHubExplore()">{{$root.getLz('settings.option.visual.theme.github.explore')}}</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-list-group-item>
|
||||
</draggable>
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
themes: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
selected: null,
|
||||
newTheme: null,
|
||||
themeList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.themeList = [...this.themes]
|
||||
this.themeList.unshift({
|
||||
name: "Acrylic Grain",
|
||||
file: "grain.less"
|
||||
})
|
||||
this.themeList.unshift({
|
||||
name: "Sweetener",
|
||||
file: "sweetener.less"
|
||||
})
|
||||
this.themeList.unshift({
|
||||
name: "Reduce Visuals",
|
||||
file: "reduce_visuals.less"
|
||||
})
|
||||
this.themeList.unshift({
|
||||
name: "Inline Drawer",
|
||||
file: "inline_drawer.less"
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
gitHubExplore() {
|
||||
this.$root.appRoute("themes-github")
|
||||
},
|
||||
getThemeName(filename) {
|
||||
try {
|
||||
return this.themeList.find(theme => theme.file === filename).name;
|
||||
} catch (e) {
|
||||
return filename;
|
||||
}
|
||||
},
|
||||
moveUp() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(this.selected)
|
||||
if (index > 0) {
|
||||
styles.splice(index, 1)
|
||||
styles.splice(index - 1, 0, this.selected)
|
||||
}
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
moveDown() {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(this.selected)
|
||||
if (index < styles.length - 1) {
|
||||
styles.splice(index, 1)
|
||||
styles.splice(index + 1, 0, this.selected)
|
||||
}
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
remove(style) {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
const index = styles.indexOf(style)
|
||||
styles.splice(index, 1)
|
||||
this.$root.reloadStyles()
|
||||
},
|
||||
addStyle(style) {
|
||||
const styles = this.$root.cfg.visual.styles
|
||||
styles.push(style)
|
||||
this.$root.reloadStyles()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('cider-settings', {
|
||||
template: "#cider-settings",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue