Skip to content

Commit

Permalink
Merge pull request #46 from HaecheonLee/bug/fix-button-in-notes-rende…
Browse files Browse the repository at this point in the history 
…ring-in-safari

Fix button in note rendering in safari
  • Loading branch information
@1ilit
1ilit authored Apr 14, 2024
2 parents 1649d07 + 5b6c34d commit 25e127e
Showing 1 changed file with 148 additions and 145 deletions.
293 changes: 148 additions & 145 deletions src/components/EditorCanvas/Note.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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}
Expand All @@ -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>
Expand Down

0 comments on commit 25e127e

Please sign in to comment.