change checkbox default style (#7298)

* change checkbox style

* change checkbox color to blue

* use default checkbox

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 { width, isFixed, className, onClick = () => {}, title = '', ariaLabel = '' } = header;
-            const validWidth = isFixed ? width : (containerWidth - fixedWidth) * width;
+            return (
-            return (<th key={index} style={{ width: validWidth }} className={className}>{thChildren}</th>);
+              <th
+                key={index}
+                style={{ width: isFixed ? width : (containerWidth - fixedWidth) * width }}
+                className={className}
+                onClick={onClick}
+                title={title}
+                aria-label={ariaLabel}
+              >
+                {header.children}
+              </th>
+            );
           })}
         </tr>
       </thead>

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -829,15 +829,19 @@ class DirentListItem extends React.Component {
             onMouseDown={this.onItemMouseDown}
             onContextMenu={this.onItemContextMenu}
           >
-            <td className={`pl10 pr-2 ${this.state.isDragTipShow ? 'tr-drag-effect' : ''}`}>
+            <td
+              className={classnames('pl10 pr-2 cursor-pointer', { 'tr-drag-effect': this.state.isDragTipShow })}
+              onClick={this.onItemSelected}
+              role="button"
+              aria-label={isSelected ? gettext('Unselect this item') : gettext('Select this item')}
+            >
               <input
                 type="checkbox"
-                className="vam"
+                className="vam cursor-pointer"
                 onClick={this.onItemSelected}
                 style={{ position: 'relative', top: -1 }}
                 onChange={() => {}}
                 checked={isSelected}
-                aria-label={isSelected ? gettext('Unselect this item') : gettext('Select this item')}
               />
             </td>
             <td className="pl-2 pr-2">

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -697,36 +697,52 @@ class DirentListView extends React.Component {
       ];
     }
 
-    // sort
+    const sortIcon = <span className={`sf3-font sf3-font-down ${sortOrder == 'asc' ? 'rotate-180 d-inline-block' : ''}`}></span>;
-    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>;
     return [
-      { isFixed: true, width: 31, className: 'pl10 pr-2', children: (
+      { isFixed: true,
-        <input
+        width: 31,
-          type="checkbox"
+        className: 'pl10 pr-2 cursor-pointer',
-          className="vam"
+        title: this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items'),
-          onChange={this.props.onAllItemSelected}
+        ariaLabel: this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items'),
-          checked={this.props.isAllItemSelected}
+        children: (
-          title={this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items')}
+          <input
-          aria-label={this.props.isAllItemSelected ? gettext('Unselect all items') : gettext('Select all items')}
+            type="checkbox"
-          disabled={direntList.length === 0}
+            className="vam cursor-pointer"
-        />
+            checked={this.props.isAllItemSelected}
-      ) }, {
+            disabled={direntList.length === 0}
+          />
+        ),
+        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,
-        isFixed: false, width: 0.15, children: (<a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a>)
+        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>)
       }
     ];
   };
@@ -736,7 +752,6 @@ class DirentListView extends React.Component {
 
     const isDesktop = Utils.isDesktop();
     const repoEncrypted = this.props.currentRepoInfo.encrypted;
-    const headers = this.getHeaders(isDesktop);
 
     return (
       <div
@@ -752,7 +767,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) => {