Vertical panel support

web/package.json

@@ -13,6 +13,7 @@
     "@types/react-dom": "^17.0.11",
     "axios": "^0.25.0",
     "circular-dependency-plugin": "^5.2.2",
+    "clsx": "^1.1.1",
     "connected-react-router": "^6.9.2",
     "copy-to-clipboard": "^3.3.1",
     "craco-alias": "^3.0.1",
@@ -22,6 +23,7 @@
     "re-resizable": "^6.9.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-monaco-editor": "^0.47.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",

web/src/App.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import { Switch, Route } from "react-router-dom";
-import { ThemeProvider } from '@fluentui/react';
 
 import { configureStore, createGoConsoleAdapter } from './store';
-import { history } from './store/configure';
-import { bootstrapGo } from './services/go';
-import Playground from '~/components/pages/Playground';
+import { history } from '~/store/configure';
+import { bootstrapGo } from '~/services/go';
 import config from './services/config';
+import Playground from '~/components/pages/Playground';
+import NotFoundPage from "~/components/pages/NotFoundPage";
+import ConnectedThemeProvider from '~/components/utils/ConnectedThemeProvider';
 import './App.css';
-import NotFoundPage from "@components/pages/NotFoundPage";
 
 // Configure store and import config from localStorage
 const store = configureStore();
@@ -19,11 +19,11 @@ config.sync();
 // Bootstrap Go and storage bridge
 bootstrapGo(createGoConsoleAdapter(a => store.dispatch(a)));
 
-function App() {
+const App = () => {
   return (
     <Provider store={store}>
       <ConnectedRouter history={history}>
-        <ThemeProvider className="App">
+        <ConnectedThemeProvider className="App">
           <Switch>
             <Route
               path={[
@@ -32,10 +32,10 @@ function App() {
               ]}
               exact
               component={Playground}
-            ></Route>
+            />
             <Route path="*" component={NotFoundPage}/>
           </Switch>
-        </ThemeProvider>
+        </ConnectedThemeProvider>
       </ConnectedRouter>
     </Provider>
   );

web/src/components/core/Layout/Layout.css

@@ -0,0 +1,13 @@
+.Layout {
+  display: flex;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.Layout.Layout--vertical {
+  flex-direction: column;
+}
+
+.Layout.Layout--horizontal {
+  flex-direction: row;
+}

web/src/components/core/Layout/Layout.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {LayoutType} from '~/styles/layout';
+import './Layout.css';
+
+interface Props {
+  layout?: LayoutType;
+}
+
+const Layout: React.FC<Props> = ({layout = LayoutType.Vertical, children}) => (
+  <div className={`Layout Layout--${layout}`}>
+    {children}
+  </div>
+);
+
+export default Layout;

web/src/components/core/Layout/index.ts

@@ -0,0 +1 @@
+export * from './Layout';

web/src/components/core/Panel/PanelAction.css

@@ -0,0 +1,23 @@
+.PanelAction {
+  background: none;
+  font: inherit;
+  color: inherit;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 3px;
+  border-radius: 5px;
+  margin-right: 4px;
+}
+
+.PanelAction:hover {
+  background: var(--pg-panel-action-hover-bg);
+}
+
+@media (max-width: 480px) {
+  .PanelAction--desktopOnly {
+    display: none;
+  }
+}
+

web/src/components/core/Panel/PanelAction.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import './PanelAction.css';
+
+export interface PanelActionProps {
+  hidden?: boolean
+  icon: React.ReactNode
+  label: string
+  desktopOnly?: boolean
+  onClick?: () => void
+}
+
+const PanelAction: React.FC<PanelActionProps> = ({hidden, icon, desktopOnly, label, onClick}) => {
+  if (hidden) {
+    return null;
+  }
+
+  return (
+    <button
+      className={clsx('PanelAction', desktopOnly && 'PanelAction--desktopOnly')}
+      title={label}
+      onClick={onClick}
+    >
+      {icon}
+    </button>
+  );
+};
+
+export default PanelAction;

web/src/components/core/Panel/PanelHeader.css

@@ -0,0 +1,36 @@
+.PanelHeader {
+  padding: 8px 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  /*justify-content: center;*/
+  justify-content: space-between;
+  background-color: var(--pg-panel-action-background);
+  color: var(--pg-panel-action-color);
+}
+
+.PanelHeader__title {
+  text-transform: uppercase;
+  font-size: 11px;
+  padding: 0 7px;
+}
+
+.PanelHeader__side--left {
+  display: flex;
+  align-items: center;
+  /*background: #ff00aacc;*/
+}
+
+.PanelHeader__commands {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  /*background: #00ffaacc;*/
+}
+
+.PanelHeader__commands>li {
+  margin: 0;
+  padding: 0;
+}

web/src/components/core/Panel/PanelHeader.tsx

@@ -0,0 +1,47 @@
+import React, {useContext} from 'react';
+import {ITheme, ThemeContext} from '@fluentui/react';
+import PanelAction, {PanelActionProps} from '@components/core/Panel/PanelAction';
+import './PanelHeader.css';
+
+interface Props {
+  label: string
+  commands?: {[key: string]: PanelActionProps},
+}
+
+const PanelHeader: React.FC<Props> = ({label, commands}) => {
+  const theme = useContext(ThemeContext);
+  const {
+    palette: { neutralLight, neutralDark, neutralQuaternaryAlt }
+  } = theme as ITheme;
+
+  return (
+    <div
+      className="PanelHeader"
+      style={{
+        backgroundColor: neutralLight,
+        color: neutralDark,
+        '--pg-panel-action-hover-bg': neutralQuaternaryAlt
+      } as any}
+    >
+      <div className="PanelHeader__side--left">
+        <span className="PanelHeader__title">
+          {label}
+        </span>
+      </div>
+      <ul className="PanelHeader__commands">
+        {commands ? (
+          Object.entries(commands)
+            .map(([key, props]) => ({key, ...props}))
+            .filter(({hidden}) => !hidden)
+            .map(({key, ...props}) => (
+              <li key={key}>
+                <PanelAction {...props} />
+              </li>
+            ))
+        ) : null}
+      </ul>
+    </div>
+  );
+};
+
+export default PanelHeader;

web/src/components/modals/ChangeLogModal.tsx

@@ -41,7 +41,7 @@ export default function ChangeLogModal(props: ChangeLogModalProps) {
       </div>
       <div id={SUB_TITLE_ID} className={contentStyles.body}>
         {Object.entries(changelog).map(([section, items]) => (
-          <>
+          <div key={section}>
             <b>{section}</b>
             <ul>
               {items.map(({issueId, url, description}) => (
@@ -57,7 +57,7 @@ export default function ChangeLogModal(props: ChangeLogModalProps) {
                 </li>
               ))}
             </ul>
-          </>
+          </div>
         ))}
         <p>
           And more!

web/src/components/pages/Playground.css

@@ -1,10 +1,11 @@
-.playground {
+.Playground {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
+  height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
-  /*background: #ccc;*/
 }

web/src/components/pages/Playground.tsx

@@ -2,27 +2,40 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-import { newSnippetLoadDispatcher } from "~/store";
+import { dispatchPanelLayoutChange, newSnippetLoadDispatcher} from '~/store';
 import { Header } from '~/components/core/Header';
 import CodeEditor from '~/components/editor/CodeEditor';
 import FlexContainer from '~/components/editor/FlexContainer';
 import ResizablePreview from '~/components/preview/ResizablePreview';
+import Layout from '~/components/core/Layout/Layout';
 import StatusBar from '~/components/core/StatusBar';
 
 import './Playground.css';
 
-const Playground = connect()((props: any) => {
+const CodeContainer = connect()(({dispatch}: any) => {
   const { snippetID } = useParams();
-  props.dispatch(newSnippetLoadDispatcher(snippetID));
+  dispatch(newSnippetLoadDispatcher(snippetID));
+  return (
+    <CodeEditor />
+  );
+})
 
-  return <div className="playground">
-    <Header />
-    <FlexContainer>
-      <CodeEditor />
-    </FlexContainer>
-    <ResizablePreview />
-    <StatusBar />
-  </div>;
+const Playground = connect(({panel}: any) => ({panelProps: panel}))(({panelProps, dispatch}: any) => {
+  return (
+    <div className="Playground">
+      <Header />
+      <Layout layout={panelProps.layout}>
+        <FlexContainer>
+          <CodeContainer />
+        </FlexContainer>
+        <ResizablePreview
+          {...panelProps}
+          onViewChange={changes => dispatch(dispatchPanelLayoutChange(changes))}
+        />
+      </Layout>
+      <StatusBar />
+    </div>
+  );
 });
 
 export default Playground;

web/src/components/preview/Preview.css

@@ -4,7 +4,7 @@
 }
 
 .app-preview__content {
-  padding: 15px;
+  padding: 0 15px 15px 15px;
   font-size: 10pt;
 }
 

web/src/components/preview/Preview.tsx

@@ -42,13 +42,15 @@ export default class Preview extends React.Component<PreviewProps> {
         </pre>
       </MessageBar>
     } else if (this.props.events) {
-      content = this.props.events.map((e, k) => <EvalEventView
-        key={k}
-        message={e.Message}
-        delay={e.Delay}
-        kind={e.Kind}
-        showDelay={!isWasm}
-      />);
+      content = this.props.events.map(({Message, Delay, Kind}, k) => (
+        <EvalEventView
+          key={k}
+          message={Message}
+          delay={Delay}
+          kind={Kind}
+          showDelay={!isWasm}
+        />
+      ));
 
       if (!isWasm) {
         content.push(<div className="app-preview__epilogue" key="exit">Program exited.</div>)