gs_index: var txt size

src/backend/gs_index/src/components/Corpus.vue

@@ -106,6 +106,12 @@
 			glossColor() {
 				return sharedState.glossColor;
 			},
+			glossSize() {
+				return sharedState.glossSize + "%";
+			},
+			txtSize() {
+				return sharedState.txtSize + "%";
+			},
 		},
 		methods: {
 			toggleCorpusVisibility() {
@@ -317,7 +323,8 @@
 </script>
 
 <template>
-	<div :class="['corpus_wrapper', { 'full-screen': isCorpusVisible}]" :style="{ '--gloss-color': glossColor }">
+	<div :class="['corpus_wrapper', { 'full-screen': isCorpusVisible}]" 
+		:style="{ '--gloss-color': glossColor, '--gloss-size': glossSize, '--txt-size': txtSize }">
 		<hr>
 		<h4 @click="toggleCorpusVisibility()"
 			ref="header">{{ header + ": " + corpus_id }}

src/backend/gs_index/src/components/MiscOptions.vue

@@ -12,12 +12,20 @@
 			},
 			glossColor() {
 				this.emitChange();
-			}
+			},
+			txtSize() {
+				this.emitChange();
+			},
+			glossSize() {
+				this.emitChange();
+			},
 		},
 		methods: {
 			emitChange() {
 				sharedState.psPerScreen = this.psPerScreen;
 				sharedState.glossColor = this.glossColor;
+				sharedState.txtSize = this.txtSize;
+				sharedState.glossSize = this.glossSize;
 			},
 			exportData() {
 				console.log("Exporting");
@@ -69,14 +77,36 @@
 				/>
 			</div>
 			<div class="col-md-2">
-				<label for="psPerScreen">Gloss color</label>
+				<label for="glossColor">Gloss color</label>
 				<input
 					type="color"
 					class="form-control"
 					id="glossColor"
 					v-model="glossColor"
 				/>
 			</div>
+			<div class="col-md-2">
+				<label for="txtSize">Text Size</label>
+				<input
+					type="range"
+					class="form-control"
+					id="txtSize"
+					v-model="txtSize"
+					min="50"
+					max="150"
+				/>
+			</div>
+			<div class="col-md-2">
+				<label for="glossSize">Gloss Size</label>
+				<input
+					type="range"
+					class="form-control"
+					id="glossSize"
+					v-model="glossSize"
+					min="50"
+					max="150"
+				/>
+			</div>
 			<div class="col-md-2 d-flex align-items-center">
 				<input type="file" @change="importData" class="form-control">
 			</div>

src/backend/gs_index/src/components/Token.vue

@@ -1,6 +1,4 @@
 <script>
-	import { sharedState } from '../sharedState.js';
-
 	export default {
 		props: {
 			t: {
@@ -61,12 +59,12 @@
 
 <style scoped>
 	.token_txt {
-		font-size: 150%;
+		font-size: var(--txt-size);
 		font-family: serif;
 	}
 
 	.gloss {
-		font-size: 90%;
+		font-size: var(--gloss-size);
 		/*font-style: italic;*/
 		font-family: monospace;
 		text-align: center;

src/backend/gs_index/src/sharedState.js

@@ -20,6 +20,8 @@ export const sharedState = reactive({
 	currentOpenCorpus: "",
 	psPerScreen: 16,
 	glossColor: "gray",
+	txtSize: 150,
+	glossSize: 90,
 
 	...savedState, //Load
 });