feat(annotation-thread): Annotation thread comments visual fixes (#3128)

* feat(annotation-thread): Change timestamp color

* feat(annotation-thread): Add gap between timestamp and the message

* feat(annotation-thread): Reduce the horizontal margin on ActivityCard

* feat(annotation-thread): Extend header divider line to full width of sidebar

* feat(annotation-thread): Extend threads divider line to full width of sidebar

* feat(annotation-thread): Add shadow under header when feed is scrolled

* feat(annotation-thread): Rename state and className

* feat(annotation-thread): Throttle onScroll event

* feat(annotation-thread): Extract a variable for SidebarHeader

* feat(annotation-thread): Escape leading space in edited message

* feat(annotation-thread): Add separator in Comment

Between ActivityTimestamp and Comment/ActivityStatus

* feat(annotation-thread): Extend horizontal lines only for ActivityThread

* feat(annotation-thread): Use variable for bcs-content-header margin

* feat(annotation-thread): Move styles, renaming classes, using variables

Author: jankowiakdawid

i18n/en-US.properties

@@ -194,8 +194,8 @@ be.contentSidebar.activityFeed.commentForm.commentWrite = Write a comment
 be.contentSidebar.activityFeed.commmon.showOriginalMessage = Show Original
 # Indicator of resolved status of Comment or Annotation, visible in Feed Item (in upper-case in supported language)
 be.contentSidebar.activityFeed.common.activityStatusResolved = RESOLVED
-# Label indicating that message was edited, should be lowercase
-be.contentSidebar.activityFeed.common.editedMessage =  (edited)
+# Label indicating that message was edited, should be lowercase, should have escaped leading space
+be.contentSidebar.activityFeed.common.editedMessage = \ (edited)
 # See less button for hiding part of long message
 be.contentSidebar.activityFeed.common.seeLessMessage = See less
 # See more button for showing whole long message

src/elements/common/_variables.scss

@@ -4,8 +4,9 @@
 $font: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
 $minimumWidth: 300px;
+$sidebarHeaderHeight: 60px;
 $sidebarContentWidth: 340px;
-$sidebarActivityFeedSpacingHorizontal: 25px;
+$sidebarActivityFeedSpacingHorizontal: 20px;
 $sidebarActivityFeedSpacingVertical: 20px;
 $sidebarTabResponsiveSize: 48px;
 

src/elements/content-sidebar/ActivitySidebar.js

@@ -5,6 +5,7 @@
  */
 
 import * as React from 'react';
+import classNames from 'classnames';
 import debounce from 'lodash/debounce';
 import flow from 'lodash/flow';
 import getProp from 'lodash/get';
@@ -1207,7 +1208,7 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
         return (
             <SidebarContent
                 actions={this.renderActions()}
-                className="bcs-activity"
+                className={classNames('bcs-activity', { 'bcs-activity--full': hasReplies })}
                 elementId={elementId}
                 sidebarView={SIDEBAR_VIEW_ACTIVITY}
                 title={this.renderTitle()}

src/elements/content-sidebar/ActivitySidebar.scss

@@ -6,3 +6,10 @@
         height: 100%;
     }
 }
+
+.bcs-activity--full {
+    .bcs-content-header {
+        margin: 0;
+        padding: 0 $sidebarActivityFeedSpacingHorizontal;
+    }
+}

src/elements/content-sidebar/SidebarContent.js

@@ -16,7 +16,7 @@ type Props = {
     sidebarView: string,
     title?: React.Node,
 };
-const SidebarContent = ({ actions, children, className, title, elementId, sidebarView, ...rest }: Props) => {
+const SidebarContent = ({ actions, children, className, elementId, sidebarView, title, ...rest }: Props) => {
     const label = `${elementId}${elementId === '' ? '' : '_'}${sidebarView}`;
     const id = `${label}-content`;
 

src/elements/content-sidebar/SidebarContent.scss

@@ -10,8 +10,8 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        height: 60px;
-        margin: 0 25px;
+        height: $sidebarHeaderHeight;
+        margin: 0 $sidebarActivityFeedSpacingHorizontal;
         padding: 0;
         border-bottom: 1px solid $bdl-gray-10;
 
@@ -26,7 +26,7 @@
 
     .bcs-scroll-content-wrapper {
         position: absolute; // Prevents non-sidebar parts from re-painting
-        top: 60px; // Same as title above
+        top: $sidebarHeaderHeight; // Same as title above
         right: 0;
         bottom: 0;
         left: 0;

src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.js

@@ -6,6 +6,7 @@
 import * as React from 'react';
 import getProp from 'lodash/get';
 import noop from 'lodash/noop';
+import throttle from 'lodash/throttle';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import ActiveState from './ActiveState';
@@ -95,10 +96,12 @@ type Props = {
 
 type State = {
     isInputOpen: boolean,
+    isScrolled: boolean,
 };
 
 class ActivityFeed extends React.Component<Props, State> {
     state = {
+        isScrolled: false,
         isInputOpen: false,
     };
 
@@ -186,6 +189,16 @@ class ActivityFeed extends React.Component<Props, State> {
         }
     };
 
+    handleFeedScroll = (event: UIEvent): void => {
+        const { target } = event;
+        if (target instanceof Element) {
+            const { scrollTop } = target;
+            this.setState({ isScrolled: scrollTop > 0 });
+        }
+    };
+
+    throttledFeedScroll = throttle(this.handleFeedScroll, 100);
+
     onKeyDown = (event: SyntheticKeyboardEvent<>): void => {
         const { nativeEvent } = event;
         nativeEvent.stopImmediatePropagation();
@@ -283,7 +296,7 @@ class ActivityFeed extends React.Component<Props, State> {
             onVersionHistoryClick,
             translations,
         } = this.props;
-        const { isInputOpen } = this.state;
+        const { isInputOpen, isScrolled } = this.state;
         const currentFileVersionId = getProp(file, 'file_version.id');
         const hasAnnotationCreatePermission = getProp(file, ['permissions', PERMISSION_CAN_CREATE_ANNOTATIONS], false);
         const hasCommentPermission = getProp(file, 'permissions.can_comment', false);
@@ -320,13 +333,18 @@ class ActivityFeed extends React.Component<Props, State> {
         const isInlineFeedItemErrorVisible = !isLoading && activeFeedEntryType && !activeFeedItem;
 
         return (
-            // eslint-disable-next-line
-            <div className="bcs-activity-feed" data-testid="activityfeed" onKeyDown={this.onKeyDown}>
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            <div
+                className={classNames('bcs-activity-feed', { 'bcs-is-scrolled': isScrolled })}
+                data-testid="activityfeed"
+                onKeyDown={this.onKeyDown}
+            >
                 <div
                     ref={ref => {
                         this.feedContainer = ref;
                     }}
                     className="bcs-activity-feed-items-container"
+                    onScroll={this.throttledFeedScroll}
                 >
                     {isLoading && (
                         <div className="bcs-activity-feed-loading-state">

src/elements/content-sidebar/activity-feed/activity-feed/ActivityFeed.scss

@@ -28,6 +28,17 @@
         line-height: 20px;
     }
 
+    &.bcs-is-scrolled::before {
+        position: absolute;
+        // position it behind bcs-content-header
+        top: -$sidebarHeaderHeight;
+        right: $sidebarActivityFeedSpacingHorizontal;
+        left: $sidebarActivityFeedSpacingHorizontal;
+        height: $sidebarHeaderHeight;
+        box-shadow: 0 $bdl-grid-unit $bdl-grid-unit * 3 $bdl-gray-10;
+        content: ' ';
+    }
+
     .bcs-activity-feed-items-container {
         $container-padding: 25px;
         $container-transition-delay: 25ms;

src/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.scss

@@ -1,6 +1,8 @@
 @import '../../../common/variables';
 
 .bcs-ActivityThread {
+    box-shadow: 0 1px 0 0 $bdl-gray-10;
+
     .bcs-ActivityThread-toggle {
         color: $bdl-box-blue;
 
@@ -18,6 +20,14 @@
         padding: 0;
     }
 
+    .bcs-Comment-timestamp {
+        margin-bottom: 16px;
+
+        .bcs-ActivityTimestamp {
+            color: $bdl-gray;
+        }
+    }
+
     .btn-plain:focus-visible {
         outline: auto;
     }

src/elements/content-sidebar/activity-feed/activity-feed/__tests__/__snapshots__/ActivityFeed.test.js.snap

@@ -8,6 +8,7 @@ exports[`elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed should
 >
   <div
     className="bcs-activity-feed-items-container"
+    onScroll={[Function]}
   >
     <div
       className="bcs-activity-feed-loading-state"
@@ -26,6 +27,7 @@ exports[`elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed should
 >
   <div
     className="bcs-activity-feed-items-container"
+    onScroll={[Function]}
   >
     <div
       className="bcs-activity-feed-loading-state"
@@ -44,6 +46,7 @@ exports[`elements/content-sidebar/ActivityFeed/activity-feed/ActivityFeed should
 >
   <div
     className="bcs-activity-feed-items-container"
+    onScroll={[Function]}
   >
     <div
       className="bcs-activity-feed-loading-state"