diff --git a/src/admin/pages/AdminPage.js b/src/admin/pages/AdminPage.js
index 2af62e41d50af324eb887276f99a1b1799951117..897bbf6e34efffa312d35e4df7e3ea6c337ba713 100644
--- a/src/admin/pages/AdminPage.js
+++ b/src/admin/pages/AdminPage.js
@@ -1,5 +1,5 @@
import React, {useEffect, useState} from 'react';
-import {Divider, Grid, Header, Menu, Segment} from 'semantic-ui-react';
+import {Divider, Grid, Header, Menu} from 'semantic-ui-react';
import {Helmet} from 'react-helmet';
import CategoriesList from 'admin/components/CategoriesList';
import {connect} from 'react-redux';
diff --git a/src/channels/components/ChannelsList/ChannelsList.js b/src/channels/components/ChannelsList/ChannelsList.js
index 0a4aa0e58f128cfe390a2e08ecfbc27b31be43e9..9bc3116d9d68e2eb7765578734ac455c1f2df3df 100644
--- a/src/channels/components/ChannelsList/ChannelsList.js
+++ b/src/channels/components/ChannelsList/ChannelsList.js
@@ -6,6 +6,7 @@ import {
Image,
Item,
Label,
+ List,
Pagination,
Popup,
Segment,
@@ -194,7 +195,7 @@ const ChannelsList = ({
return (
<Label
color="grey"
- size="mini"
+ size="small"
content={channel.category.name}
style={{marginRight: 5}}
/>
@@ -207,18 +208,15 @@ const ChannelsList = ({
return (
<>
<Popup style={{marginLeft: 5}} trigger={<Icon name="tags" style={{color: '#ccc'}} />}>
+ <Popup.Header>Tags</Popup.Header>
<Popup.Content>
- {channel.tags.map(data => {
- return (
- <React.Fragment key={data.id}>
- <Label tag size="tiny" content={data.name} />
- <br />
- </React.Fragment>
- );
- })}
+ <List className="list--flex">
+ {channel.tags.map(data => {
+ return <List.Item key={data.id} icon="tag" content={data.name} />;
+ })}
+ </List>
</Popup.Content>
</Popup>
- <span> Tags </span>
</>
);
}
@@ -332,7 +330,6 @@ const ChannelsList = ({
disabled={channel.id === toggledId && loadingFavorite}
loading={channel.id === toggledId && loadingFavorite}
name={userSettings?.favoriteList?.includes(channel.id) ? 'star' : 'star outline'}
- basic
color={userSettings?.favoriteList?.includes(channel.id) ? 'yellow' : 'grey'}
onClick={() => handleToggleChannelInCollection(channel)}
/>
@@ -348,6 +345,13 @@ const ChannelsList = ({
);
};
+ const displayCount = count => {
+ return Intl.NumberFormat('en-GB', {
+ notation: 'compact',
+ maximumFractionDigits: 0,
+ }).format(count);
+ };
+
const itemCount = () => {
if (!isAuthenticated) return;
@@ -358,13 +362,7 @@ const ChannelsList = ({
src="/favicon/favicon-16x16.png"
style={{opacity: '0.5', display: 'inline-block', filter: 'grayscale(1.0)'}}
/>
- <span>
- {channel.relationships?.notifications?.count
- ? channel.relationships.notifications.count > 999
- ? '+999'
- : channel.relationships.notifications.count
- : 0}
- </span>
+ <span>{displayCount(channel.relationships?.notifications?.count)}</span>
</>
);
};
@@ -423,7 +421,9 @@ const ChannelsList = ({
{itemCount()}
{channel.sendPrivate && <span> · </span>}
{channelCanSendPrivate()}
+ {channel?.channelFlags.includes(channelFlagTypes.MANDATORY) && <span> · </span>}
{channelIsMandatory()}
+ {channel?.channelFlags.includes(channelFlagTypes.CRITICAL) && <span> · </span>}
{channelIsCritical()}
{channel.tags && channel.tags.length > 0 && <span> · </span>}
{channelTags()}
diff --git a/src/channels/components/ChannelsList/ChannelsList.scss b/src/channels/components/ChannelsList/ChannelsList.scss
index 0631e39a4397efe68d120cf9046d7e9701c44dad..615df4319196c5d57ec7b842307c929e63c19cf6 100644
--- a/src/channels/components/ChannelsList/ChannelsList.scss
+++ b/src/channels/components/ChannelsList/ChannelsList.scss
@@ -7,3 +7,11 @@
overflow: visible;
}
}
+
+.ui.list {
+ &--flex {
+ color: grey;
+ display: flex;
+ flex-direction: column;
+ }
+}
diff --git a/src/notifications/pages/NotificationsPage/NotificationsPage.js b/src/notifications/pages/NotificationsPage/NotificationsPage.js
index c20e75429a4d74ac1c2a98139917fce7f27f09b2..f0696f877553c1a865a37e99bd91f050821f3edc 100644
--- a/src/notifications/pages/NotificationsPage/NotificationsPage.js
+++ b/src/notifications/pages/NotificationsPage/NotificationsPage.js
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import { useParams, useLocation } from 'react-router-dom';
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import {useParams, useLocation} from 'react-router-dom';
import {
Divider,
Header,
@@ -14,18 +14,18 @@ import {
Container,
Dropdown,
} from 'semantic-ui-react';
-import { Helmet } from 'react-helmet';
+import {Helmet} from 'react-helmet';
import * as preferencesActions from 'preferences/actions/preferences';
import PreferencesList from 'preferences/components/PreferencesList';
import NotificationsList from 'notifications/components/NotificationsList/NotificationsList';
import SearchNotificationComponent from 'notifications/components/SearchNotificationComponent/SearchNotificationComponent';
import SendNotificationComponent from 'notifications/components/SendNotificationComponent/SendNotificationComponent';
-import { getChannelById } from 'channels/actions/GetChannelById';
-import { getPublicChannelById } from 'channels/actions/GetPublicChannelById';
+import {getChannelById} from 'channels/actions/GetChannelById';
+import {getPublicChannelById} from 'channels/actions/GetPublicChannelById';
import ErrorComponent from 'utils/error-component';
import './NotificationsPage.scss';
-import { channelFlagTypes } from 'common/types/ChannelFlagTypes';
+import {channelFlagTypes} from 'common/types/ChannelFlagTypes';
const NotificationsPage = ({
isAuthenticated,
@@ -38,7 +38,7 @@ const NotificationsPage = ({
getPublicChannel,
error,
}) => {
- const { channelId } = useParams();
+ const {channelId} = useParams();
const location = useLocation();
const [activeItem, setActiveItem] = useState('Notifications');
@@ -53,7 +53,7 @@ const NotificationsPage = ({
location.section = null;
}
- const handleItemClick = (e, { name }) => setActiveItem(name);
+ const handleItemClick = (e, {name}) => setActiveItem(name);
const TITLE = `${process.env.REACT_APP_NAME} |`;
useEffect(() => {
@@ -73,7 +73,7 @@ const NotificationsPage = ({
return (
channel.tags &&
channel.tags.length > 0 && (
- <Label.Group tag style={{ display: 'inline-block' }}>
+ <Label.Group tag style={{display: 'inline-block'}}>
{channel.tags.map(data => (
<Label key={data.id} content={data.name} />
))}
@@ -87,14 +87,8 @@ const NotificationsPage = ({
isAuthenticated &&
channel.sendPrivate && (
<Popup
- style={{ marginLeft: 5 }}
- trigger={
- <Label
- content="Direct notifications"
- icon="inbox"
- style={{ color: '#aaa', backgroundColor: '#eee' }}
- />
- }
+ style={{marginLeft: 5}}
+ trigger={<Label className="label--info" content="Direct notifications" icon="inbox" />}
content="This channel can send you direct notifications."
/>
)
@@ -107,14 +101,8 @@ const NotificationsPage = ({
channel.channelFlags &&
channel.channelFlags.includes(channelFlagTypes.MANDATORY) && (
<Popup
- style={{ marginLeft: 5 }}
- trigger={
- <Label
- content="Mandatory"
- icon="shield"
- style={{ color: '#aaa', backgroundColor: '#eee' }}
- />
- }
+ style={{marginLeft: 5}}
+ trigger={<Label className="label--info" content="Mandatory" icon="shield" />}
content="This channel is mandatory. Unsubscribe is not possible, it can however be muted if needed."
/>
)
@@ -127,14 +115,8 @@ const NotificationsPage = ({
channel.channelFlags &&
channel.channelFlags.includes(channelFlagTypes.CRITICAL) && (
<Popup
- style={{ marginLeft: 5 }}
- trigger={
- <Label
- content="Critical"
- icon="exclamation"
- style={{ color: '#aaa', backgroundColor: '#eee' }}
- />
- }
+ style={{marginLeft: 5}}
+ trigger={<Label className="label--info" content="Critical" icon="exclamation" />}
content="This channel can send critical (emergency) notifications on all your devices."
/>
)
@@ -224,8 +206,8 @@ const NotificationsPage = ({
</Helmet>
)}
- <Header as="h2" style={{ marginTop: '0' }}>
- <div style={{ float: 'right' }}>{reportChannel()}</div>
+ <Header as="h2" style={{marginTop: '0'}}>
+ <div style={{float: 'right'}}>{reportChannel()}</div>
<Icon name={headerIcon()} />
{channelHeader()}
</Header>
diff --git a/src/notifications/pages/NotificationsPage/NotificationsPage.scss b/src/notifications/pages/NotificationsPage/NotificationsPage.scss
index df87484e505731ea212b79379fce897c1935a59f..c750b06671692b25f1edad4480a049137baa58f7 100644
--- a/src/notifications/pages/NotificationsPage/NotificationsPage.scss
+++ b/src/notifications/pages/NotificationsPage/NotificationsPage.scss
@@ -15,3 +15,10 @@
margin: 1em 0.8em;
}
}
+
+.ui.label {
+ &--info {
+ color: #276f86;
+ background-color: #e0f0f3;
+ }
+}