🚨 Lint
This commit is contained in:
Liyas Thomas
@@ -5,7 +5,11 @@
|
||||
<li>
|
||||
<h3 class="title">Background</h3>
|
||||
<div class="backgrounds">
|
||||
<span :key="theme.class" @click="applyTheme(theme.class, theme.color)" v-for="theme in themes">
|
||||
<span
|
||||
:key="theme.class"
|
||||
@click="applyTheme(theme.class, theme.color)"
|
||||
v-for="theme in themes"
|
||||
>
|
||||
<swatch
|
||||
:active="settings.THEME_CLASS === theme.class"
|
||||
:class="{ vibrant: theme.vibrant }"
|
||||
@@ -48,7 +52,7 @@
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<br>
|
||||
<br />
|
||||
|
||||
<pw-section class="blue" label="Proxy" ref="proxy">
|
||||
<ul>
|
||||
@@ -62,7 +66,16 @@
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="info">
|
||||
<li><p>Postwoman's Proxy is hosted by ApolloTV.<br>Read the ApolloTV privacy policy <a href="https://apollotv.xyz/legal" target="_blank">here</a>.</p></li>
|
||||
<li>
|
||||
<p>
|
||||
Postwoman's Proxy is hosted by ApolloTV.
|
||||
<br />Read the ApolloTV privacy policy
|
||||
<a
|
||||
href="https://apollotv.xyz/legal"
|
||||
target="_blank"
|
||||
>here</a>.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<!--
|
||||
PROXY SETTINGS URL AND KEY
|
||||
@@ -84,181 +97,183 @@
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.info {
|
||||
margin-left: 4px;
|
||||
color: var(--fg-light-color);
|
||||
}
|
||||
.info {
|
||||
margin-left: 4px;
|
||||
color: var(--fg-light-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import section from "../components/section";
|
||||
import swatch from "../components/settings/swatch";
|
||||
import toggle from "../components/toggle";
|
||||
import section from "../components/section";
|
||||
import swatch from "../components/settings/swatch";
|
||||
import toggle from "../components/toggle";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
"pw-section": section,
|
||||
"pw-toggle": toggle,
|
||||
swatch: swatch
|
||||
},
|
||||
export default {
|
||||
components: {
|
||||
"pw-section": section,
|
||||
"pw-toggle": toggle,
|
||||
swatch: swatch
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
|
||||
// You should copy the existing light theme as a template and then just
|
||||
// set the relevant values.
|
||||
themes: [
|
||||
{
|
||||
color: "rgb(37, 38, 40)",
|
||||
name: "Kinda Dark",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
color: "#ffffff",
|
||||
name: "Clearly White",
|
||||
vibrant: true,
|
||||
class: "light"
|
||||
},
|
||||
{
|
||||
color: "#000000",
|
||||
name: "Just Black",
|
||||
class: "black"
|
||||
},
|
||||
{
|
||||
color: "var(--bg-color)",
|
||||
name: "Auto (system)",
|
||||
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
|
||||
class: "auto"
|
||||
}
|
||||
],
|
||||
// You can define a new color here! It will simply store the color value.
|
||||
colors: [
|
||||
// If the color is vibrant, black is used as the active foreground color.
|
||||
{
|
||||
color: "#50fa7b",
|
||||
name: "Green",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#f1fa8c",
|
||||
name: "Yellow",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#ff79c6",
|
||||
name: "Pink",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#ff5555",
|
||||
name: "Red",
|
||||
vibrant: false
|
||||
},
|
||||
{
|
||||
color: "#bd93f9",
|
||||
name: "Purple",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#ffb86c",
|
||||
name: "Orange",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#8be9fd",
|
||||
name: "Cyan",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#57b5f9",
|
||||
name: "Blue",
|
||||
vibrant: false
|
||||
}
|
||||
],
|
||||
|
||||
settings: {
|
||||
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || "",
|
||||
THEME_COLOR: "",
|
||||
THEME_TAB_COLOR: "",
|
||||
THEME_COLOR_VIBRANT: true,
|
||||
|
||||
FRAME_COLORS_ENABLED:
|
||||
this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
|
||||
PROXY_ENABLED:
|
||||
this.$store.state.postwoman.settings.PROXY_ENABLED || false,
|
||||
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || "",
|
||||
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
|
||||
data() {
|
||||
return {
|
||||
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
|
||||
// You should copy the existing light theme as a template and then just
|
||||
// set the relevant values.
|
||||
themes: [
|
||||
{
|
||||
color: "#252628",
|
||||
name: "Kinda Dark",
|
||||
class: ""
|
||||
},
|
||||
{
|
||||
color: "#ffffff",
|
||||
name: "Clearly White",
|
||||
vibrant: true,
|
||||
class: "light"
|
||||
},
|
||||
{
|
||||
color: "#000000",
|
||||
name: "Just Black",
|
||||
class: "black"
|
||||
},
|
||||
{
|
||||
color: "var(--bg-color)",
|
||||
name: "Auto (system)",
|
||||
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
|
||||
class: "auto"
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
proxySettings: {
|
||||
deep: true,
|
||||
handler(value) {
|
||||
this.applySetting("PROXY_URL", value.url);
|
||||
this.applySetting("PROXY_KEY", value.key);
|
||||
],
|
||||
// You can define a new color here! It will simply store the color value.
|
||||
colors: [
|
||||
// If the color is vibrant, black is used as the active foreground color.
|
||||
{
|
||||
color: "#50fa7b",
|
||||
name: "Green",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#f1fa8c",
|
||||
name: "Yellow",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#ff79c6",
|
||||
name: "Pink",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#ff5555",
|
||||
name: "Red",
|
||||
vibrant: false
|
||||
},
|
||||
{
|
||||
color: "#bd93f9",
|
||||
name: "Purple",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#ffb86c",
|
||||
name: "Orange",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#8be9fd",
|
||||
name: "Cyan",
|
||||
vibrant: true
|
||||
},
|
||||
{
|
||||
color: "#57b5f9",
|
||||
name: "Blue",
|
||||
vibrant: false
|
||||
}
|
||||
],
|
||||
|
||||
settings: {
|
||||
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || "",
|
||||
THEME_COLOR: "",
|
||||
THEME_TAB_COLOR: "",
|
||||
THEME_COLOR_VIBRANT: true,
|
||||
|
||||
FRAME_COLORS_ENABLED:
|
||||
this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
|
||||
PROXY_ENABLED:
|
||||
this.$store.state.postwoman.settings.PROXY_ENABLED || false,
|
||||
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || "",
|
||||
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
applyTheme(name, color) {
|
||||
this.applySetting("THEME_CLASS", name);
|
||||
document.querySelector('meta[name=theme-color]').setAttribute('content', color)
|
||||
this.applySetting("THEME_TAB_COLOR", color);
|
||||
document.documentElement.className = name;
|
||||
let imgGitHub = document.getElementById("imgGitHub");
|
||||
imgGitHub.style["filter"] = "";
|
||||
imgGitHub.style["webkit-filter"] = "invert(100%)";
|
||||
if (name.includes("light")) {
|
||||
imgGitHub.style["filter"] = "invert(100%)";
|
||||
imgGitHub.style["webkit-filter"] = "invert(100%)";
|
||||
}
|
||||
},
|
||||
setActiveColor(color, vibrant) {
|
||||
// By default, the color is vibrant.
|
||||
if (vibrant == null) vibrant = true;
|
||||
document.documentElement.style.setProperty("--ac-color", color);
|
||||
document.documentElement.style.setProperty(
|
||||
"--act-color",
|
||||
vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
|
||||
);
|
||||
this.applySetting("THEME_COLOR", color.toUpperCase());
|
||||
this.applySetting("THEME_COLOR_VIBRANT", vibrant);
|
||||
},
|
||||
getActiveColor() {
|
||||
// This strips extra spaces and # signs from the strings.
|
||||
const strip = str => str.replace(/#/g, "").replace(/ /g, "");
|
||||
return `#${strip(
|
||||
window
|
||||
.getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--ac-color")
|
||||
).toUpperCase()}`;
|
||||
},
|
||||
applySetting(key, value) {
|
||||
this.settings[key] = value;
|
||||
this.$store.commit("postwoman/applySetting", [key, value]);
|
||||
},
|
||||
toggleSetting(key) {
|
||||
this.settings[key] = !this.settings[key];
|
||||
this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
|
||||
this.$router.replace('/settings', {
|
||||
force: true
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.settings.THEME_COLOR = this.getActiveColor();
|
||||
},
|
||||
|
||||
computed: {
|
||||
proxySettings() {
|
||||
return {
|
||||
url: this.settings.PROXY_URL,
|
||||
key: this.settings.PROXY_KEY
|
||||
};
|
||||
watch: {
|
||||
proxySettings: {
|
||||
deep: true,
|
||||
handler(value) {
|
||||
this.applySetting("PROXY_URL", value.url);
|
||||
this.applySetting("PROXY_KEY", value.key);
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
applyTheme(name, color) {
|
||||
this.applySetting("THEME_CLASS", name);
|
||||
document
|
||||
.querySelector("meta[name=theme-color]")
|
||||
.setAttribute("content", color);
|
||||
this.applySetting("THEME_TAB_COLOR", color);
|
||||
document.documentElement.className = name;
|
||||
let imgGitHub = document.getElementById("imgGitHub");
|
||||
imgGitHub.style["filter"] = "";
|
||||
imgGitHub.style["webkit-filter"] = "invert(100%)";
|
||||
if (name.includes("light")) {
|
||||
imgGitHub.style["filter"] = "invert(100%)";
|
||||
imgGitHub.style["webkit-filter"] = "invert(100%)";
|
||||
}
|
||||
},
|
||||
setActiveColor(color, vibrant) {
|
||||
// By default, the color is vibrant.
|
||||
if (vibrant == null) vibrant = true;
|
||||
document.documentElement.style.setProperty("--ac-color", color);
|
||||
document.documentElement.style.setProperty(
|
||||
"--act-color",
|
||||
vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
|
||||
);
|
||||
this.applySetting("THEME_COLOR", color.toUpperCase());
|
||||
this.applySetting("THEME_COLOR_VIBRANT", vibrant);
|
||||
},
|
||||
getActiveColor() {
|
||||
// This strips extra spaces and # signs from the strings.
|
||||
const strip = str => str.replace(/#/g, "").replace(/ /g, "");
|
||||
return `#${strip(
|
||||
window
|
||||
.getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--ac-color")
|
||||
).toUpperCase()}`;
|
||||
},
|
||||
applySetting(key, value) {
|
||||
this.settings[key] = value;
|
||||
this.$store.commit("postwoman/applySetting", [key, value]);
|
||||
},
|
||||
toggleSetting(key) {
|
||||
this.settings[key] = !this.settings[key];
|
||||
this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
|
||||
this.$router.replace("/settings", {
|
||||
force: true
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.settings.THEME_COLOR = this.getActiveColor();
|
||||
},
|
||||
|
||||
computed: {
|
||||
proxySettings() {
|
||||
return {
|
||||
url: this.settings.PROXY_URL,
|
||||
key: this.settings.PROXY_KEY
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user