lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-09-20 01:21:08 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

bootswatch theme picker

Browse Source
This commit is contained in:
Paul D. Mendes 2020-05-23 01:02:17 +04:00
parent afd32c4af1
commit 013fa93ac9
3 changed files with 101 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -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>

97
src/components/BootswatchThemeSelect.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<div>
<!-- <img :src="theme.thumbnail" style="height: 30px;" /> -->
<b-nav-item-dropdown
id="my-nav-dropdown"
text="Theme"
toggle-class="nav-link-custom"
right
lazy
>
<b-dropdown-item-button
v-for="(theme, key) in themes"
:key="key"
@click="handleClick"
:value="theme.cssCdn"
:active="activeTheme === theme.cssCdn"
:disabled="activeTheme === theme.cssCdn"
>{{ theme.name }}
</b-dropdown-item-button>
</b-nav-item-dropdown>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
activeTheme: '',
themes: [],
supportsLocalStorage: false,
};
},
name: 'BootswatchThemeSelect',
created() {
console.log('Calling bootswatch api');
this.fetchApi();
},
mounted() {
this.supportsLocalStorage = window.localStorage.length > 0;
},
updated() {
if (this.supportsLocalStorage) {
const { theme } = window.localStorage;
console.log('theme', window.localStorage.theme);
if (theme) {
console.log('Theme found in localstorage', theme);
this.setTheme(theme);
}
}
},
methods: {
handleClick(e) {
this.setTheme(e.target.value);
},
setTheme(theme) {
// Change the stylesheet to a different cdn
if (this.activeTheme === theme) {
return;
}
const stylesheet = document.querySelector(
'link[rel="stylesheet"][href$="/bootstrap.min.css"]',
);
if (stylesheet) {
stylesheet.href = theme;
} else {
const link = document.createElement('link');
link.href = theme;
link.rel = 'stylesheet';
link.title = 'bootswatch-theme';
document.body.append(link);
}
// Save the theme as localstorage
if (this.supportsLocalStorage) {
console.log('Setting new theme as ', theme);
window.localStorage.theme = theme;
}
this.activeTheme = theme;
},
fetchApi() {
axios
.get('https://bootswatch.com/api/4.json')
.then((res) => {
const { themes } = res.data;
this.themes = themes;
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
<style></style>

5
src/components/layout/NavBar.vue
View File

@ -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']),
},