btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

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

Browse Source
This commit is contained in:
liyasthomas
2021-08-14 21:40:56 +05:30
parent 691629890f
commit 9f639378ec
22 changed files with 60 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/scss/styles.scss
View File

@@ -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);
}
}

6
assets/scss/themes.scss
View File

@@ -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;
}

5
components/app/Header.vue
View File

@@ -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(),

10
components/graphql/QueryEditor.vue
View File

@@ -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,

2
components/graphql/RequestOptions.vue
View File

@@ -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,

1
components/graphql/Response.vue
View File

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

1
components/graphql/Sidebar.vue
View File

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

1
components/http/CodegenModal.vue
View File

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

1
components/http/PreRequestScript.vue
View File

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

1
components/http/RawBody.vue
View File

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

1
components/http/Tests.vue
View File

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

1
components/lenses/renderers/HTMLLensRenderer.vue
View File

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

1
components/lenses/renderers/JSONLensRenderer.vue
View File

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

1
components/lenses/renderers/RawLensRenderer.vue
View File

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

1
components/lenses/renderers/XMLLensRenderer.vue
View File

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

10
components/smart/AceEditor.vue
View File

@@ -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

13
components/smart/FontSizePicker.vue
View File

@@ -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"
:info-icon="size.code === active.code ? 'done' : ''"
:active-info-icon="size.code === active.code"
:label="getFontSizeName(size)"
:info-icon="size === active ? 'done' : ''"
: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)
},
},

10
components/smart/JsEditor.vue
View File

@@ -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,

3
lang/en-US.json
View File

@@ -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",

5
layouts/default.vue
View File

@@ -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(),

17
newstore/settings.ts
View File

@@ -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)

1
pages/documentation.vue
View File

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