mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-09-19 23:48:57 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

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

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/landing/pages/history/history-card/history-card.tsx
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,20 +17,22 @@ 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>
<div className={'d-flex flex-column justify-content-between'}>
<Card.Title className="m-0 mt-1dot5">{entry.title}</Card.Title>
<div>
<div className="text-black-50 mt-2">
<ForkAwesomeIcon icon="clock-o"/> {moment(entry.lastVisited).fromNow()}<br/>
{formatHistoryDate(entry.lastVisited)}
</div>
<div className={'card-footer-min-height p-0'}>
{
entry.tags.map((tag) => <Badge variant={'dark'} className={'mr-1 mb-1'} key={tag}>{tag}</Badge>)
}
<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>
<div className="text-black-50 mt-2">
<ForkAwesomeIcon icon="clock-o"/> {moment(entry.lastVisited).fromNow()}<br/>
{formatHistoryDate(entry.lastVisited)}
</div>
<div className={'card-footer-min-height p-0'}>
{
entry.tags.map((tag) => <Badge variant={'dark'} className={'mr-1 mb-1'} key={tag}>{tag}</Badge>)
}
</div>
</div>
</div>
</div>
</Link>
<div className={'d-flex flex-column'}>
<EntryMenu
id={entry.id}

7
src/components/landing/pages/history/history-table/history-table-row.tsx
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>
{