When the chat messages are shown from newest to oldest and a new message
arrives the list is automatically scrolled to keep the current visible
messages at the same place, except if the list was at the top, in which
case no scrolling is made and the new message appears.
When the chat messages are shown from oldest to newest and a new message
arrives the list is automatically scrolled to show the new message,
except if the list was not at the bottom in which case no scrolling is
made and the current visible messages are kept at the same place.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The header element contains the header div; as the header div uses a
fixed position the header element has no height, so an explicit height
was set for it to prevent "#app-content-wrapper" from overlapping with
the header element. However, as "#app-content-wrapper" has a 100% height
that caused the "#app-content-wrapper" to be moved 45px to the bottom,
and thus the chat view was partially cropped at the bottom.
When the chat view messages are shown from newest to oldest this causes
the first messages to be out of view, but when they are shown from
oldest to newest with the new message input at the bottom then the input
is partially out of view.
Now instead of giving the header an explicit height a "padding-top" is
set for the "#app-content-wrapper"; this prevents the contents from
being cropped while also preventing them from overlapping the header.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When the tab contents were larger than the available space they were
limited to that space. Now, if the available space is larger than the
needed height the tab contents is also increased to fill it.
This ensures that the chat view will always stretch to the available
space, which in turn ensures that the "New message" input will be always
shown at the bottom of the sidebar like done in the main view (which was
not the case before when there were no messages or only a few).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Before chat messages were shown from newest to oldest, with the new
message input above the list of messages. Now the layout can be chosen,
either the previous one or the reversed one, from oldest to newest with
the new message input below the list of messages.
The new reversed layout is the default one, and probably the old one
will not be used anywhere in the future... but for the time being I kept
the old one too just in case.
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>
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 lateral padding is the same used for the chat view when shown in the
sidebar (due to the padding from the tab itself). The same value was
used for the top padding to provide a consistent "frame".
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When shown as the main view, the input field to add a new message is
always shown and a scroll bar is provided just for the list of messages.
Only the chat view is added and removed to and from the main view; the
other elements in the main view are not modified when that happens, and
they are hidden using some CSS magic.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The header element contains the header div; as the header div uses a
fixed position the header element has no height, so it must be
explicitly set to prevent #app-content-wrapper from overlapping with the
header element.
Right now it was not very noticeable, as it only affected the empty
content; as it name implies most of the space was empty except for a
message at the centre of the screen, so visually it did not overlap with
the header. However having a proper height set for the header will be a
must once the chat view is shown in the app content wrapper.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The submit confirm icon is shown as the background image of an
absolutely positioned input element, so the CSS rules for the submit
working icon were modified to match those of the submit confirm icon.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When two or more consecutive messages were sent by the same participant
with a difference of less than 120 seconds between each message those
messages are now shown grouped (the participant name is not shown for
the intermediate messages and each message is pushed closer to the
previous message).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The standard Nextcloud header is added automatically outside the
"#app-content" element when using the "user" template, so it is
automatically hidden when "#app-content" is set to fullscreen mode. The
public page uses the "base" template, so it has to provide its own
header element; this element appears inside "#app-content" (probably to
make it transparent using CSS rules during a call), so it has to be
explicitly hidden when in fullscreen mode.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The main room name element is now shown as "inline-block", which causes
the link icon to be placed next to it instead of below.
Due to the change from "block" to "inline-block" there is less available
width for the children input fields; the previous maximum width value is
now too narrow, so that limit to the width was removed.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Joas Schilling
Jan-Christoph Borchardt
Daniel Calviño Sánchez
Ivan Sein
Artur Bergen