optimize: toolbar of web UI

XZB-1248 · Sep 20, 2022 · c8437aa · c8437aa
1 parent f69822b
commit c8437aa
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 27 deletions.
diff --git a/web/src/components/desktop.js b/web/src/components/desktop.js
@@ -40,7 +40,7 @@ function ScreenModal(props) {
 
     function initCanvas() {
         if (!canvas) return;
-        ctx = canvas.getContext('2d');
+        ctx = canvas.getContext('2d', {alpha: false});
     }
     function construct() {
         if (ctx !== null) {

diff --git a/web/src/components/explorer.js b/web/src/components/explorer.js
@@ -19,7 +19,7 @@ import dayjs from "dayjs";
 import i18n from "../locale/locale";
 import {VList} from "virtuallist-antd";
 import {
-    CloseOutlined,
+    CloseOutlined, FullscreenOutlined,
     HomeOutlined,
     LoadingOutlined,
     QuestionCircleOutlined,
@@ -87,27 +87,10 @@ function FileBrowser(props) {
     const options = {
         show: true,
         search: true,
+        reload: false,
         density: false,
         setting: false,
     };
-    const toolbar = {
-        settings: [
-            {
-                icon: <UploadOutlined/>,
-                tooltip: i18n.t('upload'),
-                key: 'upload',
-                onClick: uploadFile
-            },
-            {
-                icon: <ReloadOutlined/>,
-                tooltip: i18n.t('reload'),
-                key: 'reload',
-                onClick: () => {
-                    tableRef.current.reload();
-                }
-            }
-        ]
-    };
     const tableRef = useRef();
     const virtualTable = useMemo(() => {
         return VList({
@@ -127,7 +110,6 @@ function FileBrowser(props) {
         >
             <a>{i18n.t('delete')}</a>
         </Popconfirm>
-
     </Space>);
     useEffect(() => {
         if (props.device) {
@@ -433,7 +415,6 @@ function FileBrowser(props) {
             destroyOnClose={true}
             modalTitle={i18n.t('fileExplorer')}
             footer={null}
-            height={500}
             width={830}
             bodyStyle={{
                 padding: 0
@@ -442,10 +423,13 @@ function FileBrowser(props) {
         >
             <ProTable
                 rowKey='name'
+                tableStyle={{
+                    minHeight: '320px',
+                    maxHeight: '320px'
+                }}
                 onRow={file => ({
                     onDoubleClick: onRowClick.bind(null, file)
                 })}
-                toolbar={toolbar}
                 scroll={{scrollToFirstRowOnChange: true, y: 300}}
                 search={false}
                 size='small'
@@ -473,6 +457,20 @@ function FileBrowser(props) {
                 actionRef={tableRef}
                 components={virtualTable}
             />
+            <Button
+                style={{right:'59px'}}
+                className='header-button'
+                icon={<ReloadOutlined />}
+                onClick={() => {
+                    tableRef.current.reload();
+                }}
+            />
+            <Button
+                style={{right:'115px'}}
+                className='header-button'
+                icon={<UploadOutlined />}
+                onClick={uploadFile}
+            />
             <input
                 id='uploader'
                 type='file'

diff --git a/web/src/components/procmgr.js b/web/src/components/procmgr.js
@@ -97,7 +97,6 @@ function ProcessMgr(props) {
             destroyOnClose={true}
             modalTitle={i18n.t('processManager')}
             footer={null}
-            height={500}
             width={400}
             bodyStyle={{
                 padding: 0
@@ -111,9 +110,6 @@ function ProcessMgr(props) {
                     minHeight: '355px',
                     maxHeight: '355px'
                 }}
-                toolbar={{
-                    actions: []
-                }}
                 scroll={{scrollToFirstRowOnChange: true, y: 300}}
                 search={false}
                 size='small'