Reorganize settings drawer

app/features/onboarding/components/AlwaysOnTopWindowSpotlight.js

@@ -47,7 +47,7 @@ class AlwaysOnTopWindowSpotlight extends Component<Props, *> {
                         text: 'Next'
                     }
                 ] }
-                dialogPlacement = 'left top'
+                dialogPlacement = 'top right'
                 target = { 'always-on-top-window' } >
                 You can toggle whether you want to enable the "always-on-top" window,
                 which is displayed when the main window loses focus.

app/features/onboarding/components/EmailSettingSpotlight.js

@@ -45,7 +45,7 @@ class EmailSettingSpotlight extends Component<Props, *> {
                         text: 'Next'
                     }
                 ] }
-                dialogPlacement = 'left top'
+                dialogPlacement = 'top right'
                 target = { 'email-setting' } >
                 The email you enter here will be part of your user profile.
             </Spotlight>

app/features/onboarding/components/NameSettingSpotlight.js

@@ -45,7 +45,7 @@ class NameSettingSpotlight extends Component<Props, *> {
                         text: 'Next'
                     }
                 ] }
-                dialogPlacement = 'left top'
+                dialogPlacement = 'top right'
                 target = { 'name-setting' } >
                 This will be your display name, others will see you with this
                 name.

app/features/onboarding/components/ServerSettingSpotlight.js

@@ -45,7 +45,7 @@ class ServerSettingSpotlight extends Component<Props, *> {
                         text: 'Next'
                     }
                 ] }
-                dialogPlacement = 'left top'
+                dialogPlacement = 'top right'
                 target = { 'server-setting' } >
                 This will be the server where your conferences will take place.
                 You can use your own, but you don't need to!

app/features/onboarding/components/ServerTimeoutSpotlight.js

@@ -0,0 +1,67 @@
+// @flow
+
+import { Spotlight } from '@atlaskit/onboarding';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import { continueOnboarding } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+};
+
+/**
+ * Server Setting Spotlight Component.
+ */
+class ServerTimeoutSpotlight extends Component<Props, *> {
+    /**
+     * Initializes a new {@code ServerSettingSpotlight} 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 = 'right top'
+                target = { 'server-timeout' } >
+                Timeout to join a meeting, if the meeting hasn't been joined before the timeout hits, it's cancelled.
+            </Spotlight>
+        );
+    }
+
+    _next: (*) => void;
+
+    /**
+     * Close the spotlight component.
+     *
+     * @returns {void}
+     */
+    _next() {
+        this.props.dispatch(continueOnboarding());
+    }
+}
+
+export default connect()(ServerTimeoutSpotlight);

app/features/onboarding/components/SettingsDrawerSpotlight.js

@@ -42,7 +42,7 @@ class SettingsDrawerSpotlight extends Component<Props, *> {
     render() {
         return (
             <Spotlight
-                dialogPlacement = 'right top'
+                dialogPlacement = 'top right'
                 target = { 'settings-drawer-button' }
                 targetOnClick = { this._next }>
                 Click here to open the settings drawer.

app/features/onboarding/components/StartMutedTogglesSpotlight.js

@@ -45,7 +45,7 @@ class StartMutedTogglesSpotlight extends Component<Props, *> {
                         text: 'Next'
                     }
                 ] }
-                dialogPlacement = 'left top'
+                dialogPlacement = 'top right'
                 target = { 'start-muted-toggles' } >
                 You can toggle if you want to start with your audio or video
                 muted here. This will be applied to all conferences.

app/features/onboarding/components/index.js

@@ -4,10 +4,7 @@ export { default as NameSettingSpotlight } from './NameSettingSpotlight';
 export { default as Onboarding } from './Onboarding';
 export { default as OnboardingModal } from './OnboardingModal';
 export { default as ServerSettingSpotlight } from './ServerSettingSpotlight';
+export { default as ServerTimeoutSpotlight } from './ServerTimeoutSpotlight';
 export { default as SettingsDrawerSpotlight } from './SettingsDrawerSpotlight';
-export {
-    default as StartMutedTogglesSpotlight
-} from './StartMutedTogglesSpotlight';
-export {
-    default as AlwaysOnTopWindowSpotlight
-} from './AlwaysOnTopWindowSpotlight';
+export { default as StartMutedTogglesSpotlight } from './StartMutedTogglesSpotlight';
+export { default as AlwaysOnTopWindowSpotlight } from './AlwaysOnTopWindowSpotlight';

app/features/onboarding/constants.js

@@ -6,11 +6,18 @@ import {
     SettingsDrawerSpotlight,
     NameSettingSpotlight,
     EmailSettingSpotlight,
-    ServerSettingSpotlight,
     StartMutedTogglesSpotlight,
+    ServerSettingSpotlight,
+    ServerTimeoutSpotlight,
     AlwaysOnTopWindowSpotlight
 } from './components';
 
+export const advenaceSettingsSteps = [
+    'server-setting',
+    'server-timeout',
+    'always-on-top-window'
+];
+
 export const onboardingSteps = {
     'welcome-page': [
         'onboarding-modal',
@@ -20,9 +27,8 @@ export const onboardingSteps = {
     'settings-drawer': [
         'name-setting',
         'email-setting',
-        'server-setting',
         'start-muted-toggles',
-        'always-on-top-window'
+        ...advenaceSettingsSteps
     ]
 };
 
@@ -32,7 +38,8 @@ export const onboardingComponents = {
     'settings-drawer-button': SettingsDrawerSpotlight,
     'name-setting': NameSettingSpotlight,
     'email-setting': EmailSettingSpotlight,
-    'server-setting': ServerSettingSpotlight,
     'start-muted-toggles': StartMutedTogglesSpotlight,
+    'server-setting': ServerSettingSpotlight,
+    'server-timeout': ServerTimeoutSpotlight,
     'always-on-top-window': AlwaysOnTopWindowSpotlight
 };

app/features/settings/components/SettingsDrawer.js

@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
 import { closeDrawer, DrawerContainer, Logo } from '../../navbar';
-import { Onboarding, startOnboarding } from '../../onboarding';
+import { Onboarding, advenaceSettingsSteps, startOnboarding } from '../../onboarding';
 import { Form, SettingsContainer, TogglesContainer } from '../styled';
 import { setEmail, setName } from '../actions';
 
@@ -37,6 +37,11 @@ type Props = {
      */
     _email: string;
 
+    /**
+     * Whether onboarding is active or not.
+     */
+    _isOnboardingAdvancedSettings: boolean,
+
     /**
      * Name of the user.
      */
@@ -117,22 +122,27 @@ class SettingsDrawer extends Component<Props, *> {
                                     value = { this.props._email } />
                             </Form>
                         </SpotlightTarget>
-                        <SpotlightTarget
-                            name = 'server-setting'>
-                            <ServerURLField />
-                        </SpotlightTarget>
                         <TogglesContainer>
                             <SpotlightTarget
                                 name = 'start-muted-toggles'>
                                 <StartMutedToggles />
                             </SpotlightTarget>
-                            <SpotlightTarget
-                                name = 'always-on-top-window'>
-                                <AlwaysOnTopWindowToggle />
-                            </SpotlightTarget>
                         </TogglesContainer>
-                        <Panel header = 'Advanced Settings'>
-                            <ServerTimeoutField />
+                        <Panel
+                            header = 'Advanced Settings'
+                            isDefaultExpanded = { this.props._isOnboardingAdvancedSettings }>
+                            <SpotlightTarget name = 'server-setting'>
+                                <ServerURLField />
+                            </SpotlightTarget>
+                            <SpotlightTarget name = 'server-timeout'>
+                                <ServerTimeoutField />
+                            </SpotlightTarget>
+                            <TogglesContainer>
+                                <SpotlightTarget
+                                    name = 'always-on-top-window'>
+                                    <AlwaysOnTopWindowToggle />
+                                </SpotlightTarget>
+                            </TogglesContainer>
                         </Panel>
                         <Onboarding section = 'settings-drawer' />
                     </SettingsContainer>
@@ -221,6 +231,7 @@ class SettingsDrawer extends Component<Props, *> {
 function _mapStateToProps(state: Object) {
     return {
         _email: state.settings.email,
+        _isOnboardingAdvancedSettings: !advenaceSettingsSteps.every(i => state.onboarding.onboardingShown.includes(i)),
         _name: state.settings.name
     };
 }

app/features/settings/styled/SettingsContainer.js

@@ -4,5 +4,6 @@ import styled from 'styled-components';
 
 export default styled.div`
     margin: 0 auto;
+    margin-bottom: 50px;
     width: 70%;
 `;