Material UI theming WIP

3 files changed, 63 insertions, 12 deletions

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;
+  }
 }