Merge pull request #905 from okriuchykhin/ok_SCI_1865

Add icons for different notification types in recent notification dropdown [SCI-1865]

app/javascript/src/components/Navigation/components/NotificationImage.jsx

@@ -1,8 +1,44 @@
-import React from "react";
+// @flow
 
-export default () =>
-  <div className="text-center">
-    <span className="assignment">
-      <i className="fa fa-newspaper-o" />
-    </span>
-  </div>;
+import React from "react";
+import { Image } from "react-bootstrap";
+
+type Props = {
+  className: string,
+  type: string,
+  avatar: string
+};
+
+const NotificationImage = ({className, type, avatar}: Props) => {
+  const delegator = {
+      recent_changes: (
+          <Image
+              className="avatar"
+              src={`${avatar }?${new Date().getTime()}`}
+              circle
+          />
+      ),
+      system_message: (
+          <span className="system-message">
+              <i className="glyphicon glyphicon-tower" />
+          </span>
+      ),
+      deliver: (
+          <span className="deliver">
+              <i className="fa fa-truck" />
+          </span>
+      ),
+      assignment: (
+          <span className="assignment">
+              <i className="fa fa-newspaper-o" />
+          </span>
+      )
+  }
+  return (
+    <div className={`text-center ${className}`} >
+      {delegator[type]}
+    </div>
+  );
+};
+
+export default NotificationImage;

app/javascript/src/components/Navigation/components/NotificationItem.jsx

@@ -1,33 +1,89 @@
+// @flow
+
 import React from "react";
-import PropTypes from "prop-types";
 import { Col, Row } from "react-bootstrap";
 import { FormattedTime } from "react-intl";
 import styled from "styled-components";
 
 import CustomNavItem from "./CustomNavItem";
 import NotificationImage from "./NotificationImage";
+import {
+  MAIN_COLOR_BLUE,
+  BORDER_GRAY_COLOR,
+  COLOR_ORANGE,
+  ICON_GREEN_COLOR,
+  WILD_SAND_COLOR
+} from "../../../config/constants/colors";
 
 const StyledListItem = styled(CustomNavItem)`
-  border-bottom: 1px solid #d2d2d2;
+  border-bottom: 1px solid ${BORDER_GRAY_COLOR};
   padding-bottom: 10px;
   padding-top: 10px;
 `;
 
-const NotificationItem = ({ notification }) => {
-  const { title, message, created_at, type_of } = notification;
+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;
+  }
+`;
+
+type Props = {
+  notification: Notification,
+};
+
+const NotificationItem = ({ notification }: Props) => {
+  const { title, message, createdAt, typeOf, avatarThumb } = notification;
 
   return (
     <StyledListItem>
       <Row>
         <Col xs={2}>
-          <NotificationImage type={type_of} />
+          <StyledNotificationImage type={typeOf} avatar={avatarThumb} />
         </Col>
 
         <Col xs={10}>
           <strong dangerouslySetInnerHTML={{ __html: title }} />
           <br />
           <FormattedTime
-            value={created_at}
+            value={createdAt}
             day="numeric"
             month="numeric"
             year="numeric"
@@ -40,14 +96,4 @@ const NotificationItem = ({ notification }) => {
   );
 };
 
-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;

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";

app/views/client_api/notifications/index.json.jbuilder

@@ -2,6 +2,9 @@ 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
 end

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<Teams$Team>,

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"
   }
-}
+}