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

Merge pull request #204 from freqtrade/custom_theme

Browse Source 
Custom theme
This commit is contained in:
Matthias 2020-12-30 06:31:21 +01:00 committed by GitHub
commit 26c9fcccd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 390 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<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>

BIN
src/assets/freqtrade-logo-mask.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

188
src/components/BootswatchThemeSelect.vue
View File

@ -1,19 +1,20 @@
<template>
<div>
<b-nav-item-dropdown
v-if="!simple"
id="my-nav-dropdown"
text="Theme"
toggle-class="nav-link-custom"
right
lazy
>
<b-dropdown-item v-if="themes.length === 0">
<b-dropdown-item v-if="themeList.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"
v-for="(theme, key) in themeList"
:key="key"
v-b-tooltip.hover.right
:active="activeTheme === theme.name"
@ -23,129 +24,32 @@
>{{ theme.name }}{{ theme.dark ? ' [dark]' : '' }}</b-dropdown-item-button
>
</b-nav-item-dropdown>
<b-link v-else variant="outline-primary" class="nav-link" @click="toggleNight">
<ThemeLightDark :size="16" />
</b-link>
</div>
</template>
<script>
<script lang="ts">
import Vue from 'vue';
import axios from 'axios';
import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue';
import { themeList } from '@/shared/themes';
import { mapActions } from 'vuex';
export default {
export default Vue.extend({
name: 'BootswatchThemeSelect',
components: { ThemeLightDark },
props: {
simple: {
type: Boolean,
default: true,
},
},
data() {
return {
activeTheme: '',
themes: [
{
name: 'Bootstrap',
description: 'Plain bootstrap default theme',
dark: false,
},
{
name: 'Cerulean',
description: 'A calm blue sky',
dark: false,
},
{
name: 'Cosmo',
description: 'An ode to Metro',
dark: false,
},
{
name: 'Cyborg',
description: 'Jet black and electric blue',
dark: true,
},
{
name: 'Darkly',
description: 'Flatly in night mode',
dark: true,
},
{
name: 'Flatly',
description: 'Flat and modern',
dark: false,
},
{
name: 'Journal',
description: 'Crisp like a new sheet of paper',
dark: false,
},
{
name: 'Litera',
description: 'The medium is the message',
dark: false,
},
{
name: 'Lumen',
description: 'Light and shadow',
dark: false,
},
{
name: 'Lux',
description: 'A touch of class',
dark: false,
},
{
name: 'Materia',
description: 'Material is the metaphor',
dark: false,
},
{
name: 'Minty',
description: 'A fresh feel',
dark: false,
},
{
name: 'Pulse',
description: 'A trace of purple',
dark: false,
},
{
name: 'Sandstone',
description: 'A touch of warmth',
dark: false,
},
{
name: 'Simplex',
description: 'Mini and minimalist',
dark: false,
},
{
name: 'Sketchy',
description: 'A hand-drawn look for mockups and mirth',
dark: false,
},
{
name: 'Slate',
description: 'Shades of gunmetal gray',
dark: true,
},
{
name: 'Solar',
description: 'A spin on Solarized',
dark: true,
},
{
name: 'Spacelab',
description: 'Silvery and sleek',
dark: false,
},
{
name: 'Superhero',
description: 'The brave and the blue',
dark: true,
},
{
name: 'United',
description: 'Ubuntu orange and unique font',
dark: false,
},
{
name: 'Yeti',
description: 'A friendly foundation',
dark: false,
},
],
themeList,
};
},
mounted() {
@ -153,43 +57,59 @@ export default {
if (window.localStorage.theme) this.setTheme(window.localStorage.theme);
},
methods: {
...mapActions(['setCurrentTheme']),
handleClick(e) {
this.setTheme(e.target.name.trim());
},
toggleNight() {
this.setTheme(this.activeTheme === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
},
setTheme(themeName) {
// If theme is already active, do nothing.
if (this.activeTheme === themeName) {
return;
}
if (themeName.toLowerCase() === 'bootstrap') {
if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
const styles = document.getElementsByTagName('style');
const bw = Array.from(styles).filter((w) => w.textContent.includes('bootswatch'));
const bw = Array.from(styles).filter((w) => w.textContent?.includes('bootswatch'));
document.documentElement.setAttribute(
'data-theme',
themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark',
);
// Reset all bootswatch styles
bw.forEach((style, index) => {
bw[index].disabled = true;
(bw[index] as any).disabled = true;
});
if (this.simple) {
// Only transition if simple mode is active
document.documentElement.classList.add('ft-theme-transition');
window.setTimeout(() => {
document.documentElement.classList.remove('ft-theme-transition');
}, 1000);
}
} else {
// Dynamic import for a different theme, to avoid loading ALL themes.
import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then((mod) => {
console.log('theme', mod);
document.documentElement.removeAttribute('data-theme');
const styles = document.getElementsByTagName('style');
const bw = Array.from(styles).filter((w) => w.textContent.includes('bootswatch'));
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;
(bw[index] as any).disabled = false;
} else {
// All other style themes should be disabled.
bw[index].disabled = true;
(bw[index] as any).disabled = true;
}
});
});
}
// Save the theme as localstorage
window.localStorage.theme = themeName;
this.setCurrentTheme(themeName);
this.activeTheme = themeName;
},
fetchApi() {
@ -197,23 +117,23 @@ export default {
// 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;
// .then((res) => {
// 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 }),
// );
})
// 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.error(error);
});
},
},
};
});
</script>
<style scoped></style>

6
src/components/charts/CandleChart.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="row flex-grow-1 chart-wrapper">
<v-chart v-if="hasData" theme="dark" autoresize :options="chartOptions" />
<v-chart v-if="hasData" :theme="theme" autoresize :options="chartOptions" />
</div>
</template>
@ -41,6 +41,8 @@ export default class CandleChart extends Vue {
@Prop({ required: true }) plotConfig!: PlotConfig;
@Prop({ default: 'dark' }) theme!: string;
buyData = [] as Array<number>[];
sellData = [] as Array<number>[];
@ -95,7 +97,7 @@ export default class CandleChart extends Vue {
text: `${this.strategy} - ${this.pair} - ${this.timeframe}`,
show: true,
},
backgroundColor: '#1b1b1b',
// backgroundColor: '#1b1b1b',
useUTC: this.useUTC,
animation: false,
legend: {

5
src/components/charts/CandleChartContainer.vue
View File

@ -45,6 +45,7 @@
:trades="trades"
:plot-config="plotConfig"
:use-u-t-c="useUTC"
:theme="getChartTheme"
>
</CandleChart>
<label v-else style="margin: auto auto; font-size: 1.5rem">No data available</label>
@ -54,7 +55,7 @@
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { Getter, namespace } from 'vuex-class';
import {
Trade,
PairHistory,
@ -96,6 +97,8 @@ export default class CandleChartContainer extends Vue {
plotConfigName = '';
@Getter getChartTheme!: string;
@ftbot.State availablePlotConfigNames!: Array<string>;
@ftbot.Action setPlotConfigName;

9
src/components/charts/CumProfitChart.vue
View File

@ -1,9 +1,10 @@
<template>
<v-chart v-if="trades.length > 0" :options="chartOptions" autoresize />
<v-chart v-if="trades.length > 0" :options="chartOptions" autoresize :theme="getChartTheme" />
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Getter } from 'vuex-class';
import ECharts from 'vue-echarts';
import { EChartOption } from 'echarts';
@ -35,6 +36,8 @@ export default class CumProfitChart extends Vue {
@Prop({ default: 'close_profit_abs' }) profitColumn!: string;
@Getter getChartTheme!: string;
get cumulativeData() {
const res: CumProfitData[] = [];
const closedTrades = this.trades; // .filter((t) => t.close_timestamp);
@ -122,10 +125,10 @@ export default class CumProfitChart extends Vue {
name: CHART_PROFIT,
animation: false,
lineStyle: {
color: 'black',
color: this.getChartTheme === 'dark' ? '#c2c2c2' : 'black',
},
itemStyle: {
color: 'black',
color: this.getChartTheme === 'dark' ? '#c2c2c2' : 'black',
},
// symbol: 'none',
},

6
src/components/charts/DailyChart.vue
View File

@ -1,10 +1,10 @@
<template>
<v-chart v-if="dailyStats.data" :options="dailyChartOptions" autoresize />
<v-chart v-if="dailyStats.data" :options="dailyChartOptions" :theme="getChartTheme" autoresize />
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Getter } from 'vuex-class';
import ECharts from 'vue-echarts';
import { EChartOption } from 'echarts';
@ -30,6 +30,8 @@ export default class DailyChart extends Vue {
@Prop({ default: true, type: Boolean }) showTitle!: boolean;
@Getter getChartTheme!: string;
get absoluteMin() {
return Number(
this.dailyStats.data.reduce(

10
src/components/charts/HourlyChart.vue
View File

@ -1,9 +1,15 @@
<template>
<v-chart v-if="trades.length > 0" :options="hourlyChartOptions" autoresize />
<v-chart
v-if="trades.length > 0"
:options="hourlyChartOptions"
autoresize
:theme="getChartTheme"
/>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Getter } from 'vuex-class';
import ECharts from 'vue-echarts';
@ -33,6 +39,8 @@ export default class HourlyChart extends Vue {
@Prop({ default: true, type: Boolean }) showTitle!: boolean;
@Getter getChartTheme!: string;
get hourlyData() {
const res = new Array(24);
for (let i = 0; i < 24; i += 1) {

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

@ -1,6 +1,6 @@
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar toggleable="lg" type="dark" variant="primary">
<b-navbar-brand exact to="/">
<img class="logo" src="@/assets/freqtrade-logo.png" alt="Home Logo" />
<span class="navbar-brand-title">Freqtrade UI</span>
@ -123,6 +123,7 @@ export default class NavBar extends Vue {
.nav-link:active {
color: white;
}
.verticalCenter {
align-items: center;
display: inline-flex;

181
src/shared/themes.ts Normal file
View File

@ -0,0 +1,181 @@
export interface ThemeType {
name: string;
description: string;
dark: boolean;
bootswatch: boolean;
}
export const themeList: ThemeType[] = [
{
name: 'Bootstrap',
description: 'Plain bootstrap default theme',
dark: false,
bootswatch: false,
},
{
name: 'Bootstrap_dark',
description: 'Plain dark bootstrap default theme',
dark: true,
bootswatch: false,
},
{
name: 'Cerulean',
description: 'A calm blue sky',
dark: false,
bootswatch: true,
},
{
name: 'Cosmo',
description: 'An ode to Metro',
dark: false,
bootswatch: true,
},
{
name: 'Cyborg',
description: 'Jet black and electric blue',
dark: true,
bootswatch: true,
},
{
name: 'Darkly',
description: 'Flatly in night mode',
dark: true,
bootswatch: true,
},
{
name: 'Flatly',
description: 'Flat and modern',
dark: false,
bootswatch: true,
},
{
name: 'Journal',
description: 'Crisp like a new sheet of paper',
dark: false,
bootswatch: true,
},
{
name: 'Litera',
description: 'The medium is the message',
dark: false,
bootswatch: true,
},
{
name: 'Lumen',
description: 'Light and shadow',
dark: false,
bootswatch: true,
},
{
name: 'Lux',
description: 'A touch of class',
dark: false,
bootswatch: true,
},
{
name: 'Materia',
description: 'Material is the metaphor',
dark: false,
bootswatch: true,
},
{
name: 'Minty',
description: 'A fresh feel',
dark: false,
bootswatch: true,
},
{
name: 'Pulse',
description: 'A trace of purple',
dark: false,
bootswatch: true,
},
{
name: 'Sandstone',
description: 'A touch of warmth',
dark: false,
bootswatch: true,
},
{
name: 'Simplex',
description: 'Mini and minimalist',
dark: false,
bootswatch: true,
},
{
name: 'Sketchy',
description: 'A hand-drawn look for mockups and mirth',
dark: false,
bootswatch: true,
},
{
name: 'Slate',
description: 'Shades of gunmetal gray',
dark: true,
bootswatch: true,
},
{
name: 'Solar',
description: 'A spin on Solarized',
dark: true,
bootswatch: true,
},
{
name: 'Spacelab',
description: 'Silvery and sleek',
dark: false,
bootswatch: true,
},
{
name: 'Superhero',
description: 'The brave and the blue',
dark: true,
bootswatch: true,
},
{
name: 'United',
description: 'Ubuntu orange and unique font',
dark: false,
bootswatch: true,
},
{
name: 'Yeti',
description: 'A friendly foundation',
dark: false,
bootswatch: true,
},
];
export function storeCurrentTheme(themeName: string) {
window.localStorage.theme = themeName;
}
export function getTheme(theme: string): ThemeType | undefined {
if (theme !== undefined) {
return themeList.find((item) => item.name.toLowerCase() === theme.toLowerCase());
}
return undefined;
}
export function getCurrentTheme(): string {
const { theme } = window.localStorage;
return theme;
}

22
src/store/index.ts
View File

@ -2,6 +2,7 @@ import Vue from 'vue';
import Vuex from 'vuex';
import userService from '@/shared/userService';
import { getCurrentTheme, getTheme, storeCurrentTheme } from '@/shared/themes';
import ftbotModule, { BotStoreGetters } from './modules/ftbot';
import alertsModule from './modules/alerts';
import layoutModule from './modules/layout';
@ -9,6 +10,7 @@ import layoutModule from './modules/layout';
const AUTO_REFRESH = 'ft_auto_refresh';
Vue.use(Vuex);
const initCurrentTheme = getCurrentTheme();
export default new Vuex.Store({
state: {
@ -16,6 +18,19 @@ export default new Vuex.Store({
loggedIn: userService.loggedIn(),
autoRefresh: JSON.parse(localStorage.getItem(AUTO_REFRESH) || '{}'),
isBotOnline: false,
currentTheme: initCurrentTheme,
},
getters: {
isDarkTheme(state) {
const theme = getTheme(state.currentTheme);
if (theme) {
return theme.dark;
}
return true;
},
getChartTheme(state, getters) {
return getters.isDarkTheme ? 'dark' : 'light';
},
},
modules: {
ftbot: ftbotModule,
@ -37,8 +52,15 @@ export default new Vuex.Store({
setIsBotOnline(state, isBotOnline: boolean) {
state.isBotOnline = isBotOnline;
},
mutateCurrentTheme(state, newTheme: string) {
storeCurrentTheme(newTheme);
state.currentTheme = newTheme;
},
},
actions: {
setCurrentTheme({ commit }, newTheme: string) {
commit('mutateCurrentTheme', newTheme);
},
setAutoRefresh({ commit }, newRefreshValue) {
commit('setAutoRefresh', newRefreshValue);
localStorage.setItem(AUTO_REFRESH, JSON.stringify(newRefreshValue));

1
src/styles/_bootstrap_variables_ovw.scss
View File

@ -1,3 +1,4 @@
// Overwrite bootstrap scss variables
// $body-bg: rgb(42, 42, 49);
$font-size-base: 0.9rem;
$primary: #0089a1;

90
src/styles/_styles_ovw.scss
View File

@ -1,5 +1,91 @@
// global main style
// html, body, #app{
.logo-svg {
background-color: #000000;
}
// }
[data-theme="dark"] {
$bg-dark: #3c3c3c;
$bg-darker: darken($bg-dark, 5%);
$fg-color: #dedede;
background-color: darken($bg-dark, 5%) ;
color: $fg-color !important;
body {
background: $bg-darker;
color: $fg-color;
}
.card {
border-color: lighten($bg-dark, 10%);
}
.card-body {
background: $bg-dark;
color: $fg-color;
}
.card-header {
background: lighten($bg-dark, 5%);
color: $fg-color;
}
.table {
color: $fg-color;
}
.list-group-item {
color: $fg-color;
background: $bg-dark;
}
// .custom-select {
// color: $fg-color;
// // background: $bg-dark;
// }
.nav-tabs {
border-bottom: 1px solid lighten($bg-dark, 20%);
.nav-link
{
color: $primary;
&:hover {
border-color: lighten($bg-dark, 5%);
color: lighten($primary, 10%);
}
}
}
.nav-link.active {
color: $fg-color;
background: $bg-darker;
border-color: lighten($bg-dark, 20%);
}
.modal-content {
color: $fg-color;
background: $bg-dark;
}
.form-control {
color: $fg-color;
background: $bg-dark;
}
.popover {
background: $bg-dark;
}
.popover-body {
color: $fg-color;
}
.logo-svg {
background-color: $fg-color;
}
textarea {
color: $fg-color;
background: $bg-dark;
}
}
html.ft-theme-transition,
html.ft-theme-transition *,
html.ft-theme-transition *:before,
html.ft-theme-transition *:after {
transition:background 750ms ease-in-out,
border-color 750ms ease-in-out;
transition-delay: 0 !important;
}

6
src/styles/main.scss
View File

@ -1,8 +1,8 @@
@import '_bootstrap_variables_ovw.scss';
@import 'bootstrap_variables_ovw';
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index';
@import 'variables';
@import 'styles_ovw';

2
src/views/Dashboard.vue
View File

@ -22,7 +22,7 @@
<b-card header="Open / Total trades">
<b-card-text>
<span class="text-primary">{{ openTrades.length }}</span> /
<span class="text-secondary">{{ profit.trade_count }}</span>
<span class="text">{{ profit.trade_count }}</span>
</b-card-text>
</b-card>
<b-card header="Won / lost trades">

10
src/views/Home.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="home">
<img alt="Freqtrade logo" src="../assets/freqtrade-logo.png" />
<!-- <img alt="Freqtrade logo" src="../assets/freqtrade-logo.png" width="450px" class="my-5" /> -->
<div alt="Freqtrade logo" class="logo-svg my-5 mx-auto" />
<div>
<h1>Welcome to the Freqtrade UI</h1>
</div>
@ -26,4 +27,11 @@ export default class Home extends Vue {}
.home {
margin-top: 1.5em;
}
.logo-svg {
-webkit-mask: url(../assets/freqtrade-logo-mask.png) no-repeat center;
mask: url(../assets/freqtrade-logo-mask.png) no-repeat center;
mask-size: contain;
width: 250px;
height: 250px;
}
</style>