Fossil SCM

Added mini-help hint text to /chat config view entries.

stephan 2021-09-29 22:30 chat-input-rework
Commit 3259251aeb6309607cba2c1f94f95654eeae47f968b26986f44e117930b61494
Parent b9c5792e34bc133…
2 files changed +16 +8 -2
~ src/fossil.page.chat.js ~ src/style.chat.css
M src/fossil.page.chat.js
+16
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -1235,10 +1235,11 @@
12351235
 /** Internal acrobatics to allow certain settings toggles to access
12361236
 related toggles. */
12371237
 const namedOptions = {
12381238
 activeUsers:{
12391239
 label: "Show active users list",
1240
+ hint: "List users who have messages in the currently-loaded chat history.",
12401241
 boolValue: 'active-user-list'
12411242
 }
12421243
 };
12431244
 if(1){
12441245
 /* Per user request, toggle the list of users on and off if the
@@ -1277,36 +1278,47 @@
12771278
 elements stay in sync with the config UI via those settings
12781279
 events.
12791280
 */
12801281
 const settingsOps = [{
12811282
 label: "Multi-line input",
1283
+ hint: [
1284
+ "When the input field is empty, Ctrl-Enter or Shift-Enter will toggle this.",
1285
+ "In multi-line mode, Ctrl-Enter sends messages. In single-line mode, "
1286
+ +"Enter or Ctrl-Enter sends messages."
1287
+ ].join('\n'),
12821288
 boolValue: 'edit-multiline'
12831289
 },{
12841290
 label: "Left-align my posts",
1291
+ hint: "Default alignment of your own messages is selected "
1292
+ +"based window width/height relationship.",
12851293
 boolValue: ()=>!document.body.classList.contains('my-messages-right'),
12861294
 callback: function f(){
12871295
 document.body.classList[
12881296
 this.checkbox.checked ? 'remove' : 'add'
12891297
 ]('my-messages-right');
12901298
 }
12911299
 },{
12921300
 label: "Show images inline",
1301
+ hint: "Whether to show images inline or as a hyperlink.",
12931302
 boolValue: 'images-inline'
12941303
 },{
12951304
 label: "Timestamps in active users list",
1305
+ hint: "Whether to show last-message timestamps.",
12961306
 boolValue: 'active-user-list-timestamps'
12971307
 },
12981308
 namedOptions.activeUsers,{
12991309
 label: "Monospace message font",
1310
+ hint: "Use monospace font for message text?",
13001311
 boolValue: 'monospace-messages',
13011312
 callback: function(setting){
13021313
 document.body.classList[
13031314
 setting.value ? 'add' : 'remove'
13041315
 ]('monospace-messages');
13051316
 }
13061317
 },{
13071318
 label: "Chat-only mode",
1319
+ hint: "Toggle the page between normal fossil view and chat-only view.",
13081320
 boolValue: 'chat-only-mode'
13091321
 }];
13101322
13111323
 /** Set up selection list of notification sounds. */
13121324
 if(1){
@@ -1327,10 +1339,11 @@
13271339
 }
13281340
 }
13291341
 Chat.setNewMessageSound(selectSound.value);
13301342
 settingsOps.push({
13311343
 label: "Audio alert",
1344
+ hint: "How to enable audio playback is browser-specific!",
13321345
 select: selectSound,
13331346
 callback: function(ev){
13341347
 const v = ev.target.value;
13351348
 Chat.setNewMessageSound(v);
13361349
 F.toast.message("Audio notifications "+(v ? "enabled" : "disabled")+".");
@@ -1344,10 +1357,13 @@
13441357
 settingsOps.forEach(function f(op){
13451358
 const line = D.addClass(D.div(), 'menu-entry');
13461359
 const btn = D.append(
13471360
 D.addClass(D.label(), 'cbutton'/*bootstrap skin hijacks 'button'*/),
13481361
 op.label);
1362
+ if(op.hint){
1363
+ D.append(btn,D.br(),D.append(D.span(),op.hint));
1364
+ }
13491365
 if(op.hasOwnProperty('select')){
13501366
 D.append(line, btn, op.select);
13511367
 if(op.callback){
13521368
 op.select.addEventListener('change', (ev)=>op.callback(ev), false);
13531369
 }
13541370
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -1235,10 +1235,11 @@
1235 /** Internal acrobatics to allow certain settings toggles to access
1236 related toggles. */
1237 const namedOptions = {
1238 activeUsers:{
1239 label: "Show active users list",
 
1240 boolValue: 'active-user-list'
1241 }
1242 };
1243 if(1){
1244 /* Per user request, toggle the list of users on and off if the
@@ -1277,36 +1278,47 @@
1277 elements stay in sync with the config UI via those settings
1278 events.
1279 */
1280 const settingsOps = [{
1281 label: "Multi-line input",
 
 
 
 
 
1282 boolValue: 'edit-multiline'
1283 },{
1284 label: "Left-align my posts",
 
 
1285 boolValue: ()=>!document.body.classList.contains('my-messages-right'),
1286 callback: function f(){
1287 document.body.classList[
1288 this.checkbox.checked ? 'remove' : 'add'
1289 ]('my-messages-right');
1290 }
1291 },{
1292 label: "Show images inline",
 
1293 boolValue: 'images-inline'
1294 },{
1295 label: "Timestamps in active users list",
 
1296 boolValue: 'active-user-list-timestamps'
1297 },
1298 namedOptions.activeUsers,{
1299 label: "Monospace message font",
 
1300 boolValue: 'monospace-messages',
1301 callback: function(setting){
1302 document.body.classList[
1303 setting.value ? 'add' : 'remove'
1304 ]('monospace-messages');
1305 }
1306 },{
1307 label: "Chat-only mode",
 
1308 boolValue: 'chat-only-mode'
1309 }];
1310
1311 /** Set up selection list of notification sounds. */
1312 if(1){
@@ -1327,10 +1339,11 @@
1327 }
1328 }
1329 Chat.setNewMessageSound(selectSound.value);
1330 settingsOps.push({
1331 label: "Audio alert",
 
1332 select: selectSound,
1333 callback: function(ev){
1334 const v = ev.target.value;
1335 Chat.setNewMessageSound(v);
1336 F.toast.message("Audio notifications "+(v ? "enabled" : "disabled")+".");
@@ -1344,10 +1357,13 @@
1344 settingsOps.forEach(function f(op){
1345 const line = D.addClass(D.div(), 'menu-entry');
1346 const btn = D.append(
1347 D.addClass(D.label(), 'cbutton'/*bootstrap skin hijacks 'button'*/),
1348 op.label);
 
 
 
1349 if(op.hasOwnProperty('select')){
1350 D.append(line, btn, op.select);
1351 if(op.callback){
1352 op.select.addEventListener('change', (ev)=>op.callback(ev), false);
1353 }
1354
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -1235,10 +1235,11 @@
1235 /** Internal acrobatics to allow certain settings toggles to access
1236 related toggles. */
1237 const namedOptions = {
1238 activeUsers:{
1239 label: "Show active users list",
1240 hint: "List users who have messages in the currently-loaded chat history.",
1241 boolValue: 'active-user-list'
1242 }
1243 };
1244 if(1){
1245 /* Per user request, toggle the list of users on and off if the
@@ -1277,36 +1278,47 @@
1278 elements stay in sync with the config UI via those settings
1279 events.
1280 */
1281 const settingsOps = [{
1282 label: "Multi-line input",
1283 hint: [
1284 "When the input field is empty, Ctrl-Enter or Shift-Enter will toggle this.",
1285 "In multi-line mode, Ctrl-Enter sends messages. In single-line mode, "
1286 +"Enter or Ctrl-Enter sends messages."
1287 ].join('\n'),
1288 boolValue: 'edit-multiline'
1289 },{
1290 label: "Left-align my posts",
1291 hint: "Default alignment of your own messages is selected "
1292 +"based window width/height relationship.",
1293 boolValue: ()=>!document.body.classList.contains('my-messages-right'),
1294 callback: function f(){
1295 document.body.classList[
1296 this.checkbox.checked ? 'remove' : 'add'
1297 ]('my-messages-right');
1298 }
1299 },{
1300 label: "Show images inline",
1301 hint: "Whether to show images inline or as a hyperlink.",
1302 boolValue: 'images-inline'
1303 },{
1304 label: "Timestamps in active users list",
1305 hint: "Whether to show last-message timestamps.",
1306 boolValue: 'active-user-list-timestamps'
1307 },
1308 namedOptions.activeUsers,{
1309 label: "Monospace message font",
1310 hint: "Use monospace font for message text?",
1311 boolValue: 'monospace-messages',
1312 callback: function(setting){
1313 document.body.classList[
1314 setting.value ? 'add' : 'remove'
1315 ]('monospace-messages');
1316 }
1317 },{
1318 label: "Chat-only mode",
1319 hint: "Toggle the page between normal fossil view and chat-only view.",
1320 boolValue: 'chat-only-mode'
1321 }];
1322
1323 /** Set up selection list of notification sounds. */
1324 if(1){
@@ -1327,10 +1339,11 @@
1339 }
1340 }
1341 Chat.setNewMessageSound(selectSound.value);
1342 settingsOps.push({
1343 label: "Audio alert",
1344 hint: "How to enable audio playback is browser-specific!",
1345 select: selectSound,
1346 callback: function(ev){
1347 const v = ev.target.value;
1348 Chat.setNewMessageSound(v);
1349 F.toast.message("Audio notifications "+(v ? "enabled" : "disabled")+".");
@@ -1344,10 +1357,13 @@
1357 settingsOps.forEach(function f(op){
1358 const line = D.addClass(D.div(), 'menu-entry');
1359 const btn = D.append(
1360 D.addClass(D.label(), 'cbutton'/*bootstrap skin hijacks 'button'*/),
1361 op.label);
1362 if(op.hint){
1363 D.append(btn,D.br(),D.append(D.span(),op.hint));
1364 }
1365 if(op.hasOwnProperty('select')){
1366 D.append(line, btn, op.select);
1367 if(op.callback){
1368 op.select.addEventListener('change', (ev)=>op.callback(ev), false);
1369 }
1370
M src/style.chat.css
+8 -2
--- src/style.chat.css
+++ src/style.chat.css
@@ -178,11 +178,11 @@
178178
 for FF/Chrome (and 2em is a *huge* waste of space for those). */
179179
 margin-bottom: 0;
180180
 }
181181
 #chat-input-field {
182182
 padding: 0.2em;
183
- flex: 20 1 auto;
183
+ flex: 50 1 auto;
184184
 border-width: 1px;
185185
 border-style: solid;
186186
 }
187187
188188
 /* Widget holding the chat message input field, send button, and
@@ -215,10 +215,11 @@
215215
 border-left-width: 3px;
216216
 border-right-style: double;
217217
 border-right-width: 3px;
218218
 max-height: 10em/*arbitrary!*/;
219219
 overflow: auto;
220
+ font-family: monospace;
220221
 }
221222
222223
 body.chat #chat-input-line.single-line #chat-edit-buttons > * {
223224
 margin: 0 0.25em;
224225
 }
@@ -306,17 +307,22 @@
306307
 flex-direction: column-reverse;
307308
 overflow: auto;
308309
 }
309310
 body.chat #chat-config #chat-config-options .menu-entry {
310311
 display: flex;
311
- align-items: center;
312
+ align-items: baseline;
312313
 flex-direction: row;
313314
 flex-wrap: nowrap;
314315
 padding: 1em;
315316
 }
316317
 body.chat #chat-config #chat-config-options .menu-entry > label {
317318
 cursor: pointer;
319
+}
320
+body.chat #chat-config #chat-config-options .menu-entry > label > span {
321
+ /* Config menu hint text */
322
+ font-size: 80%;
323
+ white-space: pre-wrap;
318324
 }
319325
 body.chat #chat-config #chat-config-options .menu-entry > input:first-child {
320326
 margin-right: 1em;
321327
 }
322328
 body.chat #chat-config #chat-config-options .menu-entry > label:first-child {
323329
--- src/style.chat.css
+++ src/style.chat.css
@@ -178,11 +178,11 @@
178 for FF/Chrome (and 2em is a *huge* waste of space for those). */
179 margin-bottom: 0;
180 }
181 #chat-input-field {
182 padding: 0.2em;
183 flex: 20 1 auto;
184 border-width: 1px;
185 border-style: solid;
186 }
187
188 /* Widget holding the chat message input field, send button, and
@@ -215,10 +215,11 @@
215 border-left-width: 3px;
216 border-right-style: double;
217 border-right-width: 3px;
218 max-height: 10em/*arbitrary!*/;
219 overflow: auto;
 
220 }
221
222 body.chat #chat-input-line.single-line #chat-edit-buttons > * {
223 margin: 0 0.25em;
224 }
@@ -306,17 +307,22 @@
306 flex-direction: column-reverse;
307 overflow: auto;
308 }
309 body.chat #chat-config #chat-config-options .menu-entry {
310 display: flex;
311 align-items: center;
312 flex-direction: row;
313 flex-wrap: nowrap;
314 padding: 1em;
315 }
316 body.chat #chat-config #chat-config-options .menu-entry > label {
317 cursor: pointer;
 
 
 
 
 
318 }
319 body.chat #chat-config #chat-config-options .menu-entry > input:first-child {
320 margin-right: 1em;
321 }
322 body.chat #chat-config #chat-config-options .menu-entry > label:first-child {
323
--- src/style.chat.css
+++ src/style.chat.css
@@ -178,11 +178,11 @@
178 for FF/Chrome (and 2em is a *huge* waste of space for those). */
179 margin-bottom: 0;
180 }
181 #chat-input-field {
182 padding: 0.2em;
183 flex: 50 1 auto;
184 border-width: 1px;
185 border-style: solid;
186 }
187
188 /* Widget holding the chat message input field, send button, and
@@ -215,10 +215,11 @@
215 border-left-width: 3px;
216 border-right-style: double;
217 border-right-width: 3px;
218 max-height: 10em/*arbitrary!*/;
219 overflow: auto;
220 font-family: monospace;
221 }
222
223 body.chat #chat-input-line.single-line #chat-edit-buttons > * {
224 margin: 0 0.25em;
225 }
@@ -306,17 +307,22 @@
307 flex-direction: column-reverse;
308 overflow: auto;
309 }
310 body.chat #chat-config #chat-config-options .menu-entry {
311 display: flex;
312 align-items: baseline;
313 flex-direction: row;
314 flex-wrap: nowrap;
315 padding: 1em;
316 }
317 body.chat #chat-config #chat-config-options .menu-entry > label {
318 cursor: pointer;
319 }
320 body.chat #chat-config #chat-config-options .menu-entry > label > span {
321 /* Config menu hint text */
322 font-size: 80%;
323 white-space: pre-wrap;
324 }
325 body.chat #chat-config #chat-config-options .menu-entry > input:first-child {
326 margin-right: 1em;
327 }
328 body.chat #chat-config #chat-config-options .menu-entry > label:first-child {
329

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button