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 classNames from 'classnames';
import {findLink} from '../utils/nameUtils';
import Chip from 'material-ui/Chip';
const Alert = ({alert}) => {
const getUrgencyClass = () => {
......@@ -20,11 +21,13 @@ const Alert = ({alert}) => {
const getMessage = () => {
const links = findLink(alert.message);
if (!links) {
return alert.message;
return (<span className={'alert-message'}>
{alert.message}
</span>);
}
return (
<span>
<span className={'alert-message'}>
{alert.message.substring(0, links.index)}
<a href={links[0]} className={'alert-link'} target="_blank" rel="noopener">{links[0]}</a>
{alert.message.substring(links.index + links[0].length)}
......@@ -32,9 +35,12 @@ const Alert = ({alert}) => {
);
};
const getChipLabel = () => alert.urgency_tag.charAt(0).toUpperCase() + alert.urgency_tag.slice(1);
return (
<div className={classNames('alert', getUrgencyClass())}>
<div className={'alert'}>
{getMessage()}
<Chip label={getChipLabel()} className={classNames('alert-urgency-chip', getUrgencyClass())}/>
</div>
);
};
......
......@@ -4,6 +4,7 @@ import IconButton from 'material-ui/IconButton';
import Popover from 'material-ui/Popover';
import Alert from '../components/Alert';
import NotificationsIcon from 'material-ui-icons/Notifications';
import CloseIcon from 'material-ui-icons/Close';
import Typography from 'material-ui/Typography';
import {connect} from 'react-redux';
import {viewAlert} from '../actions/api';
......@@ -50,7 +51,9 @@ class AlertContainer extends React.Component {
const activeAlerts = alerts.filter(this.isAlertActive);
return (
<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 &&
<span className={'alert-container-number'}>
<Typography type={'caption'} className={'alert-container-number-text'}>
......@@ -74,11 +77,29 @@ class AlertContainer extends React.Component {
}}
onClose={this.handleClose}>
<div className={'alert-container-popover'}>
{activeAlerts.map((alert) => {
return (
<Alert key={alert.id} alert={alert}/>
);
})}
<div className={'alert-container-header'}>
<Typography type={'title'} className={'alert-container-title'}>
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>
</Popover>
</div>
......
.alert {
margin: 8px;
padding: 6px 24px;
border-radius: 5px;
color: rgba(255, 255, 255, 1);
padding: 8px 16px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
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-weight: 400;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
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 {
color: rgba(255, 255, 255, 1) !important;
color: #0645AD;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
}
.alert-info {
background-color: #42A5F5;
background-color: #42A5F5 !important;
}
.alert-minor {
background-color: #66BB6A;
background-color: #66BB6A !important;
}
.alert-major {
background-color: #FFA726;
background-color: #FFA726 !important;
}
.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 {
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 {
......@@ -15,4 +43,6 @@
.alert-container-number-text {
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