Fossil SCM
chat: disabled sticky mode of the input area for the time being due to grief in conjunction with message scrolling. When toggling between bottom/top modes, scroll to the input area.
Commit
ba3ebf0de93178a7c7993236b052fa59299e9f66641b5ac6be557bf9eacd5f7a
Parent
34547542d2559a3…
2 files changed
+12
-1
+2
-1
+12
-1
| --- src/chat.js | ||
| +++ src/chat.js | ||
| @@ -660,11 +660,22 @@ | ||
| 660 | 660 | boolValue: ()=>document.body.classList.contains('chat-bottom-up'), |
| 661 | 661 | callback: function(){ |
| 662 | 662 | document.body.classList.toggle('chat-bottom-up'); |
| 663 | 663 | Chat.settings.set('bottom-up', |
| 664 | 664 | document.body.classList.contains('chat-bottom-up')); |
| 665 | - Chat.e.inputWrapper.scrollIntoView(); | |
| 665 | + if(false){ | |
| 666 | + /* Reminder: in order to get a good scrolling effect when | |
| 667 | + sticky mode is enabled for Chat.e.inputWrapper, BOTH of | |
| 668 | + these scrollIntoView() calls are needed. */ | |
| 669 | + const e = document.querySelector( | |
| 670 | + '.message-widget'/*this is always the most recent message, | |
| 671 | + even if flexbox placed it at the end of | |
| 672 | + the page!*/ | |
| 673 | + ); | |
| 674 | + if(e) e.scrollIntoView(); | |
| 675 | + } | |
| 676 | + setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0); | |
| 666 | 677 | } |
| 667 | 678 | },{ |
| 668 | 679 | label: "Images inline", |
| 669 | 680 | boolValue: ()=>Chat.settings.getBool('images-inline'), |
| 670 | 681 | callback: function(){ |
| 671 | 682 |
| --- src/chat.js | |
| +++ src/chat.js | |
| @@ -660,11 +660,22 @@ | |
| 660 | boolValue: ()=>document.body.classList.contains('chat-bottom-up'), |
| 661 | callback: function(){ |
| 662 | document.body.classList.toggle('chat-bottom-up'); |
| 663 | Chat.settings.set('bottom-up', |
| 664 | document.body.classList.contains('chat-bottom-up')); |
| 665 | Chat.e.inputWrapper.scrollIntoView(); |
| 666 | } |
| 667 | },{ |
| 668 | label: "Images inline", |
| 669 | boolValue: ()=>Chat.settings.getBool('images-inline'), |
| 670 | callback: function(){ |
| 671 |
| --- src/chat.js | |
| +++ src/chat.js | |
| @@ -660,11 +660,22 @@ | |
| 660 | boolValue: ()=>document.body.classList.contains('chat-bottom-up'), |
| 661 | callback: function(){ |
| 662 | document.body.classList.toggle('chat-bottom-up'); |
| 663 | Chat.settings.set('bottom-up', |
| 664 | document.body.classList.contains('chat-bottom-up')); |
| 665 | if(false){ |
| 666 | /* Reminder: in order to get a good scrolling effect when |
| 667 | sticky mode is enabled for Chat.e.inputWrapper, BOTH of |
| 668 | these scrollIntoView() calls are needed. */ |
| 669 | const e = document.querySelector( |
| 670 | '.message-widget'/*this is always the most recent message, |
| 671 | even if flexbox placed it at the end of |
| 672 | the page!*/ |
| 673 | ); |
| 674 | if(e) e.scrollIntoView(); |
| 675 | } |
| 676 | setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0); |
| 677 | } |
| 678 | },{ |
| 679 | label: "Images inline", |
| 680 | boolValue: ()=>Chat.settings.getBool('images-inline'), |
| 681 | callback: function(){ |
| 682 |
+2
-1
| --- src/default.css | ||
| +++ src/default.css | ||
| @@ -1662,11 +1662,12 @@ | ||
| 1662 | 1662 | display: flex; |
| 1663 | 1663 | flex-direction: column; |
| 1664 | 1664 | border-bottom: 1px solid black; |
| 1665 | 1665 | padding: 0.5em 1em; |
| 1666 | 1666 | margin-bottom: 0.5em; |
| 1667 | - position: sticky; top: 0; | |
| 1667 | + /*position: sticky; top: 0; disabled for the time being because of | |
| 1668 | + scroll-related quirks which are still unresolved. */ | |
| 1668 | 1669 | z-index: 100 |
| 1669 | 1670 | /* see notes in #chat-messages-wrapper. The various popups require a |
| 1670 | 1671 | z-index higher than this one. */; |
| 1671 | 1672 | } |
| 1672 | 1673 | body.chat.chat-bottom-up #chat-input-area { |
| 1673 | 1674 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -1662,11 +1662,12 @@ | |
| 1662 | display: flex; |
| 1663 | flex-direction: column; |
| 1664 | border-bottom: 1px solid black; |
| 1665 | padding: 0.5em 1em; |
| 1666 | margin-bottom: 0.5em; |
| 1667 | position: sticky; top: 0; |
| 1668 | z-index: 100 |
| 1669 | /* see notes in #chat-messages-wrapper. The various popups require a |
| 1670 | z-index higher than this one. */; |
| 1671 | } |
| 1672 | body.chat.chat-bottom-up #chat-input-area { |
| 1673 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -1662,11 +1662,12 @@ | |
| 1662 | display: flex; |
| 1663 | flex-direction: column; |
| 1664 | border-bottom: 1px solid black; |
| 1665 | padding: 0.5em 1em; |
| 1666 | margin-bottom: 0.5em; |
| 1667 | /*position: sticky; top: 0; disabled for the time being because of |
| 1668 | scroll-related quirks which are still unresolved. */ |
| 1669 | z-index: 100 |
| 1670 | /* see notes in #chat-messages-wrapper. The various popups require a |
| 1671 | z-index higher than this one. */; |
| 1672 | } |
| 1673 | body.chat.chat-bottom-up #chat-input-area { |
| 1674 |