Fossil SCM

Added settings popup to chat. Currently only 1 setting - toggling the page header/footer on/off.

stephan 2020-12-25 10:04 trunk
Commit 617e23bea3ea057a0fe33c9cb34e141666a4770fb8ba93e31f3d80290287b89a
Parent 12682568f0c60b5…
3 files changed +1 +44 +27
~ src/chat.c ~ src/chat.js ~ src/default.css
M src/chat.c
+1
--- src/chat.c
+++ src/chat.c
@@ -155,10 +155,11 @@
155155
 @ <div id='chat-input-area'>
156156
 @ <div id='chat-input-line'>
157157
 @ <input type="text" name="msg" id="sbox" \
158158
 @ placeholder="Type message here.">
159159
 @ <input type="submit" value="Send">
160
+ @ <span id="chat-settings-button" class="settings-icon"></span>
160161
 @ </div>
161162
 @ <div id='chat-input-file-area'>
162163
 @ <div class='file-selection-wrapper'>
163164
 @ <div class='help-buttonlet'>
164165
 @ Select a file to upload, drag/drop a file into this spot,
165166
--- src/chat.c
+++ src/chat.c
@@ -155,10 +155,11 @@
155 @ <div id='chat-input-area'>
156 @ <div id='chat-input-line'>
157 @ <input type="text" name="msg" id="sbox" \
158 @ placeholder="Type message here.">
159 @ <input type="submit" value="Send">
 
160 @ </div>
161 @ <div id='chat-input-file-area'>
162 @ <div class='file-selection-wrapper'>
163 @ <div class='help-buttonlet'>
164 @ Select a file to upload, drag/drop a file into this spot,
165
--- src/chat.c
+++ src/chat.c
@@ -155,10 +155,11 @@
155 @ <div id='chat-input-area'>
156 @ <div id='chat-input-line'>
157 @ <input type="text" name="msg" id="sbox" \
158 @ placeholder="Type message here.">
159 @ <input type="submit" value="Send">
160 @ <span id="chat-settings-button" class="settings-icon"></span>
161 @ </div>
162 @ <div id='chat-input-file-area'>
163 @ <div class='file-selection-wrapper'>
164 @ <div class='help-buttonlet'>
165 @ Select a file to upload, drag/drop a file into this spot,
166
M src/chat.js
+44
--- src/chat.js
+++ src/chat.js
@@ -348,10 +348,54 @@
348348
 x -= pRect.width/3*2;
349349
 }
350350
 f.popup.show(x, y);
351351
 }/*handleLegendClicked()*/;
352352
353
+ (function(){/*Set up #chat-settings-button */
354
+ const settingsButton = document.querySelector('#chat-settings-button');
355
+ var popupSize = undefined/*placement workaround*/;
356
+ const settingsPopup = new F.PopupWidget({
357
+ cssClass: ['fossil-tooltip', 'chat-settings-popup'],
358
+ adjustY: function(y){
359
+ const rect = settingsButton.getBoundingClientRect();
360
+ return rect.top + rect.height;
361
+ }
362
+ });
363
+ settingsPopup.installClickToHide();
364
+ const btnToggleBody = D.button("Toggle page body");
365
+ D.append(settingsPopup.e, btnToggleBody);
366
+ const toggleBody = function f(){
367
+ if(f.isHidden) D.removeClass(f.elemsToToggle, 'hidden');
368
+ else D.addClass(f.elemsToToggle, 'hidden');
369
+ f.isHidden = !f.isHidden;
370
+ };
371
+ toggleBody.elemsToToggle = [];
372
+ toggleBody.isHidden = false;
373
+ document.body.childNodes.forEach(function(e){
374
+ if(!e.classList) return/*TEXT nodes and such*/;
375
+ else if(!e.classList.contains('content')){
376
+ toggleBody.elemsToToggle.push(e);
377
+ }
378
+ settingsPopup.hide();
379
+ });
380
+ btnToggleBody.addEventListener('click', toggleBody);
381
+ settingsButton.addEventListener('click',function(){
382
+ settingsPopup.show(settingsButton);
383
+ });
384
+ /* Find an ideal X position for the popup, directly under the settings
385
+ button, based on the size of the popup... */
386
+ settingsPopup.show(document.body);
387
+ popupSize = settingsPopup.e.getBoundingClientRect();
388
+ settingsPopup.hide();
389
+ settingsPopup.options.adjustX = function(x){
390
+ const rect = settingsButton.getBoundingClientRect();
391
+ console.debug("popupSize = ",popupSize);
392
+ return rect.right - popupSize.width;
393
+ };
394
+ })()/*#chat-settings-button setup*/;
395
+
396
+
353397
 /** Callback for poll() to inject new content into the page. jx ==
354398
 the response from /chat-poll. If atEnd is true, the message is
355399
 appended to the end of the chat list, else the beginning (the
356400
 default). */
357401
 const newcontent = function f(jx,atEnd){
358402
--- src/chat.js
+++ src/chat.js
@@ -348,10 +348,54 @@
348 x -= pRect.width/3*2;
349 }
350 f.popup.show(x, y);
351 }/*handleLegendClicked()*/;
352
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
353 /** Callback for poll() to inject new content into the page. jx ==
354 the response from /chat-poll. If atEnd is true, the message is
355 appended to the end of the chat list, else the beginning (the
356 default). */
357 const newcontent = function f(jx,atEnd){
358
--- src/chat.js
+++ src/chat.js
@@ -348,10 +348,54 @@
348 x -= pRect.width/3*2;
349 }
350 f.popup.show(x, y);
351 }/*handleLegendClicked()*/;
352
353 (function(){/*Set up #chat-settings-button */
354 const settingsButton = document.querySelector('#chat-settings-button');
355 var popupSize = undefined/*placement workaround*/;
356 const settingsPopup = new F.PopupWidget({
357 cssClass: ['fossil-tooltip', 'chat-settings-popup'],
358 adjustY: function(y){
359 const rect = settingsButton.getBoundingClientRect();
360 return rect.top + rect.height;
361 }
362 });
363 settingsPopup.installClickToHide();
364 const btnToggleBody = D.button("Toggle page body");
365 D.append(settingsPopup.e, btnToggleBody);
366 const toggleBody = function f(){
367 if(f.isHidden) D.removeClass(f.elemsToToggle, 'hidden');
368 else D.addClass(f.elemsToToggle, 'hidden');
369 f.isHidden = !f.isHidden;
370 };
371 toggleBody.elemsToToggle = [];
372 toggleBody.isHidden = false;
373 document.body.childNodes.forEach(function(e){
374 if(!e.classList) return/*TEXT nodes and such*/;
375 else if(!e.classList.contains('content')){
376 toggleBody.elemsToToggle.push(e);
377 }
378 settingsPopup.hide();
379 });
380 btnToggleBody.addEventListener('click', toggleBody);
381 settingsButton.addEventListener('click',function(){
382 settingsPopup.show(settingsButton);
383 });
384 /* Find an ideal X position for the popup, directly under the settings
385 button, based on the size of the popup... */
386 settingsPopup.show(document.body);
387 popupSize = settingsPopup.e.getBoundingClientRect();
388 settingsPopup.hide();
389 settingsPopup.options.adjustX = function(x){
390 const rect = settingsButton.getBoundingClientRect();
391 console.debug("popupSize = ",popupSize);
392 return rect.right - popupSize.width;
393 };
394 })()/*#chat-settings-button setup*/;
395
396
397 /** Callback for poll() to inject new content into the page. jx ==
398 the response from /chat-poll. If atEnd is true, the message is
399 appended to the end of the chat list, else the beginning (the
400 default). */
401 const newcontent = function f(jx,atEnd){
402
M src/default.css
+27
--- src/default.css
+++ src/default.css
@@ -1532,10 +1532,11 @@
15321532
 }
15331533
15341534
 body.chat .load-msg-toolbar {
15351535
 border-radius: 0.25em;
15361536
 padding: 0.1em 0.2em;
1537
+ margin-bottom: 1em;
15371538
 }
15381539
 body.chat .load-msg-toolbar.all-done {
15391540
 opacity: 0.5;
15401541
 }
15411542
 body.chat .load-msg-toolbar > div {
@@ -1545,5 +1546,31 @@
15451546
 flex-wrap: wrap;
15461547
 }
15471548
 body.chat .load-msg-toolbar > div > button {
15481549
 flex: 1 1 auto;
15491550
 }
1551
+
1552
+.settings-icon {
1553
+ /* Icon source: https://de.wikipedia.org/wiki/Datei:OOjs_UI_icon_settings.svg
1554
+ MIT License. */
1555
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0, 0, 24, 24'%3e%3cg id='settings'%3e%3cpath id='gear' d='M3 4h3v2h-3zM12 4h9v2h-9zM8 3h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 11h9v2h-9zM18 11h3v2h-3zM14 10h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 18h6v2h-6zM15 18h6v2h-6zM11 17h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1z'/%3e%3c/g%3e%3c/svg%3e");
1556
+ background-repeat: no-repeat;
1557
+ background-position: center;
1558
+ display: inline-block;
1559
+ min-height: 1em;
1560
+ max-height: 1em;
1561
+ min-width: 1em;
1562
+ max-width: 1em;
1563
+ margin: 0;
1564
+ padding: 0.2em/*needed to avoid image truncation*/;
1565
+}
1566
+body.chat #chat-settings-button {
1567
+}
1568
+body.chat .chat-settings-popup {
1569
+ font-size: 0.8em;
1570
+ text-align: left;
1571
+ opacity: 0.8;
1572
+ display: flex;
1573
+ flex-direction: column;
1574
+ align-items: stretch;
1575
+ padding: 0.25em;
1576
+}
15501577
--- src/default.css
+++ src/default.css
@@ -1532,10 +1532,11 @@
1532 }
1533
1534 body.chat .load-msg-toolbar {
1535 border-radius: 0.25em;
1536 padding: 0.1em 0.2em;
 
1537 }
1538 body.chat .load-msg-toolbar.all-done {
1539 opacity: 0.5;
1540 }
1541 body.chat .load-msg-toolbar > div {
@@ -1545,5 +1546,31 @@
1545 flex-wrap: wrap;
1546 }
1547 body.chat .load-msg-toolbar > div > button {
1548 flex: 1 1 auto;
1549 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1550
--- src/default.css
+++ src/default.css
@@ -1532,10 +1532,11 @@
1532 }
1533
1534 body.chat .load-msg-toolbar {
1535 border-radius: 0.25em;
1536 padding: 0.1em 0.2em;
1537 margin-bottom: 1em;
1538 }
1539 body.chat .load-msg-toolbar.all-done {
1540 opacity: 0.5;
1541 }
1542 body.chat .load-msg-toolbar > div {
@@ -1545,5 +1546,31 @@
1546 flex-wrap: wrap;
1547 }
1548 body.chat .load-msg-toolbar > div > button {
1549 flex: 1 1 auto;
1550 }
1551
1552 .settings-icon {
1553 /* Icon source: https://de.wikipedia.org/wiki/Datei:OOjs_UI_icon_settings.svg
1554 MIT License. */
1555 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0, 0, 24, 24'%3e%3cg id='settings'%3e%3cpath id='gear' d='M3 4h3v2h-3zM12 4h9v2h-9zM8 3h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 11h9v2h-9zM18 11h3v2h-3zM14 10h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 18h6v2h-6zM15 18h6v2h-6zM11 17h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1z'/%3e%3c/g%3e%3c/svg%3e");
1556 background-repeat: no-repeat;
1557 background-position: center;
1558 display: inline-block;
1559 min-height: 1em;
1560 max-height: 1em;
1561 min-width: 1em;
1562 max-width: 1em;
1563 margin: 0;
1564 padding: 0.2em/*needed to avoid image truncation*/;
1565 }
1566 body.chat #chat-settings-button {
1567 }
1568 body.chat .chat-settings-popup {
1569 font-size: 0.8em;
1570 text-align: left;
1571 opacity: 0.8;
1572 display: flex;
1573 flex-direction: column;
1574 align-items: stretch;
1575 padding: 0.25em;
1576 }
1577

Keyboard Shortcuts

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