Fossil SCM

Disable chat animations during the bootstrapping process. Increated timestamp size a tick. Xekri CSS tweak to eliminate body-level scrollbars in chat-only mode.

stephan 2021-09-24 12:07 chat-user-filter
Commit 4ff16c05727460ec247a924d35afe4b443bd5a8976ee9c0f539242072f91fde5
Parent 3d4101d354708a2…
3 files changed +2 -1 +18 -5 +2 -2
~ skins/xekri/css.txt ~ src/chat.js ~ src/style.chat.css
M skins/xekri/css.txt
+2 -1
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -237,11 +237,11 @@
237237
 div.footer div {
238238
 background-color: #222;
239239
 box-shadow: 3px 3px 1px #000;
240240
 border-radius: 0 0 1rem 1rem;
241241
 margin: 0 0 10px 0;
242
- padding: 0.5rem 0.75rem;
242
+ padding: 0.25rem 0.75rem;
243243
 }
244244
245245
 div.footer div.page-time {
246246
 float: left;
247247
 }
@@ -1157,12 +1157,13 @@
11571157
 body.chat div.header, body.chat div.footer,
11581158
 body.chat div.mainmenu, body.chat div.submenu,
11591159
 body.chat div.content {
11601160
 margin-left: auto;
11611161
 margin-right: auto;
1162
+ margin-top: auto/*eliminates unnecessary scrollbars*/;
11621163
 }
11631164
 body.chat.chat-only-mode div.content {
11641165
 max-width: revert;
11651166
 }
11661167
 body.chat #chat-user-list .chat-user{
11671168
 color: white;
11681169
 }
11691170
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -237,11 +237,11 @@
237 div.footer div {
238 background-color: #222;
239 box-shadow: 3px 3px 1px #000;
240 border-radius: 0 0 1rem 1rem;
241 margin: 0 0 10px 0;
242 padding: 0.5rem 0.75rem;
243 }
244
245 div.footer div.page-time {
246 float: left;
247 }
@@ -1157,12 +1157,13 @@
1157 body.chat div.header, body.chat div.footer,
1158 body.chat div.mainmenu, body.chat div.submenu,
1159 body.chat div.content {
1160 margin-left: auto;
1161 margin-right: auto;
 
1162 }
1163 body.chat.chat-only-mode div.content {
1164 max-width: revert;
1165 }
1166 body.chat #chat-user-list .chat-user{
1167 color: white;
1168 }
1169
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -237,11 +237,11 @@
237 div.footer div {
238 background-color: #222;
239 box-shadow: 3px 3px 1px #000;
240 border-radius: 0 0 1rem 1rem;
241 margin: 0 0 10px 0;
242 padding: 0.25rem 0.75rem;
243 }
244
245 div.footer div.page-time {
246 float: left;
247 }
@@ -1157,12 +1157,13 @@
1157 body.chat div.header, body.chat div.footer,
1158 body.chat div.mainmenu, body.chat div.submenu,
1159 body.chat div.content {
1160 margin-left: auto;
1161 margin-right: auto;
1162 margin-top: auto/*eliminates unnecessary scrollbars*/;
1163 }
1164 body.chat.chat-only-mode div.content {
1165 max-width: revert;
1166 }
1167 body.chat #chat-user-list .chat-user{
1168 color: white;
1169 }
1170
M src/chat.js
+18 -5
--- src/chat.js
+++ src/chat.js
@@ -202,11 +202,11 @@
202202
 D.removeClass(this.e.inputCurrent, 'hidden');
203203
 const mh2 = m.clientHeight;
204204
 m.scrollTo(0, sTop + (mh1-mh2));
205205
 this.e.inputCurrent.value = old.value;
206206
 old.value = '';
207
- D.addClassBriefly(this.e.inputCurrent, "anim-flip-v");
207
+ this.animate(this.e.inputCurrent, "anim-flip-v");
208208
 return this;
209209
 },
210210
 /**
211211
 If passed true or no arguments, switches to multi-line mode
212212
 if currently in single-line mode. If passed false, switches
@@ -523,12 +523,25 @@
523523
 else this.scrollMessagesTo(1);
524524
 cs.e.activeUserList.querySelectorAll('.chat-user').forEach(function(e){
525525
 e.classList[uname===e.dataset.uname ? 'add' : 'remove']('selected');
526526
 });
527527
 return this;
528
+ },
529
+
530
+ /**
531
+ If animations are enabled, passes its arguments
532
+ to D.addClassBriefly(), else this is a no-op.
533
+ Returns this object;
534
+ */
535
+ animate: function f(e,a){
536
+ if(!f.$disabled){
537
+ D.addClassBriefly(e, a);
538
+ }
539
+ return this;
528540
 }
529541
 };
542
+ cs.animate.$disabled = true;
530543
 F.fetch.beforesend = ()=>cs.ajaxStart();
531544
 F.fetch.aftersend = ()=>cs.ajaxEnd();
532545
 cs.e.inputCurrent = cs.e.inputSingle;
533546
 /* Install default settings... */
534547
 Object.keys(cs.settings.defaults).forEach(function(k){
@@ -994,18 +1007,17 @@
9941007
 "Message in context",
9951008
 function(){
9961009
 self.hide();
9971010
 Chat.setUserFilter(false);
9981011
 eMsg.scrollIntoView(false);
999
- D.addClassBriefly(
1012
+ Chat.animate(
10001013
 eMsg.firstElementChild, 'anim-rotate-360'
10011014
 //eMsg.firstElementChild, 'anim-flip-v'
10021015
 //eMsg.childNodes, 'anim-rotate-360'
10031016
 //eMsg.childNodes, 'anim-flip-v'
10041017
 //eMsg, 'anim-flip-v'
10051018
 );
1006
- //D.addClassBriefly(eMsg.childNodes[1], 'anim-flip-h');
10071019
 })
10081020
 )
10091021
 );
10101022
 }/*jump-to button*/
10111023
 }
@@ -1229,11 +1241,11 @@
12291241
 now, but because viewMessages is currently hidden behind
12301242
 viewConfig, scrolling is a no-op. */
12311243
 Chat.scrollMessagesTo(1);
12321244
 }else{
12331245
 Chat.updateActiveUserList();
1234
- D.addClassBriefly(Chat.e.activeUserListWrapper, "anim-flip-v");
1246
+ Chat.animate(Chat.e.activeUserListWrapper, "anim-flip-v");
12351247
 }
12361248
 }
12371249
 }
12381250
 };
12391251
 /* Settings menu entries... Remember that they will be rendered in
@@ -1608,13 +1620,14 @@
16081620
 if( window.fossil.config.chat.fromcli ){
16091621
 Chat.chatOnlyMode(true);
16101622
 }
16111623
 Chat.intervalTimer = setInterval(poll, 1000);
16121624
 if(0){
1613
- const flip = (ev)=>F.dom.addClassBriefly(ev.target,'anim-flip-h');
1625
+ const flip = (ev)=>Chat.animate(ev.target,'anim-flip-h');
16141626
 document.querySelectorAll('#chat-edit-buttons button').forEach(function(e){
16151627
 e.addEventListener('click',flip, false);
16161628
 });
16171629
 }
16181630
 setTimeout( ()=>Chat.inputFocus(), 0 );
1631
+ Chat.animate.$disabled = false;
16191632
 F.page.chat = Chat/* enables testing the APIs via the dev tools */;
16201633
 })();
16211634
--- src/chat.js
+++ src/chat.js
@@ -202,11 +202,11 @@
202 D.removeClass(this.e.inputCurrent, 'hidden');
203 const mh2 = m.clientHeight;
204 m.scrollTo(0, sTop + (mh1-mh2));
205 this.e.inputCurrent.value = old.value;
206 old.value = '';
207 D.addClassBriefly(this.e.inputCurrent, "anim-flip-v");
208 return this;
209 },
210 /**
211 If passed true or no arguments, switches to multi-line mode
212 if currently in single-line mode. If passed false, switches
@@ -523,12 +523,25 @@
523 else this.scrollMessagesTo(1);
524 cs.e.activeUserList.querySelectorAll('.chat-user').forEach(function(e){
525 e.classList[uname===e.dataset.uname ? 'add' : 'remove']('selected');
526 });
527 return this;
 
 
 
 
 
 
 
 
 
 
 
 
528 }
529 };
 
530 F.fetch.beforesend = ()=>cs.ajaxStart();
531 F.fetch.aftersend = ()=>cs.ajaxEnd();
532 cs.e.inputCurrent = cs.e.inputSingle;
533 /* Install default settings... */
534 Object.keys(cs.settings.defaults).forEach(function(k){
@@ -994,18 +1007,17 @@
994 "Message in context",
995 function(){
996 self.hide();
997 Chat.setUserFilter(false);
998 eMsg.scrollIntoView(false);
999 D.addClassBriefly(
1000 eMsg.firstElementChild, 'anim-rotate-360'
1001 //eMsg.firstElementChild, 'anim-flip-v'
1002 //eMsg.childNodes, 'anim-rotate-360'
1003 //eMsg.childNodes, 'anim-flip-v'
1004 //eMsg, 'anim-flip-v'
1005 );
1006 //D.addClassBriefly(eMsg.childNodes[1], 'anim-flip-h');
1007 })
1008 )
1009 );
1010 }/*jump-to button*/
1011 }
@@ -1229,11 +1241,11 @@
1229 now, but because viewMessages is currently hidden behind
1230 viewConfig, scrolling is a no-op. */
1231 Chat.scrollMessagesTo(1);
1232 }else{
1233 Chat.updateActiveUserList();
1234 D.addClassBriefly(Chat.e.activeUserListWrapper, "anim-flip-v");
1235 }
1236 }
1237 }
1238 };
1239 /* Settings menu entries... Remember that they will be rendered in
@@ -1608,13 +1620,14 @@
1608 if( window.fossil.config.chat.fromcli ){
1609 Chat.chatOnlyMode(true);
1610 }
1611 Chat.intervalTimer = setInterval(poll, 1000);
1612 if(0){
1613 const flip = (ev)=>F.dom.addClassBriefly(ev.target,'anim-flip-h');
1614 document.querySelectorAll('#chat-edit-buttons button').forEach(function(e){
1615 e.addEventListener('click',flip, false);
1616 });
1617 }
1618 setTimeout( ()=>Chat.inputFocus(), 0 );
 
1619 F.page.chat = Chat/* enables testing the APIs via the dev tools */;
1620 })();
1621
--- src/chat.js
+++ src/chat.js
@@ -202,11 +202,11 @@
202 D.removeClass(this.e.inputCurrent, 'hidden');
203 const mh2 = m.clientHeight;
204 m.scrollTo(0, sTop + (mh1-mh2));
205 this.e.inputCurrent.value = old.value;
206 old.value = '';
207 this.animate(this.e.inputCurrent, "anim-flip-v");
208 return this;
209 },
210 /**
211 If passed true or no arguments, switches to multi-line mode
212 if currently in single-line mode. If passed false, switches
@@ -523,12 +523,25 @@
523 else this.scrollMessagesTo(1);
524 cs.e.activeUserList.querySelectorAll('.chat-user').forEach(function(e){
525 e.classList[uname===e.dataset.uname ? 'add' : 'remove']('selected');
526 });
527 return this;
528 },
529
530 /**
531 If animations are enabled, passes its arguments
532 to D.addClassBriefly(), else this is a no-op.
533 Returns this object;
534 */
535 animate: function f(e,a){
536 if(!f.$disabled){
537 D.addClassBriefly(e, a);
538 }
539 return this;
540 }
541 };
542 cs.animate.$disabled = true;
543 F.fetch.beforesend = ()=>cs.ajaxStart();
544 F.fetch.aftersend = ()=>cs.ajaxEnd();
545 cs.e.inputCurrent = cs.e.inputSingle;
546 /* Install default settings... */
547 Object.keys(cs.settings.defaults).forEach(function(k){
@@ -994,18 +1007,17 @@
1007 "Message in context",
1008 function(){
1009 self.hide();
1010 Chat.setUserFilter(false);
1011 eMsg.scrollIntoView(false);
1012 Chat.animate(
1013 eMsg.firstElementChild, 'anim-rotate-360'
1014 //eMsg.firstElementChild, 'anim-flip-v'
1015 //eMsg.childNodes, 'anim-rotate-360'
1016 //eMsg.childNodes, 'anim-flip-v'
1017 //eMsg, 'anim-flip-v'
1018 );
 
1019 })
1020 )
1021 );
1022 }/*jump-to button*/
1023 }
@@ -1229,11 +1241,11 @@
1241 now, but because viewMessages is currently hidden behind
1242 viewConfig, scrolling is a no-op. */
1243 Chat.scrollMessagesTo(1);
1244 }else{
1245 Chat.updateActiveUserList();
1246 Chat.animate(Chat.e.activeUserListWrapper, "anim-flip-v");
1247 }
1248 }
1249 }
1250 };
1251 /* Settings menu entries... Remember that they will be rendered in
@@ -1608,13 +1620,14 @@
1620 if( window.fossil.config.chat.fromcli ){
1621 Chat.chatOnlyMode(true);
1622 }
1623 Chat.intervalTimer = setInterval(poll, 1000);
1624 if(0){
1625 const flip = (ev)=>Chat.animate(ev.target,'anim-flip-h');
1626 document.querySelectorAll('#chat-edit-buttons button').forEach(function(e){
1627 e.addEventListener('click',flip, false);
1628 });
1629 }
1630 setTimeout( ()=>Chat.inputFocus(), 0 );
1631 Chat.animate.$disabled = false;
1632 F.page.chat = Chat/* enables testing the APIs via the dev tools */;
1633 })();
1634
M src/style.chat.css
+2 -2
--- src/style.chat.css
+++ src/style.chat.css
@@ -232,11 +232,11 @@
232232
 }
233233
 body.chat #chat-input-file-area > .file-selection-wrapper {
234234
 align-self: flex-start;
235235
 margin-right: 0.5em;
236236
 flex: 0 1 auto;
237
- padding: 0.25em 0.25em 0.25em 0;
237
+ padding: 0.25em 0.5em;
238238
 white-space: nowrap;
239239
 }
240240
 body.chat #chat-input-file-area .file-selection-wrapper > * {
241241
 vertical-align: middle;
242242
 margin: 0;
@@ -359,11 +359,11 @@
359359
 cursor: pointer;
360360
 text-align: center;
361361
 white-space: pre;
362362
 }
363363
 body.chat #chat-user-list .timestamp {
364
- font-size: 80%;
364
+ font-size: 85%;
365365
 font-family: monospace;
366366
 }
367367
 body.chat #chat-user-list:not(.timestamps) .timestamp {
368368
 display: none;
369369
 }
370370
--- src/style.chat.css
+++ src/style.chat.css
@@ -232,11 +232,11 @@
232 }
233 body.chat #chat-input-file-area > .file-selection-wrapper {
234 align-self: flex-start;
235 margin-right: 0.5em;
236 flex: 0 1 auto;
237 padding: 0.25em 0.25em 0.25em 0;
238 white-space: nowrap;
239 }
240 body.chat #chat-input-file-area .file-selection-wrapper > * {
241 vertical-align: middle;
242 margin: 0;
@@ -359,11 +359,11 @@
359 cursor: pointer;
360 text-align: center;
361 white-space: pre;
362 }
363 body.chat #chat-user-list .timestamp {
364 font-size: 80%;
365 font-family: monospace;
366 }
367 body.chat #chat-user-list:not(.timestamps) .timestamp {
368 display: none;
369 }
370
--- src/style.chat.css
+++ src/style.chat.css
@@ -232,11 +232,11 @@
232 }
233 body.chat #chat-input-file-area > .file-selection-wrapper {
234 align-self: flex-start;
235 margin-right: 0.5em;
236 flex: 0 1 auto;
237 padding: 0.25em 0.5em;
238 white-space: nowrap;
239 }
240 body.chat #chat-input-file-area .file-selection-wrapper > * {
241 vertical-align: middle;
242 margin: 0;
@@ -359,11 +359,11 @@
359 cursor: pointer;
360 text-align: center;
361 white-space: pre;
362 }
363 body.chat #chat-user-list .timestamp {
364 font-size: 85%;
365 font-family: monospace;
366 }
367 body.chat #chat-user-list:not(.timestamps) .timestamp {
368 display: none;
369 }
370

Keyboard Shortcuts

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