Add links from recent note history entries to the actual note (#203)

* Added Link objects around history-cards and the title in table-view

This commit adds one Link element wrapping the title of a note in the table view and one Link element wrapping the whole card of a note in cards view.

This behaviour currently doesn't work completely correct as other buttons on the card become unclickable and needs to be fixed in another commit before merging this branch.

* Fixed Link behaviour for card view

The cards aren't wrapped inside a Link element anymore but the middle column of a card (where the title and tags are located) is now wrapped inside the Link element.
With this approach not the whole card is clickable anymore, but it's enough clickable space anyway. The positive aspect is that we don't have to deal with "position: absolute"-elements that may break responsiveness.
This commit is contained in:
Erik Michelson 2020-06-14 12:25:45 +02:00 committed by GitHub
parent eb92d38133
commit 2d0b605257
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 13 deletions

View file

@ -1,6 +1,7 @@
import moment from 'moment'
import React from 'react'
import { Badge, Card } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import { formatHistoryDate } from '../../../../../utils/historyUtils'
import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
import { EntryMenu } from '../common/entry-menu'
@ -16,6 +17,7 @@ export const HistoryCard: React.FC<HistoryEntryProps> = ({ entry, onPinClick, on
<div className={'d-flex flex-column'}>
<PinButton isDark={false} isPinned={entry.pinned} onPinClick={() => onPinClick(entry.id, entry.location)}/>
</div>
<Link to={`/n/${entry.id}`} className="text-decoration-none flex-fill text-dark">
<div className={'d-flex flex-column justify-content-between'}>
<Card.Title className="m-0 mt-1dot5">{entry.title}</Card.Title>
<div>
@ -30,6 +32,7 @@ export const HistoryCard: React.FC<HistoryEntryProps> = ({ entry, onPinClick, on
</div>
</div>
</div>
</Link>
<div className={'d-flex flex-column'}>
<EntryMenu
id={entry.id}

View file

@ -1,5 +1,6 @@
import React from 'react'
import { Badge } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import { formatHistoryDate } from '../../../../../utils/historyUtils'
import { EntryMenu } from '../common/entry-menu'
import { PinButton } from '../common/pin-button'
@ -8,7 +9,11 @@ import { HistoryEntryProps } from '../history-content/history-content'
export const HistoryTableRow: React.FC<HistoryEntryProps> = ({ entry, onPinClick, onRemoveClick }) => {
return (
<tr>
<td>{entry.title}</td>
<td>
<Link to={`/n/${entry.id}`} className="text-light">
{entry.title}
</Link>
</td>
<td>{formatHistoryDate(entry.lastVisited)}</td>
<td>
{