feat(console): support fullscreen & card layout (#1174)

feat(console): support fullscreen & card layout
star-whale · Sep 9, 2022 · c6af2be · c6af2be
1 parent 62a26b6
commit c6af2be
Show file tree

Hide file tree

Showing 16 changed files with 688 additions and 229 deletions.
diff --git a/console/package.json b/console/package.json
@@ -118,7 +118,7 @@
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "start": "vite --host 0.0.0.0",
-    "build": "vite build",
+    "build": "NODE_OPTIONS='--max-old-space-size=5120' vite build",
     "serve": "vite preview"
   },
   "eslintConfig": {

diff --git a/console/src/assets/fonts/iconfont.css b/console/src/assets/fonts/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3410006 */
-  src: url('iconfont.woff2?t=1662016819126') format('woff2'),
-       url('iconfont.woff?t=1662016819126') format('woff'),
-       url('iconfont.ttf?t=1662016819126') format('truetype');
+  src: url('iconfont.woff2?t=1662710521991') format('woff2'),
+       url('iconfont.woff?t=1662710521991') format('woff'),
+       url('iconfont.ttf?t=1662710521991') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,46 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-pause:before {
+  content: "\e61e";
+}
+
+.icon-speed:before {
+  content: "\e621";
+}
+
+.icon-play:before {
+  content: "\e622";
+}
+
+.icon-time:before {
+  content: "\e64b";
+}
+
+.icon-volume:before {
+  content: "\e64c";
+}
+
+.icon-grid:before {
+  content: "\e64a";
+}
+
+.icon-image:before {
+  content: "\e648";
+}
+
+.icon-video:before {
+  content: "\e649";
+}
+
+.icon-fullscreen:before {
+  content: "\e646";
+}
+
+.icon-file:before {
+  content: "\e647";
+}
+
 .icon-audio:before {
   content: "\e643";
 }
@@ -57,10 +97,6 @@
   content: "\e63e";
 }
 
-.icon-setting2:before {
-  content: "\e61e";
-}
-
 .icon-decline:before {
   content: "\e63a";
 }
@@ -165,14 +201,6 @@
   content: "\e620";
 }
 
-.icon-value:before {
-  content: "\e621";
-}
-
-.icon-integrates:before {
-  content: "\e622";
-}
-
 .icon-setting:before {
   content: "\e61d";
 }

diff --git a/console/src/assets/fonts/iconfont.js b/console/src/assets/fonts/iconfont.js
diff --git a/console/src/assets/fonts/iconfont.json b/console/src/assets/fonts/iconfont.json
@@ -5,6 +5,111 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "31315261",
+      "name": "pause",
+      "font_class": "pause",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "31315264",
+      "name": "speed",
+      "font_class": "speed",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "31315265",
+      "name": "play",
+      "font_class": "play",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "31315266",
+      "name": "time",
+      "font_class": "time",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "31315268",
+      "name": "volume",
+      "font_class": "volume",
+      "unicode": "e64c",
+      "unicode_decimal": 58956
+    },
+    {
+      "icon_id": "31761762",
+      "name": "grid",
+      "font_class": "grid",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "31315263",
+      "name": "image",
+      "font_class": "image",
+      "unicode": "e648",
+      "unicode_decimal": 58952
+    },
+    {
+      "icon_id": "31315267",
+      "name": "video",
+      "font_class": "video",
+      "unicode": "e649",
+      "unicode_decimal": 58953
+    },
+    {
+      "icon_id": "31315260",
+      "name": "fullscreen",
+      "font_class": "fullscreen",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "31315262",
+      "name": "file",
+      "font_class": "file",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "31460533",
+      "name": "audio",
+      "font_class": "audio",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "31460534",
+      "name": "txt",
+      "font_class": "txt",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "31460535",
+      "name": "excel",
+      "font_class": "excel",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "31314783",
+      "name": "overview",
+      "font_class": "overview",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "31314784",
+      "name": "manage member",
+      "font_class": "a-managemember",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
     {
       "icon_id": "31308852",
       "name": "google",
@@ -47,13 +152,6 @@
       "unicode": "e63e",
       "unicode_decimal": 58942
     },
-    {
-      "icon_id": "30435150",
-      "name": "setting2",
-      "font_class": "setting2",
-      "unicode": "e61e",
-      "unicode_decimal": 58910
-    },
     {
       "icon_id": "30429508",
       "name": "decline",
@@ -236,20 +334,6 @@
       "unicode": "e620",
       "unicode_decimal": 58912
     },
-    {
-      "icon_id": "30000077",
-      "name": "value",
-      "font_class": "value",
-      "unicode": "e621",
-      "unicode_decimal": 58913
-    },
-    {
-      "icon_id": "30000078",
-      "name": "integrates",
-      "font_class": "integrates",
-      "unicode": "e622",
-      "unicode_decimal": 58914
-    },
     {
       "icon_id": "29832564",
       "name": "setting",

diff --git a/console/src/assets/fonts/iconfont.ttf b/console/src/assets/fonts/iconfont.ttf
diff --git a/console/src/assets/fonts/iconfont.woff b/console/src/assets/fonts/iconfont.woff
diff --git a/console/src/assets/fonts/iconfont.woff2 b/console/src/assets/fonts/iconfont.woff2
diff --git a/console/src/components/IconFont/index.tsx b/console/src/components/IconFont/index.tsx
@@ -60,6 +60,9 @@ const iconTypes = [
     'excel',
     'text',
     'audio',
+    'view',
+    'grid',
+    'fullscreen',
 ]
 
 interface IIconFontProps {

diff --git a/console/src/components/Viewer/DatasetViewer.tsx b/console/src/components/Viewer/DatasetViewer.tsx
@@ -8,6 +8,7 @@ export enum MIME {
 
 export type IDatasetViewerProps = {
     data: IDatasetMeta
+    isZoom?: boolean
 }
 
 export type IDatasetMeta = {
@@ -17,13 +18,13 @@ export type IDatasetMeta = {
     src: string
 }
 
-export default function DatasetViewer({ data }: IDatasetViewerProps) {
+export default function DatasetViewer({ data, isZoom = false }: IDatasetViewerProps) {
     const { type } = data
 
     // eslint-disable-next-line default-case
     switch (type) {
         case MIME.GRAYSCALE:
-            return <ImageGrayscaleViewer data={data} />
+            return <ImageGrayscaleViewer data={data} isZoom={isZoom} />
     }
     return (
         <p

diff --git a/console/src/components/Viewer/ImageGrayscaleViewer.tsx b/console/src/components/Viewer/ImageGrayscaleViewer.tsx
@@ -21,20 +21,22 @@ export default function ImageGrayscaleViewer({ isZoom = false, data }: IImageVie
 
     if (!isZoom) {
         return (
-            <div className='flowContainer'>
+            <div className='fullsize'>
                 <canvas
                     ref={canvasRef}
                     style={{
                         zIndex: 1,
                         objectFit: 'contain',
+                        width: '100%',
+                        height: '100%',
                     }}
                 />
             </div>
         )
     }
 
     return (
-        <div className='flowContainer'>
+        <div className='fullsize'>
             <ZoomWrapper>
                 <canvas
                     ref={canvasRef}

diff --git a/console/src/components/Viewer/ImageViewer.tsx b/console/src/components/Viewer/ImageViewer.tsx
@@ -14,13 +14,14 @@ export default function ImageViewer({ isZoom = false, data }: IImageViewerProps)
     const scale = React.useMemo(() => {
         return isZoom ? 500 / 28 : 2
     }, [isZoom])
+    const [image] = React.useState('')
 
     useEffect(() => {
         if (canvasRef.current) {
             const canvas = canvasRef.current
             drawGrayscale(canvas, data.src, 28, 28, scale)
             // let blob: Blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg'))
-            // url = URL.createObjectURL(blob)
+            // let url = URL.createObjectURL(blob)
             // setImage(url)
         }
         return () => {
@@ -30,7 +31,7 @@ export default function ImageViewer({ isZoom = false, data }: IImageViewerProps)
     }, [canvasRef, scale, data])
 
     return (
-        <div className='flowContainer'>
+        <div className='fullsize' style={{ height: '100%' }}>
             <Wrapper
                 // @ts-ignore
                 isTools={isZoom ? false : undefined}
@@ -40,9 +41,10 @@ export default function ImageViewer({ isZoom = false, data }: IImageViewerProps)
                     style={{
                         zIndex: 1,
                         objectFit: 'contain',
+                        display: 'none',
                     }}
                 />
-                {/* <img src={image} width='auto' height='500px' /> */}
+                <img src={image} width='auto' height='100%' alt='dataset view' />
             </Wrapper>
         </div>
     )

diff --git a/console/src/i18n/locales.ts b/console/src/i18n/locales.ts
@@ -628,6 +628,9 @@ const locales0 = {
     'dataset version reverted': {
         en: 'dataset version reverted',
     },
+    'Exit Fullscreen': {
+        en: 'Exit Fullscreen',
+    },
 }
 
 export const locales: { [key in keyof typeof locales0]: ILocaleItem } = locales0