From eff279375506f71114731a7ac2c68b1543e5742b Mon Sep 17 00:00:00 2001 From: timglabisch Date: Thu, 5 Apr 2018 23:02:15 +0200 Subject: [PATCH 1/3] presentation mode --- ui/frontend/Configuration.tsx | 18 +++++- ui/frontend/Header.tsx | 40 +++++++----- ui/frontend/Playground.tsx | 8 ++- ui/frontend/actions.ts | 16 ++++- ui/frontend/index.scss | 93 ++++++++++++++++++++++++--- ui/frontend/reducers/configuration.ts | 5 ++ ui/frontend/types.ts | 4 ++ 7 files changed, 153 insertions(+), 31 deletions(-) diff --git a/ui/frontend/Configuration.tsx b/ui/frontend/Configuration.tsx index f0991b432..5de9d0f8f 100644 --- a/ui/frontend/Configuration.tsx +++ b/ui/frontend/Configuration.tsx @@ -9,12 +9,13 @@ import { changeEditor, changeKeybinding, changeOrientation, + changePageMode, changeProcessAssembly, changeTheme, toggleConfiguration, } from './actions'; import State from './state'; -import { AssemblyFlavor, DemangleAssembly, Editor, Orientation, ProcessAssembly} from './types'; +import {AssemblyFlavor, DemangleAssembly, Editor, Orientation, PageMode, ProcessAssembly} from './types'; const keybindingOptions = ACE_KEYBINDINGS.map(t => ); const themeOptions = ACE_THEMES.map(t => ); @@ -47,6 +48,7 @@ const ESCAPE_KEYCODE = 27; class Configuration extends React.PureComponent { private onChangeEditor = e => this.props.changeEditor(e.target.value); + private onChangePageMode = e => this.props.changePageMode(e.target.value); private onChangeKeybinding = e => this.props.changeKeybinding(e.target.value); private onChangeTheme = e => this.props.changeTheme(e.target.value); private onChangeOrientation = e => this.props.changeOrientation(e.target.value); @@ -70,6 +72,7 @@ class Configuration extends React.PureComponent { public render() { const { editor, + pageMode, keybinding, theme, orientation, @@ -101,6 +104,14 @@ class Configuration extends React.PureComponent { return (
+ + + + + { interface ConfigurationProps { changeEditor: (Editor) => any; + changePageMode: (PageMode) => any; changeKeybinding: (_: string) => any; changeTheme: (_: string) => any; changeOrientation: (Orientation) => any; @@ -163,6 +175,7 @@ interface ConfigurationProps { changeDemangleAssembly: (DemangleAssembly) => any; changeProcessAssembly: (ProcessAssembly) => any; editor: Editor; + pageMode: PageMode; keybinding: string; theme: string; orientation: Orientation; @@ -174,6 +187,7 @@ interface ConfigurationProps { const mapStateToProps = ({ configuration: { editor, + pageMode, keybinding, theme, orientation, @@ -183,6 +197,7 @@ const mapStateToProps = ({ configuration: { }: State) => ( { editor, + pageMode, keybinding, theme, orientation, @@ -194,6 +209,7 @@ const mapStateToProps = ({ configuration: { const mapDispatchToProps = ({ changeEditor, + changePageMode, changeKeybinding, changeTheme, changeOrientation, diff --git a/ui/frontend/Header.tsx b/ui/frontend/Header.tsx index 3f8e57bb3..5ed32f61e 100644 --- a/ui/frontend/Header.tsx +++ b/ui/frontend/Header.tsx @@ -25,7 +25,7 @@ import { stableVersionText, } from './selectors'; import State from './state'; -import { Channel, Mode } from './types'; +import { Channel, Mode, PageMode } from './types'; function oneRadio( name: string, @@ -71,7 +71,7 @@ class Header extends React.PureComponent { const { execute, compileToAssembly, compileToLLVM, compileToMir, compileToWasm, format, clippy, gistSave, - channel, changeChannel, mode, changeMode, + channel, changeChannel, mode, changeMode, pageMode, crateType, tests, toggleConfiguration, navigateToHelp, stableVersion, betaVersion, nightlyVersion, @@ -85,6 +85,15 @@ class Header extends React.PureComponent { const primaryLabel = executionLabel(crateType, tests); + + const share = pageMode === PageMode.Presentation ? '' :
+
+ +
+
; + + return (
@@ -108,40 +117,35 @@ class Header extends React.PureComponent { Tools
+ onClick={format}>{pageMode === PageMode.Presentation ? 'F' : 'Format'} + onClick={clippy}>{pageMode === PageMode.Presentation ? 'C' : 'Format'}
-
-
- -
-
+ {share}
Mode
- {oneMode(Mode.Debug, 'Debug')} - {oneMode(Mode.Release, 'Release')} + {oneMode(Mode.Debug, pageMode === PageMode.Presentation ? 'D' : 'Debug')} + {oneMode(Mode.Release, pageMode === PageMode.Presentation ? 'R' : 'Release')}
Channel
- {oneChannel(Channel.Stable, 'Stable', { title: stableVersion })} - {oneChannel(Channel.Beta, 'Beta', { title: betaVersion })} - {oneChannel(Channel.Nightly, 'Nightly', { title: nightlyVersion })} + {oneChannel(Channel.Stable, pageMode === PageMode.Presentation ? 'S' : 'Stable', { title: stableVersion })} + {oneChannel(Channel.Beta, pageMode === PageMode.Presentation ? 'B' : 'Beta', { title: betaVersion })} + {oneChannel(Channel.Nightly, pageMode === PageMode.Presentation ? 'N' : 'Nightly', { title: nightlyVersion })}
+ onClick={toggleConfiguration}>{pageMode === PageMode.Presentation ? 'C' : 'Config'}
@@ -168,6 +172,7 @@ interface HeaderProps { format: () => any; gistSave: () => any; mode: Mode; + pageMode: PageMode; crateType: string; tests: boolean; toggleConfiguration: () => any; @@ -179,11 +184,12 @@ interface HeaderProps { } const mapStateToProps = (state: State) => { - const { configuration: { channel, mode } } = state; + const { configuration: { channel, mode, pageMode } } = state; return { channel, mode, + pageMode, crateType: getCrateType(state), tests: runAsTest(state), navigateToHelp, diff --git a/ui/frontend/Playground.tsx b/ui/frontend/Playground.tsx index b9ba4f81d..89ac5037d 100644 --- a/ui/frontend/Playground.tsx +++ b/ui/frontend/Playground.tsx @@ -7,7 +7,7 @@ import Header from './Header'; import Output from './Output'; import { Focus } from './reducers/output/meta'; import State from './state'; -import { Orientation } from './types'; +import { Orientation, PageMode } from './types'; const ConfigurationModal: React.SFC = () => (
@@ -17,14 +17,14 @@ const ConfigurationModal: React.SFC = () => (
); -const Playground: React.SFC = ({ showConfig, focus, splitOrientation }) => { +const Playground: React.SFC = ({ showConfig, focus, splitOrientation, pageMode }) => { const config = showConfig ? : null; const outputFocused = focus ? 'playground-output-focused' : ''; const splitClass = 'playground-split'; const orientation = splitClass + '-' + splitOrientation; return ( -
+
{config}
@@ -45,11 +45,13 @@ const Playground: React.SFC = ({ showConfig, focus, splitOrientation }) = interface Props { focus?: Focus; + pageMode: PageMode; showConfig: boolean; splitOrientation: Orientation; } const mapStateToProps = (state: State) => ({ + pageMode: state.configuration.pageMode, showConfig: state.configuration.shown, focus: state.output.meta.focus, splitOrientation: state.configuration.orientation, diff --git a/ui/frontend/actions.ts b/ui/frontend/actions.ts index 89bc5ffa1..cacc9d71f 100644 --- a/ui/frontend/actions.ts +++ b/ui/frontend/actions.ts @@ -12,6 +12,7 @@ import { Mode, Orientation, Page, + PageMode, ProcessAssembly, } from './types'; @@ -49,6 +50,7 @@ export enum ActionType { ToggleConfiguration = 'TOGGLE_CONFIGURATION', SetPage = 'SET_PAGE', ChangeEditor = 'CHANGE_EDITOR', + ChangePageMode = 'CHANGE_PAGE_MODE', ChangeKeybinding = 'CHANGE_KEYBINDING', ChangeTheme = 'CHANGE_THEME', ChangeOrientation = 'CHANGE_ORIENTATION', @@ -84,6 +86,7 @@ export type Action = | ChangeChannelAction | ChangeDemangleAssemblyAction | ChangeEditorAction + | ChangePageModeAction | ChangeFocusAction | ChangeProcessAssemblyAction | ChangeKeybindingAction @@ -123,6 +126,11 @@ export interface ChangeEditorAction { editor: Editor; } +export interface ChangePageModeAction { + type: ActionType.ChangePageMode; + pageMode: PageMode; +} + export interface ChangeKeybindingAction { type: ActionType.ChangeKeybinding; keybinding: string; @@ -180,6 +188,10 @@ export function changeKeybinding(keybinding): ChangeKeybindingAction { return { type: ActionType.ChangeKeybinding, keybinding }; } +export function changePageMode(pageMode): ChangePageModeAction { + return { type: ActionType.ChangePageMode, pageMode }; +} + export function changeTheme(theme): ChangeThemeAction { return { type: ActionType.ChangeTheme, theme }; } @@ -645,10 +657,12 @@ function parseMode(s: string): Mode | null { } } -export function indexPageLoad({ code, gist, version = 'stable', mode: modeString = 'debug' }): ThunkAction { +export function indexPageLoad({ code, gist, version = 'stable', mode: modeString = 'debug', pageMode = PageMode.Normal }): ThunkAction { return function(dispatch) { dispatch(navigateToIndex()); + dispatch(changePageMode(pageMode)); + if (code) { dispatch(editCode(code)); } else if (gist) { diff --git a/ui/frontend/index.scss b/ui/frontend/index.scss index b9f90a140..3ce9a5f21 100644 --- a/ui/frontend/index.scss +++ b/ui/frontend/index.scss @@ -27,7 +27,6 @@ html { body { background-color: $background; - padding: 0 1em; font-family: $primary-font; } @@ -51,12 +50,93 @@ body { margin-bottom: 4px; } +@mixin body-monospace-presentation { + font-size: 1.9em; + // http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/ + // ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; + font-family: 'Source Code Pro', monospace; +} + +@mixin body-monospace { + font-size: 0.9em; + // http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/ + // ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; + font-family: 'Source Code Pro', monospace; +} + +.playground-mode-presentation { + + &:hover { + .playground-header { + display:block; + } + } + + .playground-header { + display:none; + z-index: 20; + position: absolute; + top: 3px; + right: 3px; + } + + #editor { + @include body-monospace-presentation; + } + + .editor { + &-simple { + @include body-monospace-presentation; + } + } + + .output { + .code { + @include body-monospace-presentation; + } + } + + .playground { + padding: 0; + + &-editor { + border:none; + } + } + + .header { + padding:0; + + .header-set { + margin-left:0.3em; + } + + .header-set__btn--primary { + font-size: 0.7rem; + } + + .header-set__btn { + font-size: 0.7rem; + } + + .header-set__radio-label { + font-size: 0.7rem; + padding: 0.12em; + } + + .header-set__title { + display:none; + } + } + +} + .playground { display: flex; height: 100vh; flex-direction: column; - padding-bottom: 1em; + padding: 0 1em 1em 1em; &-split { display: flex; @@ -144,12 +224,7 @@ body { } } -@mixin body-monospace { - font-size: 0.9em; - // http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/ - // ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; - font-family: 'Source Code Pro', monospace; -} + .header { display: flex; @@ -524,4 +599,4 @@ $PHI: 2.61803398875; visibility: visible; opacity: 1; } -} +} \ No newline at end of file diff --git a/ui/frontend/reducers/configuration.ts b/ui/frontend/reducers/configuration.ts index 9feddb298..26e9db404 100644 --- a/ui/frontend/reducers/configuration.ts +++ b/ui/frontend/reducers/configuration.ts @@ -6,6 +6,7 @@ import { Editor, Mode, Orientation, + PageMode, ProcessAssembly, } from '../types'; @@ -20,6 +21,7 @@ export interface State { processAssembly: ProcessAssembly; channel: Channel; mode: Mode; + pageMode: PageMode } export const DEFAULT: State = { @@ -33,12 +35,15 @@ export const DEFAULT: State = { processAssembly: ProcessAssembly.Filter, channel: Channel.Stable, mode: Mode.Debug, + pageMode: PageMode.Normal }; export default function configuration(state = DEFAULT, action: Action): State { switch (action.type) { case ActionType.ToggleConfiguration: return { ...state, shown: !state.shown }; + case ActionType.ChangePageMode: + return { ...state, pageMode: action.pageMode }; case ActionType.ChangeEditor: return { ...state, editor: action.editor }; case ActionType.ChangeKeybinding: diff --git a/ui/frontend/types.ts b/ui/frontend/types.ts index d51f0262d..3b1c469df 100644 --- a/ui/frontend/types.ts +++ b/ui/frontend/types.ts @@ -29,6 +29,10 @@ export enum Editor { Simple = 'simple', Advanced = 'advanced', } +export enum PageMode { + Normal = 'normal', + Presentation = 'presentation', +} export enum Orientation { Automatic = 'automatic', From 4b554dbb7aa55b9e410bf0434a557ebe5ec2ccda Mon Sep 17 00:00:00 2001 From: timglabisch Date: Mon, 14 May 2018 21:10:09 +0200 Subject: [PATCH 2/3] fix coding style --- ui/frontend/ConfigMenu.tsx | 16 ++++- ui/frontend/Configuration.tsx | 18 +----- ui/frontend/actions.ts | 8 ++- ui/frontend/index.scss | 84 ++++++++++++++++++++++++++- ui/frontend/reducers/configuration.ts | 4 +- 5 files changed, 107 insertions(+), 23 deletions(-) diff --git a/ui/frontend/ConfigMenu.tsx b/ui/frontend/ConfigMenu.tsx index 0cf8e1d64..9b6e44517 100644 --- a/ui/frontend/ConfigMenu.tsx +++ b/ui/frontend/ConfigMenu.tsx @@ -12,12 +12,13 @@ import { changeEditor, changeKeybinding, changeOrientation, + changePageMode, changeProcessAssembly, changeTheme, toggleConfiguration, } from './actions'; import State from './state'; -import { AssemblyFlavor, DemangleAssembly, Editor, Orientation, ProcessAssembly } from './types'; +import { AssemblyFlavor, DemangleAssembly, Editor, Orientation, PageMode, ProcessAssembly } from './types'; interface ConfigMenuProps { assemblyFlavor: AssemblyFlavor; @@ -26,12 +27,14 @@ interface ConfigMenuProps { changeEditorStyle: (_: Editor) => any; changeKeybinding: (_: string) => any; changeOrientation: (_: Orientation) => any; + changePageMode: (_: PageMode) => any; changeProcessAssembly: (_: ProcessAssembly) => any; changeTheme: (_: string) => any; demangleAssembly: DemangleAssembly; editorStyle: Editor; keybinding: string; orientation: Orientation; + pageMode: PageMode; processAssembly: ProcessAssembly; theme: string; close: () => void; @@ -70,6 +73,15 @@ const ConfigMenu: React.SFC = props => ( + + + + + ({ keybinding: state.configuration.keybinding, theme: state.configuration.theme, orientation: state.configuration.orientation, + pageMode: state.configuration.pageMode, editorStyle: state.configuration.editor, assemblyFlavor: state.configuration.assemblyFlavor, demangleAssembly: state.configuration.demangleAssembly, @@ -131,6 +144,7 @@ const mapDispatchToProps = ({ changeTheme, changeKeybinding, changeOrientation, + changePageMode, changeEditorStyle: changeEditor, changeAssemblyFlavor, changeProcessAssembly, diff --git a/ui/frontend/Configuration.tsx b/ui/frontend/Configuration.tsx index 5de9d0f8f..aa410629a 100644 --- a/ui/frontend/Configuration.tsx +++ b/ui/frontend/Configuration.tsx @@ -9,13 +9,12 @@ import { changeEditor, changeKeybinding, changeOrientation, - changePageMode, changeProcessAssembly, changeTheme, toggleConfiguration, } from './actions'; import State from './state'; -import {AssemblyFlavor, DemangleAssembly, Editor, Orientation, PageMode, ProcessAssembly} from './types'; +import {AssemblyFlavor, DemangleAssembly, Editor, Orientation, ProcessAssembly} from './types'; const keybindingOptions = ACE_KEYBINDINGS.map(t => ); const themeOptions = ACE_THEMES.map(t => ); @@ -48,7 +47,6 @@ const ESCAPE_KEYCODE = 27; class Configuration extends React.PureComponent { private onChangeEditor = e => this.props.changeEditor(e.target.value); - private onChangePageMode = e => this.props.changePageMode(e.target.value); private onChangeKeybinding = e => this.props.changeKeybinding(e.target.value); private onChangeTheme = e => this.props.changeTheme(e.target.value); private onChangeOrientation = e => this.props.changeOrientation(e.target.value); @@ -72,7 +70,6 @@ class Configuration extends React.PureComponent { public render() { const { editor, - pageMode, keybinding, theme, orientation, @@ -104,14 +101,6 @@ class Configuration extends React.PureComponent { return (
- - - - - { interface ConfigurationProps { changeEditor: (Editor) => any; - changePageMode: (PageMode) => any; changeKeybinding: (_: string) => any; changeTheme: (_: string) => any; changeOrientation: (Orientation) => any; @@ -175,7 +163,6 @@ interface ConfigurationProps { changeDemangleAssembly: (DemangleAssembly) => any; changeProcessAssembly: (ProcessAssembly) => any; editor: Editor; - pageMode: PageMode; keybinding: string; theme: string; orientation: Orientation; @@ -187,7 +174,6 @@ interface ConfigurationProps { const mapStateToProps = ({ configuration: { editor, - pageMode, keybinding, theme, orientation, @@ -197,7 +183,6 @@ const mapStateToProps = ({ configuration: { }: State) => ( { editor, - pageMode, keybinding, theme, orientation, @@ -209,7 +194,6 @@ const mapStateToProps = ({ configuration: { const mapDispatchToProps = ({ changeEditor, - changePageMode, changeKeybinding, changeTheme, changeOrientation, diff --git a/ui/frontend/actions.ts b/ui/frontend/actions.ts index 22ddde2a0..6b6946e0d 100644 --- a/ui/frontend/actions.ts +++ b/ui/frontend/actions.ts @@ -662,7 +662,13 @@ function parseMode(s: string): Mode | null { } } -export function indexPageLoad({ code, gist, version = 'stable', mode: modeString = 'debug', pageMode = PageMode.Normal }): ThunkAction { +export function indexPageLoad({ + code, + gist, + version = 'stable', + mode: modeString = 'debug', + pageMode = PageMode.Normal, +}): ThunkAction { return function(dispatch) { dispatch(navigateToIndex()); diff --git a/ui/frontend/index.scss b/ui/frontend/index.scss index 61d125fa0..e22755b52 100644 --- a/ui/frontend/index.scss +++ b/ui/frontend/index.scss @@ -27,7 +27,6 @@ html { body { background-color: $background; - padding: 0 1em; font-family: $primary-font; } @@ -51,12 +50,93 @@ body { margin-bottom: 4px; } +@mixin body-monospace-presentation { + font-size: 1.9em; + // http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/ + // ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; + font-family: 'Source Code Pro', monospace; +} + +@mixin body-monospace { + font-size: 0.9em; + // http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/ + // ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; + font-family: 'Source Code Pro', monospace; +} + +.playground-mode-presentation { + + &:hover { + .playground-header { + display:block; + } + } + + .playground-header { + display:none; + z-index: 20; + position: absolute; + top: 3px; + right: 3px; + } + + #editor { + @include body-monospace-presentation; + } + + .editor { + &-simple { + @include body-monospace-presentation; + } + } + + .output { + .code { + @include body-monospace-presentation; + } + } + + .playground { + padding: 0; + + &-editor { + border:none; + } + } + + .header { + padding:0; + + .header-set { + margin-left:0.3em; + } + + .header-set__btn--primary { + font-size: 0.7rem; + } + + .header-set__btn { + font-size: 0.7rem; + } + + .header-set__radio-label { + font-size: 0.7rem; + padding: 0.12em; + } + + .header-set__title { + display:none; + } + } + +} + .playground { display: flex; height: 100vh; flex-direction: column; - padding-bottom: 1em; + padding: 0 1em 1em 1em; &-split { display: flex; diff --git a/ui/frontend/reducers/configuration.ts b/ui/frontend/reducers/configuration.ts index 26e9db404..a58d889ad 100644 --- a/ui/frontend/reducers/configuration.ts +++ b/ui/frontend/reducers/configuration.ts @@ -21,7 +21,7 @@ export interface State { processAssembly: ProcessAssembly; channel: Channel; mode: Mode; - pageMode: PageMode + pageMode: PageMode; } export const DEFAULT: State = { @@ -35,7 +35,7 @@ export const DEFAULT: State = { processAssembly: ProcessAssembly.Filter, channel: Channel.Stable, mode: Mode.Debug, - pageMode: PageMode.Normal + pageMode: PageMode.Normal, }; export default function configuration(state = DEFAULT, action: Action): State { From d3bd2deb293c951235de6ed2258481bd7c81d74f Mon Sep 17 00:00:00 2001 From: timglabisch Date: Mon, 14 May 2018 21:50:12 +0200 Subject: [PATCH 3/3] drop useless code --- ui/frontend/index.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/ui/frontend/index.scss b/ui/frontend/index.scss index e22755b52..564be7ac7 100644 --- a/ui/frontend/index.scss +++ b/ui/frontend/index.scss @@ -57,13 +57,6 @@ body { font-family: 'Source Code Pro', monospace; } -@mixin body-monospace { - font-size: 0.9em; - // http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/ - // ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace; - font-family: 'Source Code Pro', monospace; -} - .playground-mode-presentation { &:hover {