From 675f7271642bdddbc008d22678e277c72032bdcd Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Thu, 18 Aug 2022 02:08:21 +0200 Subject: feat(frontend): responsive editor styling --- subprojects/frontend/src/TopBar.tsx | 7 +- subprojects/frontend/src/editor/EditorButtons.tsx | 3 + subprojects/frontend/src/editor/EditorTheme.ts | 48 +++++++-- .../frontend/src/editor/SearchPanelStore.ts | 8 +- subprojects/frontend/src/editor/SearchToolbar.tsx | 108 ++++++++++++++++----- subprojects/frontend/src/theme/ThemeProvider.tsx | 11 +-- 6 files changed, 128 insertions(+), 57 deletions(-) (limited to 'subprojects') diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx index b414712e..5ad80d40 100644 --- a/subprojects/frontend/src/TopBar.tsx +++ b/subprojects/frontend/src/TopBar.tsx @@ -17,12 +17,7 @@ export default function TopBar(): JSX.Element { })} > - theme.palette.text.primary} - > + Refinery diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx index 95da52c8..bed6afa8 100644 --- a/subprojects/frontend/src/editor/EditorButtons.tsx +++ b/subprojects/frontend/src/editor/EditorButtons.tsx @@ -41,6 +41,7 @@ function EditorButtons(): JSX.Element { disabled={!editorStore.canUndo} onClick={() => editorStore.undo()} aria-label="Undo" + color="inherit" > @@ -48,6 +49,7 @@ function EditorButtons(): JSX.Element { disabled={!editorStore.canRedo} onClick={() => editorStore.redo()} aria-label="Redo" + color="inherit" > @@ -87,6 +89,7 @@ function EditorButtons(): JSX.Element { editorStore.formatText()} aria-label="Automatic format" + color="inherit" > diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index c983a378..fe5ba58e 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts @@ -14,20 +14,28 @@ export default styled('div', { name: 'EditorTheme', shouldForwardProp: (propName) => propName !== 'showLineNumbers', })<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => { + const editorFontStyle = { + ...theme.typography.editor, + [theme.breakpoints.down('sm')]: { + fontSize: '0.875rem', + lineHeight: 1.43, + }, + }; + const generalStyle: CSSObject = { background: theme.palette.background.default, '&, .cm-editor': { height: '100%', }, '.cm-scroller': { - ...theme.typography.editor, color: theme.palette.text.secondary, }, '.cm-gutters': { - background: 'transparent', + background: theme.palette.background.default, border: 'none', }, '.cm-content': { + ...editorFontStyle, padding: 0, }, '.cm-activeLine': { @@ -138,6 +146,7 @@ export default styled('div', { const lineNumberStyle: CSSObject = { '.cm-lineNumbers': { + ...editorFontStyle, color: theme.palette.highlight.lineNumber, ...(!showLineNumbers && { display: 'none !important', @@ -157,7 +166,7 @@ export default styled('div', { borderBottom: `1px solid ${theme.palette.outer.border}`, marginBottom: theme.spacing(1), }, - '.cm-panel, .cm-panel.cm-search': { + '.cm-panel': { color: theme.palette.text.primary, background: theme.palette.outer.background, borderTop: `1px solid ${theme.palette.outer.border}`, @@ -207,12 +216,21 @@ export default styled('div', { [`.cm-tooltip .cm-diagnostic-${severity}::before`]: { background: tooltipColor, }, + [`.cm-panel.cm-panel-lint .cm-diagnostic-${severity}::before`]: { + top: 8, + [theme.breakpoints.down('sm')]: { + top: 6, + }, + }, [`.cm-lint-marker-${severity}`]: { ...iconStyle, display: 'block', margin: '4px 0', // Remove original CodeMirror icon. content: '""', + [theme.breakpoints.down('sm')]: { + margin: '2px 0', + }, '::before': { // Remove original CodeMirror icon. content: '""', @@ -247,13 +265,16 @@ export default styled('div', { display: 'none', }, ul: { - maxHeight: `max(${28 * 4}px, 20vh)`, + maxHeight: `max(${32 * 4}px, 20vh)`, li: { cursor: 'pointer', color: theme.palette.text.primary, }, '.cm-diagnostic': { - ...theme.typography.body2, + ...theme.typography.body1, + [theme.breakpoints.down('sm')]: { + ...theme.typography.body2, + }, '&[aria-selected="true"]': { color: theme.palette.text.primary, background: 'transparent', @@ -264,6 +285,9 @@ export default styled('div', { theme.palette.text.primary, theme.palette.action.hoverOpacity, ), + '@media (hover: none)': { + background: 'transparent', + }, }, }, }, @@ -301,12 +325,15 @@ export default styled('div', { background: theme.palette.text.primary, border: 'none', cursor: 'pointer', + [theme.breakpoints.down('sm')]: { + margin: '2px 0', + }, }, [`.${editorClassNames.foldMarkerClosed}`]: { transform: 'rotate(-90deg)', }, [`.${editorClassNames.foldPlaceholder}`]: { - ...theme.typography.editor, + ...editorFontStyle, padding: 0, fontFamily: 'inherit', background: 'transparent', @@ -326,13 +353,16 @@ export default styled('div', { theme.palette.highlight.foldPlaceholder, theme.palette.action.hoverOpacity, ), + '@media (hover: none)': { + backgroundColor: 'transparent', + }, }, }, }; const completionStyle: CSSObject = { '.cm-tooltip.cm-tooltip-autocomplete': { - ...theme.typography.editor, + ...editorFontStyle, background: theme.palette.background.paper, borderRadius: theme.shape.borderRadius, overflow: 'hidden', @@ -346,11 +376,11 @@ export default styled('div', { color: theme.palette.text.secondary, }, '.cm-completionLabel': { - ...theme.typography.editor, + ...editorFontStyle, color: theme.palette.text.primary, }, '.cm-completionDetail': { - ...theme.typography.editor, + ...editorFontStyle, color: theme.palette.text.secondary, fontStyle: 'normal', }, diff --git a/subprojects/frontend/src/editor/SearchPanelStore.ts b/subprojects/frontend/src/editor/SearchPanelStore.ts index 43a571e5..8dd02ae6 100644 --- a/subprojects/frontend/src/editor/SearchPanelStore.ts +++ b/subprojects/frontend/src/editor/SearchPanelStore.ts @@ -7,7 +7,6 @@ import { replaceAll, replaceNext, SearchQuery, - selectMatches, setSearchQuery, } from '@codemirror/search'; import { action, computed, makeObservable, observable, override } from 'mobx'; @@ -31,7 +30,8 @@ export default class SearchPanelStore extends PanelStore { updateQuery: action, findNext: action, findPrevious: action, - selectMatches: action, + replaceNext: action, + replaceAll: action, }); } @@ -82,10 +82,6 @@ export default class SearchPanelStore extends PanelStore { this.store.doCommand(findPrevious); } - selectMatches(): void { - this.store.doCommand(selectMatches); - } - replaceNext(): void { this.store.doCommand(replaceNext); } diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx index dd7859c5..a5925328 100644 --- a/subprojects/frontend/src/editor/SearchToolbar.tsx +++ b/subprojects/frontend/src/editor/SearchToolbar.tsx @@ -2,7 +2,6 @@ import CloseIcon from '@mui/icons-material/Close'; import FindReplaceIcon from '@mui/icons-material/FindReplace'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; -import SearchIcon from '@mui/icons-material/Search'; import Button from '@mui/material/Button'; import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; @@ -10,20 +9,31 @@ import FormHelperText from '@mui/material/FormHelperText'; import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; +import ToggleButton from '@mui/material/ToggleButton'; import Toolbar from '@mui/material/Toolbar'; +import useMediaQuery from '@mui/material/useMediaQuery'; import { observer } from 'mobx-react-lite'; -import React, { useCallback } from 'react'; +import React, { useCallback, useState } from 'react'; import type SearchPanelStore from './SearchPanelStore'; +const SPLIT_MEDIA_QUERY = '@media (max-width: 1200px)'; +const ABBREVIATE_MEDIA_QUERY = '@media (max-width: 720px)'; + function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element { const { id: panelId, query: { search, valid, caseSensitive, literal, regexp, replace }, invalidRegexp, } = store; + const split = useMediaQuery(SPLIT_MEDIA_QUERY); + const abbreviate = useMediaQuery(ABBREVIATE_MEDIA_QUERY); + const [showRepalceState, setShowReplaceState] = useState(false); + + const showReplace = !split || showRepalceState || replace !== ''; const searchHelperId = `${panelId}-search-helper`; + const replaceId = `${panelId}-replace`; const searchFieldRef = useCallback( (element: HTMLInputElement | null) => @@ -32,13 +42,20 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element { ); return ( - + {invalidRegexp && ( @@ -92,6 +109,7 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element { aria-label="Previous" disabled={!valid} onClick={() => store.findPrevious()} + color="inherit" > @@ -99,19 +117,17 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element { aria-label="Next" disabled={!valid} onClick={() => store.findNext()} + color="inherit" > - - + } - label="Match case" + aria-label="Match case" + label={abbreviate ? 'Case' : 'Match case'} /> } - label="Literal" + aria-label="Literal" + label={abbreviate ? 'Lit' : 'Literal'} /> + {split && ( + { + if (showReplace) { + store.updateQuery({ replace: '' }); + setShowReplaceState(false); + } else { + setShowReplaceState(true); + } + }} + aria-label="Show replace options" + aria-controls={replaceId} + size="small" + sx={{ borderRadius: '100%' }} + > + + + )} - + - +