Font size options

This commit is contained in:
Noah 2023-03-24 22:10:44 -07:00
parent ea4c597cbd
commit b3551cbe9a
3 changed files with 56 additions and 1 deletions

View File

@ -147,6 +147,20 @@ body {
min-height: 150px;
}
/* User configurable font size increases */
#chatHistory.x1 {
font-size: large;
}
#chatHistory.x2 {
font-size: x-large;
}
#chatHistory.x3 {
font-size: xx-large;
}
#chatHistory.x4 {
font-size: 64pt;
}
/*******************
* Video Feeds CSS *
*******************/

View File

@ -37,6 +37,13 @@ const app = Vue.createApp({
channels: PublicChannels,
website: WebsiteURL,
permitNSFW: PermitNSFW,
fontSizeClasses: [
[ "", "Default size" ],
[ "x1", "50% larger chat room text" ],
[ "x2", "2x larger chat room text" ],
[ "x3", "3x larger chat room text" ],
[ "x4", "4x larger chat room text" ],
],
sounds: {
available: SoundEffects,
settings: DefaultSounds,
@ -121,6 +128,7 @@ const app = Vue.createApp({
},
historyScrollbox: null,
autoscroll: true, // scroll to bottom on new messages
fontSizeClass: "", // font size magnification
DMs: {},
// Responsive CSS controls for mobile.
@ -157,6 +165,7 @@ const app = Vue.createApp({
},
mounted() {
this.setupSounds();
this.setupConfig(); // localSettings persisted settings
this.webcam.elem = document.querySelector("#localVideo");
this.historyScrollbox = document.querySelector("#chatHistory");
@ -216,6 +225,10 @@ const app = Vue.createApp({
node.style.height = null;
});
},
fontSizeClass() {
// Store the setting persistently.
localStorage.fontSizeClass = this.fontSizeClass;
},
},
computed: {
chatHistory() {
@ -262,6 +275,13 @@ const app = Vue.createApp({
},
},
methods: {
// Load user prefs from localStorage, called on startup
setupConfig() {
if (localStorage.fontSizeClass != undefined) {
this.fontSizeClass = localStorage.fontSizeClass;
}
},
signIn() {
this.loginModal.visible = false;
this.dial();

View File

@ -93,6 +93,27 @@
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Text size</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select v-model="fontSizeClass">
<option v-for="s in config.fontSizeClasses"
v-bind:key="s[0]"
:value="s[0]">
[[ s[1] ]]
</option>
</select>
</div>
</div>
</div>
</div>
</div>
<h3 class="subtitle">Sounds</h3>
<div class="field is-horizontal">
@ -542,7 +563,7 @@
-->
</div>
<div class="card-content" id="chatHistory">
<div class="card-content" id="chatHistory" :class="fontSizeClass">
<!-- No history? -->
<div v-if="chatHistory.length === 0">