The wrapped version roots all the rules of the default style sheet on
".talk.candidate-mentions", so the rules affect only the candidate
mentions of Talk. Otherwise, as the default rules are too broad (as they
use just ".atwho-XXX") they could mess with the autocompletion of other
elements (like the comments tab in the Files app).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
As the call view has a black background the close button of the sidebar
is forced to white during calls to make it visible.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The UserBubble component currently does not provide a way to set an
arbitrary letter on the avatar, only the first letter of the display
name or an icon. Therefore, for the time being, a user icon is used for
the avatar instead of the "?" character.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When the public share page is loaded "publicshare.js" is initialized,
which modifies the page to add a Talk sidebar. The default layout has
the header, content and footer in a flex column; when the sidebar is
added the layout id modified to still have the header and content in a
flex column, but the content is now a flex row that includes
"#app-content" and the sidebar, and the footer is moved inside
"#app-content" so it does not affect the sidebar.
The Talk sidebar includes a call container at the top, which is only
shown during calls, and below it a call button and a chat view which are
always shown.
The CSS styles are a mix of the styles for the public share auth page
and the Files app, as well as some rules copied from the main
"style.scss" file.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The absolute position causes the avatar container to have a different
height when the contained div has a text (guest avatars) or not (user
avatars, which use an image); now the flex property is propagated, which
causes the container to always have the same size as the contained div.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Copied from "places/svg/production/ic_room_service_24px.svg" of
"https://github.com/google/material-design-icons", tag 3.0.1.
Material Desig icons 3.0.1 are licensed under the Apache 2 License.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
When the sidebar is shown the app content is compressed to make room for
the sidebar. In narrow screens (and specially in very narrow screens)
this broke the appearance of the app content (unreadable chat, unusable
call view), so now the app content is forced to keep the full viewport
width on narrow screens; this causes the sidebar to slide over the app
content instead of compressing it.
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
Unfortunately the date picker component from Nextcloud only allows
picking a date, but not a time; there is a date time picker for Vue, but
integrating only that right now would require much effort. Therefore,
for the time being, the start time needs to be introduced manually.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The lobby state can be set to no lobby or to lobby for non moderators
from the room management menu; in this initial version no date can be
set yet.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Now that the management actions were moved to a menu there is enough
room to show a label for the "Copy link" button.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The "share-link-options" element acts as a spacer to move the room
moderation menu button to the right. However, given that the call button
width is limited to the 50% of its parent flex element and that element
has the full width of the sidebar the same effect can be achieved by
setting "margin-left: auto" on the room moderation button.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The password input is no longer the only element of the menu so pressing
"Esc" does not close the menu.
There is no longer a password button in the CallInfoView, so now the
acceptance tests need to open the room moderation menu to know if the
conversation is password protected or not.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
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
Joas Schilling
Marco Ambrosini
Joas Schilling
Ivan Sein
Sascha Wiswedel
Ivan Sein
John Molakvoæ (skjnldsv)