Material UI theming WIP

6 files changed, 118 insertions, 36 deletions

diff --git a/language-web/src/main/js/App.jsx b/language-web/src/main/js/App.jsx
index 61ded943..a0920823 100644
--- a/language-web/src/main/js/App.jsx
+++ b/language-web/src/main/js/App.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Box from '@material-ui/core/Box';
-import Fab from '@material-ui/core/Fab';
+import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -13,30 +13,32 @@ import Editor from './editor/Editor';
 import EditorButtons from './editor/EditorButtons';
 
 const useStyles = makeStyles(theme => ({
+  container: {
+    maxHeight: '100vh',
+  },
   menuButton: {
     marginRight: theme.spacing(2),
   },
   title: {
     flexGrow: 1,
   },
-  fab: {
-    position: 'fixed',
-    right: theme.spacing(3),
-    bottom: theme.spacing(3),
-    zIndex: 1000,
+  editorBox: {
+    overflow: 'auto',
   },
-  extendedIcon: {
-    marginRight: theme.spacing(1),
-  }
 }));
 
 export default () => {
   const classes = useStyles();
 
   return (
-    <>
+    <Box
+      display='flex'
+      flexDirection='column'
+      className={classes.container}
+    >
       <AppBar
         position='static'
+        color='inherit'
       >
         <Toolbar>
           <IconButton
@@ -56,18 +58,35 @@ export default () => {
           </Typography>
         </Toolbar>
       </AppBar>
-      <Box>
-        <EditorButtons/>
+      <Box
+        display='flex'
+        justifyContent='space-between'
+        alignItems='center'
+        p={1}
+      >
+        <Box
+          display='flex'
+          alignItems='center'
+        >
+          <EditorButtons/>
+        </Box>
+        <Box>
+          <Button
+            variant='outlined'
+            color='primary'
+            startIcon={<PlayArrowIcon/>}
+          >
+            Generate
+          </Button>
+        </Box>
       </Box>
-      <Editor/>
-      <Fab
-        variant='extended'
-        color='secondary'
-        className={classes.fab}
+      <Box
+        flexGrow={1}
+        flexShrink={1}
+        className={classes.editorBox}
       >
-        <PlayArrowIcon className={classes.extendedIcon}/>
-        Generate
-      </Fab>
-    </>
+        <Editor/>
+      </Box>
+    </Box>
   );
 };
diff --git a/language-web/src/main/js/RootStore.jsx b/language-web/src/main/js/RootStore.jsx
index 1ee2823d..a437fdd0 100644
--- a/language-web/src/main/js/RootStore.jsx
+++ b/language-web/src/main/js/RootStore.jsx
@@ -1,4 +1,3 @@
-import { makeAutoObservable } from 'mobx';
 import React, { createContext, useContext } from 'react';
 
 import EditorStore from './editor/EditorStore';
@@ -8,7 +7,6 @@ export default class RootStore {
 
   constructor() {
     this.editorStore = new EditorStore();
-    makeAutoObservable(this);
   }
 }
 
diff --git a/language-web/src/main/js/editor/Editor.jsx b/language-web/src/main/js/editor/Editor.jsx
index c4b2e183..98cf2715 100644
--- a/language-web/src/main/js/editor/Editor.jsx
+++ b/language-web/src/main/js/editor/Editor.jsx
@@ -12,6 +12,8 @@ export default observer(() => {
   const codeMirrorOptions = {
     mode: 'xtext/problem',
     indentUnit: 2,
+    theme: 'material-darker',
+    lineNumbers: editorStore.showLineNumbers,
   };
 
   const xtextOptions = {
diff --git a/language-web/src/main/js/editor/EditorButtons.jsx b/language-web/src/main/js/editor/EditorButtons.jsx
index b9f0d076..62f82f29 100644
--- a/language-web/src/main/js/editor/EditorButtons.jsx
+++ b/language-web/src/main/js/editor/EditorButtons.jsx
@@ -1,27 +1,70 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import IconButton from '@material-ui/core/IconButton';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Divider from '@material-ui/core/Divider';
+import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
 import RedoIcon from '@material-ui/icons/Redo';
 import UndoIcon from '@material-ui/icons/Undo';
-
+import ToggleButton from '@material-ui/lab/ToggleButton';
 import { useRootStore } from '../RootStore';
 
+const useStyles = makeStyles(theme => ({
+  iconButton: {
+    padding: 8,
+    minWidth: 36,
+    '&.MuiButtonGroup-groupedTextHorizontal': {
+      borderRight: 0,
+    },
+  },
+  flatToggleButton: {
+    padding: 8,
+    border: 0,
+    color: theme.palette.text.primary,
+  },
+  divider: {
+    margin: theme.spacing(0.5),
+  }
+}));
+
 export default observer(() => {
   const editorStore = useRootStore().editorStore;
+  const classes = useStyles();
   return (
     <>
-      <IconButton
-        disabled={!editorStore.canUndo}
-        onClick={() => editorStore.undo()}
+      <ButtonGroup
+        variant='text'
       >
-        <UndoIcon fontSize='small'/>
-      </IconButton>
-      <IconButton
-        disabled={!editorStore.canRedo}
-        onClick={() => editorStore.redo()}
+        <Button
+          disabled={!editorStore.canUndo}
+          onClick={() => editorStore.undo()}
+          className={classes.iconButton}
+        >
+          <UndoIcon fontSize='small'/>
+        </Button>
+        <Button
+          disabled={!editorStore.canRedo}
+          onClick={() => editorStore.redo()}
+          className={classes.iconButton}
+        >
+          <RedoIcon fontSize='small'/>
+        </Button>
+      </ButtonGroup>
+      <Divider
+        flexItem
+        orientation='vertical'
+        className={classes.divider}
+      />
+      <ToggleButton
+        value='Show line numbers'
+        selected={editorStore.showLineNumbers}
+        onChange={() => editorStore.toggleLineNumbers()}
+        size='small'
+        className={classes.flatToggleButton}
       >
-        <RedoIcon fontSize='small'/>
-      </IconButton>
+        <FormatListNumberedIcon fontSize='small'/>
+      </ToggleButton>
     </>
   );
 });
diff --git a/language-web/src/main/js/editor/EditorStore.jsx b/language-web/src/main/js/editor/EditorStore.jsx
index 9c286c28..6b03b383 100644
--- a/language-web/src/main/js/editor/EditorStore.jsx
+++ b/language-web/src/main/js/editor/EditorStore.jsx
@@ -7,6 +7,8 @@ export default class EditorStore {
   editor = null;
   /** @type {string} */
   value = '';
+  /** @type {boolean} */
+  showLineNumbers = false;
 
   constructor() {
     this.atom = createAtom('EditorStore');
@@ -72,4 +74,8 @@ export default class EditorStore {
   redo() {
     this.editor.redo();
   }
+
+  toggleLineNumbers() {
+    this.showLineNumbers = !this.showLineNumbers;
+  }
 }
diff --git a/language-web/src/main/js/index.jsx b/language-web/src/main/js/index.jsx
index 17e6aef2..7b807c77 100644
--- a/language-web/src/main/js/index.jsx
+++ b/language-web/src/main/js/index.jsx
@@ -46,7 +46,21 @@ scope Family = 1, Person += 5..10.
 const rootStore = new RootStore();
 rootStore.editorStore.updateValue(initialValue);
 
-const theme = createMuiTheme();
+const theme = createMuiTheme({
+  palette: {
+    type: 'dark',
+    background: {
+      default: '#212121',
+      paper: '#333333',
+    },
+    primary: {
+      main: '#82aaff',
+    },
+    secondary: {
+      main: '#ff5370',
+    },
+  },
+});
 
 const app = (
   <ThemeProvider theme={theme}>