With AtlasKit InlineDialog, the filmstrip z-index in vertical
filmstrip mode was adjusted as it had to be set to fixed position
for the dialogs to automagically be position fixed. This left
behind a regression where the filmstrip z-index was the same as
the video quality label, but came later in the dom, so the label
was not clickable. This commit modifies the z-index of the
vertical filmstrip to account for clicking of the video quality
label.
* feat(small-video): use InlineDialog for stats and remote menu
- Remove JitsiPopover and use InlineDialog instead.
- Bring the remote menu icon into react.
- Make vertical filmstrip position:fixed so popper (AtlasKit
dependency) sets InlineDialogs and eventually tooltips to
position:fixed.
* ref(remote-menu): hook KickButton to redux
* ref(remote-menu): hook MuteButton to redux
* modify padding, toggle dialogs
* pixel push margins to align dialogs, adjust padding of dialogs
* add comment about margin for dialog, add file I forgot
* modify indicator markup so the icon can be moved down while trigger stays at top of toolbar
* feat(notifications): implement a react/redux notification system
* squash into impl explicit timeout, style
* ref(notifications): convert toastr notifications to use react
* ref(toastr): remove library
* squash into conversion: pass timeout
* squash into clean remove from debian patch
* Fixes some toolbox/toolbar styles and variables
* [squash] Fixes variable name to fit better its purpose
* [squash] Fixes secondary toolbar variable name
Currently, the JitsiPopover z-index will cause it to display below
any toast notifications so this changes modifies the z-index
values so JitsiPopover is higher than the notification toasts.
Converting the invite modal includes the following:
- Creating new react components to display InviteDialog. The
main parent components are ShareLink and PasswordOverview,
the later handles displaying lock state and password editing.
These components do not make use of atlaskit as the component
for input does not yet support readonly, so for consistency
within the modal content no atlaskit was used.
- Using redux for keeping and accessing lock state instead of
RoomLocker.
- Publicly exposing the redux action lockStateChanged for direct
calling on lock events experienced on the web client.
- Removing Invite, InviteDialogView, and RoomLocker and references
to them.
- Handling errors that occur when setting a password to preserve
existing web funtionality.
Some atlaskit components, such as field-text, inherit text color.
This is a problem with components that are white as they will
inherit $defaultColor, which is a light gray. So instead, for
the atlaskit modal, set a color for all the form content so it
can be inherited instead.
Atlaskit at times will have localized styling for font-size and
sometimes will not. The button component will inherit its
font-size whereas selectors have localized font-size of 14px. For
consistency, the cancel/submit buttons on the atlaskit modals
will also have 14px. The atlaskit story book examples also use
buttons with 14px font-size.
All z-indexes found in css files have been moved into css
variables. If the z-index is used only once, the variable
name will be the same as the selector it is used in. If
the z-index is used multiple times, then the plain name
of $zindex# was used. This allowed a more confident
moving down of the toolbar so that the new modal dialog,
with z-index 500, could display on top of it.
#1436
Leonard Kim
damencho
yanas
hristoterezov
Ilya Daynatovich
Lyubomir Marinov
Maxim Voloshin
Konstantyn Pahsura
paweldomas