Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

CodeEditor: use TextField box-shadows & fix RichTextEditor box-shadows

Browse Source
This commit is contained in:
Sidney Alcantara
2021-10-21 15:52:27 +11:00
parent 16b93bd48f
commit 1378573237
3 changed files with 43 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/CodeEditor/index.tsx
View File

@@ -179,12 +179,37 @@ export default function CodeEditor({
minWidth: 400,
minHeight,
height: minHeight,
border: `1px solid ${theme.palette.divider}`,
borderRadius: 1,
resize: "vertical",
overflow: "hidden",
position: "relative",
"&::after": {
content: '""',
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
pointerEvents: "none",
borderRadius: "inherit",
boxShadow: `0 -1px 0 0 ${theme.palette.text.disabled} inset,
0 0 0 1px ${theme.palette.action.inputOutline} inset`,
transition: theme.transitions.create("box-shadow", {
duration: theme.transitions.duration.short,
}),
},
"&:hover::after": {
boxShadow: `0 -1px 0 0 ${theme.palette.text.primary} inset,
0 0 0 1px ${theme.palette.action.inputOutline} inset`,
},
"&:focus-within::after": {
boxShadow: `0 -2px 0 0 ${theme.palette.primary.main} inset,
0 0 0 1px ${theme.palette.action.inputOutline} inset`,
},
"& .editor": {
// Overwrite user-select: none that causes editor
// to not be focusable in Safari
@@ -220,8 +245,8 @@ export default function CodeEditor({
color="action"
sx={{
position: "absolute",
bottom: 0,
right: 0,
bottom: 1,
right: 1,
zIndex: 1,
}}
/>

12
src/components/RichTextEditor.tsx
View File

@@ -44,15 +44,15 @@ const useStyles = makeStyles((theme) =>
border: "none",
backgroundColor: theme.palette.action.input,
boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
0 -1px 0 0 ${theme.palette.text.disabled} inset`,
boxShadow: `0 -1px 0 0 ${theme.palette.text.disabled} inset,
0 0 0 1px ${theme.palette.action.inputOutline} inset`,
transition: theme.transitions.create("box-shadow", {
duration: theme.transitions.duration.short,
}),
"&:hover": {
boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
0 -1px 0 0 ${theme.palette.text.primary} inset`,
boxShadow: `0 -1px 0 0 ${theme.palette.text.primary} inset,
0 0 0 1px ${theme.palette.action.inputOutline} inset`,
},
},
@@ -92,8 +92,8 @@ const useStyles = makeStyles((theme) =>
focus: {
"& .tox.tox-tinymce, & .tox.tox-tinymce:hover": {
boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
0 -2px 0 0 ${theme.palette.primary.main} inset`,
boxShadow: `0 -2px 0 0 ${theme.palette.primary.main} inset,
0 0 0 1px ${theme.palette.action.inputOutline} inset`,
},
},

18
src/theme/components.tsx
View File

@@ -256,23 +256,23 @@ export const components = (theme: Theme): ThemeOptions => {
backgroundColor: theme.palette.action.input,
},
boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
0 -1px 0 0 ${theme.palette.text.disabled} inset`,
boxShadow: `0 -1px 0 0 ${theme.palette.text.disabled} inset,
0 0 0 1px ${theme.palette.action.inputOutline} inset`,
transition: theme.transitions.create("box-shadow", {
duration: theme.transitions.duration.short,
}),
"&:hover": {
boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
0 -1px 0 0 ${theme.palette.text.primary} inset`,
boxShadow: `0 -1px 0 0 ${theme.palette.text.primary} inset,
0 0 0 1px ${theme.palette.action.inputOutline} inset`,
},
"&.Mui-focused, &.Mui-focused:hover": {
boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
0 -2px 0 0 ${theme.palette.primary.main} inset`,
boxShadow: `0 -2px 0 0 ${theme.palette.primary.main} inset,
0 0 0 1px ${theme.palette.action.inputOutline} inset`,
},
"&.Mui-error, &.Mui-error:hover": {
boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
0 -2px 0 0 ${theme.palette.error.main} inset`,
boxShadow: `0 -2px 0 0 ${theme.palette.error.main} inset,
0 0 0 1px ${theme.palette.action.inputOutline} inset`,
},
borderRadius: theme.shape.borderRadius,
@@ -368,7 +368,7 @@ export const components = (theme: Theme): ThemeOptions => {
root: {
width: `calc(100% - ${theme.spacing(1)})`,
margin: theme.spacing(0, 0.5),
padding: theme.spacing(0.5, 0.75, 0.5, 1.5),
padding: theme.spacing(0.5, 1.5),
minHeight: 32,
borderRadius: theme.shape.borderRadius,