WIP: Convert inline dialog to modal dialog

react/features/local-recording/actionTypes.js

@@ -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.

react/features/local-recording/actions.js

@@ -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}.

react/features/local-recording/components/LocalRecordingButton.js

@@ -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') } />
         );
     }
 

react/features/local-recording/components/LocalRecordingInfoDialog.js

@@ -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>
         );
     }
 

react/features/local-recording/components/index.js

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

react/features/local-recording/reducer.js

@@ -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,

react/features/toolbox/components/web/Toolbox.js

@@ -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));
     }
 
     /**