From 9f639378ec11c889098578d519a6331720b6f23a Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Sat, 14 Aug 2021 21:40:56 +0530 Subject: [PATCH] feat: reactive font size for ace editor + i18n support for font size settings strings --- assets/scss/styles.scss | 11 ++++++++++- assets/scss/themes.scss | 6 +++--- components/app/Header.vue | 5 ++--- components/graphql/QueryEditor.vue | 10 ++++++++++ components/graphql/RequestOptions.vue | 2 -- components/graphql/Response.vue | 1 - components/graphql/Sidebar.vue | 1 - components/http/CodegenModal.vue | 1 - components/http/PreRequestScript.vue | 1 - components/http/RawBody.vue | 1 - components/http/Tests.vue | 1 - .../lenses/renderers/HTMLLensRenderer.vue | 1 - .../lenses/renderers/JSONLensRenderer.vue | 1 - components/lenses/renderers/RawLensRenderer.vue | 1 - components/lenses/renderers/XMLLensRenderer.vue | 1 - components/smart/AceEditor.vue | 10 ++++++++++ components/smart/FontSizePicker.vue | 13 ++++++++----- components/smart/JsEditor.vue | 10 ++++++++++ lang/en-US.json | 3 +++ layouts/default.vue | 5 ++--- newstore/settings.ts | 17 ++--------------- pages/documentation.vue | 1 - 22 files changed, 60 insertions(+), 43 deletions(-) diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss index 141509370..684926bc8 100644 --- a/assets/scss/styles.scss +++ b/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); } } diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss index b3080c167..0635c06d0 100644 --- a/assets/scss/themes.scss +++ b/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; } diff --git a/components/app/Header.vue b/components/app/Header.vue index 8ad7c617f..6d6cea59f 100644 --- a/components/app/Header.vue +++ b/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", - duration: 5000, - theme: "toasted-primary", + icon: "cookie", + duration: 0, action: [ { text: this.$t("action.dismiss").toString(), diff --git a/components/graphql/QueryEditor.vue b/components/graphql/QueryEditor.vue index 84838a9b2..20f445c59 100644 --- a/components/graphql/QueryEditor.vue +++ b/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, diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue index 845003c39..f0bfdd078 100644 --- a/components/graphql/RequestOptions.vue +++ b/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, diff --git a/components/graphql/Response.vue b/components/graphql/Response.vue index 8c8bf3364..62c46d1f6 100644 --- a/components/graphql/Response.vue +++ b/components/graphql/Response.vue @@ -42,7 +42,6 @@ :options="{ maxLines: Infinity, minLines: 16, - fontSize: '12px', autoScrollEditorIntoView: true, readOnly: true, showPrintMargin: false, diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue index 61340925c..013949be3 100644 --- a/components/graphql/Sidebar.vue +++ b/components/graphql/Sidebar.vue @@ -191,7 +191,6 @@ :options="{ maxLines: Infinity, minLines: 16, - fontSize: '12px', autoScrollEditorIntoView: true, readOnly: true, showPrintMargin: false, diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue index 96fbde1f5..05eb4bd72 100644 --- a/components/http/CodegenModal.vue +++ b/components/http/CodegenModal.vue @@ -52,7 +52,6 @@ :options="{ maxLines: 16, minLines: 8, - fontSize: '12px', autoScrollEditorIntoView: true, readOnly: true, showPrintMargin: false, diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue index 9b10cfced..abb482791 100644 --- a/components/http/PreRequestScript.vue +++ b/components/http/PreRequestScript.vue @@ -31,7 +31,6 @@ :options="{ maxLines: Infinity, minLines: 16, - fontSize: '12px', autoScrollEditorIntoView: true, showPrintMargin: false, useWorker: false, diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue index 6c04a6f1a..567bcfd35 100644 --- a/components/http/RawBody.vue +++ b/components/http/RawBody.vue @@ -62,7 +62,6 @@ :options="{ maxLines: Infinity, minLines: 16, - fontSize: '12px', autoScrollEditorIntoView: true, showPrintMargin: false, useWorker: false, diff --git a/components/http/Tests.vue b/components/http/Tests.vue index e22a17e0e..5f596e39d 100644 --- a/components/http/Tests.vue +++ b/components/http/Tests.vue @@ -31,7 +31,6 @@ :options="{ maxLines: Infinity, minLines: 16, - fontSize: '12px', autoScrollEditorIntoView: true, showPrintMargin: false, useWorker: false, diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue index 22ab35364..872556ecd 100644 --- a/components/lenses/renderers/HTMLLensRenderer.vue +++ b/components/lenses/renderers/HTMLLensRenderer.vue @@ -49,7 +49,6 @@ :options="{ maxLines: Infinity, minLines: 16, - fontSize: '12px', autoScrollEditorIntoView: true, readOnly: true, showPrintMargin: false, diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue index a42c6f67c..15b389225 100644 --- a/components/lenses/renderers/JSONLensRenderer.vue +++ b/components/lenses/renderers/JSONLensRenderer.vue @@ -43,7 +43,6 @@ :options="{ maxLines: Infinity, minLines: 16, - fontSize: '12px', autoScrollEditorIntoView: true, readOnly: true, showPrintMargin: false, diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue index a1aa2f6aa..77132e76e 100644 --- a/components/lenses/renderers/RawLensRenderer.vue +++ b/components/lenses/renderers/RawLensRenderer.vue @@ -42,7 +42,6 @@ :options="{ maxLines: Infinity, minLines: 16, - fontSize: '12px', autoScrollEditorIntoView: true, readOnly: true, showPrintMargin: false, diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue index 2f87a1546..9b2d87500 100644 --- a/components/lenses/renderers/XMLLensRenderer.vue +++ b/components/lenses/renderers/XMLLensRenderer.vue @@ -42,7 +42,6 @@ :options="{ maxLines: Infinity, minLines: 16, - fontSize: '12px', autoScrollEditorIntoView: true, readOnly: true, showPrintMargin: false, diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue index a2076e903..66a647c3e 100644 --- a/components/smart/AceEditor.vue +++ b/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 diff --git a/components/smart/FontSizePicker.vue b/components/smart/FontSizePicker.vue index 0f15077aa..f458864ca 100644 --- a/components/smart/FontSizePicker.vue +++ b/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))" /> { 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(), diff --git a/newstore/settings.ts b/newstore/settings.ts index 5604fb4dd..f507ab1a6 100644 --- a/newstore/settings.ts +++ b/newstore/settings.ts @@ -24,20 +24,7 @@ export const HoppAccentColors = [ export type HoppAccentColor = typeof HoppAccentColors[number] -export const HoppFontSizes = [ - { - name: "Small", - code: "xs", - }, - { - name: "Medium", - code: "sm", - }, - { - name: "Large", - code: "base", - }, -] as const +export const HoppFontSizes = ["small", "medium", "large"] 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) diff --git a/pages/documentation.vue b/pages/documentation.vue index b5ed7a2ea..db414bd47 100644 --- a/pages/documentation.vue +++ b/pages/documentation.vue @@ -64,7 +64,6 @@ :options="{ maxLines: Infinity, minLines: 16, - fontSize: '12px', autoScrollEditorIntoView: true, showPrintMargin: false, useWorker: false,