Merge pull request #46 from HaecheonLee/bug/fix-button-in-notes-rendering-in-safari
Fix button in note rendering in safari
This commit is contained in:
1ilit
GitHub
commit
25e127ed8a
@ -100,9 +100,9 @@ export default function Note({ data, onMouseDown }) {
|
||||
hovered
|
||||
? "rgb(59 130 246)"
|
||||
: selectedElement.element === ObjectType.NOTE &&
|
||||
selectedElement.id === data.id
|
||||
? "rgb(59 130 246)"
|
||||
: "rgb(168 162 158)"
|
||||
selectedElement.id === data.id
|
||||
? "rgb(59 130 246)"
|
||||
: "rgb(168 162 158)"
|
||||
}
|
||||
strokeDasharray={hovered ? 4 : 0}
|
||||
strokeLinejoin="round"
|
||||
@ -119,9 +119,9 @@ export default function Note({ data, onMouseDown }) {
|
||||
hovered
|
||||
? "rgb(59 130 246)"
|
||||
: selectedElement.element === ObjectType.NOTE &&
|
||||
selectedElement.id === data.id
|
||||
? "rgb(59 130 246)"
|
||||
: "rgb(168 162 158)"
|
||||
selectedElement.id === data.id
|
||||
? "rgb(59 130 246)"
|
||||
: "rgb(168 162 158)"
|
||||
}
|
||||
strokeDasharray={hovered ? 4 : 0}
|
||||
strokeLinejoin="round"
|
||||
@ -135,9 +135,148 @@ export default function Note({ data, onMouseDown }) {
|
||||
onMouseDown={onMouseDown}
|
||||
>
|
||||
<div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
|
||||
<label htmlFor={`note_${data.id}`} className="ms-5">
|
||||
{data.title}
|
||||
</label>
|
||||
<div className="flex justify-between">
|
||||
<label htmlFor={`note_${data.id}`} className="ms-5">
|
||||
{data.title}
|
||||
</label>
|
||||
{(hovered ||
|
||||
(selectedElement.element === ObjectType.NOTE &&
|
||||
selectedElement.id === data.id &&
|
||||
selectedElement.open &&
|
||||
!layout.sidebar)) && (
|
||||
<div>
|
||||
<Popover
|
||||
visible={
|
||||
selectedElement.element === ObjectType.NOTE &&
|
||||
selectedElement.id === data.id &&
|
||||
selectedElement.open &&
|
||||
!layout.sidebar
|
||||
}
|
||||
onClickOutSide={() => {
|
||||
if (selectedElement.editFromToolbar) {
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
editFromToolbar: false,
|
||||
}));
|
||||
return;
|
||||
}
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
open: false,
|
||||
}));
|
||||
setSaveState(State.SAVING);
|
||||
}}
|
||||
stopPropagation
|
||||
content={
|
||||
<div className="popover-theme">
|
||||
<div className="font-semibold mb-2 ms-1">Edit note</div>
|
||||
<div className="w-[280px] flex items-center mb-2">
|
||||
<Input
|
||||
value={data.title}
|
||||
placeholder="Title"
|
||||
className="me-2"
|
||||
onChange={(value) =>
|
||||
updateNote(data.id, { title: value })
|
||||
}
|
||||
onFocus={(e) =>
|
||||
setEditField({ title: e.target.value })
|
||||
}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === editField.title) return;
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.NOTE,
|
||||
nid: data.id,
|
||||
undo: editField,
|
||||
redo: { title: e.target.value },
|
||||
message: `Edit note title to "${e.target.value}"`,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
}}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<div className="popover-theme">
|
||||
<div className="font-medium mb-1">Theme</div>
|
||||
<hr />
|
||||
<div className="py-3">
|
||||
{noteThemes.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
style={{ backgroundColor: c }}
|
||||
className="p-3 rounded-full mx-1"
|
||||
onClick={() => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.NOTE,
|
||||
nid: data.id,
|
||||
undo: { color: data.color },
|
||||
redo: { color: c },
|
||||
message: `Edit note color to ${c}`,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateNote(data.id, { color: c });
|
||||
}}
|
||||
>
|
||||
{data.color === c ? (
|
||||
<IconCheckboxTick
|
||||
style={{ color: "white" }}
|
||||
/>
|
||||
) : (
|
||||
<IconCheckboxTick style={{ color: c }} />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
position="rightTop"
|
||||
showArrow
|
||||
>
|
||||
<div
|
||||
className="h-[32px] w-[32px] rounded"
|
||||
style={{ backgroundColor: data.color }}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<Button
|
||||
icon={<IconDeleteStroked />}
|
||||
type="danger"
|
||||
block
|
||||
onClick={() => {
|
||||
Toast.success(`Note deleted!`);
|
||||
deleteNote(data.id, true);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
trigger="custom"
|
||||
position="rightTop"
|
||||
showArrow
|
||||
>
|
||||
<Button
|
||||
icon={<IconEdit />}
|
||||
size="small"
|
||||
theme="solid"
|
||||
style={{
|
||||
backgroundColor: "#2F68ADB3",
|
||||
}}
|
||||
onClick={edit}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<textarea
|
||||
id={`note_${data.id}`}
|
||||
value={data.content}
|
||||
@ -152,142 +291,6 @@ export default function Note({ data, onMouseDown }) {
|
||||
className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
|
||||
style={{ backgroundColor: data.color }}
|
||||
/>
|
||||
{(hovered ||
|
||||
(selectedElement.element === ObjectType.NOTE &&
|
||||
selectedElement.id === data.id &&
|
||||
selectedElement.open &&
|
||||
!layout.sidebar)) && (
|
||||
<div className="absolute top-2 right-3">
|
||||
<Popover
|
||||
visible={
|
||||
selectedElement.element === ObjectType.NOTE &&
|
||||
selectedElement.id === data.id &&
|
||||
selectedElement.open &&
|
||||
!layout.sidebar
|
||||
}
|
||||
onClickOutSide={() => {
|
||||
if (selectedElement.editFromToolbar) {
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
editFromToolbar: false,
|
||||
}));
|
||||
return;
|
||||
}
|
||||
setSelectedElement((prev) => ({
|
||||
...prev,
|
||||
open: false,
|
||||
}));
|
||||
setSaveState(State.SAVING);
|
||||
}}
|
||||
stopPropagation
|
||||
content={
|
||||
<div className="popover-theme">
|
||||
<div className="font-semibold mb-2 ms-1">Edit note</div>
|
||||
<div className="w-[280px] flex items-center mb-2">
|
||||
<Input
|
||||
value={data.title}
|
||||
placeholder="Title"
|
||||
className="me-2"
|
||||
onChange={(value) =>
|
||||
updateNote(data.id, { title: value })
|
||||
}
|
||||
onFocus={(e) => setEditField({ title: e.target.value })}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === editField.title) return;
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.NOTE,
|
||||
nid: data.id,
|
||||
undo: editField,
|
||||
redo: { title: e.target.value },
|
||||
message: `Edit note title to "${e.target.value}"`,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
}}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<div className="popover-theme">
|
||||
<div className="font-medium mb-1">Theme</div>
|
||||
<hr />
|
||||
<div className="py-3">
|
||||
{noteThemes.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
style={{ backgroundColor: c }}
|
||||
className="p-3 rounded-full mx-1"
|
||||
onClick={() => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.NOTE,
|
||||
nid: data.id,
|
||||
undo: { color: data.color },
|
||||
redo: { color: c },
|
||||
message: `Edit note color to ${c}`,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateNote(data.id, { color: c });
|
||||
}}
|
||||
>
|
||||
{data.color === c ? (
|
||||
<IconCheckboxTick
|
||||
style={{ color: "white" }}
|
||||
/>
|
||||
) : (
|
||||
<IconCheckboxTick style={{ color: c }} />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
position="rightTop"
|
||||
showArrow
|
||||
>
|
||||
<div
|
||||
className="h-[32px] w-[32px] rounded"
|
||||
style={{ backgroundColor: data.color }}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<Button
|
||||
icon={<IconDeleteStroked />}
|
||||
type="danger"
|
||||
block
|
||||
onClick={() => {
|
||||
Toast.success(`Note deleted!`);
|
||||
deleteNote(data.id, true);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
trigger="custom"
|
||||
position="rightTop"
|
||||
showArrow
|
||||
>
|
||||
<Button
|
||||
icon={<IconEdit />}
|
||||
size="small"
|
||||
theme="solid"
|
||||
style={{
|
||||
backgroundColor: "#2f68ad",
|
||||
opacity: "0.7",
|
||||
}}
|
||||
onClick={edit}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user