The avatar is a div, so it is not focusable by default. However, if it
were focused it could not be properly "highlighted" with a border; the
whole avatar is dimmed for offline participants, so the border colour
would be different when "highlighting" the avatar of online and offline
participants. Due to this the avatar is now wrapped in another div which
is the focusable one (provided the avatar has a contacts menu) and the
one that gets the border. Finally, when the Enter or space keys are
pressed on the wrapper a click is triggered in the avatar, which shows
the contacts menu.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When the current user is an actual user and not a guest clicking on the
avatar of a participant shows the contacts menu (unless the participant
is the current user or a guest), so when hovering on the avatar the
cursor should be a pointer to imply a possible interaction.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The participant items were link elements, so they were taken into
account in keyboard navigation. However, although it is possible to
interact with some of its children, it is not possible to interact
with the participant item as a whole, so they should not be focusable.
As the link in the participant items led nowhere they are now simple
span elements instead of links.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The first link child of items in the participants list is the
participant information, which includes the avatar, name... However,
there is no direct "img" child of that element (the avatar image is a
child of the avatar element), so the rule has no effect.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The edit button was not an actual button but a span, so it was ignored
in keyboard navigation. Moreover, the opacity was applied to its parent
element instead of to the button itself, so it was not highlighted when
focused. Also, after the input is hidden now the focus is given back to
the edit button.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The select2 containers have the same size as the "oca-spreedme-add-XXX"
wrappers that contain them, so the borders can be moved from those
wrappers to the containers themselves. This makes possible to set a
stronger border when the select2 container is active/focused.
Besides that now the text is stronger too when the select2 container is
focused to show that more clearly.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Until now the EditableTextLabel was not (visibly) updated until the
server response was received, even if the model was updated as soon as
the new value was submitted (although this updated the hidden label,
which was shown again once the response was received). To provide
feedback to the user that the value is being set now the confirm button
is replaced by a working icon while waiting for the response. In a
similar way the input is also disabled to prevent further requests while
the previous one is ongoing.
Besides that, renaming the room now waits for the server response before
updating the model. This ensures that, in case of error, the label will
still show the old value instead of the new one. An error message is now
also shown to the user in that case.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The input wrapper only contains the text input and the confirm button;
as there will not be more than one confirm button there is no need to
set its rules based on the text input.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Due to its special nature the password is not stored in an attribute of
the model. Nevertheless, a "changed:password" (always with an empty
value) was triggered as soon as the password was submited. However, as
there is no password attribute that event is not taken into account
anywhere and the UI was not updated until the server response was
received (with further updates once the rooms are fetched again). To
provide feedback to the user that the password is being set now the
confirm button is replaced by a working icon while waiting for the
answer. In a similar way the input is also disabled to prevent further
requests while the previous one is ongoing.
Note that due to the aforementioned behaviour it is not really necessary
to wait for the server response to update the model with the new
password (as it will not be updated anyway), but it is done for
consistency with other requests.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Until now the model was updated as soon as the checkbox was modified,
which triggered a change event that in turn caused the UI to be updated.
However, if the room could not be successfully set as public or private
nothing was done and the model as well as the UI were kept with the
wrong state (at least, until the model is fetched again). To prevent
this now the model waits for a successful server response to update the
attributes; in case of failure only the checkbox needs to be restored,
as it is the only UI element that changed due to the direct interaction
of the user (in case of success the whole view will be rendered again
due to the room type change, so no need to do anything explicitly in
that case).
As the model is not changed until the successful server response is
received now the checkbox is replaced by a working icon while waiting
for the answer. In a similar way the checkbox is also disabled to
prevent further requests while the previous one is ongoing.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The volume is shown as a vertical bar next to the audio icon that grows
and shrinks (with a fixed bottom position) depending on the volume
level. The bar is coloured with a gradient from green to yellow to red
for better clarity of the current volume.
The previous way of indicating speech (a pulse animation in the audio
icon) has not been modified; this is an additional visualization (only
for the local audio) to provide a more noticeable feedback to the user.
Both the existing button and the new bar had to be wrapped in a helper
div to include the volume bar in the old layout.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The author row was covering the date on the right side of the chat view
and preventing the date tooltip to be triggered by hovering on the date.
This fix makes the author row slightly narrower (which was the same
approach already used when the date is shown next to a message) in
order to expose the date, thus allowing the date tooltip to be shown
properly.
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
The ".systemMessage" class is set on ".comment" elements, but not on
".comments" elements, so ".comments:not(.systemMessage)" is always the
same as ".comments".
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Until now only the opacity of the avatar was reduced when the peer was
not connected. However, if the video was being shown the avatar was
hidden, so if there was an issue with the connection to the other peer
it was not reflected in the VideoView.
Note that the loading icon should be shown too in the video for long
disconnections or failures, but ":after" CSS pseudo classes (which are
used by the loading icon) do not work with video elements, so for now
only the opacity is reduced.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Until now the opacity of the avatar was reduced when the peer was
created until it got connected for the first time. Now the opacity of
the avatar is reduced whenever the peer is not connected. In practice,
the difference is that now the opacity is changed too when there are
issues with the connection to the other peer.
Note that the issues were already signaled using the loading icon, but
only after a long disconnection; now the opacity is reduced as soon as
there is a disconnection, which provides quicker feedback of the issue
while keeping the previous behaviour (as the loading icon is still shown
in a long disconnection).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The chat messages are expected to have the full width of its content
row, except for some space used for the date. However, as chat messages
are left padded that padding must be included too in the width;
otherwise there could be no room for the date.
This is only a problem in the public share authentication page, as apps
use by default "box-sizing: border-box" in all its elements.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Rename buttons for guest participants and rooms should always be visible
(at least with opacity) to make their very existence more obvious.
Before they were always hidden and shown with full opacity when the
cursor was on the label wrapper, even if it was possible to interact
with the button only when the cursor was on it. Now, as the buttons are
always visible with a low opacity, the full opacity is set only when the
cursor is on the button itself and thus when it can be interacted with.
Signed-off-by: Sascha Wiswedel <sascha.wiswedel@nextcloud.com>
The server explicitly sets the height of confirm icons inside password
inputs, which overrides the height set in Talk for submit inputs in the
authenticate page. Therefore, the height set by the server needs to be
overriden to honour the height set in Talk (which matches the height of
the password input in the authenticate page).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Due to how Internet Explorer 11 sorts CSS rules based on their selector
and how the "#app-content" left margin is set in the server it is
necessary to set the ":fullscreen" rule as important to override the one
from the server, which is sorted above it (unlike in the rest of
browsers).
Besides that, the top space added to the sidebar when IE is used needs
to be removed in fullscreen mode, as in that case there is no header.
The sidebar height also needs to be explicitly set to 100% due to the
lack of support for "unset" in Internet Explorer 11.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The sidebar top position in Talk is set to 0. However, the server sets
the position of the sidebar as fixed when IE is used, so in that case it
needs to be pulled down to not overlap with the header.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
In Nextcloud 16 the default height for input elements, as well as the
confirm icons inside them, is 34px. This caused the room name input to
change its height from 44px to 42px, so it is no longer needed to pull
it up 2px to prevent moving the items below when it is shown. In a
similar way, it also caused the confirm icon to change its height from
42px to 34px; it was misplaced down 1px, so now it is positioned 4px
from the top (instead of 5px to keep the same position as before).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The "Add" button is shown only for logged in users, so it is not shown
in guest pages. However, when the chat view is shown in the sidebar in a
guest page there was an empty space where the "Add" button would have
been shown for a logged in user. Now the message input stretchs to use
that empty space.
Note that this is only applied when the chat view is in the sidebar;
when the chat view is in the main view the "Add" button is added in the
padding area used to frame the chat view, so in that case the empty
space should be kept.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When the current participant is a logged in user the "Add" button is
shown in the chat view, and due to some arcane CSS magic that button
caused the chat view to be moved to the left (instead of simply
appearing to the right of the message input, wherever that be). The same
arcane CSS magic causes everything to look fine when using the same
approach as in the sidebar of the regular Talk UI, that is, applying a
"margin-right" to the form to make room for the "Add" button, so that
margin is now applied in the public share auth page when needed (that
is, when the user is logged in).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
"guest.css" overrides the default style of links set in "style.scss"
(core), which causes links in the public share auth page to be white and
with a stronger weight. Due to this, the rules from "style.scss" need to
be restored for links in the Talk sidebar to get the proper appearance.
Note that, unlike in other restored rules, in this case it is not enough
to use "#talk-sidebar" as the main selector; "#body-login #talk-sidebar"
needs to be used in this case.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The pointer cursor should be used on clickable elements, but clicking on
a selected tab header has no effect, so now the default cursor is used
instead.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Icons paired with the "force-icon-white-in-call" CSS class need to be
explicitly coloured in white; otherwise they are shown with the default
black colour.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
For consistency with the video element, other elements in VideoView are
now hidden and shown using the "hidden" CSS class.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
For legacy reasons the "incall" CSS class, which is used to hide and
show the empty content view and the call container as needed, and the
"screensharing" CSS class, which is used to adjust the call UI when
there are shared screens, were set in the "#talk-sidebar" element of
PublicShareAuth. For consistency with the embedded Talk UI now the
classes are set in the "#call-container" instead.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Daniel Calviño Sánchez
Marco Ambrosini
Joas Schilling
Sascha Wiswedel
Ivan Sein
Julius Härtl
John Molakvoæ (skjnldsv)