Skip to content

add more help on completing an arrow #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

add more help on completing an arrow #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
58737f6
move mono font-family so it doesn't apply to cancel help text
smason Jun 7, 2022
72c5751
add more information on how to complete drawing an arrow
smason Jun 7, 2022
964c5ed
rename and restyle completion popover
smason Jun 15, 2022
d34968b
switch back to original 1rem margin around popover
smason Jun 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions src/components/CodeAnnotations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function CodeAnnotations({
>
<ArrowDrawingProvider>
<Svg />
<DrawingCancelationButton />
<DrawingCompletionPopover />
<SelectionPopover />
</ArrowDrawingProvider>
</ContainerDiv>
Expand Down Expand Up @@ -95,18 +95,21 @@ function Markers() {
)
}

function DrawingCancelationButton() {
function DrawingCompletionPopover() {
const currentArrow = useCurrentArrowDrawing()
const drawing = useDrawingEventHandlers()
if (!currentArrow) {
return null
}
return (
<button
className='drawing-cancelation-button'
onClick={() => drawing.cancelArrow()}
>
To cancel the current arrow, hit <kbd>esc</kbd> or click here
</button>
<div className="drawing-completion-popover">
Click on a second highlight to complete arrow.
{" "}
<button
onClick={() => drawing.cancelArrow()}
>
Click here to cancel or hit <kbd>Esc</kbd>
</button>
</div>
)
}
35 changes: 14 additions & 21 deletions src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ body {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
font-family: 'Roboto Mono', monospace;
row-gap: 0.5rem;

.line-annotations {
Expand Down Expand Up @@ -62,6 +61,7 @@ body {
}

.line-number {
font-family: 'Roboto Mono', monospace;
grid-column: 2;
color: gray;
text-align: right;
Expand Down Expand Up @@ -92,29 +92,22 @@ body {
height: 100%;
mix-blend-mode: multiply;
}

.drawing-cancelation-button {
pointer-events: auto;
position: sticky;
bottom: 1rem;
left: 1rem;
font-size: 1rem;
max-width: 10rem;
text-align: left;
outline: 0;
padding: 0.5rem;
margin: 0;
border: 1px solid black;
border-radius: 0.25rem;
background: #fff;

&:hover {
background: #eee;
}
}
}
}

.drawing-completion-popover {
pointer-events: auto;
position: sticky;
bottom: 1rem;
left: 1rem;
background: #ddf7ff;
border: 1px solid #447;
padding: 0.5rem 0;
max-width: 20rem;
border-radius: 0.25rem;
text-align: center;
}

.popover {
--top: auto;
--left: auto;
Expand Down