add field to customize font

ActivityWatch · Nov 21, 2023 · a95a147 · a95a147 · github-actions · Nov 22, 2023
1 parent f38648c
commit a95a147
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 17 deletions.
diff --git a/src/style/style.scss b/src/style/style.scss
@@ -1,17 +1,37 @@
 @import "globals";
 
+
+
+
+
+$default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Ubuntu", sans-serif;
+$header-font-family: 'Varela Round', sans-serif;
+$canvas-font-family: sans-serif;
+
+:root {
+  --app-font: #{$default-font-family};
+  --header-font: #{$header-font-family};
+  --canvas-font: #{$canvas-font-family};
+}
+
 body,
 html,
 body,
 button {
   color: $textColor;
-  font-family: -apple-system , BlinkMacSystemFont , "Segoe UI" , "Roboto" , "Helvetica Neue" , "Ubuntu" , sans-serif;
+  font-family: var(--app-font, $default-font-family);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 
-h1, h2, h3, h4, h5, h6, nav {
-  font-family: 'Varela Round', sans-serif;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+nav {
+  font-family: var(--header-font, $header-font-family);
 }
 
 body {
@@ -30,4 +50,4 @@ body {
   background-color: #fff;
   border: 1px solid $lightBorderColor;
   border-radius: 5px;
-}
+}
diff --git a/src/views/settings/Theme.vue b/src/views/settings/Theme.vue
@@ -11,14 +11,57 @@ div
         .aw-loading Loading...
   small
     | Change color theme of the application (you need to change categories colors manually to be suitable with dark mode).
-</template>
 
+  div.d-sm-flex.justify-content-between
+    div
+      h5.mt-1.mb-2.mb-sm-0 Font
+    div
+      b-select.landingpage(v-if="_loaded" size="sm" v-model="headerFont" class="form-control form-control-sm" @change="onHeaderFontChange")
+        option(value="Varela Round") Varela Round 
+        option(value="sans-serif") Sans Serif
+        option(value="custom") Custom Font Name
+      span(v-else)
+        .aw-loading Loading...
+
+  div(v-if="headerFont === 'custom'")
+    input(type="text" v-model="customHeaderFontName" class="form-control form-control-sm" placeholder="Enter font name")
+  small
+    | Change the header font, ie titles and buttons
+
+  div.d-sm-flex.justify-content-between
+    div
+      h5.mt-1.mb-2.mb-sm-0 Font
+    div
+
+      b-select.landingpage(v-if="_loaded" size="sm" v-model="selectedFont" class="form-control form-control-sm" @change="onFontChange")
+        option(value="sans-serif") Sans Serif
+        option(value="Varela Round") Varela Round 
+        option(value="custom") Custom Font Name
+      span(v-else)
+        .aw-loading Loading...
+  div(v-if="selectedFont === 'custom'")
+    input(type="text" v-model="customFontName" class="form-control form-control-sm" placeholder="Enter font name")
+  small
+    | Change the default font, ie default text
+
+</template>
+
 <script>
 import { mapState } from 'pinia';
 import { useSettingsStore } from '~/stores/settings';
 
 export default {
   name: 'Theme',
+
+  data() {
+    return {
+      selectedFont: 'Arial', // default font
+      customFontName: '', // User enters this
+      headerFont: 'Arial', // default font for headers
+      customHeaderFontName: '', // User enters this for header font
+    };
+  },
+
   computed: {
     ...mapState(useSettingsStore, ['_loaded']),
     theme: {
@@ -34,16 +77,81 @@ export default {
         });
 
         // Apply newly set theme
-        // Create Dark Theme Element
-        const themeLink = document.createElement('link');
-        themeLink.href = '/static/dark.css';
-        themeLink.rel = 'stylesheet';
-        // Append Dark Theme Element If Selected Mode Is Dark
-        value === 'dark'
-          ? document.querySelector('head').appendChild(themeLink)
-          : document.querySelector('link[href="/static/dark.css"]').remove();
+        this.applyTheme(value);
       },
     },
   },
+  watch: {
+    customFontName(newFontName) {
+      if (this.selectedFont === 'custom') {
+        this.applyFont(newFontName);
+      }
+    },
+    customHeaderFontName(newFontName) {
+      if (this.headerFont === 'custom') {
+        this.applyHeaderFont(newFontName);
+      }
+    },
+
+
+  },
+
+  methods: {
+    onFontChange() {
+      console.log('Font changed to:', this.selectedFont);
+      if (this.selectedFont === 'custom') {
+        this.loadCustomFont();
+      } else {
+        // Standard font selection
+        this.applyFont(this.selectedFont);
+      }
+    },
+    onHeaderFontChange() {
+      if (this.headerFont === 'custom') {
+        this.applyHeaderFont(this.customHeaderFontName);
+      } else {
+        this.applyHeaderFont(this.headerFont);
+      }
+    },
+
+    applyFont(fontName) {
+      document.documentElement.style.setProperty('--app-font', fontName);
+      document.documentElement.style.setProperty('--canvas-font', fontName);
+    },
+    applyHeaderFont(fontName) {
+      document.documentElement.style.setProperty('--header-font', fontName);
+    },
+
+    loadCustomFont() {
+      const linkId = 'custom-font-style';
+      let fontLink = document.getElementById(linkId);
+
+      if (!fontLink) {
+        fontLink = document.createElement('link');
+        fontLink.id = linkId;
+        fontLink.rel = 'stylesheet';
+        document.head.appendChild(fontLink);
+      }
+
+      document.body.style.fontFamily = this.customFontName;
+    },
+    applyTheme(theme) {
+      // Create Dark Theme Element
+      const themeLink = document.createElement('link');
+      themeLink.href = '/static/dark.css';
+      themeLink.rel = 'stylesheet';
+
+      // Append Dark Theme Element If Selected Mode Is Dark
+      if (theme === 'dark') {
+        document.querySelector('head').appendChild(themeLink);
+      } else {
+        const existingLink = document.querySelector('link[href="/static/dark.css"]');
+        if (existingLink) {
+          existingLink.remove();
+        }
+      }
+    },
+  }
 };
 </script>
+
diff --git a/src/visualizations/periodusage.js b/src/visualizations/periodusage.js
@@ -21,7 +21,7 @@ function set_status(svg_elem, msg) {
     .attr('x', '50%')
     .attr('y', '25pt')
     .text(msg)
-    .attr('font-family', 'sans-serif')
+    .attr('font-family', 'var(--header-font)')
     .attr('font-size', '20pt')
     .attr('text-anchor', 'middle')
     .attr('fill', '#AAA');

diff --git a/src/visualizations/summary.ts b/src/visualizations/summary.ts
@@ -30,7 +30,7 @@ function set_status(container: HTMLElement, msg: string) {
     .attr('x', '0px')
     .attr('y', '25px')
     .text(msg)
-    .attr('font-family', 'sans-serif')
+    .attr('font-family', 'var(--canvas-font)')
     .attr('font-size', '20px')
     .attr('fill', '#999');
 }
@@ -102,7 +102,7 @@ function update(container: HTMLElement, apps: Entry[]) {
       .attr('x', 5)
       .attr('y', curr_y + 1.4 * textSize)
       .text(app.name)
-      .attr('font-family', 'sans-serif')
+      .attr('font-family', 'var(--canvas-font)')
       .attr('font-size', textSize + 'px')
       .attr('fill', textColor);
 
@@ -111,7 +111,7 @@ function update(container: HTMLElement, apps: Entry[]) {
       .attr('x', 5)
       .attr('y', curr_y + 2.6 * textSize)
       .text(seconds_to_duration(app.duration))
-      .attr('font-family', 'sans-serif')
+      .attr('font-family', 'var(--canvas-font)')
       .attr('font-size', textSize - 3 + 'px')
       .attr('fill', '#444');