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

Minor improvements to information panel (#13)

Browse Source 
* remove unused file

* feat(table-information): add minor improvements

* Update src/components/TableInformationDrawer/Details.tsx

* Update src/components/TableSettingsDialog/TableDetails.tsx
This commit is contained in:
Han Tuerker
2022-10-27 09:07:19 +03:00
committed by Sidney Alcantara
parent 6549c985a7
commit 35cee241a8
2 changed files with 65 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/TableInformationDrawer/Details.tsx
View File

@@ -1,6 +1,6 @@
import { useMemo, useState } from "react";
import { format } from "date-fns";
import { find } from "lodash-es";
import { find, isEqual } from "lodash-es";
import MDEditor from "@uiw/react-md-editor";
import {
@@ -44,6 +44,7 @@ export default function Details() {
const [localDescription, setLocalDescription] = useState(description ?? "");
const [localDetails, setLocalDetails] = useState(details ?? "");
const [editDetails, setEditDetails] = useState(false);
const [mdFullScreen, setMdFullScreen] = useState(false);
const [saveState, setSaveState] = useState<
"" | "unsaved" | "saving" | "saved"
@@ -113,12 +114,17 @@ export default function Details() {
sx={{
color: "text.secondary",
}}
autoFocus={true}
value={localDescription}
onChange={(e) => {
setLocalDescription(e.target.value);
setSaveState("unsaved");
saveState !== "unsaved" && setSaveState("unsaved");
}}
onBlur={() => handleSave()}
onBlur={() =>
isEqual(description, localDescription)
? setSaveState("")
: handleSave()
}
rows={2}
minRows={2}
/>
@@ -151,28 +157,58 @@ export default function Details() {
)}
</Stack>
<Box
data-color-mode={theme.palette.mode}
sx={{
color: "text.secondary",
fontSize: `${theme.typography.body2.fontSize} !important`,
...theme.typography.body2,
"& .w-md-editor": {
backgroundColor: `${theme.palette.action.input} !important`,
},
"& .w-md-editor-fullscreen": {
backgroundColor: `${theme.palette.background.paper} !important`,
},
"& .w-md-editor-toolbar": {
display: "flex",
gap: 1,
},
"& .w-md-editor-toolbar > ul": {
display: "flex",
alignItems: "center",
},
"& .w-md-editor-toolbar > ul:first-of-type": {
overflowX: "auto",
marginRight: theme.spacing(1),
},
"& :is(h1, h2, h3, h4, h5, h6)": {
marginY: `${theme.spacing(1.5)} !important`,
borderBottom: "none !important",
},
"& details summary": {
marginBottom: theme.spacing(1),
},
}}
>
{editDetails ? (
<MDEditor
style={{ margin: 1 }}
toolbarHeight={58}
value={localDetails}
preview={mdFullScreen ? "live" : "edit"}
commandsFilter={(command) => {
if (command.name === "fullscreen") {
command.execute = () => setMdFullScreen(!mdFullScreen);
}
return command;
}}
textareaProps={{
autoFocus: true,
onChange: (e) => {
setLocalDetails(e.target.value ?? "");
setSaveState("unsaved");
saveState !== "unsaved" && setSaveState("unsaved");
},
onBlur: () => handleSave(),
onBlur: () =>
isEqual(details, localDetails)
? setSaveState("")
: handleSave(),
}}
/>
) : !localDetails ? (

23
src/components/TableSettingsDialog/TableDetails.tsx
View File

@@ -14,19 +14,40 @@ export default function TableDetails({ ...props }) {
{props.label ?? ""}
</InputLabel>
<Box
data-color-mode={theme.palette.mode}
sx={{
color: "text.secondary",
...theme.typography.body2,
"& .w-md-editor": {
backgroundColor: `${theme.palette.action.input} !important`,
},
"& .w-md-editor-fullscreen": {
backgroundColor: `${theme.palette.background.paper} !important`,
},
"& .w-md-editor-toolbar": {
display: "flex",
gap: 1,
},
"& .w-md-editor-toolbar > ul": {
display: "flex",
alignItems: "center",
},
"& .w-md-editor-toolbar > ul:first-of-type": {
overflowX: "auto",
marginRight: theme.spacing(1),
},
"& :is(h1, h2, h3, h4, h5, h6)": {
marginY: `${theme.spacing(1.5)} !important`,
borderBottom: "none !important",
},
"& details summary": {
marginBottom: theme.spacing(1),
},
}}
>
<MDEditor
style={{ margin: 1 }}
preview="live"
toolbarHeight={52}
height={150}
value={value}
onChange={onChange}