haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: Convert inline dialog to modal dialog

This commit is contained in:
Radium Zheng 2018-07-18 10:30:54 +10:00
parent 2f2e69a6f5
commit a277421ecb
7 changed files with 36 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
react/features/local-recording/actionTypes.js
View File

@ -19,16 +19,6 @@ export const LOCAL_RECORDING_ENGAGED = Symbol('LOCAL_RECORDING_ENGAGED');
*/
export const LOCAL_RECORDING_UNENGAGED = Symbol('LOCAL_RECORDING_UNENGAGED');
/**
* Action to show/hide {@code LocalRecordingInfoDialog}.
*
* {
* type: LOCAL_RECORDING_TOGGLE_DIALOG
* }
*/
export const LOCAL_RECORDING_TOGGLE_DIALOG
= Symbol('LOCAL_RECORDING_TOGGLE_DIALOG');
/**
* Action to update {@code LocalRecordingInfoDialog} with stats from all
* clients.

14
react/features/local-recording/actions.js
View File

@ -3,7 +3,6 @@
import {
LOCAL_RECORDING_ENGAGED,
LOCAL_RECORDING_UNENGAGED,
LOCAL_RECORDING_TOGGLE_DIALOG,
LOCAL_RECORDING_STATS_UPDATE
} from './actionTypes';
@ -42,19 +41,6 @@ export function localRecordingUnengaged() {
};
}
/**
* Toggles the open/close state of {@code LocalRecordingInfoDialog}.
*
* @returns {{
* type: LOCAL_RECORDING_TOGGLE_DIALOG
* }}
*/
export function toggleLocalRecordingInfoDialog() {
return {
type: LOCAL_RECORDING_TOGGLE_DIALOG
};
}
/**
* Updates the the local recording stats from each client,
* to be displayed on {@code LocalRecordingInfoDialog}.

25
react/features/local-recording/components/LocalRecordingButton.js
View File

@ -1,13 +1,10 @@
/* @flow */
import InlineDialog from '@atlaskit/inline-dialog';
import React, { Component } from 'react';
import { translate } from '../../base/i18n';
import { ToolbarButton } from '../../toolbox';
import LocalRecordingInfoDialog from './LocalRecordingInfoDialog';
/**
* The type of the React {@code Component} state of
* {@link LocalRecordingButton}.
@ -64,22 +61,12 @@ class LocalRecordingButton extends Component<Props> {
? 'icon-rec toggled' : 'icon-rec'}`;
return (
<div className = 'toolbox-button-wth-dialog'>
<InlineDialog
content = {
<LocalRecordingInfoDialog />
}
isOpen = { isDialogShown }
onClose = { this._onCloseDialog }
position = { 'top right' }>
<ToolbarButton
accessibilityLabel
= { t('toolbar.accessibilityLabel.localRecording') }
iconName = { iconClasses }
onClick = { this._onClick }
tooltip = { t('localRecording.dialogTitle') } />
</InlineDialog>
</div>
<ToolbarButton
accessibilityLabel
= { t('toolbar.accessibilityLabel.localRecording') }
iconName = { iconClasses }
onClick = { this._onClick }
tooltip = { t('localRecording.dialogTitle') } />
);
}

42
react/features/local-recording/components/LocalRecordingInfoDialog.js
View File

@ -4,6 +4,7 @@ import moment from 'moment';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Dialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import {
PARTICIPANT_ROLE,
@ -279,27 +280,32 @@ class LocalRecordingInfoDialog extends Component<Props, State> {
}
return (
<div>
<div>
<span className = 'info-label'>
{`${t('localRecording.participantStats')}:`}
</span>
</div>
{ this._renderStats() }
<div className = 'info-dialog-action-links'>
<div className = 'info-dialog-action-link'>
{ isEngaged ? <a
onClick = { this._onStop }>
{ t('localRecording.stop') }
</a>
: <a
onClick = { this._onStart }>
{ t('localRecording.start') }
<Dialog
cancelTitleKey = { 'dialog.close' }
submitDisabled = { true }
titleKey = 'localRecording.dialogTitle'>
<div className = 'local-recording'>
<div>
<span className = 'info-label'>
{`${t('localRecording.participantStats')}:`}
</span>
</div>
{ this._renderStats() }
<div className = 'info-dialog-action-links'>
<div className = 'info-dialog-action-link'>
{ isEngaged ? <a
onClick = { this._onStop }>
{ t('localRecording.stop') }
</a>
}
: <a
onClick = { this._onStart }>
{ t('localRecording.start') }
</a>
}
</div>
</div>
</div>
</div>
</Dialog>
);
}

3
react/features/local-recording/components/index.js
View File

@ -1 +1,4 @@
export { default as LocalRecordingButton } from './LocalRecordingButton';
export {
default as LocalRecordingInfoDialog
} from './LocalRecordingInfoDialog';

7
react/features/local-recording/reducer.js
View File

@ -4,7 +4,6 @@ import { ReducerRegistry } from '../base/redux';
import {
LOCAL_RECORDING_ENGAGED,
LOCAL_RECORDING_STATS_UPDATE,
LOCAL_RECORDING_TOGGLE_DIALOG,
LOCAL_RECORDING_UNENGAGED
} from './actionTypes';
import { recordingController } from './controller';
@ -25,12 +24,6 @@ ReducerRegistry.register('features/local-recording', (state = {}, action) => {
isEngaged: false,
recordingEngagedAt: null
};
case LOCAL_RECORDING_TOGGLE_DIALOG:
return {
...state,
showDialog: state.showDialog === undefined
|| state.showDialog === false
};
case LOCAL_RECORDING_STATS_UPDATE:
return {
...state,

6
react/features/toolbox/components/web/Toolbox.js
View File

@ -29,8 +29,8 @@ import {
} from '../../../invite';
import { openKeyboardShortcutsDialog } from '../../../keyboard-shortcuts';
import {
toggleLocalRecordingInfoDialog,
LocalRecordingButton
LocalRecordingButton,
LocalRecordingInfoDialog
} from '../../../local-recording';
import {
LiveStreamButton,
@ -873,7 +873,7 @@ class Toolbox extends Component<Props> {
* @returns {void}
*/
_onToolbarToggleLocalRecordingInfoDialog() {
this.props.dispatch(toggleLocalRecordingInfoDialog());
this.props.dispatch(openDialog(LocalRecordingInfoDialog));
}
/**