added support for packed themes

This commit is contained in:
booploops 2022-05-04 16:05:59 -07:00
parent 019886ecb0
commit c3fdd6eae4
3 changed files with 67 additions and 32 deletions

View file

@ -868,7 +868,7 @@ export class BrowserWindow {
} else if (statSync(join(utils.getPath("themes"), file)).isDirectory()) { } else if (statSync(join(utils.getPath("themes"), file)).isDirectory()) {
let subFiles = readdirSync(join(utils.getPath("themes"), file)); let subFiles = readdirSync(join(utils.getPath("themes"), file));
for (let subFile of subFiles) { for (let subFile of subFiles) {
if (subFile.endsWith(".less")) { if (subFile.endsWith("index.less")) {
themes.push(join(file, subFile)); themes.push(join(file, subFile));
} }
} }
@ -894,7 +894,8 @@ export class BrowserWindow {
path: themePath, path: themePath,
file: theme, file: theme,
github_repo: themeJson.github_repo || "", github_repo: themeJson.github_repo || "",
commit: themeJson.commit || "" commit: themeJson.commit || "",
pack: themeJson.pack || false,
}); });
} else { } else {
themeObjects.push({ themeObjects.push({
@ -903,7 +904,8 @@ export class BrowserWindow {
path: themePath, path: themePath,
file: theme, file: theme,
github_repo: "", github_repo: "",
commit: "" commit: "",
pack: false
}); });
} }
} }

View file

@ -1135,6 +1135,16 @@
border : 0px; border : 0px;
} }
.list-group-item {
&.addon {
background: rgb(86 86 86 / 20%);
}
&.applied {
background: var(--keyColor-disabled);
pointer-events: none;
}
}
.repo-header { .repo-header {
font-size : 16px; font-size : 16px;
position : sticky; position : sticky;

View file

@ -31,19 +31,52 @@
<h4>Available</h4> <h4>Available</h4>
</div> </div>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<template v-for="theme in themes">
<li @click="addStyle(theme.file)" <li @click="addStyle(theme.file)"
@contextmenu="contextMenu($event, theme)" @contextmenu="contextMenu($event, theme)"
class="list-group-item list-group-item-dark" class="list-group-item list-group-item-dark"
v-for="theme in themes" :value="theme.file" :class="{'applied': $root.cfg.visual.styles.includes(theme.file)}">
v-if="!$root.cfg.visual.styles.includes(theme.file)">
<b-row> <b-row>
<b-col class="themeLabel">{{theme.name}}</b-col> <b-col class="themeLabel">{{theme.name}}</b-col>
<template v-if="$root.cfg.visual.styles.includes(theme.file)">
<b-col sm="auto">
<button class="themeContextMenu codicon codicon-check"></button>
</b-col>
</template>
<template v-else>
<b-col sm="auto" v-if="theme.pack">
<button class="themeContextMenu codicon codicon-package"></button>
</b-col>
<b-col sm="auto"> <b-col sm="auto">
<button @click.stop="contextMenu($event, theme)" class="themeContextMenu codicon codicon-list-unordered"></button> <button @click.stop="contextMenu($event, theme)" class="themeContextMenu codicon codicon-list-unordered"></button>
</b-col> </b-col>
</template>
</b-row> </b-row>
</li> </li>
<li @click="addStyle(packEntry.file)"
@contextmenu="contextMenu($event, theme)"
class="list-group-item list-group-item-dark addon"
v-for="packEntry in theme.pack"
:class="{'applied': $root.cfg.visual.styles.includes(packEntry.file)}"
v-if="theme.pack">
<b-row>
<b-col class="themeLabel">{{packEntry.name}}</b-col>
<template v-if="$root.cfg.visual.styles.includes(packEntry.file)">
<b-col sm="auto">
<button class="themeContextMenu codicon codicon-check"></button>
</b-col>
</template>
<template v-else>
<b-col sm="auto">
<button class="themeContextMenu codicon codicon-diff-added"></button>
</b-col>
</template>
</b-row>
</li>
</template>
</ul> </ul>
</div> </div>
@ -53,7 +86,6 @@
</div> </div>
<stylestack-editor ref="stackEditor" v-if="themes.length != 0" :themes="themes"/> <stylestack-editor ref="stackEditor" v-if="themes.length != 0" :themes="themes"/>
</div> </div>
</transition>
</div> </div>
</div> </div>
</script> </script>
@ -96,22 +128,15 @@
mounted() { mounted() {
console.log(this.themes) console.log(this.themes)
this.themeList = [...this.themes] this.themeList = [...this.themes]
// this.themeList.unshift({
// name: "Acrylic Grain", this.themeList.forEach(theme => {
// file: "grain.less" if (theme.pack) {
// }) theme.pack.forEach(packEntry => {
// this.themeList.unshift({ packEntry.file = theme.file.replace('index.less', '') + packEntry.file
// name: "Sweetener", this.themeList.push(packEntry)
// file: "sweetener.less" })
// }) }
// this.themeList.unshift({ })
// name: "Reduce Visuals",
// file: "reduce_visuals.less"
// })
// this.themeList.unshift({
// name: "Inline Drawer",
// file: "inline_drawer.less"
// })
}, },
methods: { methods: {
gitHubExplore() { gitHubExplore() {
@ -180,13 +205,11 @@
} }
}, },
mounted() { mounted() {
this.themes = ipcRenderer.sendSync("get-themes")
// this.getRepos();
this.getThemesList(); this.getThemesList();
// app.checkForThemeUpdates()
}, },
methods: { methods: {
getThemesList() { getThemesList() {
let self = this
let themes = ipcRenderer.sendSync("get-themes") let themes = ipcRenderer.sendSync("get-themes")
themes.unshift({ themes.unshift({
name: "Acrylic Grain", name: "Acrylic Grain",