mirror of
https://github.com/netzbegruenung/jitsi-meet-electron.git
synced 2024-04-28 06:44:52 +02:00
Reorganize settings drawer
This commit is contained in:
parent
8de41a414d
commit
759b9a005b
|
@ -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.
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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!
|
||||
|
|
67
app/features/onboarding/components/ServerTimeoutSpotlight.js
Normal file
67
app/features/onboarding/components/ServerTimeoutSpotlight.js
Normal file
|
@ -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);
|
|
@ -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.
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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
|
||||
};
|
||||
|
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
|
|
@ -4,5 +4,6 @@ import styled from 'styled-components';
|
|||
|
||||
export default styled.div`
|
||||
margin: 0 auto;
|
||||
margin-bottom: 50px;
|
||||
width: 70%;
|
||||
`;
|
||||
|
|
Loading…
Reference in a new issue