diff --git a/ui/frontend/Icon.tsx b/ui/frontend/Icon.tsx index 6e44d7fa3..b4c656811 100644 --- a/ui/frontend/Icon.tsx +++ b/ui/frontend/Icon.tsx @@ -36,20 +36,26 @@ export const MoreOptionsActiveIcon = () => ( ); -// M.D. 'settings', -export const ConfigIcon = () => ( - +const createConfigIcon = (size: string) => () => ( + -); +) -// M.D. 'help_outline' -export const HelpIcon = () => ( - +// M.D. 'settings', +export const ConfigIcon = createConfigIcon('15'); +export const RustfmtTomlIcon = createConfigIcon('30'); + +const createHelpIcon = (size: string) => () => ( + ); +// M.D. 'help_outline' +export const HelpIcon = createHelpIcon('18'); +export const RustfmtModalHelpIcon = createHelpIcon('24'); + export const CheckmarkIcon = () => ( diff --git a/ui/frontend/Playground.tsx b/ui/frontend/Playground.tsx index c99c1a244..d28eaa81b 100644 --- a/ui/frontend/Playground.tsx +++ b/ui/frontend/Playground.tsx @@ -5,11 +5,13 @@ import Editor from './Editor'; import Header from './Header'; import Notifications from './Notifications'; import Output from './Output'; +import RustfmtTomlModal from './RustfmtTomlModal'; import * as selectors from './selectors'; import State from './state'; const Playground: React.SFC = () => { const showNotifications = useSelector(selectors.anyNotificationsToShowSelector); + const showRustfmtTomlModal = useSelector((state: State) => state.rustfmt.show); const focus = useSelector((state: State) => state.output.meta.focus); const splitOrientation = useSelector((state: State) => state.configuration.orientation); @@ -17,6 +19,10 @@ const Playground: React.SFC = () => { const splitClass = 'playground-split'; const orientation = splitClass + '-' + splitOrientation; + const rustfmtModal = showRustfmtTomlModal + ? + : null + return (
@@ -33,6 +39,7 @@ const Playground: React.SFC = () => {
{showNotifications && } + {rustfmtModal} ); }; diff --git a/ui/frontend/RustfmtTomlModal.tsx b/ui/frontend/RustfmtTomlModal.tsx new file mode 100644 index 000000000..ee2ad573c --- /dev/null +++ b/ui/frontend/RustfmtTomlModal.tsx @@ -0,0 +1,62 @@ +import React, { useCallback } from 'react'; +import { useSelector, useDispatch } from 'react-redux'; + +import { Rnd } from 'react-rnd'; + +import * as actions from './actions'; +import { Close as CloseIcon, RustfmtModalHelpIcon } from './Icon'; + +import TomlEditor from './TomlEditor'; +import State from './state'; + +const ModalDefaultWidth = 320; +const ModalDefaultHeight = 200; +const DefaultState = { + x: (window.innerWidth / 2) - ModalDefaultWidth, + y: (window.innerHeight / 2) - ModalDefaultHeight, + width: ModalDefaultWidth, + height: ModalDefaultHeight, +}; + +const RustfmtTomlModal: React.SFC = () => { + const toml = useSelector((state: State) => state.rustfmt.toml); + const dispatch = useDispatch(); + + const onEditRustfmt = useCallback((c) => dispatch(actions.editRustfmtToml(c)), [dispatch]); + const formatDialog = useCallback(() => { + dispatch(actions.toggleRustfmtTomlModalShow()); + }, [dispatch]); + + const Close = + + return ( + +
+
+
rustfmt.toml
+
+ + {Close} +
+
+ +
+
+ ); +}; + +const HelpIcon: React.SFC = () => ( + + + +); + +export default RustfmtTomlModal; diff --git a/ui/frontend/TomlEditor.tsx b/ui/frontend/TomlEditor.tsx new file mode 100644 index 000000000..53b86607e --- /dev/null +++ b/ui/frontend/TomlEditor.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +type TomlEditorProps = { + toml: string; + onEditCode: (_: string) => any; +} + +class TomlEditor extends React.PureComponent { + private _editor: HTMLTextAreaElement; + + private onChange = e => this.props.onEditCode(e.target.value); + private trackEditor = component => this._editor = component; + + public render() { + return ( +