Added note text only mode
This commit is contained in:
parent
55b9be4e2d
commit
feb803ebef
@ -57,6 +57,7 @@ function MapNotes({
|
|||||||
visible: true,
|
visible: true,
|
||||||
locked: false,
|
locked: false,
|
||||||
color: "yellow",
|
color: "yellow",
|
||||||
|
textOnly: false,
|
||||||
});
|
});
|
||||||
setIsBrushDown(true);
|
setIsBrushDown(true);
|
||||||
}
|
}
|
||||||
|
@ -149,7 +149,7 @@ function Note({
|
|||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
onTap={handleClick}
|
onTap={handleClick}
|
||||||
width={noteWidth}
|
width={noteWidth}
|
||||||
height={noteHeight}
|
height={note.textOnly ? undefined : noteHeight}
|
||||||
offsetX={noteWidth / 2}
|
offsetX={noteWidth / 2}
|
||||||
offsetY={noteHeight / 2}
|
offsetY={noteHeight / 2}
|
||||||
draggable={draggable}
|
draggable={draggable}
|
||||||
@ -162,6 +162,7 @@ function Note({
|
|||||||
onTouchEnd={handlePointerUp}
|
onTouchEnd={handlePointerUp}
|
||||||
opacity={note.visible ? 1.0 : 0.5}
|
opacity={note.visible ? 1.0 : 0.5}
|
||||||
>
|
>
|
||||||
|
{!note.textOnly && (
|
||||||
<Rect
|
<Rect
|
||||||
width={noteWidth}
|
width={noteWidth}
|
||||||
height={noteHeight}
|
height={noteHeight}
|
||||||
@ -171,10 +172,13 @@ function Note({
|
|||||||
cornerRadius={0.25}
|
cornerRadius={0.25}
|
||||||
fill={colors[note.color]}
|
fill={colors[note.color]}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
<Text
|
<Text
|
||||||
text={note.text}
|
text={note.text}
|
||||||
fill={
|
fill={
|
||||||
note.color === "black" || note.color === "darkGray"
|
note.textOnly
|
||||||
|
? colors[note.color]
|
||||||
|
: note.color === "black" || note.color === "darkGray"
|
||||||
? "white"
|
? "white"
|
||||||
: "black"
|
: "black"
|
||||||
}
|
}
|
||||||
@ -184,7 +188,7 @@ function Note({
|
|||||||
fontSize={fontSize}
|
fontSize={fontSize}
|
||||||
wrap="word"
|
wrap="word"
|
||||||
width={noteWidth}
|
width={noteWidth}
|
||||||
height={noteHeight}
|
height={note.textOnly ? undefined : noteHeight}
|
||||||
/>
|
/>
|
||||||
{/* Use an invisible text block to work out text sizing */}
|
{/* Use an invisible text block to work out text sizing */}
|
||||||
<Text visible={false} ref={textRef} text={note.text} wrap="none" />
|
<Text visible={false} ref={textRef} text={note.text} wrap="none" />
|
||||||
|
@ -13,6 +13,8 @@ import LockIcon from "../../icons/TokenLockIcon";
|
|||||||
import UnlockIcon from "../../icons/TokenUnlockIcon";
|
import UnlockIcon from "../../icons/TokenUnlockIcon";
|
||||||
import ShowIcon from "../../icons/TokenShowIcon";
|
import ShowIcon from "../../icons/TokenShowIcon";
|
||||||
import HideIcon from "../../icons/TokenHideIcon";
|
import HideIcon from "../../icons/TokenHideIcon";
|
||||||
|
import NoteIcon from "../../icons/NoteToolIcon";
|
||||||
|
import TextIcon from "../../icons/NoteTextIcon";
|
||||||
|
|
||||||
import AuthContext from "../../contexts/AuthContext";
|
import AuthContext from "../../contexts/AuthContext";
|
||||||
|
|
||||||
@ -75,6 +77,10 @@ function NoteMenu({
|
|||||||
note && onNoteChange({ ...note, locked: !note.locked });
|
note && onNoteChange({ ...note, locked: !note.locked });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleModeChange() {
|
||||||
|
note && onNoteChange({ ...note, textOnly: !note.textOnly });
|
||||||
|
}
|
||||||
|
|
||||||
function handleModalContent(node) {
|
function handleModalContent(node) {
|
||||||
if (node) {
|
if (node) {
|
||||||
// Focus input
|
// Focus input
|
||||||
@ -209,6 +215,13 @@ function NoteMenu({
|
|||||||
>
|
>
|
||||||
{note && note.locked ? <LockIcon /> : <UnlockIcon />}
|
{note && note.locked ? <LockIcon /> : <UnlockIcon />}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
onClick={handleModeChange}
|
||||||
|
title={note && note.textOnly ? "Note Mode" : "Text Mode"}
|
||||||
|
aria-label={note && note.textOnly ? "Note Mode" : "Text Mode"}
|
||||||
|
>
|
||||||
|
{note && note.textOnly ? <TextIcon /> : <NoteIcon />}
|
||||||
|
</IconButton>
|
||||||
</Flex>
|
</Flex>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -304,6 +304,20 @@ function loadVersions(db) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 1.7.1 - Added note text only mode
|
||||||
|
db.version(18)
|
||||||
|
.stores({})
|
||||||
|
.upgrade((tx) => {
|
||||||
|
return tx
|
||||||
|
.table("states")
|
||||||
|
.toCollection()
|
||||||
|
.modify((state) => {
|
||||||
|
for (let id in state.notes) {
|
||||||
|
state.notes[id].textOnly = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get the dexie database used in DatabaseContext
|
// Get the dexie database used in DatabaseContext
|
||||||
|
19
src/icons/NoteTextIcon.js
Normal file
19
src/icons/NoteTextIcon.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
function NoteTextIcon() {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
fill="currentcolor"
|
||||||
|
>
|
||||||
|
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||||
|
<path d="M2 20h20c1.1 0 2 .9 2 2s-.9 2-2 2H2c-1.1 0-2-.9-2-2s.9-2 2-2z" />
|
||||||
|
<path d="M10.63 3.93L6.06 15.58c-.27.68.23 1.42.97 1.42.43 0 .82-.27.98-.68L8.87 14h6.25l.87 2.32c.15.41.54.68.98.68.73 0 1.24-.74.97-1.42L13.37 3.93C13.14 3.37 12.6 3 12 3c-.6 0-1.15.37-1.37.93zM9.62 12L12 5.67 14.38 12H9.62z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NoteTextIcon;
|
Loading…
Reference in New Issue
Block a user