Skip to content

Commit

Permalink
refactor doc-annexes
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsubik
tsubik committed Oct 26, 2023
1 parent 66c8f57 commit a3af7ce
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 80 deletions.
16 changes: 12 additions & 4 deletions components/ui/doc-annex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,27 @@ import Spinner from 'components/ui/spinner';

export default function DocAnnex({ annex, isRemoving, showRemoveButton, onRemove }) {
const intl = useIntl();
const formatDate = (date) => intl.formatDate(date, {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});

return (
<Tooltip
placement="bottom"
align={{
offset: [0, 10],
}}
overlay={
<div>
<Spinner isLoading={isRemoving} className="-tiny -transparent" />
<h4 className="c-title -default tooltip-title">{annex.name}</h4>
<h4 className="c-title -default tooltip-title"><strong>{annex.name}</strong></h4>
<dl className="tooltip-content">
<dt><strong>{intl.formatMessage({ id: 'annex.start_date' })}:</strong></dt>
<dd>{annex['start-date'] ? annex['start-date'] : '-'}</dd>
<dd>{annex['start-date'] ? formatDate(annex['start-date']) : '-'}</dd>
<dt><strong>{intl.formatMessage({ id: 'annex.expiry_date' })}:</strong></dt>
<dd>{annex['expire-date'] ? annex['expire-date'] : '-'}</dd>
<dd>{annex['expire-date'] ? formatDate(annex['expire-date']) : '-'}</dd>
</dl>
<div className="tooltip-footer">
{annex.attachment &&
Expand All @@ -41,7 +49,7 @@ export default function DocAnnex({ annex, isRemoving, showRemoveButton, onRemove
</div>
</div>
}
overlayClassName="c-tooltip"
overlayClassName="c-tooltip fixed-width"
>
<button
className="c-button"
Expand Down
78 changes: 2 additions & 76 deletions components/ui/doc-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,44 +249,7 @@ class DocCard extends React.Component {
<ul className="doc-card-list">
{approvedAnnexes.map(annex => (
<li className="doc-card-list-item" key={annex.id}>
<Tooltip
placement="bottom"
overlay={
<div>
<Spinner isLoading={deleteLoading} className="-tiny -transparent" />
<h4 className="c-title -default tooltip-title">{annex.name}</h4>
<dl className="tooltip-content">
<dt><strong>{this.props.intl.formatMessage({ id: 'annex.start_date' })}:</strong></dt>
<dd>{annex['start-date'] ? annex['start-date'] : '-' }</dd>
<dt><strong>{this.props.intl.formatMessage({ id: 'annex.expiry_date' })}:</strong></dt>
<dd>{annex['expire-date'] ? annex['expire-date'] : '-'}</dd>
</dl>
<div className="tooltip-footer">
{annex.attachment &&
<a href={annex.attachment.url} target="_blank" rel="noopener noreferrer" className="c-button -small -tooltip">{this.props.intl.formatMessage({ id: 'file' })}</a>
}
{isActiveUser &&
<button
className="c-button -small -tooltip -tooltip-secondary"
type="button"
onClick={() => this.triggerRemoveAnnex(annex.id)}
>
<span className="tooltip-hidden-button-text">{this.props.intl.formatMessage({ id: 'annex.remove' })}</span>
<Icon className="" name="icon-bin" />
</button>
}
</div>
</div>
}
overlayClassName="c-tooltip"
>
<button
className="c-button"
type="button"
>
<Icon className="" name="icon-file-empty" />
</button>
</Tooltip>
<DocAnnex annex={annex} isRemoving={deleteLoading} showRemoveButton={isActiveUser} onRemove={this.triggerRemoveAnnex} />
</li>
))}
{isActiveUser &&
Expand Down Expand Up @@ -353,44 +316,7 @@ class DocCard extends React.Component {
<ul className="doc-card-list">
{approvedAnnexes.map(annex => (
<li className="doc-card-list-item" key={annex.id}>
<Tooltip
placement="bottom"
overlay={
<div>
<Spinner isLoading={deleteLoading} className="-tiny -transparent" />
<h4 className="c-title -default tooltip-title">{annex.name}</h4>
<dl className="tooltip-content">
<dt><strong>{this.props.intl.formatMessage({ id: 'annex.start_date' })}:</strong></dt>
<dd>{annex['start-date'] ? annex['start-date'] : '-' }</dd>
<dt><strong>{this.props.intl.formatMessage({ id: 'annex.expiry_date' })}:</strong></dt>
<dd>{annex['expire-date'] ? annex['expire-date'] : '-'}</dd>
</dl>
<div className="tooltip-footer">
{annex.attachment &&
<a href={annex.attachment.url} target="_blank" rel="noopener noreferrer" className="c-button -small -tooltip">{this.props.intl.formatMessage({ id: 'file' })}</a>
}
{isActiveUser &&
<button
className="c-button -small -tooltip -tooltip-secondary"
type="button"
onClick={() => this.triggerRemoveAnnex(annex.id)}
>
<span className="tooltip-hidden-button-text">{this.props.intl.formatMessage({ id: 'annex.remove' })}</span>
<Icon className="" name="icon-bin" />
</button>
}
</div>
</div>
}
overlayClassName="c-tooltip"
>
<button
className="c-button"
type="button"
>
<Icon className="" name="icon-file-empty" />
</button>
</Tooltip>
<DocAnnex annex={annex} isRemoving={deleteLoading} showRemoveButton={isActiveUser} onRemove={this.triggerRemoveAnnex} />
</li>
))}

Expand Down
4 changes: 4 additions & 0 deletions css/components/ui/_tooltip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@
min-width: unset;
}

&.fixed-width {
width: 320px;
}

dd {
margin-left: 0;
}
Expand Down

0 comments on commit a3af7ce

Please sign in to comment.