Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DDW-316] Extend incident and alert newsfeed type #2099

Merged
merged 6 commits into from
Jul 27, 2020
Merged

[DDW-316] Extend incident and alert newsfeed type #2099

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1fdf5f7
[DDW-316] Extend INCIDENT newsfeed type
Jul 27, 2020
9998f75
[DDW-316] Extend ALERTS newsfeed type with repeatOnStartup param
Jul 27, 2020
10ca4c7
Merge branch 'develop' into chore/ddw-316-extend-incident-and-alert-n…
Jul 27, 2020
d08abcc
[DDW-316] CHANGELOG update
Jul 27, 2020
d9c9aaa
[DDW-316] Small logic improvement
Jul 27, 2020
1200b6f
[DDW-316] Logic improvement / guard
Jul 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions source/renderer/app/components/news/IncidentOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
import React, { Component } from 'react';
import moment from 'moment';
import { observer } from 'mobx-react';
import { get } from 'lodash';
import { get, camelCase } from 'lodash';
import ReactMarkdown from 'react-markdown';
import classnames from 'classnames';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import News from '../../domains/News';
import ButtonLink from '../widgets/ButtonLink';
Expand Down Expand Up @@ -59,8 +60,12 @@ export default class IncidentOverlay extends Component<Props> {
render() {
const { incident, currentDateFormat } = this.props;
const { content, date, action, title } = incident;
const componentClasses = classnames([
styles.component,
styles[camelCase(incident.color)],
]);
return (
<div className={styles.component}>
<div className={componentClasses}>
<h1 className={styles.title}>{title}</h1>
<span className={styles.date}>
{moment(date).format(currentDateFormat)}
Expand Down
221 changes: 220 additions & 1 deletion source/renderer/app/components/news/IncidentOverlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@
max-height: 464px;
max-width: 600px;
min-width: 600px;
opacity: 0.8;
overflow-y: scroll;
padding: 12px 20px;
word-break: break-word;
Expand Down Expand Up @@ -129,6 +128,226 @@
}
}

&.red {
background-color: var(
--theme-news-feed-incident-red-overlay-background-color
);
color: var(--theme-news-feed-incident-red-overlay-text-color);
.actionBtn {
border: 1px solid var(--theme-news-feed-incident-red-overlay-button-color);
&:hover {
background-color: var(
--theme-news-feed-incident-red-overlay-button-color
);
color: var(--theme-news-feed-incident-red-overlay-background-color);
svg {
g {
path {
stroke: var(
--theme-news-feed-incident-red-overlay-background-color
);
}
}
}
}
.externalLink {
color: var(--theme-news-feed-incident-red-overlay-button-color);
&:after {
background-color: var(
--theme-news-feed-incident-red-overlay-button-color
);
}
}

&:hover {
background-color: var(
--theme-news-feed-incident-red-overlay-button-color
);
.externalLink {
color: var(--theme-news-feed-incident-red-overlay-background-color);
&:after {
background-color: var(
--theme-news-feed-incident-red-overlay-background-color
);
}
}
}
}
.content {
&::-webkit-scrollbar-thumb {
background-color: var(
--theme-news-feed-incident-red-overlay-scrollbar-thumb-background
);

&:hover {
background-color: var(
--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hover
);
}
}
p,
li {
color: var(--theme-news-feed-incident-red-overlay-content-list-color);
strong {
color: var(--theme-news-feed-incident-red-overlay-text-color);
}
}

a {
border-bottom: 1px solid
var(--theme-news-feed-incident-red-overlay-text-color);
color: var(--theme-news-feed-incident-red-overlay-text-color);
}
}
}

&.grey {
background-color: var(
--theme-news-feed-incident-grey-overlay-background-color
);
color: var(--theme-news-feed-incident-grey-overlay-text-color);
.actionBtn {
border: 1px solid
var(--theme-news-feed-incident-grey-overlay-button-color);
&:hover {
background-color: var(
--theme-news-feed-incident-grey-overlay-button-color
);
color: var(--theme-news-feed-incident-grey-overlay-background-color);
svg {
g {
path {
stroke: var(
--theme-news-feed-incident-grey-overlay-background-color
);
}
}
}
}
.externalLink {
color: var(--theme-news-feed-incident-grey-overlay-button-color);
&:after {
background-color: var(
--theme-news-feed-incident-grey-overlay-button-color
);
}
}

&:hover {
background-color: var(
--theme-news-feed-incident-grey-overlay-button-color
);
.externalLink {
color: var(--theme-news-feed-incident-grey-overlay-background-color);
&:after {
background-color: var(
--theme-news-feed-incident-grey-overlay-background-color
);
}
}
}
}
.content {
&::-webkit-scrollbar-thumb {
background-color: var(
--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background
);

&:hover {
background-color: var(
--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hover
);
}
}
p,
li {
color: var(--theme-news-feed-incident-grey-overlay-content-list-color);
strong {
color: var(--theme-news-feed-incident-grey-overlay-text-color);
}
}

a {
border-bottom: 1px solid
var(--theme-news-feed-incident-grey-overlay-text-color);
color: var(--theme-news-feed-incident-grey-overlay-text-color);
}
}
}

&.themeDefault {
background-color: var(--theme-news-feed-incident-overlay-background-color);
color: var(--theme-news-feed-incident-overlay-text-color);
.actionBtn {
background-color: var(
--theme-news-feed-incident-overlay-button-background
);
border: 1px solid var(--theme-news-feed-incident-overlay-button-color);
&:hover {
background-color: var(--theme-news-feed-incident-overlay-button-color);
color: var(--theme-news-feed-incident-overlay-button-color-hover);
svg {
g {
path {
stroke: var(
--theme-news-feed-incident-overlay-button-color-hover
);
}
}
}
}
.externalLink {
color: var(--theme-news-feed-incident-overlay-button-color);
&:after {
background-color: var(
--theme-news-feed-incident-overlay-button-color
);
}
}

&:hover {
background-color: var(--theme-news-feed-incident-overlay-button-color);
.externalLink {
color: var(--theme-news-feed-incident-overlay-button-color-hover);
&:after {
background-color: var(
--theme-news-feed-incident-overlay-button-color-hover
);
}
}
}
}
.content {
background-color: var(
--theme-news-feed-incident-overlay-content-background
);
&::-webkit-scrollbar-thumb {
background-color: var(
--theme-news-feed-incident-overlay-scrollbar-thumb-background
);

&:hover {
background-color: var(
--theme-news-feed-incident-overlay-scrollbar-thumb-background-hover
);
}
}
p,
li {
color: var(--theme-news-feed-incident-overlay-content-list-color);
strong {
color: var(--theme-news-feed-incident-overlay-text-color);
}
}

a {
border-bottom: 1px solid
var(--theme-news-feed-incident-overlay-text-color);
color: var(--theme-news-feed-incident-overlay-text-color);
}
}
}

.date {
font-family: var(--font-medium);
font-size: 14px;
Expand Down
16 changes: 16 additions & 0 deletions source/renderer/app/domains/News.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export type NewsAction = {
event?: string,
};

export type IncidentColor = 'red' | 'theme-default' | 'grey';

export const NewsTypes: {
INCIDENT: NewsType,
ALERT: NewsType,
Expand All @@ -23,6 +25,16 @@ export const NewsTypes: {
INFO: 'info',
};

export const IncidentColors: {
RED: IncidentColor,
THEME_DEFAULT: IncidentColor,
GREY: IncidentColor,
} = {
RED: 'red',
THEME_DEFAULT: 'theme-default',
GREY: 'grey',
};

export type NewsTypesStateType = {
all: Array<News>,
unread: Array<News>,
Expand All @@ -40,6 +52,8 @@ class News {
@observable date: number;
@observable type: NewsType;
@observable read: boolean;
@observable color: ?IncidentColor;
@observable repeatOnStartup: ?boolean;

constructor(data: {
id: number,
Expand All @@ -50,6 +64,8 @@ class News {
date: number,
type: NewsType,
read: boolean,
color?: ?IncidentColor,
repeatOnStartup?: ?boolean,
}) {
Object.assign(this, data);
}
Expand Down
20 changes: 18 additions & 2 deletions source/renderer/app/stores/NewsFeedStore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
NEWS_POLL_INTERVAL_ON_ERROR,
NEWS_POLL_INTERVAL_ON_INCIDENT,
} from '../config/timingConfig';
import News, { NewsTypes } from '../domains/News';
import News, { NewsTypes, IncidentColors } from '../domains/News';
import type {
GetNewsResponse,
GetReadNewsResponse,
Expand Down Expand Up @@ -218,7 +218,7 @@ export default class NewsFeedStore extends Store {
news = map(this.rawNews, item => {
// Match old and new newsfeed JSON format
const mainIdentificator = item.id || item.date;
return {
let newsfeedItem = {
...item,
id: mainIdentificator,
title: item.title[currentLocale],
Expand All @@ -232,6 +232,22 @@ export default class NewsFeedStore extends Store {
date: get(item, ['publishedAt', currentLocale], item.date),
read: readNews.includes(mainIdentificator),
};
// Exclude "color" parameter from news that are not incidents
if (item.type === NewsTypes.INCIDENT) {
newsfeedItem = {
...newsfeedItem,
color: get(item, 'color', IncidentColors.RED),
};
}

// Exclude "repeatOnStartup" parameter from news that are not alerts
if (item.type === NewsTypes.ALERT) {
newsfeedItem = {
...newsfeedItem,
repeatOnStartup: get(item, 'repeatOnStartup', false),
};
}
return newsfeedItem;
});
}
return new News.NewsCollection(news);
Expand Down
36 changes: 36 additions & 0 deletions source/renderer/app/themes/daedalus/cardano.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,42 @@ export const CARDANO_THEME_OUTPUT = {
'--theme-news-feed-icon-toggle-hover-background-color':
'rgba(0, 0, 0, 0.1)',
'--theme-news-feed-no-fetch-color': '#ffffff',
'--theme-news-feed-incident-overlay-background-color':
'rgba(32, 34, 37, 0.98)',
'--theme-news-feed-incident-overlay-text-color': '#ffffff',
'--theme-news-feed-incident-overlay-button-color': '#ffffff',
'--theme-news-feed-incident-overlay-scrollbar-thumb-background':
'rgba(255, 255, 255, 0.3)',
'--theme-news-feed-incident-overlay-scrollbar-thumb-background-hove':
'rgba(255, 255, 255, 0.5)',
'--theme-news-feed-incident-overlay-content-list-color':
'rgba(255, 255, 255, 0.7)',
'--theme-news-feed-incident-overlay-content-background':
'rgba(0, 0, 0, 0.1)',
'--theme-news-feed-incident-overlay-button-background':
'rgba(0, 0, 0, 0.1)',
'--theme-news-feed-incident-overlay-button-color-hover':
'rgba(32, 34, 37, 0.98)',
'--theme-news-feed-incident-grey-overlay-background-color':
'rgba(68, 68, 68, 0.98)',
'--theme-news-feed-incident-grey-overlay-text-color': '#ffffff',
'--theme-news-feed-incident-grey-overlay-button-color': '#ffffff',
'--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background':
'rgba(255, 255, 255, 0.3)',
'--theme-news-feed-incident-grey-overlay-scrollbar-thumb-background-hove':
'rgba(255, 255, 255, 0.5)',
'--theme-news-feed-incident-grey-overlay-content-list-color':
'rgba(255, 255, 255, 0.7)',
'--theme-news-feed-incident-red-overlay-background-color':
'rgba(171, 23, 0, 0.98)',
'--theme-news-feed-incident-red-overlay-text-color': '#ffffff',
'--theme-news-feed-incident-red-overlay-button-color': '#ffffff',
'--theme-news-feed-incident-red-overlay-scrollbar-thumb-background':
'rgba(255, 255, 255, 0.3)',
'--theme-news-feed-incident-red-overlay-scrollbar-thumb-background-hove':
'rgba(255, 255, 255, 0.5)',
'--theme-news-feed-incident-red-overlay-content-list-color':
'rgba(255, 255, 255, 0.7)',
},
newsItem: {
'--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)',
Expand Down
Loading