Skip to content

Commit

Permalink
[MS] Font size change in textviewer
Browse files Browse the repository at this point in the history
  • Loading branch information
Ironicbay committed Jan 28, 2025
1 parent d375c10 commit 6889567
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 7 deletions.
3 changes: 2 additions & 1 deletion client/src/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -1775,6 +1775,7 @@
},
"document": {
"loadDocumentError": "Could not load this document."
}
},
"fontLabel": "{number}"
}
}
3 changes: 2 additions & 1 deletion client/src/locales/fr-FR.json
Original file line number Diff line number Diff line change
Expand Up @@ -1775,6 +1775,7 @@
},
"document": {
"loadDocumentError": "Impossible de charger ce document."
}
},
"fontLabel": "{number}"
}
}
50 changes: 45 additions & 5 deletions client/src/views/viewers/TextViewer.vue
Original file line number Diff line number Diff line change
@@ -1,28 +1,59 @@
<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->

<template>
<div
ref="container"
class="text-container"
/>
<file-viewer-wrapper>
<template #viewer>
<div
ref="container"
class="text-container"
/>
</template>
<template #controls>
<file-controls>
<file-controls-group class="file-controls-font-size">
<ms-dropdown
class="dropdown"
:options="fontOptions"
:default-option-key="fontSize"
@change="onFontSizeChange($event.option.key)"
/>
</file-controls-group>
</file-controls>
</template>
</file-viewer-wrapper>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as monaco from 'monaco-editor';
import { FileContentInfo } from '@/views/viewers/utils';
import { FileViewerWrapper } from '@/views/viewers';
import { FileControls, FileControlsGroup } from '@/components/viewers';
import { MsDropdown, MsOption, MsOptions } from 'megashark-lib';

const props = defineProps<{
contentInfo: FileContentInfo;
}>();

const fontSize = ref(13);
const container = ref();
const editor = ref();
const fontOptions = new MsOptions(
((): MsOption[] => {
const fontItems: MsOption[] = [];
for (let i = 6; i <= 30; i++) {
fontItems.push({ key: i, label: { key: 'fileViewers.fontLabel', data: { number: i } } });
}
return fontItems;
})(),
);

onMounted(async () => {
const text = new TextDecoder().decode(props.contentInfo.data);
monaco.editor.create(container.value, {
editor.value = monaco.editor.create(container.value, {
value: text,
readOnly: true,
fontSize: fontSize.value,
theme: 'vs-dark',
language: getLanguage(),
});
Expand All @@ -37,11 +68,20 @@ function getLanguage(): string | undefined {
]);
return langs.get(props.contentInfo.extension);
}

function onFontSizeChange(value: number): void {
fontSize.value = value;
editor.value.updateOptions({ fontSize: fontSize.value });
}
</script>

<style scoped lang="scss">
.text-container {
width: 100%;
height: 100%;
}

.file-controls-font-size {
margin: 0 0.5rem;
}
</style>

0 comments on commit 6889567

Please sign in to comment.