Skip to content

Commit

Permalink
#106 Move tooltip style into global CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@blms
blms committed Feb 4, 2021
1 parent 2f199d7 commit 614e572
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 114 deletions.
14 changes: 1 addition & 13 deletions src/components/AnnotationCard/AnnotationCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,7 @@ function AnnotationCard({
const annotationSaveButton = annotationMatchesCurrentFilters() ? saveButton : (
<OverlayTrigger
overlay={(
<Tooltip id="tooltip-annotation-info">
<Tooltip className="styled-tooltip">
<strong>Note:</strong>
{' '}
Filters applied to this document may exclude
Expand Down Expand Up @@ -735,18 +735,6 @@ function AnnotationCard({
</Card>
<style jsx global>
{`
#tooltip-annotation-info .tooltip-inner {
font-size: 12px;
background-color: #f6f6f6;
color: black;
border: 1px solid rgba(0, 0, 0, 0.125);
}
#tooltip-annotation-info .arrow {
background-color: transparent;
}
#tooltip-annotation-info .arrow::before {
border-top-color: rgba(0, 0, 0, 0.125);
}
.truncated-annotation, .truncated-annotation .text-quote {
overflow: hidden;
text-overflow: ellipsis;
Expand Down
184 changes: 83 additions & 101 deletions src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,109 +71,91 @@ const DashboardDocumentList = ({
}, [documents, documentGroupState]);

return (
<>
<Card data-testid="dash-document-list">
<Card.Header>
<Card.Title><Link href="/documents">Documents</Link></Card.Title>
<Tabs
transition={false}
style={{ justifyContent: 'flex-end', float: 'right', marginTop: '-2rem' }}
activeKey={key}
onSelect={(k) => {
setKey(k);
}}
>
<Tab eventKey="shared" title="Shared" />
<Tab eventKey="mine" title="Mine" />
</Tabs>
</Card.Header>
{listLoading && (
<LoadingSpinner />
)}
{!listLoading && documents && documents.length > 0 && (
<ListGroup>
{documents.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).map(
(document) => (
<ListGroup.Item key={document.slug}>
<Row>
<Col>
<Link href={`/documents/${document.slug}`}>{document.title}</Link>
</Col>
<Col className="text-right">
{session && session.user.groups && document.groups
&& filterGroupIdsByUser(document.groups, session.user.groups).length > 0 && (
<Badge
variant="info"
key={filterGroupIdsByUser(document.groups, session.user.groups).sort()[0]}
className="mr-2"
<Card data-testid="dash-document-list">
<Card.Header>
<Card.Title><Link href="/documents">Documents</Link></Card.Title>
<Tabs
transition={false}
style={{ justifyContent: 'flex-end', float: 'right', marginTop: '-2rem' }}
activeKey={key}
onSelect={(k) => {
setKey(k);
}}
>
<Tab eventKey="shared" title="Shared" />
<Tab eventKey="mine" title="Mine" />
</Tabs>
</Card.Header>
{listLoading && (
<LoadingSpinner />
)}
{!listLoading && documents && documents.length > 0 && (
<ListGroup>
{documents.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).map(
(document) => (
<ListGroup.Item key={document.slug}>
<Row>
<Col>
<Link href={`/documents/${document.slug}`}>{document.title}</Link>
</Col>
<Col className="text-right">
{session && session.user.groups && document.groups
&& filterGroupIdsByUser(document.groups, session.user.groups).length > 0 && (
<Badge
variant="info"
key={filterGroupIdsByUser(document.groups, session.user.groups).sort()[0]}
className="mr-2"
>
{documentGroupState[filterGroupIdsByUser(document.groups, session.user.groups)
.sort()[0]]}
</Badge>
)}
{document.groups && session && session.user.groups
&& filterGroupIdsByUser(document.groups, session.user.groups).length > 1 && (
<OverlayTrigger
overlay={(
<Tooltip className="styled-tooltip">
Shared with additional groups
</Tooltip>
)}
placement="top"
>
{documentGroupState[filterGroupIdsByUser(document.groups, session.user.groups)
.sort()[0]]}
</Badge>
)}
{document.groups && session && session.user.groups
&& filterGroupIdsByUser(document.groups, session.user.groups).length > 1 && (
<OverlayTrigger
overlay={(
<Tooltip id="tooltip-groups">
Shared with additional groups
</Tooltip>
)}
placement="top"
>
<Plus
className="mr-1 ml-n1 mb-1"
title="Tooltip on left"
/>
</OverlayTrigger>
)}
<>
{format(new Date(document.createdAt), 'MM/dd/yyyy')}
</>
</Col>
</Row>
</ListGroup.Item>
),
)}
<ListGroup.Item style={{ fontWeight: 'bold' }} key="all-docs">
<Link href={`/documents?tab=${key}`}>
{`See all ${key === 'shared' ? key : 'created'} documents...`}
</Link>
</ListGroup.Item>
</ListGroup>
)}
{!listLoading && documents && documents.length === 0 && (
<Card.Body>
{`You have no ${key === 'shared' ? key : 'created'} documents.`}
</Card.Body>
<Plus
className="mr-1 ml-n1 mb-1"
title="Tooltip on left"
/>
</OverlayTrigger>
)}
<>
{format(new Date(document.createdAt), 'MM/dd/yyyy')}
</>
</Col>
</Row>
</ListGroup.Item>
),
)}
<Card.Footer className="text-right" style={{ borderTop: 0 }}>
<Button
size="sm"
variant="outline-primary"
href="/documents/new"
>
+ Create new document
</Button>
</Card.Footer>
</Card>
<style jsx global>
{`
#tooltip-groups .tooltip-inner {
font-size: 12px;
background-color: #f6f6f6;
color: black;
border: 1px solid rgba(0, 0, 0, 0.125);
}
#tooltip-groups .arrow {
background-color: transparent;
}
#tooltip-groups .arrow::before {
border-top-color: rgba(0, 0, 0, 0.125);
}
`}
</style>
</>
<ListGroup.Item style={{ fontWeight: 'bold' }} key="all-docs">
<Link href={`/documents?tab=${key}`}>
{`See all ${key === 'shared' ? key : 'created'} documents...`}
</Link>
</ListGroup.Item>
</ListGroup>
)}
{!listLoading && documents && documents.length === 0 && (
<Card.Body>
{`You have no ${key === 'shared' ? key : 'created'} documents.`}
</Card.Body>
)}
<Card.Footer className="text-right" style={{ borderTop: 0 }}>
<Button
size="sm"
variant="outline-primary"
href="/documents/new"
>
+ Create new document
</Button>
</Card.Footer>
</Card>
);
};

Expand Down
15 changes: 15 additions & 0 deletions src/style/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,5 +306,20 @@ ol.breadcrumb {
}
}

.styled-tooltip {
.tooltip-inner {
font-size: 12px;
background-color: #f6f6f6;
color: black;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.arrow {
background-color: transparent;
}
.arrow::before {
border-top-color: rgba(0, 0, 0, 0.125) !important;
}
}

/* import bootstrap */
@import "~bootstrap/scss/bootstrap";

0 comments on commit 614e572

Please sign in to comment.