Fossil SCM

Chat settings menu tweaks based on chat session feedback.

stephan 2020-12-25 15:27 trunk
Commit 9e797bf9bfa92debc5684d0f249853216d5534e64e0eb612c283396aaa23bdc2
Parent 9d86a4af61b8cb5…
2 files changed +35 -29 +5 -2
~ src/chat.js ~ src/default.css
M src/chat.js
+35 -29
--- src/chat.js
+++ src/chat.js
@@ -382,12 +382,12 @@
382382
 return rect.top + rect.height + 2;
383383
 }
384384
 });
385385
 /* Settings menu entries... */
386386
 const settingsOps = [{
387
- label: "Toggle chat-only mode",
388
- tooltip: "Toggles the page's header and footer on and off.",
387
+ label: "Chat-only mode",
388
+ boolValue: ()=>!!document.body.classList.contains('chat-only-mode'),
389389
 callback: function f(){
390390
 if(undefined === f.isHidden){
391391
 f.isHidden = false;
392392
 f.elemsToToggle = [];
393393
 document.body.childNodes.forEach(function(e){
@@ -424,13 +424,12 @@
424424
 D.removeClass(document.body, 'chat-only-mode');
425425
 iws.backgroundColor = f.initialBg;
426426
 }
427427
 }
428428
 },{
429
- label: "Toggle left/right layout",
430
- tooltip: "Toggles your own messages between the right (mobile-style) "+
431
- "or left of the screen (more readable on large windows).",
429
+ label: "Left-align my posts",
430
+ boolValue: ()=>'left'===Chat.msgMyAlign,
432431
 callback: function f(){
433432
 if('right'===Chat.msgMyAlign) Chat.msgMyAlign = 'left';
434433
 else Chat.msgMyAlign = 'right';
435434
 const msgs = Chat.e.messagesWrapper.querySelectorAll('.message-row');
436435
 msgs.forEach(function(row){
@@ -439,41 +438,48 @@
439438
 if('right'===Chat.msgMyAlign) row.style.justifyContent = "flex-end";
440439
 else row.style.justifyContent = "flex-start";
441440
 });
442441
 }
443442
 },{
444
- label: "Toggle images inline",
445
- persistent: true,
446
- tooltip: "Toggles whether newly-arrived images appear "+
447
- "inline or as download links.",
443
+ label: "Images inline",
444
+ boolValue: ()=>Chat.settings.getBool('images-inline'),
448445
 callback: function(){
449446
 const v = Chat.settings.getBool('images-inline',true);
450447
 Chat.settings.set('images-inline', !v);
451448
 F.toast.message("Image mode set to "+(v ? "hyperlink" : "inline")+".");
452449
 }
453450
 }];
454451
455
- settingsOps.forEach(function(op){
456
- const line = D.addClass(D.span(), 'menu-entry');
457
- const btn = D.append(D.addClass(D.span(), 'button'),
458
- (op.persistent ? "[P] " : "")+op.label);
459
- op.callback.button = btn;
460
- if('function'===op.init) op.init();
461
- if(op.tooltip){
462
- const help = D.span();
463
- D.append(line, help);
464
- F.helpButtonlets.create(help, op.tooltip);
465
- }
466
- D.append(line, btn);
467
- D.append(settingsPopup.e, line);
468
- btn.addEventListener('click', function(ev){
469
- settingsPopup.hide();
470
- op.callback.call(this,ev);
471
- });
472
- });
473
- D.append(settingsPopup.e, D.append(D.span(),"[P] = locally-persistent setting"));
474
- // settingsPopup.installClickToHide();// Don't do this for this popup!
452
+ /**
453
+ Rebuild the menu each time it's shown so that the toggles can
454
+ show their current values.
455
+ */
456
+ settingsPopup.options.refresh = function(){
457
+ D.clearElement(this.e);
458
+ settingsOps.forEach(function(op){
459
+ const line = D.addClass(D.span(), 'menu-entry');
460
+ const btn = D.append(D.addClass(D.span(), 'button'), op.label);
461
+ const callback = function(ev){
462
+ settingsPopup.hide();
463
+ op.callback.call(this,ev);
464
+ };
465
+ D.append(line, btn);
466
+ if(op.hasOwnProperty('boolValue')){
467
+ const check = D.checkbox(1, op.boolValue());
468
+ D.append(line, check);
469
+ check.addEventListener('click', callback);
470
+ }
471
+ D.append(settingsPopup.e, line);
472
+ btn.addEventListener('click', callback);
473
+ });
474
+ };
475
+ /**
476
+ Reminder:
477
+ settingsPopup.installClickToHide();
478
+ Don't do this for this popup! It interferes with the embedded
479
+ "?" buttons in the popup, which are also PopupWidget users.
480
+ */
475481
 settingsButton.addEventListener('click',function(ev){
476482
 //ev.preventDefault();
477483
 if(settingsPopup.isShown()) settingsPopup.hide();
478484
 else settingsPopup.show(settingsButton);
479485
 /* Reminder: we cannot toggle the visibility from her
480486
--- src/chat.js
+++ src/chat.js
@@ -382,12 +382,12 @@
382 return rect.top + rect.height + 2;
383 }
384 });
385 /* Settings menu entries... */
386 const settingsOps = [{
387 label: "Toggle chat-only mode",
388 tooltip: "Toggles the page's header and footer on and off.",
389 callback: function f(){
390 if(undefined === f.isHidden){
391 f.isHidden = false;
392 f.elemsToToggle = [];
393 document.body.childNodes.forEach(function(e){
@@ -424,13 +424,12 @@
424 D.removeClass(document.body, 'chat-only-mode');
425 iws.backgroundColor = f.initialBg;
426 }
427 }
428 },{
429 label: "Toggle left/right layout",
430 tooltip: "Toggles your own messages between the right (mobile-style) "+
431 "or left of the screen (more readable on large windows).",
432 callback: function f(){
433 if('right'===Chat.msgMyAlign) Chat.msgMyAlign = 'left';
434 else Chat.msgMyAlign = 'right';
435 const msgs = Chat.e.messagesWrapper.querySelectorAll('.message-row');
436 msgs.forEach(function(row){
@@ -439,41 +438,48 @@
439 if('right'===Chat.msgMyAlign) row.style.justifyContent = "flex-end";
440 else row.style.justifyContent = "flex-start";
441 });
442 }
443 },{
444 label: "Toggle images inline",
445 persistent: true,
446 tooltip: "Toggles whether newly-arrived images appear "+
447 "inline or as download links.",
448 callback: function(){
449 const v = Chat.settings.getBool('images-inline',true);
450 Chat.settings.set('images-inline', !v);
451 F.toast.message("Image mode set to "+(v ? "hyperlink" : "inline")+".");
452 }
453 }];
454
455 settingsOps.forEach(function(op){
456 const line = D.addClass(D.span(), 'menu-entry');
457 const btn = D.append(D.addClass(D.span(), 'button'),
458 (op.persistent ? "[P] " : "")+op.label);
459 op.callback.button = btn;
460 if('function'===op.init) op.init();
461 if(op.tooltip){
462 const help = D.span();
463 D.append(line, help);
464 F.helpButtonlets.create(help, op.tooltip);
465 }
466 D.append(line, btn);
467 D.append(settingsPopup.e, line);
468 btn.addEventListener('click', function(ev){
469 settingsPopup.hide();
470 op.callback.call(this,ev);
471 });
472 });
473 D.append(settingsPopup.e, D.append(D.span(),"[P] = locally-persistent setting"));
474 // settingsPopup.installClickToHide();// Don't do this for this popup!
 
 
 
 
 
 
 
 
 
475 settingsButton.addEventListener('click',function(ev){
476 //ev.preventDefault();
477 if(settingsPopup.isShown()) settingsPopup.hide();
478 else settingsPopup.show(settingsButton);
479 /* Reminder: we cannot toggle the visibility from her
480
--- src/chat.js
+++ src/chat.js
@@ -382,12 +382,12 @@
382 return rect.top + rect.height + 2;
383 }
384 });
385 /* Settings menu entries... */
386 const settingsOps = [{
387 label: "Chat-only mode",
388 boolValue: ()=>!!document.body.classList.contains('chat-only-mode'),
389 callback: function f(){
390 if(undefined === f.isHidden){
391 f.isHidden = false;
392 f.elemsToToggle = [];
393 document.body.childNodes.forEach(function(e){
@@ -424,13 +424,12 @@
424 D.removeClass(document.body, 'chat-only-mode');
425 iws.backgroundColor = f.initialBg;
426 }
427 }
428 },{
429 label: "Left-align my posts",
430 boolValue: ()=>'left'===Chat.msgMyAlign,
 
431 callback: function f(){
432 if('right'===Chat.msgMyAlign) Chat.msgMyAlign = 'left';
433 else Chat.msgMyAlign = 'right';
434 const msgs = Chat.e.messagesWrapper.querySelectorAll('.message-row');
435 msgs.forEach(function(row){
@@ -439,41 +438,48 @@
438 if('right'===Chat.msgMyAlign) row.style.justifyContent = "flex-end";
439 else row.style.justifyContent = "flex-start";
440 });
441 }
442 },{
443 label: "Images inline",
444 boolValue: ()=>Chat.settings.getBool('images-inline'),
 
 
445 callback: function(){
446 const v = Chat.settings.getBool('images-inline',true);
447 Chat.settings.set('images-inline', !v);
448 F.toast.message("Image mode set to "+(v ? "hyperlink" : "inline")+".");
449 }
450 }];
451
452 /**
453 Rebuild the menu each time it's shown so that the toggles can
454 show their current values.
455 */
456 settingsPopup.options.refresh = function(){
457 D.clearElement(this.e);
458 settingsOps.forEach(function(op){
459 const line = D.addClass(D.span(), 'menu-entry');
460 const btn = D.append(D.addClass(D.span(), 'button'), op.label);
461 const callback = function(ev){
462 settingsPopup.hide();
463 op.callback.call(this,ev);
464 };
465 D.append(line, btn);
466 if(op.hasOwnProperty('boolValue')){
467 const check = D.checkbox(1, op.boolValue());
468 D.append(line, check);
469 check.addEventListener('click', callback);
470 }
471 D.append(settingsPopup.e, line);
472 btn.addEventListener('click', callback);
473 });
474 };
475 /**
476 Reminder:
477 settingsPopup.installClickToHide();
478 Don't do this for this popup! It interferes with the embedded
479 "?" buttons in the popup, which are also PopupWidget users.
480 */
481 settingsButton.addEventListener('click',function(ev){
482 //ev.preventDefault();
483 if(settingsPopup.isShown()) settingsPopup.hide();
484 else settingsPopup.show(settingsButton);
485 /* Reminder: we cannot toggle the visibility from her
486
M src/default.css
+5 -2
--- src/default.css
+++ src/default.css
@@ -1589,12 +1589,15 @@
15891589
 body.chat .chat-settings-popup > span.menu-entry{
15901590
 white-space: nowrap;
15911591
 cursor: pointer;
15921592
 border: 1px outset;
15931593
 border-radius: 0.25em;
1594
- margin: 0.25em 0.2em;
1595
- padding: 0.5em;
1594
+ padding: 0.25em 0.5em;
1595
+ display: flex;
1596
+ flex-direction: row;
1597
+ align-items: center;
1598
+ justify-content: space-between;
15961599
 }
15971600
 body.chat .chat-settings-popup > span.menu-entry > .help-buttonlet {
15981601
 vertical-align: middle;
15991602
 }
16001603
 body.chat .chat-settings-popup > span.menu-entry > span.button {
16011604
--- src/default.css
+++ src/default.css
@@ -1589,12 +1589,15 @@
1589 body.chat .chat-settings-popup > span.menu-entry{
1590 white-space: nowrap;
1591 cursor: pointer;
1592 border: 1px outset;
1593 border-radius: 0.25em;
1594 margin: 0.25em 0.2em;
1595 padding: 0.5em;
 
 
 
1596 }
1597 body.chat .chat-settings-popup > span.menu-entry > .help-buttonlet {
1598 vertical-align: middle;
1599 }
1600 body.chat .chat-settings-popup > span.menu-entry > span.button {
1601
--- src/default.css
+++ src/default.css
@@ -1589,12 +1589,15 @@
1589 body.chat .chat-settings-popup > span.menu-entry{
1590 white-space: nowrap;
1591 cursor: pointer;
1592 border: 1px outset;
1593 border-radius: 0.25em;
1594 padding: 0.25em 0.5em;
1595 display: flex;
1596 flex-direction: row;
1597 align-items: center;
1598 justify-content: space-between;
1599 }
1600 body.chat .chat-settings-popup > span.menu-entry > .help-buttonlet {
1601 vertical-align: middle;
1602 }
1603 body.chat .chat-settings-popup > span.menu-entry > span.button {
1604

Keyboard Shortcuts

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