MirrorMirror
/
riju
mirror of https://github.com/radian-software/riju.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Design update for editor page

This commit is contained in:
inaseem 2021-10-03 22:46:37 +05:30
parent c5e00165dd
commit 21e5b8c353
1 changed files with 80 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
frontend/pages/editor/[lang].js
View File

@ -12,7 +12,6 @@ import {
Box, Box,
Button, Button,
Chip, Chip,
Divider,
Stack, Stack,
ToggleButton, ToggleButton,
ToggleButtonGroup, ToggleButtonGroup,
@ -416,18 +415,20 @@ const CodeRunner = (props) => {
> >
<Stack <Stack
direction="row" direction="row"
alignItems="stretch" alignItems="center"
justifyContent="space-between"
sx={{ sx={{
boxShadow: `0 2px 4px rgb(0 0 0 / 10%)`, boxShadow: `0 2px 4px rgb(0 0 0 / 10%)`,
zIndex: (t) => t.zIndex.appBar, zIndex: (t) => t.zIndex.appBar,
height: "48px",
p: "0 24px",
}} }}
> >
<Stack direction="row" sx={{ flexGrow: 1 }} alignItems="stretch"> <Stack direction="row" alignItems="center" gap={2}>
<Button <Button
variant="contained" variant="contained"
sx={{ borderRadius: 0, minWidth: 0 }}
disableElevation disableElevation
size="small" size="medium"
color="primary" color="primary"
onClick={() => { onClick={() => {
router.push("/"); router.push("/");
@ -435,10 +436,7 @@ const CodeRunner = (props) => {
> >
<Home fontSize={"small"} /> <Home fontSize={"small"} />
</Button> </Button>
<Typography <Typography sx={{ fontSize: 14, fontWeight: 600 }}>
sx={{ fontSize: 14, px: 2, fontWeight: 600, alignSelf: "center" }}
textAlign="center"
>
{config.name} {config.name}
</Typography> </Typography>
<Chip <Chip
@ -447,97 +445,93 @@ const CodeRunner = (props) => {
color={status != "idle" ? "info" : "default"} color={status != "idle" ? "info" : "default"}
sx={{ sx={{
fontSize: "0.7rem", fontSize: "0.7rem",
alignSelf: "center",
height: "16px", height: "16px",
}} }}
label={status} label={status}
/> />
</Stack> </Stack>
<LoadingButton <Stack direction="row" gap={1} alignItems="center">
onClick={handleLspClick} <LoadingButton
size="small" onClick={handleLspClick}
variant="text" size="medium"
loading={isLspRequested} variant="text"
sx={{ loading={isLspRequested}
borderRadius: 0, sx={{
visibility: config.lsp ? "visible" : "hidden", visibility: config.lsp ? "visible" : "hidden",
mr: 1, mr: 1,
color: (t) => color: (t) =>
isLspStarted ? t.palette.success.main : t.palette.text.disabled, isLspStarted
}} ? t.palette.success.main
disableElevation : t.palette.text.disabled,
endIcon={ }}
<Circle disableElevation
fontSize="small" endIcon={
sx={{ <Circle
color: "inherit", fontSize="small"
fontSize: "0.6em !important", sx={{
}} color: "inherit",
/> fontSize: "0.6em !important",
} }}
> />
<Typography sx={{ fontSize: 12 }}>Autocomplete</Typography> }
</LoadingButton>
<ToggleButtonGroup
size="small"
value={splitType}
color="primary"
exclusive
onChange={handleLayout}
aria-label="split type"
sx={{ mr: 1 }}
>
<ToggleButton
value="vertical"
aria-label="vertical split"
sx={{ borderRadius: 0 }}
> >
<VerticalSplit fontSize="small" /> <Typography sx={{ fontSize: 12 }}>Autocomplete</Typography>
</ToggleButton> </LoadingButton>
<ToggleButton <ToggleButtonGroup
value="horizontal" size="small"
aria-label="horizontal split" value={splitType}
sx={{ borderRadius: 0 }} color="primary"
exclusive
onChange={handleLayout}
aria-label="split type"
> >
<HorizontalSplit fontSize="small" /> <ToggleButton
</ToggleButton> value="vertical"
</ToggleButtonGroup> aria-label="vertical split"
sx={{ border: "none" }}
>
<VerticalSplit fontSize="small" />
</ToggleButton>
<ToggleButton
value="horizontal"
aria-label="horizontal split"
sx={{ border: "none" }}
>
<HorizontalSplit fontSize="small" />
</ToggleButton>
</ToggleButtonGroup>
<LoadingButton {config.format && (
onClick={sendFormat} <LoadingButton
loading={isFormatting} onClick={sendFormat}
size="small" loading={isFormatting}
color="primary" size="medium"
variant="contained" color="primary"
sx={{ variant="contained"
borderRadius: 0, disableElevation
visibility: config.format ? "visible" : "hidden", endIcon={<Format fontSize="small" />}
}} >
disableElevation <Typography sx={{ fontSize: 12 }}>Prettify</Typography>
endIcon={<Format fontSize="small" />} </LoadingButton>
> )}
<Typography sx={{ fontSize: 12 }}>Prettify</Typography> <LoadingButton
</LoadingButton> onClick={showValue}
<Divider orientation="vertical" /> loading={isRunning}
<LoadingButton size="medium"
onClick={showValue} color="success"
loading={isRunning} variant="contained"
size="small" disableElevation
color="success" endIcon={<PlayArrow fontSize="small" htmlColor="#fff" />}
variant="contained" >
sx={{ borderRadius: 0 }} <Typography sx={{ fontSize: 12, color: "#fff" }}>Run</Typography>
disableElevation </LoadingButton>
endIcon={<PlayArrow fontSize="small" htmlColor="#fff" />} </Stack>
>
<Typography sx={{ fontSize: 12, color: "#fff" }}>Run</Typography>
</LoadingButton>
</Stack> </Stack>
<Layouts splitType={splitType}> <Layouts splitType={splitType}>
<Box className="panel editor"> <Box className="panel editor">
<MonacoEditor <MonacoEditor
wrapperClassName={"rijuEditor"} wrapperClassName={"rijuEditor"}
onChange={handleChange} onChange={handleChange}
// height="100vh"
defaultLanguage="javascript" defaultLanguage="javascript"
defaultValue="// some comment" defaultValue="// some comment"
options={{ options={{