Fixup always on top window setting

- Style
- Layout
- Add spotlight

app/features/conference/components/Conference.js

@@ -403,24 +403,17 @@ class Conference extends Component<Props, State> {
  * Maps (parts of) the redux state to the React props.
  *
  * @param {Object} state - The redux state.
- * @returns {{
- *     _avatarURL: string,
- *     _email: string,
- *     _name: string,
- *     _serverURL: string,
- *     _startWithAudioMuted: boolean,
- *     _startWithVideoMuted: boolean
- * }}
+ * @returns {Props}
  */
 function _mapStateToProps(state: Object) {
     return {
+        _alwaysOnTopWindowEnabled: state.settings.alwaysOnTopWindowEnabled,
         _avatarURL: state.settings.avatarURL,
         _email: state.settings.email,
         _name: state.settings.name,
         _serverURL: state.settings.serverURL,
         _startWithAudioMuted: state.settings.startWithAudioMuted,
-        _startWithVideoMuted: state.settings.startWithVideoMuted,
-        _alwaysOnTopWindowEnabled: state.settings.alwaysOnTopWindowEnabled
+        _startWithVideoMuted: state.settings.startWithVideoMuted
     };
 }
 

app/features/onboarding/components/AlwaysOnTopWindowSpotlight.js

@@ -0,0 +1,78 @@
+// @flow
+
+import { Spotlight } from '@atlaskit/onboarding';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import { closeDrawer } from '../../navbar';
+
+import { continueOnboarding } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+};
+
+/**
+ * Always on Top Windows Spotlight Component.
+ */
+class AlwaysOnTopWindowSpotlight extends Component<Props, *> {
+    /**
+     * Initializes a new {@code StartMutedTogglesSpotlight} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._next = this._next.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Spotlight
+                actions = { [
+                    {
+                        onClick: this._next,
+                        text: 'Next'
+                    }
+                ] }
+                dialogPlacement = 'left top'
+                target = { 'always-on-top-window' } >
+                You can toggle if you want to eenable the "always-on-top" window
+                which is displayed when the main window loses focus.
+                This will be applied to all conferences.
+            </Spotlight>
+        );
+    }
+
+    _next: (*) => void;
+
+    /**
+     * Close the spotlight component.
+     *
+     * @returns {void}
+     */
+    _next() {
+        const { dispatch } = this.props;
+
+        dispatch(continueOnboarding());
+
+        // FIXME: find a better way to do this.
+        setTimeout(() => {
+            dispatch(closeDrawer());
+        }, 300);
+    }
+}
+
+export default connect()(AlwaysOnTopWindowSpotlight);

app/features/onboarding/components/StartMutedTogglesSpotlight.js

@@ -6,8 +6,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
-import { closeDrawer } from '../../navbar';
-
 import { continueOnboarding } from '../actions';
 
 type Props = {
@@ -63,14 +61,7 @@ class StartMutedTogglesSpotlight extends Component<Props, *> {
      * @returns {void}
      */
     _next() {
-        const { dispatch } = this.props;
-
-        dispatch(continueOnboarding());
-
-        // FIXME: find a better way to do this.
-        setTimeout(() => {
-            dispatch(closeDrawer());
-        }, 300);
+        this.props.dispatch(continueOnboarding());
     }
 }
 

app/features/onboarding/components/index.js

@@ -8,3 +8,6 @@ export { default as SettingsDrawerSpotlight } from './SettingsDrawerSpotlight';
 export {
     default as StartMutedTogglesSpotlight
 } from './StartMutedTogglesSpotlight';
+export {
+    default as AlwaysOnTopWindowSpotlight
+} from './AlwaysOnTopWindowSpotlight';

app/features/onboarding/constants.js

@@ -7,7 +7,8 @@ import {
     NameSettingSpotlight,
     EmailSettingSpotlight,
     ServerSettingSpotlight,
-    StartMutedTogglesSpotlight
+    StartMutedTogglesSpotlight,
+    AlwaysOnTopWindowSpotlight
 } from './components';
 
 export const onboardingSteps = {
@@ -20,7 +21,8 @@ export const onboardingSteps = {
         'name-setting',
         'email-setting',
         'server-setting',
-        'start-muted-toggles'
+        'start-muted-toggles',
+        'always-on-top-window'
     ]
 };
 
@@ -31,5 +33,6 @@ export const onboardingComponents = {
     'name-setting': NameSettingSpotlight,
     'email-setting': EmailSettingSpotlight,
     'server-setting': ServerSettingSpotlight,
-    'start-muted-toggles': StartMutedTogglesSpotlight
+    'start-muted-toggles': StartMutedTogglesSpotlight,
+    'always-on-top-window': AlwaysOnTopWindowSpotlight
 };

app/features/settings/components/AlwaysOnTopWindowToggle.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
-import { TogglesContainer } from '../styled';
 import { setWindowAlwaysOnTop } from '../actions';
 
 import ToggleWithLabel from './ToggleWithLabel';
@@ -45,13 +44,11 @@ class AlwaysOnTopWindowToggle extends Component<Props> {
      */
     render() {
         return (
-            <TogglesContainer>
-                <ToggleWithLabel
-                    isDefaultChecked = { this.props._alwaysOnTopWindowEnabled }
-                    label = 'Always on Top Window'
-                    onChange = { this._onAlwaysOnTopWindowToggleChange }
-                    value = { this.props._alwaysOnTopWindowEnabled } />
-            </TogglesContainer>
+            <ToggleWithLabel
+                isDefaultChecked = { this.props._alwaysOnTopWindowEnabled }
+                label = 'Always on Top Window'
+                onChange = { this._onAlwaysOnTopWindowToggleChange }
+                value = { this.props._alwaysOnTopWindowEnabled } />
         );
     }
 

app/features/settings/components/SettingsDrawer.js

@@ -12,7 +12,7 @@ import type { Dispatch } from 'redux';
 
 import { closeDrawer, DrawerContainer, Logo } from '../../navbar';
 import { Onboarding, startOnboarding } from '../../onboarding';
-import { AvatarContainer, SettingsContainer } from '../styled';
+import { AvatarContainer, SettingsContainer, TogglesContainer } from '../styled';
 import { setEmail, setName } from '../actions';
 
 import AlwaysOnTopWindowToggle from './AlwaysOnTopWindowToggle';
@@ -130,14 +130,16 @@ class SettingsDrawer extends Component<Props, *> {
                             name = 'server-setting'>
                             <ServerURLField />
                         </SpotlightTarget>
-                        <SpotlightTarget
-                            name = 'start-muted-toggles'>
-                            <StartMutedToggles />
-                        </SpotlightTarget>
-                        <SpotlightTarget
-                            name = 'window-always-on-top'>
-                            <AlwaysOnTopWindowToggle />
-                        </SpotlightTarget>
+                        <TogglesContainer>
+                            <SpotlightTarget
+                                name = 'start-muted-toggles'>
+                                <StartMutedToggles />
+                            </SpotlightTarget>
+                            <SpotlightTarget
+                                name = 'always-on-top-window'>
+                                <AlwaysOnTopWindowToggle />
+                            </SpotlightTarget>
+                        </TogglesContainer>
                         <Onboarding section = 'settings-drawer' />
                     </SettingsContainer>
                 </DrawerContainer>

app/features/settings/components/StartMutedToggles.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
-import { TogglesContainer } from '../styled';
 import {
     setStartWithAudioMuted,
     setStartWithVideoMuted
@@ -85,7 +84,7 @@ class StartMutedToggles extends Component<Props, State> {
      */
     render() {
         return (
-            <TogglesContainer>
+            <>
                 <ToggleWithLabel
                     isDefaultChecked = { this.props._startWithAudioMuted }
                     label = 'Start with Audio muted'
@@ -96,7 +95,7 @@ class StartMutedToggles extends Component<Props, State> {
                     label = 'Start with Video muted'
                     onChange = { this._onVideoToggleChange }
                     value = { this.state.startWithVideoMuted } />
-            </TogglesContainer>
+            </>
         );
     }
 

app/features/settings/reducer.js

@@ -25,13 +25,13 @@ type State = {
 const username = window.jitsiNodeAPI.osUserInfo().username;
 
 const DEFAULT_STATE = {
+    alwaysOnTopWindowEnabled: true,
     avatarURL: getAvatarURL({ id: username }),
     email: '',
     name: username,
     serverURL: undefined,
     startWithAudioMuted: false,
-    startWithVideoMuted: false,
-    alwaysOnTopWindowEnabled: true
+    startWithVideoMuted: false
 };
 
 /**