feat: reactive font size for ace editor + i18n support for font size settings strings

assets/scss/styles.scss

@@ -368,10 +368,19 @@ input[type="checkbox"] {
       line-height: var(--body-line-height);
 
       .action {
+        @apply bg-gray-500;
+        @apply px-4;
+        @apply bg-opacity-10;
         @apply ml-auto;
+        @apply sm:ml-8;
         @apply transition;
         @apply text-current;
-        @apply hover:(opacity-75 no-underline);
+        @apply normal-case;
+        @apply hover:(bg-opacity-20 no-underline);
+        @apply font-medium;
+
+        font-size: var(--body-font-size);
+        line-height: var(--body-line-height);
       }
     }
 

assets/scss/themes.scss

@@ -361,14 +361,14 @@
   --sidebar-secondary-sticky-fold: 5rem;
 }
 
-:root[data-font-size="xs"] {
+:root[data-font-size="small"] {
   @include fontSmall;
 }
 
-:root[data-font-size="sm"] {
+:root[data-font-size="medium"] {
   @include fontMedium;
 }
 
-:root[data-font-size="base"] {
+:root[data-font-size="large"] {
   @include fontLarge;
 }

components/app/Header.vue

@@ -91,9 +91,8 @@ export default defineComponent({
     const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
     if (!cookiesAllowed) {
       this.$toast.show(this.$t("we_use_cookies").toString(), {
-        icon: "info",
+        icon: "cookie",
-        duration: 5000,
+        duration: 0,
-        theme: "toasted-primary",
         action: [
           {
             text: this.$t("action.dismiss").toString(),

components/graphql/QueryEditor.vue

@@ -48,6 +48,14 @@ export default {
     }
   },
 
+  computed: {
+    appFontSize() {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        "--body-font-size"
+      )
+    },
+  },
+
   watch: {
     value(value) {
       if (value !== this.cacheValue) {
@@ -94,6 +102,8 @@ export default {
       })
     })
 
+    editor.setFontSize(this.appFontSize)
+
     const completer = {
       getCompletions: (
         editor,

components/graphql/RequestOptions.vue

@@ -58,7 +58,6 @@
             :options="{
               maxLines: Infinity,
               minLines: 16,
-              fontSize: '12px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
               useWorker: false,
@@ -102,7 +101,6 @@
             :options="{
               maxLines: Infinity,
               minLines: 16,
-              fontSize: '12px',
               autoScrollEditorIntoView: true,
               showPrintMargin: false,
               useWorker: false,

components/graphql/Response.vue

@@ -42,7 +42,6 @@
       :options="{
         maxLines: Infinity,
         minLines: 16,
-        fontSize: '12px',
         autoScrollEditorIntoView: true,
         readOnly: true,
         showPrintMargin: false,

components/graphql/Sidebar.vue

@@ -191,7 +191,6 @@
             :options="{
               maxLines: Infinity,
               minLines: 16,
-              fontSize: '12px',
               autoScrollEditorIntoView: true,
               readOnly: true,
               showPrintMargin: false,

components/http/CodegenModal.vue

@@ -52,7 +52,6 @@
           :options="{
             maxLines: 16,
             minLines: 8,
-            fontSize: '12px',
             autoScrollEditorIntoView: true,
             readOnly: true,
             showPrintMargin: false,

components/http/PreRequestScript.vue

@@ -31,7 +31,6 @@
           :options="{
             maxLines: Infinity,
             minLines: 16,
-            fontSize: '12px',
             autoScrollEditorIntoView: true,
             showPrintMargin: false,
             useWorker: false,

components/http/RawBody.vue

@@ -62,7 +62,6 @@
         :options="{
           maxLines: Infinity,
           minLines: 16,
-          fontSize: '12px',
           autoScrollEditorIntoView: true,
           showPrintMargin: false,
           useWorker: false,

components/http/Tests.vue

@@ -31,7 +31,6 @@
           :options="{
             maxLines: Infinity,
             minLines: 16,
-            fontSize: '12px',
             autoScrollEditorIntoView: true,
             showPrintMargin: false,
             useWorker: false,

components/lenses/renderers/HTMLLensRenderer.vue

@@ -49,7 +49,6 @@
         :options="{
           maxLines: Infinity,
           minLines: 16,
-          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/JSONLensRenderer.vue

@@ -43,7 +43,6 @@
         :options="{
           maxLines: Infinity,
           minLines: 16,
-          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/RawLensRenderer.vue

@@ -42,7 +42,6 @@
         :options="{
           maxLines: Infinity,
           minLines: 16,
-          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/XMLLensRenderer.vue

@@ -42,7 +42,6 @@
         :options="{
           maxLines: Infinity,
           minLines: 16,
-          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/smart/AceEditor.vue

@@ -108,6 +108,14 @@ export default {
     }
   },
 
+  computed: {
+    appFontSize() {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        "--body-font-size"
+      )
+    },
+  },
+
   watch: {
     value(value) {
       if (value !== this.cacheValue) {
@@ -145,6 +153,8 @@ export default {
       })
     })
 
+    editor.setFontSize(this.appFontSize)
+
     if (this.value) editor.setValue(this.value, 1)
 
     this.editor = editor

components/smart/FontSizePicker.vue

@@ -9,15 +9,15 @@
             class="pr-8"
             icon="format_size"
             outline
-            :label="`${fontSizes.find(({ code }) => code == active.code).name}`"
+            :label="getFontSizeName(fontSizes.find((size) => size == active))"
           />
         </template>
         <SmartItem
           v-for="(size, index) in fontSizes"
           :key="`size-${index}`"
-          :label="size.name"
+          :label="getFontSizeName(size)"
-          :info-icon="size.code === active.code ? 'done' : ''"
+          :info-icon="size === active ? 'done' : ''"
-          :active-info-icon="size.code === active.code"
+          :active-info-icon="size === active"
           @click.native="
             setActiveFont(size)
             $refs.fontSize.tippy().hide()
@@ -45,8 +45,11 @@ export default defineComponent({
     }
   },
   methods: {
+    getFontSizeName(size: HoppFontSize) {
+      return this.$t(`settings.font_size_${size}`)
+    },
     setActiveFont(size: HoppFontSize) {
-      document.documentElement.setAttribute("data-font-size", size.code)
+      document.documentElement.setAttribute("data-font-size", size)
       applySetting("FONT_SIZE", size)
     },
   },

components/smart/JsEditor.vue

@@ -52,6 +52,14 @@ export default {
     }
   },
 
+  computed: {
+    appFontSize() {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        "--body-font-size"
+      )
+    },
+  },
+
   watch: {
     value(value) {
       if (value !== this.cacheValue) {
@@ -100,6 +108,8 @@ export default {
         })
     })
 
+    editor.setFontSize(this.appFontSize)
+
     const completer = {
       getCompletions: (
         editor,

lang/en-US.json

@@ -197,6 +197,9 @@
     "interceptor": "Interceptor",
     "navigation_sidebar": "Navigation sidebar",
     "font_size": "Font size",
+    "font_size_small": "Small",
+    "font_size_large": "Large",
+    "font_size_medium": "Medium",
     "change_font_size": "Change font size",
     "language": "Language",
     "choose_language": "Choose language",

layouts/default.vue

@@ -66,7 +66,7 @@ function updateThemes() {
   onBeforeMount(() => {
     document.documentElement.setAttribute("data-accent", themeColor.value)
     $colorMode.preference = bgColor.value
-    document.documentElement.setAttribute("data-font-size", fontSize.value.code)
+    document.documentElement.setAttribute("data-font-size", fontSize.value)
   })
 
   // Listen for updates
@@ -75,7 +75,7 @@ function updateThemes() {
   )
   watch(bgColor, () => ($colorMode.preference = bgColor.value))
   watch(fontSize, () =>
-    document.documentElement.setAttribute("data-font-size", fontSize.value.code)
+    document.documentElement.setAttribute("data-font-size", fontSize.value)
   )
 }
 
@@ -154,7 +154,6 @@ export default defineComponent({
           this.$toast.show(this.$t("app.new_version_found").toString(), {
             icon: "info",
             duration: 0,
-            theme: "toasted-primary",
             action: [
               {
                 text: this.$t("reload").toString(),

newstore/settings.ts

@@ -24,20 +24,7 @@ export const HoppAccentColors = [
 
 export type HoppAccentColor = typeof HoppAccentColors[number]
 
-export const HoppFontSizes = [
+export const HoppFontSizes = ["small", "medium", "large"] as const
-  {
-    name: "Small",
-    code: "xs",
-  },
-  {
-    name: "Medium",
-    code: "sm",
-  },
-  {
-    name: "Large",
-    code: "base",
-  },
-] as const
 
 export type HoppFontSize = typeof HoppFontSizes[number]
 
@@ -90,7 +77,7 @@ export const defaultSettings: SettingsType = {
   LEFT_SIDEBAR: true,
   RIGHT_SIDEBAR: true,
   ZEN_MODE: false,
-  FONT_SIZE: { name: "Small", code: "xs" },
+  FONT_SIZE: "small",
 }
 
 const validKeys = Object.keys(defaultSettings)

pages/documentation.vue

@@ -64,7 +64,6 @@
               :options="{
                 maxLines: Infinity,
                 minLines: 16,
-                fontSize: '12px',
                 autoScrollEditorIntoView: true,
                 showPrintMargin: false,
                 useWorker: false,