+ {props.children}
+
+}
\ No newline at end of file
diff --git a/Parlance/ClientApp/src/components/ListPage.js b/Parlance/ClientApp/src/components/ListPage.js
deleted file mode 100644
index 808fbbd9..00000000
--- a/Parlance/ClientApp/src/components/ListPage.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import Styles from "./ListPage.module.css";
-import {Route, Routes, useLocation, useNavigate} from "react-router-dom";
-
-function toUrl(name) {
- return name.toLowerCase().replace(" ", "-")
-}
-
-function ListItem(props) {
- const navigate = useNavigate();
- const location = useLocation();
-
- const switchPage = () => {
- navigate(toUrl(props.name));
- };
-
- let styles = [Styles.listItem, Styles.listItemClickable]
- if (location.pathname.includes(toUrl(props.name))) {
- styles.push(Styles.selected);
- }
-
- return
- {props.name}
-
-}
-
-export default function ListPage({items}) {
- return
-
-}
\ No newline at end of file
diff --git a/Parlance/ClientApp/src/components/ListPage.module.css b/Parlance/ClientApp/src/components/ListPage.module.css
index 72a83129..4b4dcc34 100644
--- a/Parlance/ClientApp/src/components/ListPage.module.css
+++ b/Parlance/ClientApp/src/components/ListPage.module.css
@@ -7,7 +7,6 @@
.leftPane {
flex-basis: 300px;
- border-right: 1px solid var(--border-color);
flex-grow: 1;
display: flex;
@@ -15,6 +14,14 @@
align-items: flex-end;
}
+:global(.ltr) .leftPane {
+ border-right: 1px solid var(--border-color);
+}
+
+:global(.rtl) .leftPane {
+ border-left: 1px solid var(--border-color);
+}
+
.rightPane {
flex-basis: 600px;
flex-grow: 1;
@@ -35,4 +42,26 @@
.listItemClickable:active, .selected {
background-color: var(--active-color);
+}
+
+.mobileOnly {
+ display: none;
+}
+
+@media (max-width: 600px) {
+ .mobileOnly {
+ display: block;
+ }
+
+ .desktopOnly {
+ display: none;
+ }
+
+ .leftPane {
+ align-items: stretch;
+ }
+
+ .listItem {
+ width: initial;
+ }
}
\ No newline at end of file
diff --git a/Parlance/ClientApp/src/components/ListPage.tsx b/Parlance/ClientApp/src/components/ListPage.tsx
new file mode 100644
index 00000000..e1b86021
--- /dev/null
+++ b/Parlance/ClientApp/src/components/ListPage.tsx
@@ -0,0 +1,85 @@
+import Styles from "./ListPage.module.css";
+import {Outlet, Route, Routes, useLocation, useNavigate} from "react-router-dom";
+import {ReactNode} from "react";
+import BackButton from "./BackButton";
+import {useTranslation} from "react-i18next";
+
+interface ListPageItemObject {
+ name: string,
+ slug: string,
+ render: ReactNode
+ default?: boolean
+}
+
+type ListPageItem = ListPageItemObject | string;
+
+function ListItem(props: {
+ name: string
+ slug: string
+ default?: boolean
+}) {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ const switchPage = () => {
+ navigate(props.slug);
+ };
+
+ let styles = [Styles.listItem, Styles.listItemClickable]
+ if (location.pathname.includes(props.slug)) {
+ styles.push(Styles.selected);
+ }
+
+ return
- {items.map((item, i) => {
- if (typeof (item) === "string") {
- return {item.toUpperCase()}
- } else {
- return
-
-
- {items.filter(item => typeof (item) === "object").map((item, index) => {
- return
- })}
-
-
-
+ {props.name}
+
+}
+
+function ListPageInner({items, isLeftPane}: {
+ items: ListPageItem[],
+ isLeftPane: boolean
+}) {
+ const navigate = useNavigate();
+ const {t} = useTranslation();
+
+ const goBack = () => {
+ navigate("..")
+ };
+
+ return
+
+}
+
+export default function ListPage({items}: {
+ items: ListPageItem[]
+}) {
+ return
+ {items.map((item, i) => {
+ if (typeof (item) === "string") {
+ return {item.toUpperCase()}
+ } else {
+ return
+
+
+
+
+ {props.children}
case 3: return{props.children}
+ case 4: + return{props.children}
default: return{props.children}
} diff --git a/Parlance/ClientApp/src/components/comments/ThreadItem.module.css b/Parlance/ClientApp/src/components/comments/ThreadItem.module.css new file mode 100644 index 00000000..637b3e41 --- /dev/null +++ b/Parlance/ClientApp/src/components/comments/ThreadItem.module.css @@ -0,0 +1,61 @@ +.threadItem { + display: grid; + grid-template-columns: 1fr max-content; + grid-template-rows: max-content max-content max-content; + gap: 6px 0px; + grid-template-areas: + "threadTitle goButton" + "lastMessageDate goButton" + "lastMessage goButton"; + align-items: center; + + padding: 9px; + cursor: default; +} + +.threadItem:hover { + background-color: var(--hover-color); +} + +.threadItem:active { + background-color: var(--active-color); +} + +.threadTitle { + grid-area: threadTitle; +} + +.closed { + color: var(--foreground-disabled-color); +} + +.goButton { + grid-area: goButton; +} + +.lastMessage { + grid-area: lastMessage; +} + +.lastMessageDate { + grid-area: lastMessageDate; + font-size: 10pt; + opacity: 50%; +} + +.threadCreator { + font-size: 10pt; + + display: inline-flex; + align-items: center; + gap: 6px; +} + +.noPadding { + padding: 0; +} + +.threadCreatorImage { + height: 16px; + border-radius: 50%; +} \ No newline at end of file diff --git a/Parlance/ClientApp/src/components/comments/ThreadItem.tsx b/Parlance/ClientApp/src/components/comments/ThreadItem.tsx new file mode 100644 index 00000000..2122ff81 --- /dev/null +++ b/Parlance/ClientApp/src/components/comments/ThreadItem.tsx @@ -0,0 +1,29 @@ +import {Thread} from "../../interfaces/comments"; +import Styles from "./ThreadItem.module.css"; +import Icon from "../Icon"; +import {useTranslation} from "react-i18next"; +import moment from "moment"; + +export function ThreadItem({item, onCurrentThreadChanged, noPadding}: { + item: Thread, + onCurrentThreadChanged: (thread: Thread) => void, + noPadding?: boolean +}) { + const {t} = useTranslation(); + + return onCurrentThreadChanged(item)}>
+ {item.title}
+
+
+}
\ No newline at end of file
diff --git a/Parlance/ClientApp/src/interfaces/comments.ts b/Parlance/ClientApp/src/interfaces/comments.ts
new file mode 100644
index 00000000..38ba3863
--- /dev/null
+++ b/Parlance/ClientApp/src/interfaces/comments.ts
@@ -0,0 +1,27 @@
+export interface Thread {
+ id: string
+ title: string
+ isClosed: boolean
+ isFlagged: boolean
+ headComment: HeadComment
+ project: string
+ subproject: string
+ language: string
+ key: string
+ sourceTranslation?: string
+}
+
+interface HeadComment {
+ text: string
+ date: number
+ author: Author
+}
+
+export interface Comment extends HeadComment {
+ event: string | null
+}
+
+interface Author {
+ username: string
+ picture: string
+}
diff --git a/Parlance/ClientApp/src/interfaces/projects.ts b/Parlance/ClientApp/src/interfaces/projects.ts
new file mode 100644
index 00000000..d77c05ce
--- /dev/null
+++ b/Parlance/ClientApp/src/interfaces/projects.ts
@@ -0,0 +1,20 @@
+import {Thread} from "./comments";
+
+export interface SubprojectLocaleMeta {
+ completionData: CompletionData
+ projectName: string,
+ subprojectName: string,
+ language: string,
+ canEdit: boolean,
+ openThreads: Thread[]
+}
+
+export interface CompletionData {
+ count: number,
+ complete: number,
+ warnings: number,
+ errors: number,
+ cumulativeWarnings: number,
+ passedChecks: number,
+ needsAttention: number
+}
\ No newline at end of file
diff --git a/Parlance/ClientApp/src/pages/Administration/index.js b/Parlance/ClientApp/src/pages/Administration/index.js
index 59cca03a..b6548035 100644
--- a/Parlance/ClientApp/src/pages/Administration/index.js
+++ b/Parlance/ClientApp/src/pages/Administration/index.js
@@ -16,24 +16,29 @@ export default function(props) {
t("PROJECTS"),
{
name: t("PROJECTS"),
+ slug: "projects",
render:
+ {moment(item.headComment.date).fromNow(false)}
+
+
+ {item.headComment.text}
+ —
+
+ 
+ {item.headComment.author.username}
+
+
+
+
+
+ {t("COMMENTS")}
+ {comments?.length === 0 ?
+ {t("COMMENT_OPEN_THREADS", {count: 0})} }
+ ({
+ contents: {}} />,
+ onClick: () => openThread(thread)
+ })) : SelectableList.PreloadingText(3)}/>
+
+ }
+
+
+
+}
diff --git a/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Dashboard.js b/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Dashboard.tsx
similarity index 69%
rename from Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Dashboard.js
rename to Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Dashboard.tsx
index a993ba4b..aab38476 100644
--- a/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Dashboard.js
+++ b/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Dashboard.tsx
@@ -9,10 +9,12 @@ import Hero from "../../../../../components/Hero";
import BackButton from "../../../../../components/BackButton";
import Spinner from "../../../../../components/Spinner";
import GlossariesDashboard from "./GlossariesDashboard";
+import {SubprojectLocaleMeta} from "../../../../../interfaces/projects";
+import {CommentsDashboard} from "./CommentsDashboard";
-export default function Dashboard(props) {
+export default function Dashboard() {
const {project, subproject, language} = useParams();
- const [data, setData] = useState();
+ const [data, setData] = useState
+
: <>
+ {comments ? {t("COMMENT_OPEN_THREADS", {count: comments.length})}
:
-
-
-}
\ No newline at end of file
diff --git a/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Overview.module.css b/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Overview.module.css
new file mode 100644
index 00000000..e69de29b
diff --git a/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Overview.tsx b/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Overview.tsx
new file mode 100644
index 00000000..6bbc4778
--- /dev/null
+++ b/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/Overview.tsx
@@ -0,0 +1,38 @@
+import {SubprojectLocaleMeta} from "../../../../../interfaces/projects";
+import {VerticalLayout} from "../../../../../components/Layouts";
+import ListPageBlock from "../../../../../components/ListPageBlock";
+import PageHeading from "../../../../../components/PageHeading";
+import {useTranslation} from "react-i18next";
+import SelectableList from "../../../../../components/SelectableList";
+import {useNavigate} from "react-router-dom";
+
+export default function Overview({data}: {
+ data: SubprojectLocaleMeta
+}) {
+ const {t} = useTranslation();
+ const navigate = useNavigate();
+
+ const goToComments = () => {
+ navigate("../comments");
+ }
+
+ return
+
+
+ {t("OVERVIEW_STATS")}
+
+
+
+
+ {t("COMMENTS")}
+ {t("OVERVIEW_GO_TO_COMMENTS")}
+
+
+
+}
\ No newline at end of file
diff --git a/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/TranslationEditor/Comments/CommentsModal.js b/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/TranslationEditor/Comments/CommentsModal.js
deleted file mode 100644
index 2cdab6ac..00000000
--- a/Parlance/ClientApp/src/pages/Projects/Subprojects/Languages/Translation/TranslationEditor/Comments/CommentsModal.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import {useTranslation} from "react-i18next";
-import Modal from "../../../../../../../components/Modal";
-import {useState} from "react";
-import {VerticalLayout} from "../../../../../../../components/Layouts";
-import PageHeading from "../../../../../../../components/PageHeading";
-
-import Styles from "./CommentsModal.module.css";
-import Icon from "../../../../../../../components/Icon";
-import ThreadView from "./ThreadView";
-import ThreadReplyArea from "./ThreadReplyArea";
-
-function ThreadItem({item, onCurrentThreadChanged}) {
- return
+ {data.completionData.complete}/{data.completionData.count} strings translated
+
+ {data.completionData.warnings} warnings
+ {data.completionData.errors} errors
+ {t("COMMENT_OPEN_THREADS", { count: data.openThreads.length })}
+ onCurrentThreadChanged(item)}>
- {item.title}
-
-
-}
-
-export default function CommentsModal({project, subproject, language, tkey, threads, onUpdateThreads}) {
- const [currentThread, setCurrentThread] = useState();
- const {t} = useTranslation();
-
- const goBack = () => {
- if (currentThread) {
- setCurrentThread(null);
- } else {
- Modal.unmount();
- }
- };
-
- return {item.headCommentBody}
- {item.author.username}
-
- {t("THREADS")}
-
- {threads.map((x, i) =>
- {t("THREADS_NEW_THREAD")}
-
-
+ {t("THREADS")}
+
+ {threads.length ? threads.map((x, i) =>
+ {t("THREADS_NO_THREADS")}
+
}
+
+ {t("THREADS_NEW_THREAD")}
+
+
- {!threadId && setTitle(e.target.value)}/>}
-