Add Level 4 Page Heading and Thread Header for Comments

vicr123 · Jan 23, 2024 · c88a46c · c88a46c
1 parent 94849ce
commit c88a46c
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 8 deletions.
diff --git a/Parlance/ClientApp/src/components/PageHeading.module.css b/Parlance/ClientApp/src/components/PageHeading.module.css
@@ -13,4 +13,11 @@
     font-weight: bold;
     text-transform: uppercase;
     margin: 0;
+}
+
+.level4 {
+    font-size: 8pt;
+    font-weight: normal;
+    text-transform: uppercase;
+    margin: 0;
 }
diff --git a/Parlance/ClientApp/src/components/PageHeading.tsx b/Parlance/ClientApp/src/components/PageHeading.tsx
@@ -2,7 +2,7 @@ import Styles from "./PageHeading.module.css";
 import {ReactElement, ReactNode} from "react";
 
 interface PageHeadingProps {
-    level?: 1 | 2 | 3;
+    level?: 1 | 2 | 3 | 4;
     children: ReactNode;
     className?: string;
 }
@@ -13,6 +13,8 @@ export default function PageHeading(props: PageHeadingProps): ReactElement {
             return <h2 className={`${Styles.level2} ${props.className}`}>{props.children}</h2>
         case 3:
             return <h3 className={`${Styles.level3} ${props.className}`}>{props.children}</h3>
+        case 4:
+            return <h4 className={`${Styles.level4} ${props.className}`}>{props.children}</h4>
         default:
             return <h1 className={`${Styles.level1} ${props.className}`}>{props.children}</h1>
     }

diff --git a/...ance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/CommentsDashboard.tsx b/...ance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/CommentsDashboard.tsx
@@ -28,7 +28,7 @@ export function CommentsDashboard() {
     }, []);
 
     const openThread = (thread: Thread) => {
-        Modal.mount(<CommentsThreadModal thread={thread} onUpdateThreads={updateComments} />)
+        Modal.mount(<CommentsThreadModal thread={thread} onUpdateThreads={updateComments} showHeader={true} />)
     }
 
     return <div>

diff --git a/...s/Projects/Subprojects/Languages/Translation/TranslationEditor/Comments/CommentsModal.tsx b/...s/Projects/Subprojects/Languages/Translation/TranslationEditor/Comments/CommentsModal.tsx
@@ -53,11 +53,12 @@ export function CommentsModal({project, subproject, language, tkey, threads, onU
     </Modal>
 }
 
-export function CommentsThreadModal({thread, onUpdateThreads}: {
+export function CommentsThreadModal({thread, onUpdateThreads, showHeader}: {
     thread: Thread
-    onUpdateThreads: () => void
+    onUpdateThreads: () => void,
+    showHeader?: boolean
 }) {
     return <Modal popover={true} heading={thread.title} onBackClicked={() => Modal.unmount()}>
-        <ThreadView thread={thread} onCurrentThreadChanged={() => {}} onReloadThreads={onUpdateThreads} />
+        <ThreadView thread={thread} onCurrentThreadChanged={() => {}} onReloadThreads={onUpdateThreads} showHeader={showHeader} />
     </Modal>
 }
diff --git a/...ojects/Subprojects/Languages/Translation/TranslationEditor/Comments/ThreadView.module.css b/...ojects/Subprojects/Languages/Translation/TranslationEditor/Comments/ThreadView.module.css
@@ -50,3 +50,8 @@
 
     border-bottom: 1px solid var(--border-color);
 }
+
+.headerItem {
+    padding: 9px;
+    border-bottom: 1px solid var(--border-color);
+}
diff --git a/...ages/Projects/Subprojects/Languages/Translation/TranslationEditor/Comments/ThreadView.tsx b/...ages/Projects/Subprojects/Languages/Translation/TranslationEditor/Comments/ThreadView.tsx
@@ -1,4 +1,4 @@
-import {VerticalLayout} from "../../../../../../../components/Layouts";
+import {HorizontalLayout, VerticalLayout} from "../../../../../../../components/Layouts";
 import {useEffect, useState} from "react";
 import Fetch from "../../../../../../../helpers/Fetch";
 import ThreadReplyArea from "./ThreadReplyArea";
@@ -7,6 +7,11 @@ import Styles from "./ThreadView.module.css";
 import moment from "moment";
 import {useTranslation} from "react-i18next";
 import {Comment, Thread} from "../../../../../../../interfaces/comments";
+import PageHeading from "../../../../../../../components/PageHeading";
+import SmallButton from "../../../../../../../components/SmallButton";
+import {ButtonGroup} from "reactstrap";
+import Modal from "../../../../../../../components/Modal";
+import {useNavigate} from "react-router-dom";
 
 function ThreadComment({data}: {
     data: Comment
@@ -42,10 +47,32 @@ function ThreadEvent({data}: {
     </div>
 }
 
-export default function ThreadView({thread, onCurrentThreadChanged, onReloadThreads}: {
+function ThreadHeader({thread}: {
+    thread: Thread
+}) {
+    const {t} = useTranslation();
+
+    const goToString = () => {
+        Modal.unmount();
+        window.location.pathname = `/projects/${thread.project}/${thread.subproject}/${thread.language}/translate/${thread.key}`;
+    }
+
+    return <div className={Styles.headerItem}>
+        <VerticalLayout>
+            <PageHeading level={4}>{t("Original Translation")}</PageHeading>
+            <div>{thread.sourceTranslation}</div>
+            <HorizontalLayout>
+                <SmallButton onClick={goToString}>{t("Go to string")}</SmallButton>
+            </HorizontalLayout>
+        </VerticalLayout>
+    </div>
+}
+
+export default function ThreadView({thread, onCurrentThreadChanged, onReloadThreads, showHeader}: {
     thread: Thread,
     onCurrentThreadChanged: (thread: Thread | null) => void,
-    onReloadThreads: () => void
+    onReloadThreads: () => void,
+    showHeader?: boolean
 }) {
     const [threadData, setThreadData] = useState<Comment[]>([]);
 
@@ -58,6 +85,7 @@ export default function ThreadView({thread, onCurrentThreadChanged, onReloadThre
     }, []);
 
     return <VerticalLayout gap={0}>
+        {showHeader && <ThreadHeader thread={thread} />}
         {threadData.map((x, i) => x.event ? <ThreadEvent key={i} data={x}/> : <ThreadComment key={i} data={x}/>)}
         <ThreadReplyArea thread={thread} onThreadDataChanged={setThreadData}
                          onCurrentThreadChanged={onCurrentThreadChanged} onReloadThreads={onReloadThreads}/>