Fossil

Check-in [ba3ebf0de9]
Login

Check-in [ba3ebf0de9]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment: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.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: ba3ebf0de93178a7c7993236b052fa59299e9f66641b5ac6be557bf9eacd5f7a
User & Date: stephan 2020-12-26 17:22:05.337
Context
2020-12-26
17:55
chat app now explicitly sets the body.chat CSS class, to account for skins which include a BODY tag in their header and therefore do not get one injected by the style API. ... (check-in: feaa3b1640 user: stephan tags: trunk)
17:22
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. ... (check-in: ba3ebf0de9 user: stephan tags: trunk)
17:07
Removed some debug output. When toggling between bottom-up/top-down chat, scroll to the input widget (which flips between the top and the bottom of the page). ... (check-in: 34547542d2 user: stephan tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.js.
658
659
660
661
662
663
664











665
666
667
668
669
670
671
672
    },{
      label: "Bottom-up chat",
      boolValue: ()=>document.body.classList.contains('chat-bottom-up'),
      callback: function(){
        document.body.classList.toggle('chat-bottom-up');
        Chat.settings.set('bottom-up',
                          document.body.classList.contains('chat-bottom-up'));











        Chat.e.inputWrapper.scrollIntoView();
      }
    },{
      label: "Images inline",
      boolValue: ()=>Chat.settings.getBool('images-inline'),
      callback: function(){
        const v = Chat.settings.getBool('images-inline',true);
        Chat.settings.set('images-inline', !v);







>
>
>
>
>
>
>
>
>
>
>
|







658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
    },{
      label: "Bottom-up chat",
      boolValue: ()=>document.body.classList.contains('chat-bottom-up'),
      callback: function(){
        document.body.classList.toggle('chat-bottom-up');
        Chat.settings.set('bottom-up',
                          document.body.classList.contains('chat-bottom-up'));
        if(false){
          /* Reminder: in order to get a good scrolling effect when
             sticky mode is enabled for Chat.e.inputWrapper, BOTH of
             these scrollIntoView() calls are needed. */
          const e = document.querySelector(
            '.message-widget'/*this is always the most recent message,
                               even if flexbox placed it at the end of
                               the page!*/
          );
          if(e) e.scrollIntoView();
        }
        setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0);
      }
    },{
      label: "Images inline",
      boolValue: ()=>Chat.settings.getBool('images-inline'),
      callback: function(){
        const v = Chat.settings.getBool('images-inline',true);
        Chat.settings.set('images-inline', !v);
Changes to src/default.css.
1660
1661
1662
1663
1664
1665
1666
1667

1668
1669
1670
1671
1672
1673
1674
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid black;
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
  position: sticky; top: 0;

  z-index: 100
    /* see notes in #chat-messages-wrapper. The various popups require a
       z-index higher than this one. */;
}
body.chat.chat-bottom-up #chat-input-area {
  border-bottom: none;
  border-top: 1px solid black;







|
>







1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid black;
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
  /*position: sticky; top: 0; disabled for the time being because of
    scroll-related quirks which are still unresolved. */
  z-index: 100
    /* see notes in #chat-messages-wrapper. The various popups require a
       z-index higher than this one. */;
}
body.chat.chat-bottom-up #chat-input-area {
  border-bottom: none;
  border-top: 1px solid black;