ant v5

OpenEditor · Jan 30, 2023 · 684340b · 684340b
1 parent 3c97078
commit 684340b
Show file tree

Hide file tree

Showing 6 changed files with 674 additions and 151 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,10 @@
   "private": true,
   "license": "AGPL-3.0-only",
   "dependencies": {
-    "@ant-design/icons": "^4.8.0",
+    "@ant-design/compatible": "^5.1.1",
+    "@ant-design/icons": "^5.0.1",
+    "@ant-design/pro-components": "^2.3.52",
+    "@ant-design/pro-layout": "^7.6.1",
     "@aws-amplify/ui-react": "^3.2.1",
     "@aws-sdk/client-transcribe": "^3.137.0",
     "@bbc/stt-align-node": "Laurian/stt-align-node#master",
@@ -17,7 +20,7 @@
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-helmet": "^6.1.5",
-    "antd": "^4.24.7",
+    "antd": "^5.1.6",
     "aws-amplify": "^4.3.29",
     "axios": "^1.1.3",
     "browserify-fs": "^1.0.0",

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <style>
-      @media (prefers-color-scheme: dark) {
+      /* @media (prefers-color-scheme: dark) {
         body {
           background-color: black;
           color: white;
@@ -20,7 +20,7 @@
       body.dark {
         background-color: black;
         color: white;
-      }
+      } */
     </style>
 
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -36,18 +36,18 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script>
-      const darkMode = localStorage.getItem('darkMode');
-      if (darkMode === 'true') {
-        document.body.classList.add('dark');
-      } else if (darkMode === 'false') {
-        document.body.classList.remove('dark');
-      } else if (darkMode === null) {
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          document.body.classList.add('dark');
-        } else {
-          document.body.classList.remove('dark');
-        }
-      }
+      // const darkMode = localStorage.getItem('darkMode');
+      // if (darkMode === 'true') {
+      //   document.body.classList.add('dark');
+      // } else if (darkMode === 'false') {
+      //   document.body.classList.remove('dark');
+      // } else if (darkMode === null) {
+      //   if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      //     document.body.classList.add('dark');
+      //   } else {
+      //     document.body.classList.remove('dark');
+      //   }
+      // }
     </script>
 
     <div id="root"></div>

diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,5 @@
 @import '@aws-amplify/ui-react/styles.css';
-@import '~antd/dist/antd.css';
-/* @import '~antd/dist/antd.dark.css'; */
+@import '~antd/dist/reset.css';
 
 body,
 *[class^='ant-'] {

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -5,9 +5,10 @@ import { Link, useHistory } from 'react-router-dom';
 import { DataStore } from 'aws-amplify';
 import Moment from 'react-moment';
 import 'moment-timezone';
-import { Layout, Col, Row, PageHeader, Table, Typography, Drawer, BackTop, Button, Space, Divider } from 'antd';
+import { Layout, Col, Row, Table, Typography, Drawer, BackTop, Button, Space, Divider } from 'antd';
 import UploadOutlined from '@ant-design/icons/UploadOutlined';
 import { ColumnsType } from 'antd/es/table';
+import { PageContainer } from '@ant-design/pro-components';
 
 import { User, Transcript } from '../models';
 import StatusCard, { StatusTag, StatusBadge } from '../components/StatusCard';
@@ -155,7 +156,7 @@ const Home = ({ user, groups, transcripts = [], userMenu }: HomeProps): JSX.Elem
 
   return (
     <Layout>
-      <PageHeader
+      <PageContainer
         title={
           <>
             <span>OpenEditor</span>{' '}

diff --git a/src/pages/Transcript.tsx b/src/pages/Transcript.tsx
@@ -8,8 +8,10 @@ import { useParams, Link } from 'react-router-dom';
 import { Storage } from 'aws-amplify';
 import { useAtom } from 'jotai';
 import ReactPlayer from 'react-player';
-import { Layout, Col, Row, PageHeader, Drawer, BackTop, Empty, Skeleton, Button, Space, Divider } from 'antd';
+import { Layout, Col, Row, Drawer, BackTop, Empty, Skeleton, Button, Space, Divider } from 'antd';
 import ExportOutlined from '@ant-design/icons/ExportOutlined';
+import EditOutlined from '@ant-design/icons/EditOutlined';
+import { PageContainer } from '@ant-design/pro-components';
 import axios from 'axios';
 import pako from 'pako';
 import { EditorState, ContentState, RawDraftContentBlock } from 'draft-js';
@@ -48,6 +50,10 @@ const TranscriptPage = ({ user, groups, transcripts, userMenu }: TranscriptPageP
   const openStatusDrawer = useCallback(() => setStatusDrawerVisible(true), []);
   const closeStatusDrawer = useCallback(() => setStatusDrawerVisible(step >= 0 && step < 3), [step]);
 
+  const [metaDrawerVisible, setMetaDrawerVisible] = useState(false);
+  const openMetaDrawer = useCallback(() => setMetaDrawerVisible(true), []);
+  const closeMetaDrawer = useCallback(() => setMetaDrawerVisible(false), []);
+
   useEffect(
     () => setStatusDrawerVisible(step >= 0 && step < 3 ? true : statusDrawerVisible),
     [step, statusDrawerVisible],
@@ -158,7 +164,7 @@ const TranscriptPage = ({ user, groups, transcripts, userMenu }: TranscriptPageP
 
   return (
     <Layout>
-      <PageHeader
+      <PageContainer
         className="site-page-header"
         breadcrumb={{
           routes: [
@@ -167,7 +173,12 @@ const TranscriptPage = ({ user, groups, transcripts, userMenu }: TranscriptPageP
           ],
           itemRender,
         }}
-        title={transcript?.title ?? uuid}
+        title={
+          <>
+            {transcript?.title ?? uuid}
+            <Button type="link" size="large" icon={<EditOutlined />} onClick={openMetaDrawer} />
+          </>
+        }
         subTitle={
           <div style={{ display: 'inline-block' }} onClick={openStatusDrawer}>
             {transcript ? <StatusTag transcript={transcript} /> : null}
@@ -219,6 +230,16 @@ const TranscriptPage = ({ user, groups, transcripts, userMenu }: TranscriptPageP
       </Content>
       <Footer />
       <BackTop />
+      <Drawer
+        destroyOnClose
+        title={transcript?.title}
+        placement="right"
+        onClose={closeMetaDrawer}
+        open={metaDrawerVisible}
+        closable
+        width={600}>
+        metadata editor
+      </Drawer>
       <Drawer
         destroyOnClose
         title={transcript?.title}