change checkbox style

haiwen · Jan 3, 2025 · 52f57d8 · 52f57d8
1 parent db287cc
commit 52f57d8
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 41 deletions.
diff --git a/frontend/src/components/common/fixed-width-table.js b/frontend/src/components/common/fixed-width-table.js
@@ -26,9 +26,19 @@ const FixedWidthTable = ({ className, headers, theadOptions = {}, children }) =>
       <thead { ...theadOptions }>
         <tr>
           {headers.map((header, index) => {
-            const { width, isFixed, children: thChildren, className } = header;
-            const validWidth = isFixed ? width : (containerWidth - fixedWidth) * width;
-            return (<th key={index} style={{ width: validWidth }} className={className}>{thChildren}</th>);
+            const { width, isFixed, className, onClick = () => {}, title = '', ariaLabel = '' } = header;
+            return (
+              <th
+                key={index}
+                style={{ width: isFixed ? width : (containerWidth - fixedWidth) * width }}
+                className={className}
+                onClick={onClick}
+                title={title}
+                aria-label={ariaLabel}
+              >
+                {header.children}
+              </th>
+            );
           })}
         </tr>
       </thead>

diff --git a/frontend/src/components/common/seahub-checkbox.js b/frontend/src/components/common/seahub-checkbox.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import '../../css/seahub-checkbox.css';
+
+const SeahubCheckbox = ({ isSelected, highlight }) => {
+  return (
+    <div
+      className={classnames('seahub-checkbox-icon', {
+        'seahub-checkbox-icon-selected': isSelected,
+      }, {
+        'seahub-checkbox-icon-highlight': highlight,
+      })}
+    >
+      <i className="sf2-icon-tick"></i>
+    </div>
+  );
+};
+
+SeahubCheckbox.propTypes = {
+  isSelected: PropTypes.bool,
+  highlight: PropTypes.bool,
+};
+
+export default SeahubCheckbox;
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -23,6 +23,7 @@ import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-di
 import FileAccessLog from '../dialog/file-access-log';
 import toaster from '../toast';
 import FileTag from './file-tag';
+import SeahubCheckbox from '../common/seahub-checkbox';
 
 import '../../css/dirent-list-item.css';
 
@@ -829,16 +830,13 @@ class DirentListItem extends React.Component {
             onMouseDown={this.onItemMouseDown}
             onContextMenu={this.onItemContextMenu}
           >
-            <td className={`pl10 pr-2 ${this.state.isDragTipShow ? 'tr-drag-effect' : ''}`}>
-              <input
-                type="checkbox"
-                className="vam"
-                onClick={this.onItemSelected}
-                style={{ position: 'relative', top: -1 }}
-                onChange={() => {}}
-                checked={isSelected}
-                aria-label={isSelected ? gettext('Unselect this item') : gettext('Select this item')}
-              />
+            <td
+              className={`pl10 pr-2 cursor-pointer ${this.state.isDragTipShow ? 'tr-drag-effect' : ''}`}
+              onClick={this.onItemSelected}
+              role="button"
+              aria-label={isSelected ? gettext('Unselect this item') : gettext('Select this item')}
+            >
+              <SeahubCheckbox isSelected={isSelected} highlight={this.state.highlight} />
             </td>
             <td className="pl-2 pr-2">
               {dirent.starred !== undefined &&

diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -22,6 +22,7 @@ import EmptyTip from '../empty-tip';
 import imageAPI from '../../utils/image-api';
 import { seafileAPI } from '../../utils/seafile-api';
 import FixedWidthTable from '../common/fixed-width-table';
+import SeahubCheckbox from '../common/seahub-checkbox';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -680,7 +681,7 @@ class DirentListView extends React.Component {
   };
 
   getHeaders = (isDesktop) => {
-    const { direntList, sortBy, sortOrder } = this.props;
+    const { sortBy, sortOrder } = this.props;
     if (!isDesktop) {
       return [
         { isFixed: false, width: 0.12 },
@@ -689,36 +690,45 @@ class DirentListView extends React.Component {
       ];
     }
 
-    // sort
-    const sortByName = sortBy == 'name';
-    const sortByTime = sortBy == 'time';
-    const sortBySize = sortBy == 'size';
-    const sortIcon = sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;
+    const sortIcon = <span className={`sf3-font sf3-font-down ${sortOrder == 'asc' ? 'rotate-180 d-inline-block' : ''}`}></span>;
     return [
-      { isFixed: true, width: 31, className: 'pl10 pr-2', children: (
-        <input
-          type="checkbox"
-          className="vam"
-          onChange={this.props.onAllItemSelected}
-          checked={this.props.isAllItemSelected}
-          title={this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items')}
-          aria-label={this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items')}
-          disabled={direntList.length === 0}
-        />
-      ) }, {
+      { isFixed: true,
+        width: 31,
+        className: 'pl10 pr-2 cursor-pointer',
+        title: this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items'),
+        ariaLabel: this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items'),
+        children: (<SeahubCheckbox isSelected={this.props.isAllItemSelected} highlight={false} />),
+        onClick: (e) => {
+          e.stopPropagation();
+          this.props.onAllItemSelected();
+        }
+      },
+      {
         isFixed: true, width: 32, className: 'pl-2 pr-2', // star
-      }, {
+      },
+      {
         isFixed: true, width: 40, className: 'pl-2 pr-2', // icon
-      }, {
-        isFixed: false, width: 0.5, children: (<a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a>),
-      }, {
+      },
+      {
+        isFixed: false,
+        width: 0.5,
+        children: (<a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortBy == 'name' && sortIcon}</a>),
+      },
+      {
         isFixed: false, width: 0.06, // tag
-      }, {
+      },
+      {
         isFixed: false, width: 0.18, // operation
-      }, {
-        isFixed: false, width: 0.11, children: (<a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a>)
-      }, {
-        isFixed: false, width: 0.15, children: (<a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a>)
+      },
+      {
+        isFixed: false,
+        width: 0.11,
+        children: (<a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBy == 'size' && sortIcon}</a>)
+      },
+      {
+        isFixed: false,
+        width: 0.15,
+        children: (<a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortBy == 'time' && sortIcon}</a>)
       }
     ];
   };
@@ -728,7 +738,6 @@ class DirentListView extends React.Component {
 
     const isDesktop = Utils.isDesktop();
     const repoEncrypted = this.props.currentRepoInfo.encrypted;
-    const headers = this.getHeaders(isDesktop);
 
     return (
       <div
@@ -744,7 +753,7 @@ class DirentListView extends React.Component {
         {direntList.length > 0 && (
           <FixedWidthTable
             className={classnames('table-hover', { 'table-thead-hidden': !isDesktop })}
-            headers={headers}
+            headers={this.getHeaders(isDesktop)}
             theadOptions={isDesktop ? { onMouseDown: this.onThreadMouseDown, onContextMenu: this.onThreadContextMenu } : {}}
           >
             {direntList.map((dirent, index) => {

diff --git a/frontend/src/css/seahub-checkbox.css b/frontend/src/css/seahub-checkbox.css
@@ -0,0 +1,36 @@
+:root {
+  --seahub-checkbox-hover-color: #c1c5c8;
+  --seahub-checkbox-selected-color: #ff9800;
+  --seahub-checkbox-hover-selected-color: #eb8205;
+}
+
+.seahub-checkbox-icon {
+  width: 14px;
+  height: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  background-color: #fff;
+  border: 1px solid var(--seahub-checkbox-hover-color);
+}
+
+.seahub-checkbox-icon.seahub-checkbox-icon-highlight {
+  background-color: var(--seahub-checkbox-hover-color);
+}
+
+.seahub-checkbox-icon.seahub-checkbox-icon-selected {
+  background-color: var(--seahub-checkbox-selected-color);
+  border: 1px solid var(--seahub-checkbox-selected-color);
+}
+
+.seahub-checkbox-icon.seahub-checkbox-icon-highlight.seahub-checkbox-icon-selected {
+  background-color: var(--seahub-checkbox-hover-selected-color);
+  border: 1px solid var(--seahub-checkbox-hover-selected-color);
+}
+
+.seahub-checkbox-icon .sf2-icon-tick {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+}