fix(preview): add bottom center style to the pagination element (#817)

netless-io · Jul 26, 2021 · 017ab90 · 017ab90
1 parent 19a3fbb
commit 017ab90
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -192,6 +192,7 @@
   "title-FeedbackPage": "Feedback",
   "title-AboutPage": "About",
   "title-JoinPage": "Join room",
+  "title-ResourcePreviewPage": "Resource Preview",
   "Inserting-courseware-tips": "Inserting courseware...",
   "cancel-upload": "Cancel upload",
   "cancel-upload-tips": "The upload has not been completed. Are you sure to cancel all ongoing uploads?",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -192,6 +192,7 @@
   "title-FeedbackPage": "吐个槽",
   "title-AboutPage": "关于我们",
   "title-JoinPage": "加入房间",
+  "title-ResourcePreviewPage": "资源预览",
   "in-the-process-of-transcoding-tips": "正在转码中，请稍后再试",
   "Inserting-courseware-tips": "正在插入课件……",
   "unable-to-insert-courseware": "无法插入课件",

diff --git a/web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.less b/web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.less
@@ -2,9 +2,13 @@
     background-color: #eee;
 }
 
+.dynamic-preview-inner {
+    height: 100vh;
+}
+
 .ppt-preview-container {
     .ppt-preview-main-container {
-        padding-top: 25px;
+        padding-top: 24px;
         border: none;
     }
 }
@@ -23,9 +27,11 @@
 
 .dynamic-preview-pagination-container {
     position: absolute;
-    bottom: 24px;
+    bottom: 0;
     z-index: 2;
-    left: 48%;
+    left: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
     width: 140px;
     height: 44px;
     display: flex;
@@ -38,3 +44,8 @@
 .dynamic-preview-pagination-middle {
     color: #fff;
 }
+
+.dynamic-preview-pagination-not-allow {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.tsx b/web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.tsx
@@ -8,6 +8,7 @@ import { ConversionResponse, previewPPT } from "white-web-sdk";
 import { queryConvertingTaskStatus } from "../../apiMiddleware/courseware-converting";
 import { useSafePromise } from "../../utils/hooks/lifecycle";
 import { EventEmitter } from "eventemitter3";
+import classNames from "classnames";
 
 export interface DynamicPreviewProps {
     taskUUID: string;
@@ -25,6 +26,9 @@ export const DynamicPreview = observer<DynamicPreviewProps>(function PPTPreview(
     const [totalPage, setTotalPage] = useState(0);
     const [eventEmit] = useState(() => new EventEmitter());
 
+    const isFirstPage = currentPage === 1;
+    const isLastPage = currentPage === totalPage;
+
     useEffect(() => {
         async function getDynamicResource(): Promise<void> {
             const convertState = await sp(
@@ -70,7 +74,9 @@ export const DynamicPreview = observer<DynamicPreviewProps>(function PPTPreview(
             <div ref={DynamicPreviewRef} className="dynamic-preview-inner" />
             <div className="dynamic-preview-pagination-container">
                 <div
-                    className="dynamic-preview-pagination-previous"
+                    className={classNames("dynamic-preview-pagination-previous", {
+                        "dynamic-preview-pagination-not-allow": isFirstPage,
+                    })}
                     onClick={() => {
                         eventEmit.emit("preStep");
                     }}
@@ -81,7 +87,9 @@ export const DynamicPreview = observer<DynamicPreviewProps>(function PPTPreview(
                     {currentPage} / {totalPage}
                 </div>
                 <div
-                    className="dynamic-preview-pagination-next"
+                    className={classNames("dynamic-preview-pagination-previous", {
+                        "dynamic-preview-pagination-not-allow": isLastPage,
+                    })}
                     onClick={() => {
                         eventEmit.emit("nextStep");
                     }}