The ParticipantCollection provides the list of participants (including
guests) in a room. The Room model is synced through signaling and
provides some information about the registered users and the guests in a
room, so the ParticipantCollection can listen to changes in those
properties to automatically fetch its items again when needed.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Instead of being based on the "participantTabView" id the CSS rules used
by the ParticipantView were modified to be based on its class,
"participantWithList". This will make possible to change the parent
element of the ParticipantView and keep its style.
The rules for links were merged as those links that required a padding
due to being shown with an icon were also those shown inside the list
items.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The right sidebar will contain a call info view and a tab view to which
different sections can be added as needed.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The right sidebar is an area that can be shown or hidden from the right
border of the document. It is a core element from Nextcloud, and
SidebarView is a Marionette wrapper around it. Therefore, it has to be
used along an "#app-content" element that takes into account the
"with-app-sidebar" CSS class.
However, this right sidebar extends the standard right sidebar with an
icon shown on the right border of the screen that makes possible for the
user to show it when hidden (as there is no other element in the UI
suitable for that purpose).
That icon is just a right-pointing triangle created with a CSS trick (a
zero-sized div with width borders, but all of them transparent except
for the left one). However, as the icon will be shown on different
coloured backgrounds it can not have just a single colour; it must
provide a border on its own too, which is achieved with another triangle
slightly larger underneath. The triangle border is 2px instead of just
1px used in other UI elements (like in the sidebar itself) to make it
more noticeable on a white background.
The triangle used for the icon is a large one, with a width of 24px and
a height of 48px. Using this trick has an added benefit, as its
clickable area is larger than the triangle itself (48x48px), which
improves its usability on touchable screens (and does not negatively
affect the experience on other devices).
Currently the SidebarView is empty. The content will be added in
following commits.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
A TabView contains a set of tab headers and a content area. When a
header is selected its associated content view is shown in the content
area; otherwise its content is hidden (although the header is always
shown).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Joas Schilling
Nextcloud bot
Daniel Calviño Sánchez
Ivan Sein