Add thread options to headerss

rafalp · Dec 31, 2022 · 1d7beb5 · 1d7beb5
1 parent d0a55c9
commit 1d7beb5
Show file tree

Hide file tree

Showing 35 changed files with 509 additions and 828 deletions.
diff --git a/frontend/src/components/Breadcrumbs/BreadcrumbsCategory.jsx b/frontend/src/components/Breadcrumbs/BreadcrumbsCategory.jsx
@@ -10,7 +10,20 @@ const BreadcrumbsCategory = ({ category, className }) => (
       >
         label
       </span>
-      <span className="breadcrumbs-item-name">{category.name}</span>
+      {!!category.short_name && (
+        <span
+          className="breadcrumbs-item-name hidden-sm hidden-md hidden-lg"
+          title={category.name}
+        >
+          {category.short_name}
+        </span>
+      )}
+      {!!category.short_name && (
+        <span className="breadcrumbs-item-name hidden-xs">{category.name}</span>
+      )}
+      {!category.short_name && (
+        <span className="breadcrumbs-item-name">{category.name}</span>
+      )}
     </a>
   </li>
 )

diff --git a/frontend/src/components/FlexRow/index.js b/frontend/src/components/FlexRow/index.js
@@ -2,4 +2,4 @@ import FlexRow from "./FlexRow"
 import FlexRowCol from "./FlexRowCol"
 import FlexRowSection from "./FlexRowSection"
 
-export { FlexRow, FlexRowCol, FlexRowSection }
+export { FlexRow, FlexRowCol, FlexRowSection }
diff --git a/frontend/src/components/ThreadFlags.jsx b/frontend/src/components/ThreadFlags.jsx
@@ -19,10 +19,7 @@ const ThreadFlags = ({ thread }) => (
       </li>
     )}
     {thread.best_answer && (
-      <li
-        className="thread-flag-answered"
-        title={gettext("Answered")}
-      >
+      <li className="thread-flag-answered" title={gettext("Answered")}>
         <span className="material-icon">check_circle</span>
       </li>
     )}

diff --git a/...ts/ThreadsList/ThreadsListItemReplies.jsx → frontend/src/components/ThreadReplies.jsx b/...ts/ThreadsList/ThreadsListItemReplies.jsx → frontend/src/components/ThreadReplies.jsx
@@ -1,8 +1,8 @@
 import React from "react"
 
-const ThreadsListItemReplies = ({ thread }) => (
+const ThreadReplies = ({ thread }) => (
   <span
-    className="threads-list-item-replies"
+    className="threads-replies"
     title={interpolate(
       ngettext("%(replies)s reply", "%(replies)s replies", thread.replies),
       { replies: thread.replies },
@@ -16,4 +16,4 @@ const ThreadsListItemReplies = ({ thread }) => (
   </span>
 )
 
-export default ThreadsListItemReplies
+export default ThreadReplies
diff --git a/frontend/src/components/ThreadStarterCard.jsx b/frontend/src/components/ThreadStarterCard.jsx
@@ -0,0 +1,49 @@
+import React from "react"
+import Avatar from "./avatar"
+
+const ThreadStarterCard = ({ thread }) => (
+  <div className="thread-user-card">
+    <div className="thread-user-card-media">
+      {thread.starter ? (
+        <a href={thread.url.starter}>
+          <Avatar size={40} user={thread.starter} />
+        </a>
+      ) : (
+        <Avatar size={40} />
+      )}
+    </div>
+    <div className="thread-user-card-body">
+      <div className="thread-user-card-header">
+        {thread.starter ? (
+          <a
+            className="item-title"
+            href={thread.url.starter}
+            title={gettext("Thread author")}
+          >
+            {thread.starter.username}
+          </a>
+        ) : (
+          <span className="item-title" title={gettext("Thread author")}>
+            {thread.starter_name}
+          </span>
+        )}
+      </div>
+      <div>
+        <span
+          className="text-muted"
+          title={interpolate(
+            gettext("Started on: %(timestamp)s"),
+            {
+              timestamp: thread.started_on.format("LLL"),
+            },
+            true
+          )}
+        >
+          {thread.started_on.fromNow()}
+        </span>
+      </div>
+    </div>
+  </div>
+)
+
+export default ThreadStarterCard
diff --git a/frontend/src/components/ThreadsList/ThreadsListItem.jsx b/frontend/src/components/ThreadsList/ThreadsListItem.jsx
@@ -1,11 +1,11 @@
 import React from "react"
 import ThreadFlags from "../ThreadFlags"
+import ThreadReplies from "../ThreadReplies"
 import ThreadsListItemActivity from "./ThreadsListItemActivity"
 import ThreadsListItemCategory from "./ThreadsListItemCategory"
 import ThreadsListItemCheckbox from "./ThreadsListItemCheckbox"
 import ThreadsListItemIcon from "./ThreadsListItemIcon"
 import ThreadsListItemLastPoster from "./ThreadsListItemLastPoster"
-import ThreadsListItemReplies from "./ThreadsListItemReplies"
 import ThreadsListItemSubscription from "./ThreadsListItemSubscription"
 
 const ThreadsListItem = ({
@@ -93,7 +93,7 @@ const ThreadsListItem = ({
           </div>
         )}
         <div className="threads-list-item-col-replies">
-          <ThreadsListItemReplies thread={thread} />
+          <ThreadReplies thread={thread} />
         </div>
         <div className="threads-list-item-col-last-poster">
           <ThreadsListItemLastPoster thread={thread} />

diff --git a/frontend/src/components/posts-list/post/controls/move.js b/frontend/src/components/posts-list/post/controls/move.js
@@ -87,7 +87,7 @@ export default class extends Form {
             <div className="modal-footer">
               <button
                 className="btn btn-primary"
-                loading={this.state.isLoading}
+                disabled={this.state.isLoading}
               >
                 {gettext("Move post")}
               </button>

diff --git a/frontend/src/components/thread/ThreadHeader/ThreadHeader.jsx b/frontend/src/components/thread/ThreadHeader/ThreadHeader.jsx
@@ -1,12 +1,19 @@
 import React from "react"
-import Avatar from "../../avatar"
 import { FlexRow, FlexRowCol, FlexRowSection } from "../../FlexRow"
 import ThreadFlags from "../../ThreadFlags"
-import { PageHeader, PageHeaderBanner, PageHeaderContainer, PageHeaderDetails } from "../../PageHeader"
+import ThreadReplies from "../../ThreadReplies"
+import ThreadStarterCard from "../../ThreadStarterCard"
+import {
+  PageHeader,
+  PageHeaderBanner,
+  PageHeaderContainer,
+  PageHeaderDetails,
+} from "../../PageHeader"
+import ThreadModeration from "../ThreadModeration"
 import ThreadSubscriptionButton from "../ThreadSubscriptionButton"
 import ThreadHeaderBreadcrumbs from "./ThreadHeaderBreadcrumbs"
 
-const ThreadHeader = ({ thread, user }) => (
+const ThreadHeader = ({ thread, posts, user, moderation }) => (
   <PageHeaderContainer>
     <PageHeader>
       <PageHeaderBanner>
@@ -17,19 +24,14 @@ const ThreadHeader = ({ thread, user }) => (
         <FlexRow>
           <FlexRowSection auto>
             <FlexRowCol shrink>
-              {thread.starter ? (
-                <a href={thread.url.starter}>
-                  <Avatar size={32} user={thread.starter} />
-                </a>
-              ) : <Avatar size={32} />}
-            </FlexRowCol>
-            <FlexRowCol>
-              {thread.starter ? (
-                <a href={thread.url.starter}>
-                  {thread.starter.username}
-                </a>
-              ) : thread.starter_name}
+              <ThreadStarterCard thread={thread} />
             </FlexRowCol>
+            <FlexRowCol auto />
+            {thread.replies > 0 && (
+              <FlexRowCol shrink>
+                <ThreadReplies thread={thread} />
+              </FlexRowCol>
+            )}
             <FlexRowCol shrink>
               <ThreadFlags thread={thread} />
             </FlexRowCol>
@@ -39,7 +41,15 @@ const ThreadHeader = ({ thread, user }) => (
               <FlexRowCol>
                 <ThreadSubscriptionButton thread={thread} />
               </FlexRowCol>
-              <FlexRowCol shrink>[MOD]</FlexRowCol>
+              {moderation.enabled && (
+                <FlexRowCol shrink>
+                  <ThreadModeration
+                    thread={thread}
+                    posts={posts}
+                    moderation={moderation}
+                  />
+                </FlexRowCol>
+              )}
             </FlexRowSection>
           )}
         </FlexRow>
@@ -48,4 +58,4 @@ const ThreadHeader = ({ thread, user }) => (
   </PageHeaderContainer>
 )
 
-export default ThreadHeader
+export default ThreadHeader
diff --git a/frontend/src/components/thread/ThreadHeader/ThreadHeaderBreadcrumbs.jsx b/frontend/src/components/thread/ThreadHeader/ThreadHeaderBreadcrumbs.jsx
@@ -1,12 +1,20 @@
 import React from "react"
-import { Breadcrumbs, BreadcrumbsCategory, BreadcrumbsRootCategory } from "../../Breadcrumbs"
+import {
+  Breadcrumbs,
+  BreadcrumbsCategory,
+  BreadcrumbsRootCategory,
+} from "../../Breadcrumbs"
 
 const ThreadHeaderBreadcrumbs = ({ breadcrumbs }) => (
   <Breadcrumbs>
-    {breadcrumbs.map(category => (
-      category.special_role ? <BreadcrumbsRootCategory key={category.id} category={category} /> : <BreadcrumbsCategory key={category.id} category={category} />
-    ))}
+    {breadcrumbs.map((category) =>
+      category.special_role ? (
+        <BreadcrumbsRootCategory key={category.id} category={category} />
+      ) : (
+        <BreadcrumbsCategory key={category.id} category={category} />
+      )
+    )}
   </Breadcrumbs>
 )
 
-export default ThreadHeaderBreadcrumbs
+export default ThreadHeaderBreadcrumbs
diff --git a/frontend/src/components/thread/ThreadHeader/index.js b/frontend/src/components/thread/ThreadHeader/index.js
@@ -1,3 +1,3 @@
 import ThreadHeader from "./ThreadHeader"
 
-export default ThreadHeader
+export default ThreadHeader
diff --git a/frontend/src/components/thread/ThreadModeration.jsx b/frontend/src/components/thread/ThreadModeration.jsx
@@ -0,0 +1,25 @@
+import React from "react"
+import ThreadModerationOptions from "./moderation/thread"
+
+const ThreadModeration = ({ thread, posts, moderation }) => (
+  <div className="dropdown">
+    <button
+      type="button"
+      className="btn btn-default btn-outline btn-icon dropdown-toggle"
+      title={gettext("Thread options")}
+      data-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="false"
+      disabled={thread.isBusy}
+    >
+      <span className="material-icon">settings</span>
+    </button>
+    <ThreadModerationOptions
+      thread={thread}
+      posts={posts}
+      moderation={moderation}
+    />
+  </div>
+)
+
+export default ThreadModeration
diff --git a/frontend/src/components/thread/header/breadcrumbs.js b/frontend/src/components/thread/header/breadcrumbs.js