console: Apply diff chnages

TheThingsNetwork · Jan 29, 2024 · 1dd1257 · 1dd1257
1 parent ef1b042
commit 1dd1257
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 31 deletions.
diff --git a/pkg/webui/console/containers/notifications/notification-list/index.js b/pkg/webui/console/containers/notifications/notification-list/index.js
@@ -88,12 +88,20 @@ const NotificationList = ({
 
   const classes = classNames(styles.notificationHeaderIcon)
 
+  const isSelected = notification =>
+    selectedNotification && selectedNotification.id === notification.id
+  const isNextSelected = notification => {
+    const index = items.findIndex(item => item.id === notification.id)
+    return index + 1 < items.length && isSelected(items[index + 1])
+  }
+
   const Item = ({ index, style }) =>
     isItemLoaded(index) ? (
       <div style={style}>
         <NotificationListItem
           notification={items[index]}
-          selectedNotification={selectedNotification}
+          isSelected={isSelected(items[index])}
+          isNextSelected={isNextSelected(items[index])}
           handleClick={handleClick}
         />
       </div>
@@ -133,7 +141,7 @@ const NotificationList = ({
           />
         )}
       </div>
-      <div className="flex-grow">
+      <div className="flex-grow pl-cs-xs">
         <AutoSizer>
           {({ height, width }) => (
             <InfiniteLoader
@@ -145,9 +153,10 @@ const NotificationList = ({
             >
               {({ onItemsRendered, ref }) => (
                 <List
+                  className={styles.notificationListList}
                   height={height}
                   width={width}
-                  itemSize={98}
+                  itemSize={88}
                   ref={ref}
                   itemCount={itemCount}
                   onItemsRendered={onItemsRendered}

diff --git a/pkg/webui/console/containers/notifications/notification-list/list-item.js b/pkg/webui/console/containers/notifications/notification-list/list-item.js
@@ -30,20 +30,18 @@ import { selectUnseenIds } from '@console/store/selectors/notifications'
 
 import style from '../notifications.styl'
 
-export const NotificationListItem = ({ notification, selectedNotification, handleClick }) => {
+export const NotificationListItem = ({ notification, isSelected, isNextSelected, handleClick }) => {
   const unseenIds = useSelector(selectUnseenIds)
-  const showSelected = selectedNotification?.id === notification.id
   const showUnseenStatus = unseenIds.includes(notification.id)
   const classes = classNames(style.notificationPreview, 'm-0 d-flex p-cs-m', {
-    [style.notificationSelected]: showSelected,
+    [style.notificationSelected]: isSelected,
+    [style.notificationNextSelected]: isNextSelected,
   })
   const titleClasses = classNames(style.notificationPreviewTitle, {
     [style.notificationRead]: !showUnseenStatus,
-    [style.notificationSelected]: showSelected,
   })
   const previewClasses = classNames(style.notificationPreviewContent, {
     [style.notificationRead]: !showUnseenStatus,
-    [style.notificationSelected]: showSelected,
   })
 
   return (
@@ -55,7 +53,7 @@ export const NotificationListItem = ({ notification, selectedNotification, handl
       data-test-id="notification-list-item"
     >
       {showUnseenStatus && <Status pulse={false} status="good" className={style.unseenMark} />}
-      <div>
+      <div className="w-full">
         <div className={titleClasses}>
           <div className={style.notificationPreviewTitleText}>
             <Notification.Title
@@ -89,19 +87,14 @@ export const NotificationListItem = ({ notification, selectedNotification, handl
 
 NotificationListItem.propTypes = {
   handleClick: PropTypes.func.isRequired,
+  isNextSelected: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool.isRequired,
   notification: PropTypes.shape({
     id: PropTypes.string,
     created_at: PropTypes.string,
     notification_type: PropTypes.string,
     status: PropTypes.string,
   }).isRequired,
-  selectedNotification: PropTypes.shape({
-    id: PropTypes.string,
-  }),
-}
-
-NotificationListItem.defaultProps = {
-  selectedNotification: undefined,
 }
 
 export const NotificationListSpinner = () => {

diff --git a/pkg/webui/console/containers/notifications/notifications.styl b/pkg/webui/console/containers/notifications/notifications.styl
@@ -91,28 +91,41 @@
 
   &.notification-selected
     background-color: var(--c-bg-brand-normal)
+    border-radius: $br.m
+    border: 0
     +media-query($bp.s)
       background-color: unset
 
+    .notification-preview-title
+      color: var(--c-text-neutral-min)
+      +media-query($bp.s)
+        color: var(--c-text-neutral-heavy)
+
+      .notification-time
+        color: var(--c-text-neutral-min)
+
+    .notification-preview-content
+      color: var(--c-text-neutral-min)
+      +media-query($bp.s)
+        color: var(--c-text-neutral-light)
+
+  &.notification-next-selected
+    border: 0
+
   &-title
     display: flex
     justify-content: space-between
     gap: $cs.xxs
-    margin-bottom: $cs.xs
+    margin-bottom: $cs.xxs
     font-weight: 600
     position: relative
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
 
     &.notification-read
       margin-left: 0.857rem
 
-    &.notification-selected
-      color: var(--c-text-neutral-min)
-      +media-query($bp.s)
-        color: var(--c-text-neutral-heavy)
-
-      .notification-time
-        color: var(--c-text-neutral-min)
-
     .notification-time
       font-size: $fs.s
       font-weight: normal
@@ -128,18 +141,13 @@
     overflow: hidden
     display: -webkit-box
     -webkit-box-orient: vertical
-    -webkit-line-clamp: 2 // Start showing ellipsis when 2nd line is reached.
+    -webkit-line-clamp: 3 // Start showing ellipsis when 3d line is reached.
     white-space: pre-wrap
     font-size: $fs.s
 
     &.notification-read
       margin-left: 0.857rem
 
-    &.notification-selected
-      color: var(--c-text-neutral-min)
-      +media-query($bp.s)
-        color: var(--c-text-neutral-light)
-
   &.notification-selected
     color: var(--c-text-neutral-min)
     +media-query($bp.s)