github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-27 10:03:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor project list notification by using onDismiss on Alert instead of custom Close component (#12043)

Browse source 
* Refactor project list notification by using `onDismiss` on `Alert` and not using the custom `Close` component

* Add dismissible alerts to storybook

GitOrigin-RevId: 9a3f95c322a063b84094452c21cb734a379da978
This commit is contained in:
M Fahru 2023-03-06 07:34:38 -07:00 committed by Copybot
parent 01c504109b
commit 06b75ebee2
4 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
services/web/frontend/js/features/project-list/components/notifications/notification.tsx
View file

@ -2,8 +2,8 @@ import { useState } from 'react'
import { Alert, AlertProps } from 'react-bootstrap' import { Alert, AlertProps } from 'react-bootstrap'
import Body from './body' import Body from './body'
import Action from './action' import Action from './action'
import Close from './close'
import classnames from 'classnames' import classnames from 'classnames'
import { useTranslation } from 'react-i18next'
type NotificationProps = { type NotificationProps = {
bsStyle: AlertProps['bsStyle'] bsStyle: AlertProps['bsStyle']
@ -20,6 +20,7 @@ function Notification({
...props ...props
}: NotificationProps) { }: NotificationProps) {
const [show, setShow] = useState(true) const [show, setShow] = useState(true)
const { t } = useTranslation()
const handleDismiss = () => { const handleDismiss = () => {
if (onDismiss) { if (onDismiss) {
@ -35,13 +36,12 @@ function Notification({
return ( return (
<li className={classnames('notification-entry', className)} {...props}> <li className={classnames('notification-entry', className)} {...props}>
<Alert bsStyle={bsStyle}> <Alert
{children} bsStyle={bsStyle}
{onDismiss ? ( onDismiss={onDismiss ? handleDismiss : undefined}
<div className="notification-close"> closeLabel={t('close')}
<Close onDismiss={handleDismiss} /> >
</div> <div className="notification-entry-content">{children}</div>
) : null}
</Alert> </Alert>
</li> </li>
) )

16
services/web/frontend/stories/style-guide.stories.js
View file

@ -234,6 +234,7 @@ export const Alerts = () => {
<Col md={8} mdOffset={2}> <Col md={8} mdOffset={2}>
<h2>Alerts</h2> <h2>Alerts</h2>
<h3>Non-dismissible alerts</h3>
<Alert bsStyle="danger"> <Alert bsStyle="danger">
An <code>.alert-danger</code> alert An <code>.alert-danger</code> alert
</Alert> </Alert>
@ -246,6 +247,21 @@ export const Alerts = () => {
<Alert bsStyle="warning"> <Alert bsStyle="warning">
An <code>.alert-warning</code> alert An <code>.alert-warning</code> alert
</Alert> </Alert>
<hr />
<h3>Dismissible alerts</h3>
<Alert bsStyle="danger" onDismiss={() => {}}>
An <code>.alert-danger</code> alert
</Alert>
<Alert bsStyle="success" onDismiss={() => {}}>
An <code>.alert-success</code> alert
</Alert>
<Alert bsStyle="info" onDismiss={() => {}}>
An <code>.alert-info</code> alert
</Alert>
<Alert bsStyle="warning" onDismiss={() => {}}>
An <code>.alert-warning</code> alert
</Alert>
</Col> </Col>
</Row> </Row>
</Grid> </Grid>

3
services/web/frontend/stylesheets/app/project-list.less
View file

@ -240,8 +240,7 @@ input.project-list-table-select-item[type='checkbox'] {
margin-bottom: 0px; margin-bottom: 0px;
} }
.notification-entry { .notification-entry {
.alert { .notification-entry-content {
.box-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {

1
services/web/frontend/stylesheets/components/alerts.less
View file

@ -48,6 +48,7 @@
top: -2px; top: -2px;
right: -21px; right: -21px;
color: inherit; color: inherit;
text-shadow: none;
} }
} }