From 759b9a005b62069fb41d9fb2120bf21807b9b097 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <s@saghul.net>
Date: Thu, 4 Jun 2020 15:35:45 +0200
Subject: [PATCH] Reorganize settings drawer
---
.../components/AlwaysOnTopWindowSpotlight.js | 2 +-
.../components/EmailSettingSpotlight.js | 2 +-
.../components/NameSettingSpotlight.js | 2 +-
.../components/ServerSettingSpotlight.js | 2 +-
.../components/ServerTimeoutSpotlight.js | 67 +++++++++++++++++++
.../components/SettingsDrawerSpotlight.js | 2 +-
.../components/StartMutedTogglesSpotlight.js | 2 +-
app/features/onboarding/components/index.js | 9 +--
app/features/onboarding/constants.js | 15 +++--
.../settings/components/SettingsDrawer.js | 33 ++++++---
.../settings/styled/SettingsContainer.js | 1 +
11 files changed, 110 insertions(+), 27 deletions(-)
create mode 100644 app/features/onboarding/components/ServerTimeoutSpotlight.js
diff --git a/app/features/onboarding/components/AlwaysOnTopWindowSpotlight.js b/app/features/onboarding/components/AlwaysOnTopWindowSpotlight.js
index 93f99ec..53a8f2b 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 e4c3396..d1bee0e 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 69abec0..cb5ce51 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 dbd6eda..84b4c4c 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 0000000..9a016d9
--- /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 15ad601..f0bb0e8 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 cdc6733..4b4215f 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 9e47811..70e25e2 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 acc0a8d..c6ac5ca 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 62f2a05..970963d 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 8daae3a..3cf0ae6 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%;
`;
--
GitLab