From ea63864b33c9253b266453f8f73898d1e7ce4c17 Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Tue, 12 Dec 2017 17:05:08 +0100 Subject: [PATCH 1/3] Add icons for different notification types in recent notification dropdown [SCI-1865] --- .../components/NotificationImage.jsx | 51 +++++++++++++++--- .../components/NotificationItem.jsx | 54 ++++++++++++++++++- app/javascript/src/config/constants/colors.js | 1 + .../notifications/index.json.jbuilder | 3 ++ 4 files changed, 101 insertions(+), 8 deletions(-) diff --git a/app/javascript/src/components/Navigation/components/NotificationImage.jsx b/app/javascript/src/components/Navigation/components/NotificationImage.jsx index 1d9227cb8..051ec20a9 100644 --- a/app/javascript/src/components/Navigation/components/NotificationImage.jsx +++ b/app/javascript/src/components/Navigation/components/NotificationImage.jsx @@ -1,8 +1,47 @@ import React from "react"; +import { Image } from "react-bootstrap"; +import PropTypes from "prop-types"; -export default () => -
- - - -
; +const NotificationImage = ({className, type, avatar}) => { + const delegator = { + recent_changes: ( + + ), + system_message: ( + + + + ), + deliver: ( + + + + ), + assignment: ( + + + + ) + } + return ( +
+ {delegator[type]} +
+ ); +}; + +NotificationImage.defaultProps = { + avatar: '' +}; + +NotificationImage.propTypes = { + className: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + avatar: PropTypes.string +}; + +export default NotificationImage; diff --git a/app/javascript/src/components/Navigation/components/NotificationItem.jsx b/app/javascript/src/components/Navigation/components/NotificationItem.jsx index c77c65a17..ead90128a 100644 --- a/app/javascript/src/components/Navigation/components/NotificationItem.jsx +++ b/app/javascript/src/components/Navigation/components/NotificationItem.jsx @@ -6,6 +6,12 @@ import styled from "styled-components"; import CustomNavItem from "./CustomNavItem"; import NotificationImage from "./NotificationImage"; +import { + MAIN_COLOR_BLUE, + COLOR_ORANGE, + ICON_GREEN_COLOR, + WILD_SAND_COLOR +} from "../../../config/constants/colors"; const StyledListItem = styled(CustomNavItem)` border-bottom: 1px solid #d2d2d2; @@ -13,14 +19,58 @@ const StyledListItem = styled(CustomNavItem)` padding-top: 10px; `; +const StyledNotificationImage = styled(NotificationImage)` + margin-left: 12px; + + .avatar { + top: 0px; + margin-top: 5px; + height: 45px; + width: 45px; + } + + .assignment { + background-color: ${MAIN_COLOR_BLUE}; + border-radius: 50%; + color: ${WILD_SAND_COLOR}; + display: block; + font-size: 23px; + height: 45px; + padding-top: 5px; + width: 45px; + } + + .deliver { + background-color: ${COLOR_ORANGE}; + border-radius: 50%; + color: ${WILD_SAND_COLOR}; + display: block; + font-size: 23px; + height: 45px; + padding-top: 5px; + width: 45px; + } + + .system-message { + background-color: ${ICON_GREEN_COLOR}; + border-radius: 50%; + color: ${WILD_SAND_COLOR}; + display: block; + font-size: 23px; + height: 45px; + padding-top: 8px; + width: 45px; + } +`; + const NotificationItem = ({ notification }) => { - const { title, message, created_at, type_of } = notification; + const { title, message, created_at, type_of, avatarThumb } = notification; return ( - + diff --git a/app/javascript/src/config/constants/colors.js b/app/javascript/src/config/constants/colors.js index 15e7f0471..63ea391e7 100644 --- a/app/javascript/src/config/constants/colors.js +++ b/app/javascript/src/config/constants/colors.js @@ -19,3 +19,4 @@ export const COLOR_ALTO = "#dddddd"; export const COLOR_GRAY = "#909088"; export const COLOR_ALABASTER = "#fcfcfc"; export const COLOR_APPLE_BLOSSOM = "#a94442"; +export const COLOR_ORANGE = "#ff900b"; diff --git a/app/views/client_api/notifications/index.json.jbuilder b/app/views/client_api/notifications/index.json.jbuilder index 59551b386..2a8777d23 100644 --- a/app/views/client_api/notifications/index.json.jbuilder +++ b/app/views/client_api/notifications/index.json.jbuilder @@ -4,4 +4,7 @@ json.array! notifications do |notification| json.message notification.message json.type_of notification.type_of json.created_at notification.created_at + if notification.type_of == 'recent_changes' + json.avatarThumb avatar_path(notification.generator_user, :icon_small) + end end From 6986d11cfe4e3f947d43c162624a04c85e48f55e Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Wed, 13 Dec 2017 17:23:22 +0100 Subject: [PATCH 2/3] Add Flow types for notifications [SCI-1865] --- .../components/NotificationImage.jsx | 17 +++++------ .../components/NotificationItem.jsx | 28 ++++++++----------- .../notifications/index.json.jbuilder | 4 +-- flow-typed/types.js | 9 ++++++ package.json | 3 +- 5 files changed, 34 insertions(+), 27 deletions(-) diff --git a/app/javascript/src/components/Navigation/components/NotificationImage.jsx b/app/javascript/src/components/Navigation/components/NotificationImage.jsx index 051ec20a9..9bea14c4e 100644 --- a/app/javascript/src/components/Navigation/components/NotificationImage.jsx +++ b/app/javascript/src/components/Navigation/components/NotificationImage.jsx @@ -1,8 +1,15 @@ +// @flow + import React from "react"; import { Image } from "react-bootstrap"; -import PropTypes from "prop-types"; -const NotificationImage = ({className, type, avatar}) => { +type Props = { + className: string, + type: string, + avatar: string +}; + +const NotificationImage = ({className, type, avatar}: Props) => { const delegator = { recent_changes: ( { - const { title, message, created_at, type_of, avatarThumb } = notification; +type Props = { + notification: Notification, +}; + +const NotificationItem = ({ notification }: Props) => { + const { title, message, createdAt, typeOf, avatarThumb } = notification; return ( - +
{ ); }; -NotificationItem.propTypes = { - notification: PropTypes.shape({ - id: PropTypes.number.isRequired, - title: PropTypes.string.isRequired, - message: PropTypes.string.isRequired, - type_of: PropTypes.string.isRequired, - created_at: PropTypes.string.isRequired - }).isRequired -}; - export default NotificationItem; diff --git a/app/views/client_api/notifications/index.json.jbuilder b/app/views/client_api/notifications/index.json.jbuilder index 2a8777d23..189d0db55 100644 --- a/app/views/client_api/notifications/index.json.jbuilder +++ b/app/views/client_api/notifications/index.json.jbuilder @@ -2,8 +2,8 @@ json.array! notifications do |notification| json.id notification.id json.title notification.title json.message notification.message - json.type_of notification.type_of - json.created_at notification.created_at + json.typeOf notification.type_of + json.createdAt notification.created_at if notification.type_of == 'recent_changes' json.avatarThumb avatar_path(notification.generator_user, :icon_small) end diff --git a/flow-typed/types.js b/flow-typed/types.js index d3e6a16ce..0552b25f3 100644 --- a/flow-typed/types.js +++ b/flow-typed/types.js @@ -36,6 +36,15 @@ export type Activity = { created_at: string }; +export type Notification = { + id: number, + title: string, + message: string, + typeOf: string, + createdAt: string, + avatarThumb: ?string +}; + export type State = { current_team: Teams$Team, all_teams: Array, diff --git a/package.json b/package.json index 421ca21ce..fc71d6017 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ ".eslintrc.json" ], "scripts": { + "flow": "flow", "lint": "eslint ." }, "devDependencies": { @@ -96,4 +97,4 @@ "webpack-manifest-plugin": "^1.1.2", "webpack-merge": "^4.1.0" } -} \ No newline at end of file +} From 7bdc22ee80b468ed707275cb5c505db26ead3f80 Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Wed, 13 Dec 2017 17:28:05 +0100 Subject: [PATCH 3/3] Remove default property [SCI-1865] --- .../components/Navigation/components/NotificationImage.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/javascript/src/components/Navigation/components/NotificationImage.jsx b/app/javascript/src/components/Navigation/components/NotificationImage.jsx index 9bea14c4e..f6975e3c9 100644 --- a/app/javascript/src/components/Navigation/components/NotificationImage.jsx +++ b/app/javascript/src/components/Navigation/components/NotificationImage.jsx @@ -41,8 +41,4 @@ const NotificationImage = ({className, type, avatar}: Props) => { ); }; -NotificationImage.defaultProps = { - avatar: '' -}; - export default NotificationImage;