diff --git a/app/features/onboarding/components/AlwaysOnTopWindowSpotlight.js b/app/features/onboarding/components/AlwaysOnTopWindowSpotlight.js
index 93f99ecac4a252b710ad49ec7cce97be94544e57..53a8f2b991eafdcf589e803a18ca390c463d856d 100644
--- a/app/features/onboarding/components/AlwaysOnTopWindowSpotlight.js
+++ b/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.
diff --git a/app/features/onboarding/components/EmailSettingSpotlight.js b/app/features/onboarding/components/EmailSettingSpotlight.js
index e4c339670c441678b0b7471f22eab6d14d5c57ef..d1bee0e7123eb8cdea4788620afc8d9caa5c93d0 100644
--- a/app/features/onboarding/components/EmailSettingSpotlight.js
+++ b/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>
diff --git a/app/features/onboarding/components/NameSettingSpotlight.js b/app/features/onboarding/components/NameSettingSpotlight.js
index 69abec08dbe6e74d9cad100901b76faddfc66a79..cb5ce51c66e0a97ac5bd653d19eaa6aff3c6eb79 100644
--- a/app/features/onboarding/components/NameSettingSpotlight.js
+++ b/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.
diff --git a/app/features/onboarding/components/ServerSettingSpotlight.js b/app/features/onboarding/components/ServerSettingSpotlight.js
index dbd6edab88311a70db11b807c171624aa801233b..84b4c4ca0d97c45cb959552e73fe567c81ef1114 100644
--- a/app/features/onboarding/components/ServerSettingSpotlight.js
+++ b/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!
diff --git a/app/features/onboarding/components/ServerTimeoutSpotlight.js b/app/features/onboarding/components/ServerTimeoutSpotlight.js
new file mode 100644
index 0000000000000000000000000000000000000000..9a016d970655dd214f68cb4dc8d1ea2648ebf41e
--- /dev/null
+++ b/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);
diff --git a/app/features/onboarding/components/SettingsDrawerSpotlight.js b/app/features/onboarding/components/SettingsDrawerSpotlight.js
index 15ad6015f54b9e133f462c623c7eee200db7e8a8..f0bb0e88d258d2a456f63fa9363e5e4abe7695c7 100644
--- a/app/features/onboarding/components/SettingsDrawerSpotlight.js
+++ b/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.
diff --git a/app/features/onboarding/components/StartMutedTogglesSpotlight.js b/app/features/onboarding/components/StartMutedTogglesSpotlight.js
index cdc6733eabe6f0b17c03757094dfc612305797eb..4b4215fa6434a754ada7a6526eb0f8ab185c76b3 100644
--- a/app/features/onboarding/components/StartMutedTogglesSpotlight.js
+++ b/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.
diff --git a/app/features/onboarding/components/index.js b/app/features/onboarding/components/index.js
index 9e47811dd5ef69990910c9cf2a1d8f520826e481..70e25e27115cedcc48471f643dbabf09050c3125 100644
--- a/app/features/onboarding/components/index.js
+++ b/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';
diff --git a/app/features/onboarding/constants.js b/app/features/onboarding/constants.js
index acc0a8dcfb092f867033a41dc8cdf7dd8ebd88c0..c6ac5ca7c685a73174abfc9c87458cc9d9b4f157 100644
--- a/app/features/onboarding/constants.js
+++ b/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
};
diff --git a/app/features/settings/components/SettingsDrawer.js b/app/features/settings/components/SettingsDrawer.js
index 62f2a050e2136e312e840417876f3fe898d78c4f..970963d84c1de6f413656538aba87e79c6cf8439 100644
--- a/app/features/settings/components/SettingsDrawer.js
+++ b/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
};
}
diff --git a/app/features/settings/styled/SettingsContainer.js b/app/features/settings/styled/SettingsContainer.js
index 8daae3aa17fdc6318c97bd5cb3fed4bd44d3ae06..3cf0ae641062404c175238a04f58aed91cb27d99 100644
--- a/app/features/settings/styled/SettingsContainer.js
+++ b/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%;
`;