presentation mode

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<ConfigMenuProps> = props => (
     </MenuGroup>
 
     <MenuGroup title="UI">
+      <SelectConfig
+        name="Mode"
+        value={props.pageMode}
+        onChange={props.changePageMode}
+      >
+        <option value={PageMode.Normal}>Normal</option>
+        <option value={PageMode.Presentation}>Presentation</option>
+      </SelectConfig>
+
       <SelectConfig
         name="Orientation"
         value={props.orientation}
@@ -121,6 +133,7 @@ const mapStateToProps = (state: State) => ({
   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,

ui/frontend/Configuration.tsx

@@ -14,7 +14,7 @@ import {
   toggleConfiguration,
 } from './actions';
 import State from './state';
-import { AssemblyFlavor, DemangleAssembly, Editor, Orientation, ProcessAssembly} from './types';
+import {AssemblyFlavor, DemangleAssembly, Editor, Orientation, ProcessAssembly} from './types';
 
 const keybindingOptions = ACE_KEYBINDINGS.map(t => <option value={t} key={t}>{t}</option>);
 const themeOptions = ACE_THEMES.map(t => <option value={t} key={t}>{t}</option>);

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 = () => (
   <div className="modal-backdrop">
@@ -17,14 +17,14 @@ const ConfigurationModal: React.SFC = () => (
   </div>
 );
 
-const Playground: React.SFC<Props> = ({ showConfig, focus, splitOrientation }) => {
+const Playground: React.SFC<Props> = ({ showConfig, focus, splitOrientation, pageMode }) => {
   const config = showConfig ? <ConfigurationModal /> : null;
   const outputFocused = focus ? 'playground-output-focused' : '';
   const splitClass = 'playground-split';
   const orientation = splitClass + '-' + splitOrientation;
 
   return (
-    <div>
+    <div className={`playground-mode-${pageMode}`}>
       {config}
       <div className="playground">
         <div className="playground-header">
@@ -45,11 +45,13 @@ const Playground: React.SFC<Props> = ({ 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,

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 };
 }
@@ -650,10 +662,18 @@ 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) {

ui/frontend/index.scss

@@ -27,7 +27,6 @@ html {
 
 body {
     background-color: $background;
-    padding: 0 1em;
     font-family: $primary-font;
 }
 
@@ -51,12 +50,86 @@ 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;
+}
+
+.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;

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:

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