Merge pull request #3187 from virtuacoplenny/lenny/cleanup-new-toolbox-css

ref(toolbar): remove use-new-toolbox class

css/_atlaskit_overrides.scss

+/**
+ * Move Atlaskit Flag up a little bit so it does not cover the toolbar with the
+ * first notification.
+ */
+.cxGWJB{
+    bottom: calc(#{$newToolbarSizeWithPadding}) !important;
+}
+.gXSEsl:nth-child(n+2) {
+    transform: translateX(0) translateY(100%) translateY(16px) !important;
+    -ms-transform: translateX(0) translateY(100%) translateY(16px) !important;
+    -webkit-transform: translateX(0) translateY(100%) translateY(16px) !important;
+}

css/_chat.scss

 #chatconversation {
     visibility: hidden;
     position: relative;
-    top: 5px;
+    top: 15px;
     padding: 5px;
     text-align: left;
     line-height: 20px;
 }
 
 .localuser {
-    color: #087dba;
-}
-.use-new-toolbox {
-    .chatmessage {
-        color: white;
-    }
-
-    .localuser {
-        color: #4C9AFF;
-    }
-
-    .remoteuser {
-        color: #B8C7E0;
-    }
-
-    #usermsg {
-        color: white;
-    }
-
-    .chatmessage,
-    #smileysarea,
-    #smileysContainer,
-    #usermsg {
-        background-color: $newToolbarBackgroundColor;
-    }
-
-    .smileyContainer:hover {
-        background-color: $newToolbarButtonToggleColor;
-        border-radius: 5px;
-        cursor: pointer;
-    }
+    color: #4C9AFF
 }
 
 .errorMessage {
 }
 
 .remoteuser {
-    color: white;
+    color: #B8C7E0;
 }
 
 #usermsg {
+    background-color: $newToolbarBackgroundColor;
     visibility:hidden;
     position: absolute;
     bottom: 0px;
     max-height:150px;
     min-height:35px;
     border: 0px none;
-    background: #3a3a3a;
-    color: #a7a7a7;
+    color: white;
     box-shadow: none;
     border-radius:0;
     font-size: 10pt;
 }
 
 .chatmessage {
-    background: #3a3a3a;
+    background-color: $newToolbarBackgroundColor;;
     width: 93%;
     margin-left: 9px;
     margin-right: auto;
     border-top-left-radius: 0px;
     margin-top: 3px;
     left: 5px;
-    color: #a7a7a7;
+    color: white;
     overflow: hidden;
     padding-bottom: 3px;
 }
     max-height:150px;
     min-height:35px;
     border: 0px none;
-    background: #3a3a3a;
+    background-color: $newToolbarBackgroundColor;
     overflow: hidden;
     visibility: hidden;
 }
 #smileysContainer {
     display: none;
     position: absolute;
-    background: #3a3a3a;
+    background-color: $newToolbarBackgroundColor;
     border-bottom: 1px solid;
     border-top: 1px solid;
     width: 100%;
 }
 
 .smileyContainer:hover {
-    background: #3e3e3e;
+    background-color: $newToolbarButtonToggleColor;
+    border-radius: 5px;
+    cursor: pointer;
 }
 
 #usermsg::-webkit-input-placeholder {

css/_filmstrip.scss

     justify-content: flex-start;
 }
 
-.use-new-toolbox {
-    .filmstrip.reduce-height {
-        bottom: $newToolbarSizeWithPadding;
-    }
-
-    .filmstrip {
-        transition: bottom .3s;
-    }
-
-    .filmstrip__videos.hidden {
-        bottom: calc(-196px - #{$newToolbarSizeWithPadding});
-    }
-}
-
 .filmstrip {
     position: absolute;
     bottom: 0;
     right: 0;
     padding: 10px 5px;
     @extend %align-right;
+    transition: bottom .3s;
     z-index: $filmstripVideosZ;
 
+    &.reduce-height {
+        bottom: $newToolbarSizeWithPadding;
+    }
+
     &__toolbar {
         @include flex();
         flex-direction: column-reverse;
         }
 
         &.hidden {
-            bottom: -196px;
+            bottom: calc(-196px - #{$newToolbarSizeWithPadding});
         }
 
         .remote-videos-container {

css/_side_toolbar_container.scss

 /**
  * Toolbar side panel main container element.
  */
-.use-new-toolbox #sideToolbarContainer {
+#sideToolbarContainer {
     background-color: $newToolbarBackgroundColor;
-
     /**
      * Make the sidebar flush with the top of the toolbar. Take the size of
      * the toolbar and subtract from 100%.
      */
     height: calc(100% - #{$newToolbarSizeWithPadding});
     left: 0;
-
-    .side-toolbar-close {
-        background: gray;
-        border: 3px solid rgba(255, 255, 255, 0.1);
-        border-radius: 100%;
-        color: white;
-        cursor:pointer;
-        height: 10px;
-        line-height: 10px;
-        padding: 4px;
-        position: absolute;
-        right: 5px;
-        text-align: center;
-        top: 5px;
-        width: 10px;
-        z-index: 1;
-    }
-
-    #chatconversation {
-        top: 15px;
-    }
-}
-#sideToolbarContainer {
-    background-color: $sideToolbarContainerBg;
-    height: 100%;
-    left: $defaultToolbarSize;
     max-width: $sidebarWidth;
     overflow: hidden;
     position: absolute;
             margin-top: 0 !important;
         }
     }
+
+    .side-toolbar-close {
+        background: gray;
+        border: 3px solid rgba(255, 255, 255, 0.1);
+        border-radius: 100%;
+        color: white;
+        cursor:pointer;
+        height: 10px;
+        line-height: 10px;
+        padding: 4px;
+        position: absolute;
+        right: 5px;
+        text-align: center;
+        top: 5px;
+        width: 10px;
+        z-index: 1;
+    }
 }

css/_toolbars.scss

     vertical-align: middle;
 }
 
-.use-new-toolbox {
-    .cxGWJB{
-        bottom: calc(#{$newToolbarSizeWithPadding});
-    }
-    .gXSEsl:nth-child(n+2) {
-        transform: translateX(0) translateY(100%) translateY(16px);
-        -ms-transform: translateX(0) translateY(100%) translateY(16px);
-        -webkit-transform: translateX(0) translateY(100%) translateY(16px);
-    }
-}
-
 /**
  * TODO: when the old filmstrip has been removed, remove the "new-" prefix.
  */

css/_vertical_filmstrip_overrides.scss

         text-align: left;
     }
 
-    &.use-new-toolbox {
-        /**
-         * Adjust the height of the filmstrip as the toolbar is displayed.
-         */
-        .filmstrip {
-            top: 0;
-            transition: height .3s ease-in;
-
-            &.reduce-height {
-                height: calc(100% - #{$newToolbarSizeWithPadding});
-            }
-        }
-    }
-
     .filmstrip {
         align-items: flex-end;
         box-sizing: border-box;
          * any parent is also fixed.
          */
         position: fixed;
+        top: 0;
+        transition: height .3s ease-in;
         z-index: $filmstripVideosZ;
 
+        /**
+         * Adjust the height of the filmstrip as the toolbar is displayed.
+         */
+        &.reduce-height {
+            height: calc(100% - #{$newToolbarSizeWithPadding});
+        }
+
         /**
          * Hide videos by making them slight to the right.
          */

css/main.scss

 /* Modules BEGIN */
 
 @import 'aui_reset';
+@import 'atlaskit_overrides';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';

css/modals/invite/_info.scss

-.use-new-toolbox {
-    font-size: 14px;
-}
-
 .info-dialog {
     cursor: default;
     display: flex;
+    font-size: 14px;
 
     .info-dialog-action-link {
         display: inline-block;

modules/UI/UI.js

 
         // Initialize side panels
         SidePanels.init(eventEmitter);
-
-        // TODO: remove this class once the old toolbar has been removed. This
-        // class is set so that any CSS changes needed to adjust elements
-        // outside of the new toolbar can be scoped to just the app with the new
-        // toolbar enabled.
-        $('body').addClass('use-new-toolbox');
     }
 
     interfaceConfig.VERTICAL_FILMSTRIP

react/features/filmstrip/components/web/Filmstrip.js

 /* @flow */
 
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 
 declare var interfaceConfig: Object;
 
+/**
+ * The type of the React {@code Component} props of {@link Filmstrip}.
+ */
+type Props = {
+
+    /**
+     * Additional CSS class names top add to the root.
+     */
+    _className: string,
+
+    /**
+     * Whether the UI/UX is filmstrip-only.
+     */
+    _filmstripOnly: boolean,
+
+    /**
+     * Whether or not remote videos are currently being hovered over. Hover
+     * handling is currently being handled detected outside of react.
+     */
+    _hovered: boolean,
+
+    /**
+     * The redux {@code dispatch} function.
+     */
+    dispatch: Dispatch<*>
+};
+
 /**
  * Implements a React {@link Component} which represents the filmstrip on
  * Web/React.
  *
  * @extends Component
  */
-class Filmstrip extends Component<*> {
+class Filmstrip extends Component <Props> {
     _isHovered: boolean;
 
     _notifyOfHoveredStateUpdate: Function;
 
     _onMouseOver: Function;
 
-    /**
-     * {@code Filmstrip} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * Whether the UI/UX is filmstrip-only.
-         */
-        _filmstripOnly: PropTypes.bool,
-
-        /**
-         * Whether or not remote videos are currently being hovered over.
-         */
-        _hovered: PropTypes.bool,
-
-        /**
-         * Whether or not the remote videos should be visible. Will toggle
-         * a class for hiding the videos.
-         */
-        _remoteVideosVisible: PropTypes.bool,
-
-        /**
-         * Whether or not the toolbox is visible. The height of the vertical
-         * filmstrip needs to adjust to accommodate the horizontal toolbox.
-         */
-        _toolboxVisible: PropTypes.bool,
-
-        /**
-         * The redux {@code dispatch} function.
-         */
-        dispatch: PropTypes.func
-    };
-
     /**
      * Initializes a new {@code Filmstrip} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Debounce the method for dispatching the new filmstrip handled state
      * @returns {ReactElement}
      */
     render() {
-        const {
-            _filmstripOnly,
-            _remoteVideosVisible,
-            _toolboxVisible
-        } = this.props;
-
         // Note: Appending of {@code RemoteVideo} views is handled through
         // VideoLayout. The views do not get blown away on render() because
         // ReactDOMComponent is only aware of the given JSX and not new appended
         // DOM. As such, when updateDOMProperties gets called, only attributes
         // will get updated without replacing the DOM. If the known DOM gets
         // modified, then the views will get blown away.
-        const reduceHeight
-            = _toolboxVisible && interfaceConfig.TOOLBAR_BUTTONS.length;
-        const classNames
-            = `filmstrip ${
-                _remoteVideosVisible ? '' : 'hide-videos'} ${
-                reduceHeight ? 'reduce-height' : ''}`;
 
         return (
-            <div className = { classNames }>
-                { _filmstripOnly && <Toolbar /> }
+            <div className = { `filmstrip ${this.props._className}` }>
+                { this.props._filmstripOnly && <Toolbar /> }
                 <div
                     className = 'filmstrip__videos'
                     id = 'remoteVideos'>
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _filmstripOnly: boolean,
+ *     _className: string,
  *     _hovered: boolean,
- *     _remoteVideosVisible: boolean,
- *     _toolboxVisible: boolean
+ *     _filmstripOnly: boolean
  * }}
  */
 function _mapStateToProps(state) {
     const { hovered } = state['features/filmstrip'];
+    const isFilmstripOnly = Boolean(interfaceConfig.filmStripOnly);
+    const reduceHeight = !isFilmstripOnly
+        && state['features/toolbox'].visible
+        && interfaceConfig.TOOLBAR_BUTTONS.length;
+    const remoteVideosVisible = shouldRemoteVideosBeVisible(state);
+
+    const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${
+        reduceHeight ? 'reduce-height' : ''}`;
 
     return {
-        _filmstripOnly: Boolean(interfaceConfig.filmStripOnly),
-        _hovered: hovered,
-        _remoteVideosVisible: shouldRemoteVideosBeVisible(state),
-        _toolboxVisible: state['features/toolbox'].visible
+        _className: className,
+        _filmstripOnly: isFilmstripOnly,
+        _hovered: hovered
     };
 }