Merge branch 'bootswatch_remove'

package.json

@@ -22,7 +22,6 @@
     "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
     "bootstrap-vue-next": "^0.7.3",
-    "bootswatch": "^5.2.3",
     "core-js": "^3.29.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",

src/components/BootswatchThemeSelect.vue

@@ -1,130 +0,0 @@
-<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="themeList1.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 themeList1"
-        :key="key"
-        :active="activeTheme === theme.name"
-        :title="theme.description"
-        @click="handleClick(theme.name)"
-        >{{ 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 setup lang="ts">
-import { ref, onMounted } from 'vue';
-import axios from 'axios';
-import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue';
-import { FTHTMLStyleElement } from '@/types/styleElement';
-import { useSettingsStore } from '@/stores/settings';
-import { themeList, ThemeType } from '@/shared/themes';
-
-const props = defineProps({
-  simple: {
-    type: Boolean,
-    default: true,
-  },
-});
-const activeTheme = ref('');
-const themeList1 = ref<ThemeType[]>(themeList);
-const settingsStore = useSettingsStore();
-
-const setTheme = (themeName) => {
-  // If theme is already active, do nothing.
-  if (activeTheme.value === themeName) {
-    return;
-  }
-  if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
-    const styles = document.getElementsByTagName('style');
-    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] as FTHTMLStyleElement).disabled = true;
-    });
-    if (props.simple && activeTheme.value) {
-      // 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'));
-      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] as FTHTMLStyleElement).disabled = false;
-        } else {
-          // All other style themes should be disabled.
-          (bw[index] as FTHTMLStyleElement).disabled = true;
-        }
-      });
-    });
-  }
-  // Save the theme as localstorage
-  settingsStore.currentTheme = themeName;
-  activeTheme.value = themeName;
-};
-
-onMounted(() => {
-  if (settingsStore.currentTheme) setTheme(settingsStore.currentTheme);
-});
-
-const handleClick = (name: string) => {
-  setTheme(name.trim());
-};
-const toggleNight = () => {
-  setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
-};
-const 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.error(error);
-    });
-};
-</script>
-
-<style scoped></style>

src/components/ThemeSelect.vue

@@ -0,0 +1,48 @@
+<template>
+  <b-link variant="outline-primary" class="nav-link" @click="toggleNight">
+    <ThemeLightDark :size="16" />
+  </b-link>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue';
+import { useSettingsStore } from '@/stores/settings';
+
+const activeTheme = ref('');
+const settingsStore = useSettingsStore();
+
+const setTheme = (themeName) => {
+  // If theme is already active, do nothing.
+  if (activeTheme.value === themeName) {
+    return;
+  }
+  if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
+    // const styles = document.getElementsByTagName('style');
+    document.documentElement.setAttribute(
+      'data-theme',
+      themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark',
+    );
+    if (activeTheme.value) {
+      // Only transition if simple mode is active
+      document.documentElement.classList.add('ft-theme-transition');
+      window.setTimeout(() => {
+        document.documentElement.classList.remove('ft-theme-transition');
+      }, 1000);
+    }
+  }
+  // Save the theme as localstorage
+  settingsStore.currentTheme = themeName;
+  activeTheme.value = themeName;
+};
+
+onMounted(() => {
+  if (settingsStore.currentTheme) setTheme(settingsStore.currentTheme);
+});
+
+const toggleNight = () => {
+  setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
+};
+</script>
+
+<style scoped></style>

src/components/layout/NavBar.vue

@@ -23,7 +23,7 @@
           <router-link v-if="botStore.canRunBacktest" class="nav-link navbar-nav" to="/backtest"
             >Backtest</router-link
           >
-          <BootswatchThemeSelect />
+          <theme-select />
         </b-navbar-nav>
 
         <!-- Right aligned nav items -->
@@ -124,7 +124,7 @@
 
 <script setup lang="ts">
 import LoginModal from '@/views/LoginModal.vue';
-import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue';
+import ThemeSelect from '@/components/ThemeSelect.vue';
 import Favico from 'favico.js';
 import ReloadControl from '@/components/ftbot/ReloadControl.vue';
 import BotEntry from '@/components/BotEntry.vue';

src/shared/themes.ts

@@ -17,151 +17,6 @@ export const themeList: ThemeType[] = [
     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) {

yarn.lock

@@ -2001,11 +2001,6 @@ bootstrap@^5.2.3:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
   integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
 
-bootswatch@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-5.2.3.tgz#a12bef6ea1a54f1b5b55b472c11a846d1cb77239"
-  integrity sha512-tvnW15WoOY2sEp1uT1ITDQiJy2TekQa+K+Q28WDXibleIxsY0nAoC9IylbnUPD7Q5vkCIclOuBHLVBblJYYPSA==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"