Adds Conversation UI (#173)

Implements a new conversation UI for an easy overview of all the comments on a case

Author: cbothner

.babelrc

@@ -20,6 +20,7 @@
   ],
 
   "plugins": [
+    "babel-plugin-styled-components",
     "syntax-dynamic-import",
     "transform-object-rest-spread",
     ["transform-class-properties", { "spec": true }]

.flowconfig

@@ -5,7 +5,6 @@
 .*/node_modules/jsonlint-lines-primitives
 
 [include]
-./node_modules/immutable
 ./node_modules/fbjs/flow/lib
 
 [libs]

app/assets/stylesheets/CaseOverview.sass

@@ -35,6 +35,9 @@
 
   .CaseOverviewRight
     +flex($fg: 0, $fs: 1, $fb: 20em)
+    @media screen and (max-width: $mobileCutoff)
+      +flex($fg: 1, $fs: 1, $fb: 20em)
+
     min-width: 15em
     & > *
       margin: 1em

app/assets/stylesheets/CommentThread.sass

@@ -8,38 +8,6 @@
   background-color: #bfaeec
 
 .CommentThreads
-  position: absolute
-  top: 0
-  right: -290px
-  width: 267px
-  font-family: $sansFont
-  font-weight: 500
-  font-size: 12pt
-
-  &__footer
-    border-top: 1px solid #351D7A
-    padding: 0.25em
-    display: flex
-
-    & > *
-      flex-grow: 1
-
-    & .CommentThreads__new-button.o-button
-      width: 100% !important
-      background-color: $darkPurple
-      margin: 0
-      padding: 0.5em
-      border-width: 0
-      font-size: 11pt
-      letter-spacing: 0.4px
-      font-weight: 500
-      color: white
-      &:hover,
-      &:focus
-        background-color: darken($darkPurple, 10%)
-      &:disabled
-        cursor: initial
-        background-color: transparent
 
   &__banner
     +banner

app/assets/stylesheets/Narrative.sass

@@ -90,7 +90,8 @@ article
   position: relative
 
   p,
-  div[data-block]
+  & > .DraftEditor-root div[data-block],
+  & > div > .DraftEditor-root div[data-block]
     margin: 1em 0
 
   @media screen and (max-width: $mobileCutoff)
@@ -103,7 +104,7 @@ article
     background-color: rgb(159, 187, 214)
     text-shadow: none
 
-  a:not([data-edgenote])
+  .DraftEditor-root a:not(.c-edgenote-entity):not(.c-edgenote-entity--inactive):not(.pt-button)
     color: $darkGreen
 
     &:hover

app/controllers/comment_threads_controller.rb

@@ -9,7 +9,7 @@ class CommentThreadsController < ApplicationController
   def index
     @forum = current_reader.active_community.forums.find_by(case: @case)
     @comment_threads = if @forum.nil?
-                         []
+                         CommentThread.none
                        else
                          @forum.comment_threads
                                .visible_to_reader?(current_reader)
@@ -34,7 +34,7 @@ def create
   def show
     current_reader.update active_community_id: @comment_thread.forum
                                                               .community.id
-    redirect_to inline_comment_thread_url @comment_thread
+    redirect_to conversation_comment_thread_url @comment_thread
   end
 
   def destroy
@@ -64,9 +64,8 @@ def comment_thread_params
     params.require(:comment_thread).permit(:start, :length, :block_index, :original_highlight_text)
   end
 
-  def inline_comment_thread_url(comment_thread)
+  def conversation_comment_thread_url(comment_thread)
     "#{case_url(I18n.locale, comment_thread.card.case.slug)}" \
-      "/#{comment_thread.card.element.case_element.position}" \
-      "/cards/#{comment_thread.card_id}/comments/#{comment_thread.id}"
+      "/conversation/#{comment_thread.id}"
   end
 end

app/javascript/Case.jsx

@@ -36,6 +36,9 @@ const PreTest = asyncComponent(() =>
 const PostTest = asyncComponent(() =>
   import('quiz/PostTest').then(m => m.default)
 )
+const Conversation = asyncComponent(() =>
+  import('conversation').then(m => m.default)
+)
 
 function mapStateToProps ({ quiz, caseData }: State) {
   return {
@@ -125,6 +128,7 @@ class Case extends React.Component<{
               <Route exact path="/" component={CaseOverview} />
               <Route path={needsPretest ? '/*' : 'miss'} component={PreTest} />
               <Route path={hasQuiz ? '/quiz/' : 'miss'} component={PostTest} />
+              <Route path="/conversation" component={Conversation} />
               <Route path="/:position/" component={CaseElement} />
             </Switch>
           </div>

app/javascript/card/CardContents.jsx

@@ -19,6 +19,8 @@ import Statistics from 'utility/Statistics'
 import CitationTooltip from './CitationTooltip'
 import CommentThreadsTag from 'comments/CommentThreadsTag'
 import { OnScreenTracker } from 'utility/Tracker'
+import { FocusContainer } from 'utility/A11y'
+import { ScrollIntoView } from 'utility/ScrollView'
 
 import type { ContextRouter, Match } from 'react-router-dom'
 
@@ -111,6 +113,7 @@ class CardContents extends React.Component<Props, *> {
       theseCommentThreadsOpen,
       hoveredCommentThread,
       selectedCommentThread,
+      acceptingSelection,
       readOnly,
       commentable,
       title,
@@ -140,18 +143,25 @@ class CardContents extends React.Component<Props, *> {
           transition: 'padding-top 0.1s, flex 0.3s',
         }}
       >
+        {theseCommentThreadsOpen ? <ScrollIntoView /> : null}
+
         {editing && <EditorToolbar cardId={id} />}
         {title}
-        <Editor
-          readOnly={readOnly}
-          customStyleMap={styleMap}
-          onChange={(eS: EditorState) => onChange(eS)}
-          {...{
-            blockRenderMap,
-            editorState,
-            handleKeyCommand,
-          }}
-        />
+        <FocusContainer
+          active={!!(theseCommentThreadsOpen && acceptingSelection)}
+          priority={100}
+        >
+          <Editor
+            readOnly={readOnly}
+            customStyleMap={styleMap}
+            onChange={(eS: EditorState) => onChange(eS)}
+            {...{
+              blockRenderMap,
+              editorState,
+              handleKeyCommand,
+            }}
+          />
+        </FocusContainer>
 
         {commentable &&
           solid && <CommentThreadsTag cardId={id} match={match} />}

app/javascript/card/index.jsx

@@ -53,7 +53,7 @@ function mapStateToProps (
   const anyCommentThreadsOpen = matchPath(pathname, commentThreadsOpen())
   const anyCommentsOpen = matchPath(pathname, commentsOpen())
   const selectedCommentThread =
-    anyCommentsOpen && anyCommentsOpen.params.commentThreadId
+    anyCommentsOpen && anyCommentsOpen.params.threadId
 
   return {
     commentable:

app/javascript/catalog/Sidebar.jsx

@@ -35,7 +35,7 @@ const Sidebar = ({
           image={reader.imageUrl}
           text={reader.name}
           href="/profile/edit"
-          hashKey={reader.email}
+          hashKey={reader.hashKey}
         />
         <Enrollments
           loading={loading}
@@ -62,5 +62,8 @@ export const Container = styled.aside`
 const IdentigradientElement = styled(Element)`
   & > ${ElementImage} {
     ${identiconStyle};
+    &:after {
+      font-size: 16px;
+    }
   }
 `