mirror of
https://github.com/netzbegruenung/jitsi-meet-electron.git
synced 2024-05-13 05:56:07 +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'
|
text: 'Next'
|
||||||
}
|
}
|
||||||
] }
|
] }
|
||||||
dialogPlacement = 'left top'
|
dialogPlacement = 'top right'
|
||||||
target = { 'always-on-top-window' } >
|
target = { 'always-on-top-window' } >
|
||||||
You can toggle whether you want to enable the "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.
|
which is displayed when the main window loses focus.
|
||||||
|
|
|
@ -45,7 +45,7 @@ class EmailSettingSpotlight extends Component<Props, *> {
|
||||||
text: 'Next'
|
text: 'Next'
|
||||||
}
|
}
|
||||||
] }
|
] }
|
||||||
dialogPlacement = 'left top'
|
dialogPlacement = 'top right'
|
||||||
target = { 'email-setting' } >
|
target = { 'email-setting' } >
|
||||||
The email you enter here will be part of your user profile.
|
The email you enter here will be part of your user profile.
|
||||||
</Spotlight>
|
</Spotlight>
|
||||||
|
|
|
@ -45,7 +45,7 @@ class NameSettingSpotlight extends Component<Props, *> {
|
||||||
text: 'Next'
|
text: 'Next'
|
||||||
}
|
}
|
||||||
] }
|
] }
|
||||||
dialogPlacement = 'left top'
|
dialogPlacement = 'top right'
|
||||||
target = { 'name-setting' } >
|
target = { 'name-setting' } >
|
||||||
This will be your display name, others will see you with this
|
This will be your display name, others will see you with this
|
||||||
name.
|
name.
|
||||||
|
|
|
@ -45,7 +45,7 @@ class ServerSettingSpotlight extends Component<Props, *> {
|
||||||
text: 'Next'
|
text: 'Next'
|
||||||
}
|
}
|
||||||
] }
|
] }
|
||||||
dialogPlacement = 'left top'
|
dialogPlacement = 'top right'
|
||||||
target = { 'server-setting' } >
|
target = { 'server-setting' } >
|
||||||
This will be the server where your conferences will take place.
|
This will be the server where your conferences will take place.
|
||||||
You can use your own, but you don't need to!
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Spotlight
|
<Spotlight
|
||||||
dialogPlacement = 'right top'
|
dialogPlacement = 'top right'
|
||||||
target = { 'settings-drawer-button' }
|
target = { 'settings-drawer-button' }
|
||||||
targetOnClick = { this._next }>
|
targetOnClick = { this._next }>
|
||||||
Click here to open the settings drawer.
|
Click here to open the settings drawer.
|
||||||
|
|
|
@ -45,7 +45,7 @@ class StartMutedTogglesSpotlight extends Component<Props, *> {
|
||||||
text: 'Next'
|
text: 'Next'
|
||||||
}
|
}
|
||||||
] }
|
] }
|
||||||
dialogPlacement = 'left top'
|
dialogPlacement = 'top right'
|
||||||
target = { 'start-muted-toggles' } >
|
target = { 'start-muted-toggles' } >
|
||||||
You can toggle if you want to start with your audio or video
|
You can toggle if you want to start with your audio or video
|
||||||
muted here. This will be applied to all conferences.
|
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 Onboarding } from './Onboarding';
|
||||||
export { default as OnboardingModal } from './OnboardingModal';
|
export { default as OnboardingModal } from './OnboardingModal';
|
||||||
export { default as ServerSettingSpotlight } from './ServerSettingSpotlight';
|
export { default as ServerSettingSpotlight } from './ServerSettingSpotlight';
|
||||||
|
export { default as ServerTimeoutSpotlight } from './ServerTimeoutSpotlight';
|
||||||
export { default as SettingsDrawerSpotlight } from './SettingsDrawerSpotlight';
|
export { default as SettingsDrawerSpotlight } from './SettingsDrawerSpotlight';
|
||||||
export {
|
export { default as StartMutedTogglesSpotlight } from './StartMutedTogglesSpotlight';
|
||||||
default as StartMutedTogglesSpotlight
|
export { default as AlwaysOnTopWindowSpotlight } from './AlwaysOnTopWindowSpotlight';
|
||||||
} from './StartMutedTogglesSpotlight';
|
|
||||||
export {
|
|
||||||
default as AlwaysOnTopWindowSpotlight
|
|
||||||
} from './AlwaysOnTopWindowSpotlight';
|
|
||||||
|
|
|
@ -6,11 +6,18 @@ import {
|
||||||
SettingsDrawerSpotlight,
|
SettingsDrawerSpotlight,
|
||||||
NameSettingSpotlight,
|
NameSettingSpotlight,
|
||||||
EmailSettingSpotlight,
|
EmailSettingSpotlight,
|
||||||
ServerSettingSpotlight,
|
|
||||||
StartMutedTogglesSpotlight,
|
StartMutedTogglesSpotlight,
|
||||||
|
ServerSettingSpotlight,
|
||||||
|
ServerTimeoutSpotlight,
|
||||||
AlwaysOnTopWindowSpotlight
|
AlwaysOnTopWindowSpotlight
|
||||||
} from './components';
|
} from './components';
|
||||||
|
|
||||||
|
export const advenaceSettingsSteps = [
|
||||||
|
'server-setting',
|
||||||
|
'server-timeout',
|
||||||
|
'always-on-top-window'
|
||||||
|
];
|
||||||
|
|
||||||
export const onboardingSteps = {
|
export const onboardingSteps = {
|
||||||
'welcome-page': [
|
'welcome-page': [
|
||||||
'onboarding-modal',
|
'onboarding-modal',
|
||||||
|
@ -20,9 +27,8 @@ export const onboardingSteps = {
|
||||||
'settings-drawer': [
|
'settings-drawer': [
|
||||||
'name-setting',
|
'name-setting',
|
||||||
'email-setting',
|
'email-setting',
|
||||||
'server-setting',
|
|
||||||
'start-muted-toggles',
|
'start-muted-toggles',
|
||||||
'always-on-top-window'
|
...advenaceSettingsSteps
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -32,7 +38,8 @@ export const onboardingComponents = {
|
||||||
'settings-drawer-button': SettingsDrawerSpotlight,
|
'settings-drawer-button': SettingsDrawerSpotlight,
|
||||||
'name-setting': NameSettingSpotlight,
|
'name-setting': NameSettingSpotlight,
|
||||||
'email-setting': EmailSettingSpotlight,
|
'email-setting': EmailSettingSpotlight,
|
||||||
'server-setting': ServerSettingSpotlight,
|
|
||||||
'start-muted-toggles': StartMutedTogglesSpotlight,
|
'start-muted-toggles': StartMutedTogglesSpotlight,
|
||||||
|
'server-setting': ServerSettingSpotlight,
|
||||||
|
'server-timeout': ServerTimeoutSpotlight,
|
||||||
'always-on-top-window': AlwaysOnTopWindowSpotlight
|
'always-on-top-window': AlwaysOnTopWindowSpotlight
|
||||||
};
|
};
|
||||||
|
|
|
@ -11,7 +11,7 @@ import { connect } from 'react-redux';
|
||||||
import type { Dispatch } from 'redux';
|
import type { Dispatch } from 'redux';
|
||||||
|
|
||||||
import { closeDrawer, DrawerContainer, Logo } from '../../navbar';
|
import { closeDrawer, DrawerContainer, Logo } from '../../navbar';
|
||||||
import { Onboarding, startOnboarding } from '../../onboarding';
|
import { Onboarding, advenaceSettingsSteps, startOnboarding } from '../../onboarding';
|
||||||
import { Form, SettingsContainer, TogglesContainer } from '../styled';
|
import { Form, SettingsContainer, TogglesContainer } from '../styled';
|
||||||
import { setEmail, setName } from '../actions';
|
import { setEmail, setName } from '../actions';
|
||||||
|
|
||||||
|
@ -37,6 +37,11 @@ type Props = {
|
||||||
*/
|
*/
|
||||||
_email: string;
|
_email: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether onboarding is active or not.
|
||||||
|
*/
|
||||||
|
_isOnboardingAdvancedSettings: boolean,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Name of the user.
|
* Name of the user.
|
||||||
*/
|
*/
|
||||||
|
@ -117,22 +122,27 @@ class SettingsDrawer extends Component<Props, *> {
|
||||||
value = { this.props._email } />
|
value = { this.props._email } />
|
||||||
</Form>
|
</Form>
|
||||||
</SpotlightTarget>
|
</SpotlightTarget>
|
||||||
<SpotlightTarget
|
|
||||||
name = 'server-setting'>
|
|
||||||
<ServerURLField />
|
|
||||||
</SpotlightTarget>
|
|
||||||
<TogglesContainer>
|
<TogglesContainer>
|
||||||
<SpotlightTarget
|
<SpotlightTarget
|
||||||
name = 'start-muted-toggles'>
|
name = 'start-muted-toggles'>
|
||||||
<StartMutedToggles />
|
<StartMutedToggles />
|
||||||
</SpotlightTarget>
|
</SpotlightTarget>
|
||||||
<SpotlightTarget
|
|
||||||
name = 'always-on-top-window'>
|
|
||||||
<AlwaysOnTopWindowToggle />
|
|
||||||
</SpotlightTarget>
|
|
||||||
</TogglesContainer>
|
</TogglesContainer>
|
||||||
<Panel header = 'Advanced Settings'>
|
<Panel
|
||||||
<ServerTimeoutField />
|
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>
|
</Panel>
|
||||||
<Onboarding section = 'settings-drawer' />
|
<Onboarding section = 'settings-drawer' />
|
||||||
</SettingsContainer>
|
</SettingsContainer>
|
||||||
|
@ -221,6 +231,7 @@ class SettingsDrawer extends Component<Props, *> {
|
||||||
function _mapStateToProps(state: Object) {
|
function _mapStateToProps(state: Object) {
|
||||||
return {
|
return {
|
||||||
_email: state.settings.email,
|
_email: state.settings.email,
|
||||||
|
_isOnboardingAdvancedSettings: !advenaceSettingsSteps.every(i => state.onboarding.onboardingShown.includes(i)),
|
||||||
_name: state.settings.name
|
_name: state.settings.name
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,5 +4,6 @@ import styled from 'styled-components';
|
||||||
|
|
||||||
export default styled.div`
|
export default styled.div`
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
margin-bottom: 50px;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
`;
|
`;
|
||||||
|
|
Loading…
Reference in a new issue