Example Web Editor

From ef73394c3c8554719412c3bf763e2f8c90ffed56 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Thu, 1 Jul 2021 23:54:32 +0200 Subject: Material UI theming WIP --- language-web/src/main/css/index.scss | 79 +++++++++++++++++++---- language-web/src/main/html/index.html | 1 + language-web/src/main/js/App.jsx | 61 +++++++++++------ language-web/src/main/js/RootStore.jsx | 2 - language-web/src/main/js/editor/Editor.jsx | 2 + language-web/src/main/js/editor/EditorButtons.jsx | 67 +++++++++++++++---- language-web/src/main/js/editor/EditorStore.jsx | 6 ++ language-web/src/main/js/index.jsx | 16 ++++- 8 files changed, 185 insertions(+), 49 deletions(-) (limited to 'language-web/src') diff --git a/language-web/src/main/css/index.scss b/language-web/src/main/css/index.scss index 62109a2f..d9c9b4b4 100644 --- a/language-web/src/main/css/index.scss +++ b/language-web/src/main/css/index.scss @@ -1,31 +1,84 @@ @import 'codemirror/lib/codemirror'; @import 'codemirror/addon/hint/show-hint'; +@import 'codemirror/theme/material-darker'; -@import 'xtext/xtext-codemirror'; +.CodeMirror { + font-size: 16px; + height: 100%; +} -.problem-class { - color: #005032; +.annotations-gutter { + width: 12px; } -.problem-abstract { - color: #8b8816; +.xtext-annotation_error { + width: 12px; + height: 12px; + background-image: url('images/error_an.gif'); + background-repeat: no-repeat; +} + +.xtext-annotation_warning { + width: 12px; + height: 12px; + background-image: url('images/warning_an.gif'); + background-repeat: no-repeat; +} + +.xtext-annotation_info { + width: 12px; + height: 12px; + background-image: url('images/info_an.gif'); + background-repeat: no-repeat; } -.problem-enum { - color: #644632; +.xtext-marker_error { + z-index: 30; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg=="); + background-repeat: repeat-x; + background-position: left bottom; +} + +.xtext-marker_warning { + z-index: 20; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII="); + background-repeat: repeat-x; + background-position: left bottom; +} + +.xtext-marker_info { + z-index: 10; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAABmJLR0QA/wD/AP+gvaeTAAAANklEQVQI12NkgIIVRx8tZGBg6GZccfRRKAMDgw8DA0M3AwPDIiYGBoZKBgaG7ghruSsMDAwpABH5CoqwzCoTAAAAAElFTkSuQmCC"); + background-repeat: repeat-x; + background-position: left bottom; +} + +.xtext-marker_read { + background: rgba(128, 203, 196, 0.2); +} + +.xtext-marker_write { + background: rgba(255, 229, 100, 0.2); +} + +.problem-class, .problem-enum { + @extend .cm-type; +} + +.problem-abstract { + font-style: italic; } .problem-reference { - color: #0000c0; + @extend .cm-def; } .problem-containment { font-weight: bold; } -.CodeMirror .cm-quoted-name, .problem-enum-node { - color: #1a1a1a !important; - font-weight: bold; +.cm-quoted-name, .problem-enum-node { + @extend .cm-atom; } .problem-new-node { @@ -33,9 +86,9 @@ } .problem-variable { - color: #6a3e3e; + @extend .cm-variable; } .problem-singleton-variable { - color: #a1706f; + opacity: 0.7; } diff --git a/language-web/src/main/html/index.html b/language-web/src/main/html/index.html index 01b4e536..7762706f 100644 --- a/language-web/src/main/html/index.html +++ b/language-web/src/main/html/index.html @@ -2,6 +2,7 @@ + Example Web Editor 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 ( - <> + { - - + + + + + + + - - - - Generate - - + + + ); }; 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 ( <> - editorStore.undo()} + - - - editorStore.redo()} + + + + + editorStore.toggleLineNumbers()} + size='small' + className={classes.flatToggleButton} > - - + + ); }); 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 = ( -- cgit v1.2.3-70-g09d2