Commit 3e50c173 authored by Andrew Hrdy's avatar Andrew Hrdy

Changed alerts to look a lot cleaner.

parent e11735d7
Pipeline #2071 passed with stage
in 1 minute and 40 seconds
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import {findLink} from '../utils/nameUtils'; import {findLink} from '../utils/nameUtils';
import Chip from 'material-ui/Chip';
const Alert = ({alert}) => { const Alert = ({alert}) => {
const getUrgencyClass = () => { const getUrgencyClass = () => {
...@@ -20,11 +21,13 @@ const Alert = ({alert}) => { ...@@ -20,11 +21,13 @@ const Alert = ({alert}) => {
const getMessage = () => { const getMessage = () => {
const links = findLink(alert.message); const links = findLink(alert.message);
if (!links) { if (!links) {
return alert.message; return (<span className={'alert-message'}>
{alert.message}
</span>);
} }
return ( return (
<span> <span className={'alert-message'}>
{alert.message.substring(0, links.index)} {alert.message.substring(0, links.index)}
<a href={links[0]} className={'alert-link'} target="_blank" rel="noopener">{links[0]}</a> <a href={links[0]} className={'alert-link'} target="_blank" rel="noopener">{links[0]}</a>
{alert.message.substring(links.index + links[0].length)} {alert.message.substring(links.index + links[0].length)}
...@@ -32,9 +35,12 @@ const Alert = ({alert}) => { ...@@ -32,9 +35,12 @@ const Alert = ({alert}) => {
); );
}; };
const getChipLabel = () => alert.urgency_tag.charAt(0).toUpperCase() + alert.urgency_tag.slice(1);
return ( return (
<div className={classNames('alert', getUrgencyClass())}> <div className={'alert'}>
{getMessage()} {getMessage()}
<Chip label={getChipLabel()} className={classNames('alert-urgency-chip', getUrgencyClass())}/>
</div> </div>
); );
}; };
......
...@@ -4,6 +4,7 @@ import IconButton from 'material-ui/IconButton'; ...@@ -4,6 +4,7 @@ import IconButton from 'material-ui/IconButton';
import Popover from 'material-ui/Popover'; import Popover from 'material-ui/Popover';
import Alert from '../components/Alert'; import Alert from '../components/Alert';
import NotificationsIcon from 'material-ui-icons/Notifications'; import NotificationsIcon from 'material-ui-icons/Notifications';
import CloseIcon from 'material-ui-icons/Close';
import Typography from 'material-ui/Typography'; import Typography from 'material-ui/Typography';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {viewAlert} from '../actions/api'; import {viewAlert} from '../actions/api';
...@@ -50,7 +51,9 @@ class AlertContainer extends React.Component { ...@@ -50,7 +51,9 @@ class AlertContainer extends React.Component {
const activeAlerts = alerts.filter(this.isAlertActive); const activeAlerts = alerts.filter(this.isAlertActive);
return ( return (
<div> <div>
<IconButton color={'primary'} ref={this.handleBtnRef} onClick={this.handleOpen}> <IconButton classes={{
root: 'alert-container-btn'
}} ref={this.handleBtnRef} onClick={this.handleOpen}>
{activeAlerts.filter((alert) => !alert.viewed).length !== 0 && {activeAlerts.filter((alert) => !alert.viewed).length !== 0 &&
<span className={'alert-container-number'}> <span className={'alert-container-number'}>
<Typography type={'caption'} className={'alert-container-number-text'}> <Typography type={'caption'} className={'alert-container-number-text'}>
...@@ -74,11 +77,29 @@ class AlertContainer extends React.Component { ...@@ -74,11 +77,29 @@ class AlertContainer extends React.Component {
}} }}
onClose={this.handleClose}> onClose={this.handleClose}>
<div className={'alert-container-popover'}> <div className={'alert-container-popover'}>
{activeAlerts.map((alert) => { <div className={'alert-container-header'}>
return ( <Typography type={'title'} className={'alert-container-title'}>
<Alert key={alert.id} alert={alert}/> Alerts
); </Typography>
})} <IconButton className={'alert-container-close-btn'} onClick={this.handleClose}>
<CloseIcon className={'alert-container-close-icon'}/>
</IconButton>
</div>
{
activeAlerts.length === 0 ?
<div>
<div className={'alert'}>
<span>There are no alerts at this time.</span>
</div>
</div> :
<div>
{activeAlerts.map((alert) => {
return (
<Alert key={alert.id} alert={alert}/>
);
})}
</div>
}
</div> </div>
</Popover> </Popover>
</div> </div>
......
.alert { .alert {
margin: 8px; padding: 8px 16px;
padding: 6px 24px;
border-radius: 5px;
color: rgba(255, 255, 255, 1);
display: flex; display: flex;
flex-wrap: wrap; justify-content: space-between;
align-items: center; align-items: center;
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 400; font-weight: 400;
font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
line-height: 1.46429em; line-height: 1.46429em;
cursor: default;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(0, 0, 0, 0.03);
}
} }
.alert-message {
display: flex;
flex-wrap: wrap;
margin-right: 10px;
}
.alert-urgency-chip {
height: 20px !important;
font-size: 12px !important;
line-height: 1;
color: white !important;
}
.alert-link { .alert-link {
color: rgba(255, 255, 255, 1) !important; color: #0645AD;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
} }
.alert-info { .alert-info {
background-color: #42A5F5; background-color: #42A5F5 !important;
} }
.alert-minor { .alert-minor {
background-color: #66BB6A; background-color: #66BB6A !important;
} }
.alert-major { .alert-major {
background-color: #FFA726; background-color: #FFA726 !important;
} }
.alert-emergency { .alert-emergency {
background-color: #EF5350; background-color: #EF5350 !important;
} }
\ No newline at end of file
.alert-container-btn {
color: rgba(0, 0, 0, 0.4) !important;
}
.alert-container-popover { .alert-container-popover {
max-width: 450px; max-width: 450px;
max-height: 300px;
}
.alert-container-close-btn {
width: 20px !important;
height: 20px !important;
}
.alert-container-close-icon {
width: 20px !important;
height: 20px !important;
}
.alert-container-header {
padding: 8px 16px;
background-color: rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: space-between;
}
.alert-container-title {
font-weight: 400 !important;
font-size: 20px !important;
} }
.alert-container-number { .alert-container-number {
...@@ -15,4 +43,6 @@ ...@@ -15,4 +43,6 @@
.alert-container-number-text { .alert-container-number-text {
color: rgba(255, 255, 255, 1) !important; color: rgba(255, 255, 255, 1) !important;
height: 10px !important;
line-height: 10px !important;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment