mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-10 02:11:57 +00:00
Matthias
GitHub
commit
a4d7107172
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -2509,6 +2509,11 @@
|
|||
"vue-functional-data-merge": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"bootswatch": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-4.5.0.tgz",
|
||||
"integrity": "sha512-kAfYTTWIsgUOA5nybJNM4yvOpwxm37eIb1DFZlD5jLgPttK+bLJTt9UpKWAoMQZRBQbWfC1O1w1P5PGU7lz83Q=="
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"axios": "^0.19.2",
|
||||
"bootstrap": "^4.5.0",
|
||||
"bootstrap-vue": "^2.14.0",
|
||||
"bootswatch": "^4.5.0",
|
||||
"core-js": "^3.6.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.2.0",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
184
src/components/BootswatchThemeSelect.vue
Normal file
184
src/components/BootswatchThemeSelect.vue
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<div>
|
||||
<b-nav-item-dropdown
|
||||
id="my-nav-dropdown"
|
||||
text="Theme"
|
||||
toggle-class="nav-link-custom"
|
||||
right
|
||||
lazy
|
||||
>
|
||||
<b-dropdown-item v-if="themes.length === 0">
|
||||
<b-spinner small></b-spinner> Loading Themes...
|
||||
</b-dropdown-item>
|
||||
|
||||
<!-- TODO Add v-b-tooltip.hover.right=="{ variant: 'className' }" for tooltip class rendered from bootswatch-->
|
||||
<b-dropdown-item-button
|
||||
v-for="(theme, key) in themes"
|
||||
:key="key"
|
||||
@click="handleClick"
|
||||
:active="activeTheme === theme.name"
|
||||
v-b-tooltip.hover.right
|
||||
:title="theme.description"
|
||||
>{{ theme.name }}</b-dropdown-item-button
|
||||
>
|
||||
</b-nav-item-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeTheme: '',
|
||||
themes: [
|
||||
{
|
||||
name: 'Cerulean',
|
||||
description: 'A calm blue sky',
|
||||
},
|
||||
{
|
||||
name: 'Cosmo',
|
||||
description: 'An ode to Metro',
|
||||
},
|
||||
{
|
||||
name: 'Cyborg',
|
||||
description: 'Jet black and electric blue',
|
||||
},
|
||||
{
|
||||
name: 'Darkly',
|
||||
description: 'Flatly in night mode',
|
||||
},
|
||||
{
|
||||
name: 'Flatly',
|
||||
description: 'Flat and modern',
|
||||
},
|
||||
{
|
||||
name: 'Journal',
|
||||
description: 'Crisp like a new sheet of paper',
|
||||
},
|
||||
{
|
||||
name: 'Litera',
|
||||
description: 'The medium is the message',
|
||||
},
|
||||
{
|
||||
name: 'Lumen',
|
||||
description: 'Light and shadow',
|
||||
},
|
||||
{
|
||||
name: 'Lux',
|
||||
description: 'A touch of class',
|
||||
},
|
||||
{
|
||||
name: 'Materia',
|
||||
description: 'Material is the metaphor',
|
||||
},
|
||||
{
|
||||
name: 'Minty',
|
||||
description: 'A fresh feel',
|
||||
},
|
||||
{
|
||||
name: 'Pulse',
|
||||
description: 'A trace of purple',
|
||||
},
|
||||
{
|
||||
name: 'Sandstone',
|
||||
description: 'A touch of warmth',
|
||||
},
|
||||
{
|
||||
name: 'Simplex',
|
||||
description: 'Mini and minimalist',
|
||||
},
|
||||
{
|
||||
name: 'Sketchy',
|
||||
description: 'A hand-drawn look for mockups and mirth',
|
||||
},
|
||||
{
|
||||
name: 'Slate',
|
||||
description: 'Shades of gunmetal gray',
|
||||
},
|
||||
{
|
||||
name: 'Solar',
|
||||
description: 'A spin on Solarized',
|
||||
},
|
||||
{
|
||||
name: 'Spacelab',
|
||||
description: 'Silvery and sleek',
|
||||
},
|
||||
{
|
||||
name: 'Superhero',
|
||||
description: 'The brave and the blue',
|
||||
},
|
||||
{
|
||||
name: 'United',
|
||||
description: 'Ubuntu orange and unique font',
|
||||
},
|
||||
{
|
||||
name: 'Yeti',
|
||||
description: 'A friendly foundation',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
name: 'BootswatchThemeSelect',
|
||||
mounted() {
|
||||
// If a theme has been stored in localstorage, the theme will be set.
|
||||
if (window.localStorage.theme) this.setTheme(window.localStorage.theme);
|
||||
},
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
this.setTheme(e.target.innerText.trim());
|
||||
},
|
||||
setTheme(themeName) {
|
||||
// If theme is already active, do nothing.
|
||||
if (this.activeTheme === themeName) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Dynamic import for a different theme, to avoid loading ALL themes.
|
||||
import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then(() => {
|
||||
const styles = document.getElementsByTagName('style');
|
||||
const bw = Array.from(styles).filter((w) => w.textContent.includes('bootswatch'));
|
||||
bw.forEach((style, index) => {
|
||||
if (!style.id) {
|
||||
// If its a style that was just imported and hasn't been assigned an id.
|
||||
bw[index].id = themeName;
|
||||
} else if (style.id === themeName) {
|
||||
// If it's a style that has been imported already.
|
||||
bw[index].disabled = false;
|
||||
} else {
|
||||
// All other style themes should be disabled.
|
||||
bw[index].disabled = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
// Save the theme as localstorage
|
||||
console.log('Setting theme as', themeName);
|
||||
window.localStorage.theme = themeName;
|
||||
this.activeTheme = themeName;
|
||||
},
|
||||
fetchApi() {
|
||||
// Fetches boostswatch api and dynamically sets themes.
|
||||
// Not used, but useful for updating the static array of themes if bootswatch dependency is outdated.
|
||||
axios
|
||||
.get('https://bootswatch.com/api/4.json')
|
||||
.then((res) => {
|
||||
const { themes } = res.data;
|
||||
this.themes = themes;
|
||||
|
||||
// Use this code in the browser console and copy and paste the filteredThemes into this.themes
|
||||
// console.log(themes);
|
||||
// const filteredThemes = [];
|
||||
// themes.forEach((item) =>
|
||||
// filteredThemes.push({ name: item.name, description: item.description }),
|
||||
// );
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -78,13 +78,11 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
.white {
|
||||
/* border: 1px solid black; */
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.black {
|
||||
/* border: 1px solid white; */
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
<b-navbar-nav>
|
||||
<b-nav-item to="/trade">Trade</b-nav-item>
|
||||
<b-nav-item to="/about">About</b-nav-item>
|
||||
<BootswatchThemeSelect />
|
||||
</b-navbar-nav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<b-navbar-nav class="ml-auto">
|
||||
<li class="nav-item" v-if="loggedIn">
|
||||
|
|
@ -38,10 +38,11 @@
|
|||
<script>
|
||||
import { mapActions, mapState } from 'vuex';
|
||||
import Login from '@/views/Login.vue';
|
||||
import BootswatchThemeSelect from '../BootswatchThemeSelect.vue';
|
||||
|
||||
export default {
|
||||
name: 'NavBar',
|
||||
components: { Login },
|
||||
components: { Login, BootswatchThemeSelect },
|
||||
computed: {
|
||||
...mapState('user', ['loggedIn']),
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user