btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Merge pull request #117 from NBTX/master

Browse Source 
Add version number to footer and improves .editorconfig
This commit is contained in:
John Harker
2019-08-30 23:38:38 +01:00
committed by GitHub
parent fc5d98c05c 9eb9365c89
commit c1abf5f07c
7 changed files with 389 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.editorconfig
View File

@@ -3,8 +3,8 @@
root = true root = true
[*] [*]
indent_size = 1 indent_size = 2
indent_style = space indent_style = tab
charset = utf-8 charset = utf-8
end_of_line = lf end_of_line = lf
insert_final_newline = true insert_final_newline = true

3
.gitignore vendored
View File

@@ -88,3 +88,6 @@ sw.*
# Vim swap files # Vim swap files
*.swp *.swp
# Postwoman build data
.postwoman

6
assets/css/styles.scss
View File

@@ -51,11 +51,13 @@ h3.title {
header, header,
footer { footer {
& > div {
display: flex; display: flex;
padding: 16px; padding: 16px;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
}
} }
nav { nav {
@@ -330,6 +332,10 @@ fieldset#history {
text-align: left; text-align: left;
} }
.align-center {
text-align: center;
}
.align-right { .align-right {
text-align: right; text-align: right;
} }

40
build.js Normal file
View File

@@ -0,0 +1,40 @@
const axios = require('axios');
const fs = require('fs');
const { spawnSync } = require('child_process');
const runCommand = (command, args) => spawnSync(command, args).stdout.toString().replace(/\n/g, "");
const FAIL_ON_ERROR = false;
const PW_BUILD_DATA_DIR = "./.postwoman";
const IS_DEV_MODE = process.argv.includes("--dev");
try {
(async () => {
// Create the build data directory if it does not exist.
if (!fs.existsSync(PW_BUILD_DATA_DIR)) {
fs.mkdirSync(PW_BUILD_DATA_DIR);
}
let version = {};
// Get the current version name as the tag from Git.
version.name = runCommand('git', ['tag']);
// FALLBACK: If version.name was unset, let's grab it from GitHub.
if(!version.name){
version.name = (await axios.get("https://api.github.com/repos/liyasthomas/postwoman/releases")).data[0]['tag_name'];
}
// Get the current version hash as the short hash from Git.
version.hash = runCommand('git', ['rev-parse', '--short', 'HEAD']);
// Get the 'variant' name as the branch, if it's not master.
version.variant = (process.env.TRAVIS_BRANCH || runCommand('git', ['branch']).split("* ")[1].split(" ")[0] + (IS_DEV_MODE ? " - (DEV MODE)" : ""));
if(version.variant === "" || version.variant === "master") delete version.variant;
// Write version data into a file
fs.writeFileSync(PW_BUILD_DATA_DIR + "/version.json", JSON.stringify(version));
})();
}catch(ex){
console.error(ex);
process.exit(FAIL_ON_ERROR ? 1 : 0);
}

289
layouts/default.vue
View File

@@ -1,151 +1,178 @@
<template> <template>
<div> <div>
<header> <header>
<div class="slide-in"> <div>
<nuxt-link to="/"> <div class="slide-in">
<h1 class="logo"> <nuxt-link to="/">
<logo alt="" style="height: 24px; margin-right: 16px" />Postwoman</h1> <h1 class="logo">
</nuxt-link> <logo alt="" style="height: 24px; margin-right: 16px" />Postwoman</h1>
<h3>API request builder</h3> </nuxt-link>
</div> <h3>API request builder</h3>
<nav> </div>
<nuxt-link to="/">HTTP</nuxt-link> <nav>
<nuxt-link to="/websocket">WebSocket</nuxt-link> <nuxt-link to="/">HTTP</nuxt-link>
<nuxt-link to="/settings"> <nuxt-link to="/websocket">WebSocket</nuxt-link>
<!-- Settings cog --> <nuxt-link to="/settings">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <!-- Settings cog -->
<path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z" /> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
</svg> <path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z" />
</nuxt-link> </svg>
</nav> </nuxt-link>
</header> </nav>
<nuxt id="main" /> </div>
<footer> </header>
<div> <nuxt id="main" />
<a href="https://github.com/liyasthomas/postwoman" target="_blank"><img id="imgGitHub" src="~static/icons/github.svg" alt="" :style="logoStyle()">GitHub</a> <footer>
</div> <!-- Top section of footer: GitHub/install links -->
<button id="installPWA" @click.prevent="showInstallPrompt()"> <div>
Install PWA <div>
</button> <a href="https://github.com/liyasthomas/postwoman" target="_blank"><img id="imgGitHub" src="~static/icons/github.svg" alt="" :style="logoStyle()">GitHub</a>
</footer> </div>
</div> <button id="installPWA" @click.prevent="showInstallPrompt()">
Install PWA
</button>
</div>
<!-- Bottom section of footer: version/author information -->
<p class="align-center">
<span v-if="version.name">{{ version.name }}
<span v-if="version.hash">- {{ version.hash }}</span>
<span v-if="version.variant"> ({{ version.variant }})</span>
&#x2022; </span>by <a href="https://liyasthomas.web.app" target="_blank">Liyas Thomas 🦄</a>
</p>
</footer>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
.slide-in { .slide-in {
position: relative; position: relative;
animation: slideIn 0.2s forwards ease-in-out; animation: slideIn 0.2s forwards ease-in-out;
} }
@keyframes slideIn { @keyframes slideIn {
0% { 0% {
opacity: 0; opacity: 0;
left: -16px; left: -16px;
} }
100% { 100% {
opacity: 1; opacity: 1;
left: 0px; left: 0px;
} }
} }
header, header,
#main, #main,
footer { footer {
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
} }
nav { footer {
svg { margin: 40px auto;
vertical-align: sub; }
}
a { nav {
display: inline-block; svg {
position: relative; vertical-align: sub;
padding: 8px 16px; }
fill: var(--fg-color);
color: var(--fg-color);
&.nuxt-link-exact-active { a {
color: var(--act-color); display: inline-block;
fill: var(--act-color); position: relative;
padding: 8px 16px;
fill: var(--fg-color);
color: var(--fg-color);
&:before { &.nuxt-link-exact-active {
width: 100%; color: var(--act-color);
height: 100% fill: var(--act-color);
}
}
&:before { &:before {
content: ""; width: 100%;
position: absolute; height: 100%
bottom: 0; }
left: 0; }
right: 0;
z-index: -1;
background-color: var(--ac-color);
border-radius: 4px;
margin: auto;
}
&:not(.nuxt-link-exact-active):hover:before { &:before {
animation: linkHover 0.3s forwards ease-in-out; content: "";
} position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background-color: var(--ac-color);
border-radius: 4px;
margin: auto;
}
@keyframes linkHover { &:not(.nuxt-link-exact-active):hover:before {
0% { animation: linkHover 0.3s forwards ease-in-out;
width: 0; }
height: 2px;
}
100% { @keyframes linkHover {
width: 100%; 0% {
height: 2px; width: 0;
} height: 2px;
} }
}
} 100% {
width: 100%;
height: 2px;
}
}
}
}
</style> </style>
<script> <script>
import intializePwa from '../assets/js/pwa'; import intializePwa from '../assets/js/pwa';
import logo from "../components/logo"; import logo from "../components/logo";
export default { import * as version from '../.postwoman/version.json';
components: {
logo export default {
}, components: {
data() { logo
return { },
// Once the PWA code is initialized, this holds a method
// that can be called to show the user the installation data() {
// prompt. return {
showInstallPrompt: null, // Once the PWA code is initialized, this holds a method
logoStyle() { // that can be called to show the user the installation
return "margin-right: 16px;" + (((this.$store.state.postwoman.settings.THEME_CLASS || '').includes("light")) ? " filter: invert(100%); -webkit-filter: invert(100%);" : '') // prompt.
} showInstallPrompt: null,
} logoStyle() {
}, return "margin-right: 16px;" + (((this.$store.state.postwoman.settings.THEME_CLASS || '').includes("light")) ? " filter: invert(100%); -webkit-filter: invert(100%);" : '')
beforeMount() { },
// Load theme settings
(() => { version: {}
// Apply theme from settings. }
document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || ''; },
// Load theme color data from settings, or use default color.
let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D'; beforeMount() {
let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT; // Set version data
if (vibrant == null) vibrant = true; this.version = version.default;
document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff'); // Load theme settings
})(); (() => {
}, // Apply theme from settings.
mounted() { document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
// Initializes the PWA code - checks if the app is installed, // Load theme color data from settings, or use default color.
// etc. let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D';
(async () => { let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
this.showInstallPrompt = await intializePwa(); if (vibrant == null) vibrant = true;
})(); document.documentElement.style.setProperty('--ac-color', color);
document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
})();
},
mounted() {
// Initializes the PWA code - checks if the app is installed,
// etc.
(async () => {
this.showInstallPrompt = await intializePwa();
})();
}
} }
}
</script> </script>

5
package.json
View File

@@ -5,9 +5,14 @@
"author": "liyasthomas", "author": "liyasthomas",
"private": true, "private": true,
"scripts": { "scripts": {
"predev": "node build.js --dev",
"dev": "nuxt", "dev": "nuxt",
"prebuild": "node build.js",
"build": "nuxt build", "build": "nuxt build",
"start": "nuxt start", "start": "nuxt start",
"pregenerate": "node build.js",
"generate": "nuxt generate" "generate": "nuxt generate"
}, },
"dependencies": { "dependencies": {

350
pages/settings.vue
View File

@@ -1,197 +1,197 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Theme"> <pw-section class="blue" label="Theme">
<ul> <ul>
<li> <li>
<h3 class="title">Background</h3> <h3 class="title">Background</h3>
<div class="backgrounds"> <div class="backgrounds">
<span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes"> <span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
<swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch> <swatch :active="settings.THEME_CLASS === theme.class" :class="{ vibrant: theme.vibrant }" :color="theme.color" :name="theme.name"></swatch>
</span> </span>
</div> </div>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li>
<h3 class="title">Color</h3> <h3 class="title">Color</h3>
<div class="colors"> <div class="colors">
<span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors"> <span :key="entry.color" @click.prevent="setActiveColor(entry.color, entry.vibrant)" v-for="entry in colors">
<swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" /> <swatch :active="settings.THEME_COLOR === entry.color.toUpperCase()" :class="{ vibrant: entry.vibrant }" :color="entry.color" :name="entry.name" />
</span> </span>
</div> </div>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li>
<h3 class="title">Frames</h3> <h3 class="title">Frames</h3>
<pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')"> <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }} Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
</pw-toggle> </pw-toggle>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<!-- <!--
PROXY SETTINGS PROXY SETTINGS
-------------- --------------
This feature is currently not finished. This feature is currently not finished.
<pw-section class="blue" label="Proxy"> <pw-section class="blue" label="Proxy">
<ul> <ul>
<li> <li>
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')"> <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }} Proxy {{ settings.PROXY_ENABLED ? "enabled" : "disabled" }}
</pw-toggle> </pw-toggle>
</li> </li>
</ul> </ul>
<ul> <ul>
<li> <li>
<label for="url">URL</label> <label for="url">URL</label>
<input id="url" type="url" v-model="settings.PROXY_URL" :disabled="!settings.PROXY_ENABLED"> <input id="url" type="url" v-model="settings.PROXY_URL" :disabled="!settings.PROXY_ENABLED">
</li> </li>
<li> <li>
<label for="key">Key</label> <label for="key">Key</label>
<input id="key" type="password" v-model="settings.PROXY_KEY" :disabled="!settings.PROXY_ENABLED" @change="applySetting('PROXY_KEY', $event)"> <input id="key" type="password" v-model="settings.PROXY_KEY" :disabled="!settings.PROXY_ENABLED" @change="applySetting('PROXY_KEY', $event)">
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
--> -->
</div> </div>
</template> </template>
<script> <script>
import section from "../components/section"; import section from "../components/section";
import swatch from "../components/settings/swatch"; import swatch from "../components/settings/swatch";
import toggle from "../components/toggle"; import toggle from "../components/toggle";
export default { export default {
components: { components: {
'pw-section': section, 'pw-section': section,
'pw-toggle': toggle, 'pw-toggle': toggle,
'swatch': swatch 'swatch': swatch
}, },
data() { data() {
return { return {
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss // 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 // You should copy the existing light theme as a template and then just
// set the relevant values. // set the relevant values.
themes: [{ themes: [{
"color": "#121212", "color": "#121212",
"name": "Dark (Default)", "name": "Dark (Default)",
"class": "" "class": ""
}, },
{ {
"color": "#DFDFDF", "color": "#DFDFDF",
"name": "Light", "name": "Light",
"vibrant": true, "vibrant": true,
"class": "light" "class": "light"
} }
], ],
// You can define a new color here! It will simply store the color value. // You can define a new color here! It will simply store the color value.
colors: [ colors: [
// If the color is vibrant, black is used as the active foreground color. // If the color is vibrant, black is used as the active foreground color.
{ {
"color": "#51ff0d", "color": "#51ff0d",
"name": "Lime (Default)", "name": "Lime (Default)",
"vibrant": true "vibrant": true
}, },
{ {
"color": "#FFC107", "color": "#FFC107",
"name": "Yellow", "name": "Yellow",
"vibrant": true "vibrant": true
}, },
{ {
"color": "#E91E63", "color": "#E91E63",
"name": "Pink", "name": "Pink",
"vibrant": false "vibrant": false
}, },
{ {
"color": "#e74c3c", "color": "#e74c3c",
"name": "Red", "name": "Red",
"vibrant": false "vibrant": false
}, },
{ {
"color": "#9b59b6", "color": "#9b59b6",
"name": "Purple", "name": "Purple",
"vibrant": false "vibrant": false
}, },
{ {
"color": "#2980b9", "color": "#2980b9",
"name": "Blue", "name": "Blue",
"vibrant": false "vibrant": false
}, },
], ],
settings: { settings: {
THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '', THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
THEME_COLOR: '', THEME_COLOR: '',
THEME_COLOR_VIBRANT: true, THEME_COLOR_VIBRANT: true,
DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false, DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false,
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false, PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '', PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || '',
PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || '' PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ''
} }
} }
}, },
watch: { watch: {
proxySettings: { proxySettings: {
deep: true, deep: true,
handler (value) { handler (value) {
this.applySetting('PROXY_URL', value.url); this.applySetting('PROXY_URL', value.url);
this.applySetting('PROXY_KEY', value.key); this.applySetting('PROXY_KEY', value.key);
}
}
},
methods: {
applyTheme(name) {
this.applySetting('THEME_CLASS', name);
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 ? '#121212' : '#fff');
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]]);
}
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
},
computed: {
proxySettings () {
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
}
} }
} }
},
methods: {
applyTheme(name) {
this.applySetting('THEME_CLASS', name);
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 ? '#121212' : '#fff');
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]]);
}
},
beforeMount() {
this.settings.THEME_COLOR = this.getActiveColor();
},
computed: {
proxySettings () {
return {
url: this.settings.PROXY_URL,
key: this.settings.PROXY_KEY
}
}
} }
}
</script> </script>