Limit scroll bar in sidebar to chat view#550
Merged
Merged
Conversation
Except when almost empty, the message list of the chat view is taller than its available vertical space in the sidebar. Due to this a scroll bar was shown for the whole sidebar, and everything was moved when scrolling to see overflown messages. Now the scroll bar is shown only for the message list, so it can be scrolled without moving the other elements in the sidebar. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The class was copied from the markup of the server sidebar, but it is not used anywhere and its name is misleading now that the scroll bar is shown on the tabs that need it. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
In CSS it is not currently possible to select an element based on
whether it has certain child or not, nor select the parent element of
another one. In certain cases it may be necessary to use a special style
for the tab content wrapper element, for example to remove the padding
from the wrapper and left the tab content element itself to handle it.
To support that now the tab content wrapper has the "tab-{tabId}" CSS
class in addition to the "tab" CSS class.
Another option would have been to make possible to specify the class
name to use when a tab was added so the same class could be used by the
wrapper when showing different tabs. However this seem like an uncommon
use case, and there should not be a lot of tabs anyway, so the current
approach would not require a lot of ".tab-{tabId1}", ".tab-{tabId2}",
".tab-{tabId3}"... selectors for the same rules in the CSS files anyway.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The positioning context (the element that an absolute element is relative to) of the tooltips shown for the date of messages was the author row, and thus they were visible only were the author row would be visible. The author row would be clipped outside the list of messages (due to its "overflow-y" CSS property), so the tooltip shown for the date of the newest message was clipped at the top of the list of messages. Now the tooltips are added to the chat view itself, so "#app-content" becomes their positioning context and thus are no longer clipped by the list of messages. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Limiting the scroll bar in the sidebar to the list of chat messages causes the scroll bar to be removed from the whole sidebar in other tabs too. Therefore, the scroll bars must be explicitly enabled in the other tab contents that need them. The list of participants grows dynamically, so a vertical scroll bar should be enabled on it to be able to view all the participants in a long list. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
danxuliu
force-pushed
the
limit-scroll-bar-in-sidebar-to-chatview
branch
from
7e9805b to
bccc62c
Compare
This was referenced Jan 10, 2018
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Except when almost empty, the message list of the chat view is taller than its available vertical space in the sidebar. Due to this a scroll bar was shown for the whole sidebar, and everything was moved when
scrolling to see overflown messages.
That is a valid approach when messages are shown from newest to oldest and the new message input is above the list of messages, as in that case the call details and the tab headers are near the new message input and the newest messages.
However, once the layout of the chat view is reversed and the messages are shown from oldest to newest with the new message input below the list of messages having to scroll back and forth to see the call details/tab headers or the new message input/newest messages would be a pain.
Therefore now the scroll bar is shown only for the message list, so it can be scrolled without moving the other elements in the sidebar.
Limiting the scroll bar in the sidebar to the list of chat messages causes the scroll bar to be removed from the whole sidebar in other tabs too, so the scroll bars had to be explicitly enabled in the list of participants.
Note that now, due to the scroll bar being shown only for the tabs, the call details are always visible. In short screens this may not leave too much space for the tabs, making them uncomfortable to use. This will be fixed in another pull request.