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

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,