浏览代码

[frontend]Implement UI for actions toolbar (#3459)

* [frontend]Implement UI for actions toolbar
Nidhi Bhat G 2 年之前
父节点
当前提交
3ce4adb1e5

+ 56 - 1
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.scss

@@ -14,6 +14,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 @use 'variables' as vars;
+@use 'mixins';
+
+$icon-margin: 5px;
+$action-dropdown-width: 214px;
 
 .hue-storage-browser-tabContent {
   background-color: vars.$fluidx-white;
@@ -42,7 +46,7 @@
 
   .hue-storage-browser__path-browser-panel {
     display: flex;
-    margin-top: vars.$fluidx-spacing-xxs;
+    margin: vars.$fluidx-spacing-xs 0;
     //TODO: Remove nesting of classes.
     .hue-storage-browser__filePath {
       flex: 0 0 auto;
@@ -52,3 +56,54 @@
     }
   }
 }
+
+.hue-storage-browser__actions-bar {
+  display: flex;
+  margin: vars.$fluidx-spacing-s 0;
+  justify-content: space-between;
+  @include mixins.hue-svg-icon__d3-conflict;
+}
+
+.hue-storage-browser__search {
+  flex: 0 0 auto;
+  display: flex;
+}
+
+.hue-storage-browser__actions-bar-right {
+  display: flex;
+  height: 32px;
+}
+
+.hue-storage-browser__bulk-action-btn {
+  flex: 0 0 auto;
+  color: vars.$fluidx-blue-600;
+  margin-right: vars.$fluidx-spacing-xs;
+  border: solid 1px vars.$fluidx-gray-300;
+  box-shadow: none;
+  background-color: transparent;
+
+  .cdp-icon-dropdown {
+    margin-left: $icon-margin;
+  }
+}
+
+.hue-storage-browser__new-btn {
+  flex: 0 0 auto;
+  color: vars.$fluidx-white;
+  background-color: vars.$fluidx-blue-600;
+  border: solid 1px vars.$fluidx-blue-600;
+  box-shadow: none;
+
+  .cdp-icon-dropdown {
+    margin-left: $icon-margin;
+  }
+
+  .cdp-icon-plus-circle {
+    margin-right: $icon-margin;
+  }
+}
+
+.hue-storage-browser__actions-dropdown {
+  width: $action-dropdown-width;
+  @include mixins.hue-svg-icon__d3-conflict;
+}

+ 109 - 1
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx

@@ -15,10 +15,22 @@
 // limitations under the License.
 
 import React, { useState, useEffect } from 'react';
-import { Spin } from 'antd';
+import { Spin, Input, Dropdown, Button } from 'antd';
+import type { MenuProps } from 'antd';
 
 import { i18nReact } from '../../../../utils/i18nReact';
 import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
+import CopyClipboardIcon from '@cloudera/cuix-core/icons/react/CopyClipboardIcon';
+import DataMovementIcon from '@cloudera/cuix-core/icons/react/DataMovementIcon';
+import DeleteIcon from '@cloudera/cuix-core/icons/react/DeleteIcon';
+import DownloadIcon from '@cloudera/cuix-core/icons/react/DownloadIcon';
+import DropDownIcon from '@cloudera/cuix-core/icons/react/DropdownIcon';
+import FolderIcon from '@cloudera/cuix-core/icons/react/ProjectIcon';
+import ImportIcon from '@cloudera/cuix-core/icons/react/ImportIcon';
+import PlusCircleIcon from '@cloudera/cuix-core/icons/react/PlusCircleIcon';
+//Todo: Use cuix icon (Currently fileIcon does not exist in cuix)
+import { FileOutlined } from '@ant-design/icons';
+
 import PathBrowser from '../../../../reactComponents/FileChooser/PathBrowser/PathBrowser';
 import { fetchFiles } from '../../../../reactComponents/FileChooser/api';
 import { PathAndFileData } from '../../../../reactComponents/FileChooser/types';
@@ -44,6 +56,71 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
 
   const { t } = i18nReact.useTranslation();
 
+  const newActionsMenuItems: MenuProps['items'] = [
+    {
+      key: 'create',
+      type: 'group',
+      label: t('CREATE'),
+      children: [
+        {
+          icon: <FileOutlined />,
+          key: 'new_file',
+          label: t('New File')
+        },
+        {
+          icon: <FolderIcon />,
+          key: 'new_folder',
+          label: t('New Folder')
+        }
+      ]
+    },
+    {
+      key: 'upload',
+      type: 'group',
+      label: t('UPLOAD'),
+      children: [
+        {
+          icon: <ImportIcon />,
+          key: 'upload_file',
+          label: t('File')
+        },
+        {
+          icon: <ImportIcon />,
+          key: 'upload_folder',
+          label: t('Folder')
+        },
+        {
+          icon: <ImportIcon />,
+          key: 'upload_zip',
+          label: t('Zip Folder')
+        }
+      ]
+    }
+  ];
+
+  const bulkActionsMenuItems: MenuProps['items'] = [
+    {
+      icon: <CopyClipboardIcon />,
+      key: 'copy',
+      label: t('Copy')
+    },
+    {
+      icon: <DataMovementIcon />,
+      key: 'move',
+      label: t('Move')
+    },
+    {
+      icon: <DownloadIcon />,
+      key: 'download',
+      label: t('Download')
+    },
+    {
+      icon: <DeleteIcon />,
+      key: 'delete',
+      label: t('Delete')
+    }
+  ];
+
   useEffect(() => {
     setloadingFiles(true);
     fetchFiles(filePath)
@@ -79,6 +156,37 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
             showIcon={false}
           />
         </div>
+        <div className="hue-storage-browser__actions-bar">
+          <Input className="hue-storage-browser__search" placeholder={t('Search')} />
+          <div className="hue-storage-browser__actions-bar-right">
+            <Dropdown
+              overlayClassName="hue-storage-browser__actions-dropdown"
+              menu={{
+                items: bulkActionsMenuItems,
+                className: 'hue-storage-browser__action-menu'
+              }}
+              trigger={['hover', 'click']}
+            >
+              <Button className="hue-storage-browser__bulk-action-btn">
+                {t('Bulk Actions')}
+                <DropDownIcon />
+              </Button>
+            </Dropdown>
+            <Dropdown
+              overlayClassName="hue-storage-browser__actions-dropdown"
+              menu={{
+                items: newActionsMenuItems,
+                className: 'hue-storage-browser__action-menu'
+              }}
+              trigger={['hover', 'click']}
+            >
+              <Button className="hue-storage-browser__new-btn" icon={<PlusCircleIcon />}>
+                {t('New')}
+                <DropDownIcon />
+              </Button>
+            </Dropdown>
+          </div>
+        </div>
       </div>
     </Spin>
   );

+ 8 - 0
desktop/core/src/desktop/js/components/styles/_mixins.scss

@@ -261,3 +261,11 @@ $hue-panel-border-radius: 3px;
     flex: 1;
   }
 }
+
+@mixin hue-svg-icon__d3-conflict {
+  svg {
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+  }
+}

+ 0 - 2
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/Breadcrumb/Breadcrumb.tsx

@@ -14,8 +14,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Property } from '@typescript-eslint/types/dist/ast-spec';
-import { min } from 'lodash';
 import React from 'react';
 
 import OverflowingItem from '../OverflowingItem';

文件差异内容过多而无法显示
+ 313 - 277
package-lock.json


+ 1 - 0
package.json

@@ -142,6 +142,7 @@
     "snarkdown": "2.0.0",
     "source-map-loader": "3.0.0",
     "style-loader": "2.0.0",
+    "styled-components": "6.0.8",
     "stylelint": "14.3.0",
     "stylelint-config-standard": "24.0.0",
     "stylelint-config-standard-scss": "3.0.0",

+ 4 - 0
webpack.config.js

@@ -77,6 +77,10 @@ const config = {
           },
         },]
       },
+      {
+        test: /\.css$/i,
+        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
+      },
       {
         test: /\.less$/i,
         use: [

部分文件因为文件数量过多而无法显示