From 759b9a005b62069fb41d9fb2120bf21807b9b097 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Thu, 4 Jun 2020 15:35:45 +0200 Subject: Reorganize settings drawer --- .../components/AlwaysOnTopWindowSpotlight.js | 2 +- .../onboarding/components/EmailSettingSpotlight.js | 2 +- .../onboarding/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 +++-- app/features/settings/components/SettingsDrawer.js | 33 +++++++---- app/features/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 { 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 { text: 'Next' } ] } - dialogPlacement = 'left top' + dialogPlacement = 'top right' target = { 'email-setting' } > The email you enter here will be part of your user profile. 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 { 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 { 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 { + /** + * 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 ( + + Timeout to join a meeting, if the meeting hasn't been joined before the timeout hits, it's cancelled. + + ); + } + + _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 { render() { return ( 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 { 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 { value = { this.props._email } /> - - - - - - - - + + + + + + + + + + + + @@ -221,6 +231,7 @@ class SettingsDrawer extends Component { 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%; `; -- cgit v1.2.3