change checkbox style

haiwen · Jan 2, 2025 · 1e9d5b2 · 1e9d5b2
1 parent af8dd37
commit 1e9d5b2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -829,16 +829,21 @@ class DirentListItem extends React.Component {
             onMouseDown={this.onItemMouseDown}
             onContextMenu={this.onItemContextMenu}
           >
-            <td className={`pl10 pr-2 ${this.state.isDragTipShow ? 'tr-drag-effect' : ''}`}>
-              <input
+            <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')}>
+              {/* <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')}
-              />
+              /> */}
+              <div
+                className={classnames('v-Checkbox-icon', { 'v-Checkbox-icon-selected': isSelected }, { 'v-Checkbox-icon-highlight': this.state.highlight },)}
+              >
+                <i className="sf2-icon-tick"></i>
+              </div>
             </td>
             <td className="pl-2 pr-2">
               {dirent.starred !== undefined &&

diff --git a/frontend/src/tag/views/tag-files/tag-file/index.js b/frontend/src/tag/views/tag-files/tag-file/index.js
@@ -102,6 +102,12 @@ const TagFile = ({ isSelected, repoID, file, tagsData, onSelectFile, reSelectFil
           checked={isSelected}
           aria-label={isSelected ? gettext('Unselect this item') : gettext('Select this item')}
         />
+        {/* <div class="v-Checkbox-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" class="u-standardicon v-Icon i-checkbox" role="presentation">
+              <path class="tick" fill="none" d="m2.75 6.325 1.95 1.95 4.55-4.55"></path>
+              <line fill="none" x1="4" x2="8" y1="6" y2="6"></line>
+          </svg>
+        </div> */}
       </td>
       <td className="pl-2 pr-2">
         <div className="dir-icon">

diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
@@ -188,6 +188,37 @@ a, a:hover { color: #ec8000; }
   cursor: pointer;
 }
 
+.v-Checkbox-icon {
+  width: 14px;
+  height: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  background-color: #fff;
+  border: 1px solid #c1c5c8;
+}
+
+.v-Checkbox-icon.v-Checkbox-icon-highlight {
+  background-color: #c1c5c8;
+}
+
+.v-Checkbox-icon.v-Checkbox-icon-selected {
+  background-color: #ff9800;
+  border: 1px solid #ff9800;
+}
+
+.v-Checkbox-icon.v-Checkbox-icon-highlight.v-Checkbox-icon-selected {
+  background-color: #eb8205;
+  border: 1px solid #eb8205;
+}
+
+.v-Checkbox-icon .sf2-icon-tick {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+}
+
 .tr-drag-effect { /* just for drag&drop item */
   background-image: url('../img/grippy_large.png');
   background-repeat: no-repeat;