From 21e844396478daab01138f292970a9afac07b37a Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Wed, 22 May 2024 14:33:03 +0800
Subject: [PATCH] [dir view] redesigned the 'view modes' UI (#6103)

---
 .../src/components/cur-dir-path/dir-tool.js   | 20 ++++++++-----------
 frontend/src/css/toolbar.css                  | 16 ++++++++++-----
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js
index 219ab77b909..95ba12bb96a 100644
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -34,10 +34,6 @@ class DirTool extends React.Component {
     });
   };
 
-  onMouseDown = (e) => {
-    e.stopPropagation();
-  };
-
   hidePopover = (e) => {
     if (e) {
       let dom = e.target;
@@ -85,13 +81,13 @@ class DirTool extends React.Component {
   };
 
   onMenuItemClick = (item) => {
-    const { key: operation, href } = item;
-    switch (operation) {
+    const { key, href } = item;
+    switch (key) {
       case 'Properties':
         this.props.switchViewMode('detail');
         break;
       case 'Tags':
-        this.setState({ isRepoTagDialogOpen: !this.state.isRepoTagDialogOpen });
+        this.setState({isRepoTagDialogOpen: !this.state.isRepoTagDialogOpen});
         break;
       case 'Trash':
         location.href = href;
@@ -112,9 +108,9 @@ class DirTool extends React.Component {
     return list.concat(list2);
   };
 
-  onMenuItemKeyDown = (e) => {
+  onMenuItemKeyDown = (e, item) => {
     if (e.key == 'Enter' || e.key == 'Space') {
-      this.onMenuItemClick(e);
+      this.onMenuItemClick(item);
     }
   };
 
@@ -125,8 +121,8 @@ class DirTool extends React.Component {
     const { repoID } = this.props;
     return (
       <React.Fragment>
-        <div>
-          <div className="view-mode btn-group">
+        <div className="d-flex">
+          <div className="view-modes">
             <button className={`${baseClass} sf3-font-list-view sf3-font ${this.props.currentMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} aria-label={gettext('List')} onClick={this.props.switchViewMode.bind(this, 'list')}></button>
             <button className={`${baseClass} sf3-font-grid-view sf3-font ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} aria-label={gettext('Grid')} onClick={this.props.switchViewMode.bind(this, 'grid')}></button>
           </div>
@@ -148,7 +144,7 @@ class DirTool extends React.Component {
                   return <DropdownItem key={index} divider />;
                 } else {
                   return (
-                    <DropdownItem key={index} onClick={this.onMenuItemClick.bind(this, menuItem)} onKeyDown={this.onMenuItemKeyDown}>{menuItem.value}</DropdownItem>
+                    <DropdownItem key={index} onClick={this.onMenuItemClick.bind(this, menuItem)} onKeyDown={this.onMenuItemKeyDown.bind(this, menuItem)}>{menuItem.value}</DropdownItem>
                   );
                 }
               })}
diff --git a/frontend/src/css/toolbar.css b/frontend/src/css/toolbar.css
index 8fbdcd53469..6a72d4f7543 100644
--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -51,16 +51,22 @@
 /* end file-operation toolbar */
 
 /* begin view-mode toolbar */
+.view-modes {
+  padding: 2px;
+  background-color: #e5e6e7;
+  border-radius: 3px;
+  height: 32px;
+}
 .sf-view-mode-btn {
   width: 44px;
-  height: 32px;
+  height: 28px;
   padding: 0;
-  background-color: #e5e6e7;
+  background-color: transparent;
   color: #444;
   font-size: 14px;
-  line-height: 30px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
+  line-height: 2;
+  border: 0;
+  border-radius: 2px;
 }
 
 .sf-view-mode-btn:hover {