Font size options

ipad-testing
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; 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 * * Video Feeds CSS *
*******************/ *******************/

View File

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

View File

@ -93,6 +93,27 @@
</div> </div>
</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> <h3 class="subtitle">Sounds</h3>
<div class="field is-horizontal"> <div class="field is-horizontal">
@ -542,7 +563,7 @@
--> -->
</div> </div>
<div class="card-content" id="chatHistory"> <div class="card-content" id="chatHistory" :class="fontSizeClass">
<!-- No history? --> <!-- No history? -->
<div v-if="chatHistory.length === 0"> <div v-if="chatHistory.length === 0">