feat(notification): some style fixes. some small code refactors.

Tripwire · Oct 12, 2018 · 7545d2e · 7545d2e
1 parent 94ca7e0
commit 7545d2e
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 57 deletions.
diff --git a/src/components/Notification/Notification.examples.md b/src/components/Notification/Notification.examples.md
@@ -55,14 +55,14 @@ let notifications = [
 ];
 
 initialState = {
-  detail: undefined,
+  selectedNotification: undefined,
   notifications: notifications
 };
 
 <div>
   <Notification
     notifications={state.notifications}
-    detail={state.detail}
+    selectedNotification={state.selectedNotification}
     onNotificationClicked={notification => {
         if (notification) {
             console.log('clicked: '+notification)
@@ -77,12 +77,14 @@ initialState = {
             }
             notifications[notificationIdx].isMsgRead = true
         }
-        setState({ detail: notification, notifications: notifications})
+        console.log('update notifs')
+        console.log(notifications)
+        setState({ selectedNotification: notification, notifications: notifications})
       }
     }
     onClearAll={() => {
         console.log('Clear All')
-        setState({ detail: undefined, notifications: []})
+        setState({ selectedNotification: undefined, notifications: []})
       }
     }
     onClearNotification={notification => {
@@ -96,7 +98,7 @@ initialState = {
             }
         }
         delete notifications[notificationIdx]
-        setState({ detail: undefined, notifications: notifications})
+        setState({ selectedNotification: undefined, notifications: notifications})
       }
     }
   />

diff --git a/src/components/Notification/Notification.jsx b/src/components/Notification/Notification.jsx
@@ -15,6 +15,7 @@ const Notification = props => {
     onNotificationClicked,
     onClearNotification,
     onClearAll,
+    selectedNotification,
     ...rest
   } = props
 
@@ -30,19 +31,21 @@ const Notification = props => {
   const tray = (
     <Notification.Tray key={'tray'}>
       <Notification.Header
-        title={'Notification'}
-        detail={props.detail}
+        title={'NOTIFICATIONS'}
+        selectedNotification={selectedNotification}
         notificationCount={notificationCount}
         onNotificationClicked={onNotificationClicked}
       />
       <Notification.Body
-        detail={props.detail}
+        selectedNotification={selectedNotification}
         notifications={notifications}
         removeItem={3}
         onNotificationClicked={onNotificationClicked}
         onClearNotification={onClearNotification}
       />
-      {props.detail ? null : <Notification.Footer onClearAll={onClearAll} />}
+      {selectedNotification ? null : (
+        <Notification.Footer onClearAll={onClearAll} />
+      )}
     </Notification.Tray>
   )
 

diff --git a/src/components/Notification/NotificationBody.jsx b/src/components/Notification/NotificationBody.jsx
@@ -24,8 +24,8 @@ const NotificationBody = props => {
     }
   }
   function getNotificationContent () {
-    if (props.detail) {
-      return getNotification(props.detail, 'detailedNotification')
+    if (props.selectedNotification) {
+      return getNotification(props.selectedNotification, 'detailedNotification')
     }
     if (notificationsLength > 0) {
       return notifications.map(notification => {

diff --git a/src/components/Notification/NotificationDetail.jsx b/src/components/Notification/NotificationDetail.jsx
@@ -5,8 +5,14 @@ import { getAlertIconClassName } from '../../util/getAlertIconClassName'
 
 const NotificationDetail = props => {
   const { notification, onClearNotification, ...rest } = props
-  const { id, type, title, description, timeStamp } = notification
+  const { id, type, title, description, timeStamp, isMsgRead } = notification
   const icon = getAlertIconClassName(type)
+  const isReadStyle = isMsgRead ? 'normal' : 'bold'
+
+  function handleClearClicked (e, notification) {
+    onClearNotification(notification)
+    e.stopPropagation()
+  }
 
   return (
     <Flexbox
@@ -19,7 +25,12 @@ const NotificationDetail = props => {
       <Flexbox title={title}>
         <Icon className={`notificationIcon ${type} ${icon}`} />
         <Flexbox flexDirection='column' className={`notificationContent`}>
-          <div className='notificationTitle'>{title}</div>
+          <div
+            className='notificationTitle'
+            style={{ fontWeight: isReadStyle }}
+          >
+            {title}
+          </div>
           <div className='notificationTime'>{timeStamp}</div>
           <div className='notificationDesc '>{description}</div>
           <div className='notificationActions'>

diff --git a/src/components/Notification/NotificationFooter.jsx b/src/components/Notification/NotificationFooter.jsx
@@ -7,7 +7,7 @@ const NotificationFooter = props => {
   }
   return (
     <div className={'notificationFooter clearfix'} {...rest}>
-      <div onClick={() => handleClearAllClicked()}>Clear All</div>
+      <a onClick={() => handleClearAllClicked()}>Clear All</a>
     </div>
   )
 }

diff --git a/src/components/Notification/NotificationHeader.jsx b/src/components/Notification/NotificationHeader.jsx
@@ -5,7 +5,7 @@ const NotificationHeader = props => {
   const {
     title,
     notificationCount,
-    detail,
+    selectedNotification,
     children,
     onNotificationClicked,
     ...rest
@@ -33,7 +33,7 @@ const NotificationHeader = props => {
     </div>
   )
 
-  return detail ? detailView : listView
+  return selectedNotification ? detailView : listView
 }
 
 NotificationHeader.defaultProps = {}

diff --git a/src/components/Notification/NotificationMessage.jsx b/src/components/Notification/NotificationMessage.jsx
@@ -14,7 +14,7 @@ const NotificationMessage = props => {
   const { id, type, title, description, timeStamp, isMsgRead } = notification
   const icon = getAlertIconClassName(type)
   const isReadStyle = isMsgRead ? 'normal' : 'bold'
-  console.log('isRead: ' + isMsgRead)
+  console.log('isRead: !' + isMsgRead)
 
   function handleNotificationClicked (notification) {
     onNotificationClicked(notification)
@@ -35,7 +35,7 @@ const NotificationMessage = props => {
       {...rest}
     >
       <Flexbox title={title}>
-        <Icon className={`ei text-large notificationIcon ${type} ${icon}`} />
+        <Icon className={`text-large notificationIcon ${type} ${icon}`} />
         <Flexbox flexDirection='column' className={`notificationContent`}>
           <div
             className='notificationTitle'

diff --git a/src/styles/components/notification.css b/src/styles/components/notification.css
@@ -1,9 +1,11 @@
 @import '../variables.css';
 
 .notificationIcon{
-  position:relative;
-  & i.icon{
-    font-size: 32px;
+  position: relative;
+  vertical-align: top;
+  display: inline-block;
+  cursor: pointer;
+  & i.icon{ 
     &.tiny{
       font-size: 16px;
     };
@@ -16,44 +18,33 @@
     &.big{
       font-size: 64px;
     };
+    margin-right: 0;
   };
   & .notificationCount {
+    display: inline-block;
+    margin-left: -4px;
+    margin-top: -6px;
+    vertical-align: top;
     border-radius: 9px;
+    height: 18px;
+    min-width: 18px;
+    width: auto;
+    text-align: center;
     background: var(--warningred);
     color:var(--white);
-    padding: 5px;
     &.tiny{
-      padding: 0px 4px;
-      position: absolute;
-      top: -13px;
-      left: 10px;
       font-size: var(--xsmall);
     };
     &.small{
-      padding: 0px 4px;
-      position: absolute;
-      top: -13px;
-      left: 16px;
       font-size: var(--xsmall);
     };
-    &.large{
-      padding: 1px 5px;
-      position: absolute;
-      top: -20px;
-      left: 35px;
-    }
-    &.big{
-      padding: 2px 6px;
-      position: absolute;
-      top: -25px;
-      left: 45px;
-    }
   }
 };
 .ui.popup{
   &.notificationPopup {
      padding:0px;
      margin:0px;
+     width: 500px;
     & .clearfix:after {
       visibility: hidden;
       display: block;
@@ -70,14 +61,16 @@
         font-weight: bold;
       }
       & .notificationCount{
-        background: var(--warningred);
-        color:var(--white);
-        border-radius: 25px;
-        padding: 5px;
-        min-width: 25px;
         display: inline-block;
-        height: 25px;
+        vertical-align: top;
+        border-radius: 12px;
+        height: 24px;
+        min-width: 24px;
+        line-height: 24px;
+        width: auto;
         text-align: center;
+        background: var(--warningred);
+        color:var(--white);
         margin-left: 10px;
       }
       &.detailView{
@@ -99,6 +92,7 @@
     }
     & .notificationBody{
       height: 500px;
+      width: 500px;
       overflow-y: auto;
       & .singleNotification{
         cursor: pointer;
@@ -110,7 +104,7 @@
           background: var(--activeBlue);
         }
         & .notificationContent{
-          width:250px;
+          width:350px;
           & .notificationTitle{
             margin-bottom: 7px;
             height: 17px;
@@ -120,7 +114,6 @@
             margin-bottom: 7px;
             display: block;
             display: -webkit-box;
-            max-width: 400px;
             height: 40px;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
@@ -139,6 +132,9 @@
           text-align: right;
         };
       }
+      & .singleNotification:last-child{
+        border-bottom: none;
+      }
       & .detailView{
         padding:15px;
         & .notificationContent{
@@ -155,12 +151,15 @@
       }
     }
     & .notificationFooter{
-      & >*{
+      border-top: 1px solid var(--gray);
+      cursor: pointer;
+      & > a{
+        display: block;
         padding:12px 15px;
         text-align: center;
-        color:var(--blue)
+        color:var(--blue);
       }
-      & >*:hover{
+      & > a:hover{
         background: var(--whisperGray);
       }
     }
@@ -192,8 +191,6 @@
   min-width: 400px;
 }
 
-
-
 .empty__circle {
   width: 280px;
   height: 280px;
@@ -215,7 +212,6 @@
 
 .empty__notification_panel {
   height: 500px;
-  max-width: 400px;
   padding: 4em;
   background-color: #f1f1f2;
   & .title {

diff --git a/src/util/getAlertIconClassName.jsx b/src/util/getAlertIconClassName.jsx
@@ -1,5 +1,5 @@
 export function getAlertIconClassName (status) {
-  if (status === 'success') return 'icon_check_alt2'
+  if (status === 'success') return 'ei icon_check_alt2'
   if (status === 'information' || status === 'info') return 'ei icon_info_alt'
   if (status === 'warning') return 'ei icon_error-triangle_alt'
   if (status === 'error') return 'ei icon_error-circle_alt'