From 77def3b1f67083704ca6b9f7788c2096a893aa85 Mon Sep 17 00:00:00 2001 From: Aries Date: Thu, 18 Jul 2024 11:17:19 +0800 Subject: [PATCH] Improvement - dirent grid view mode interactive experience (#6362) * Improvement - dirent grid view mode interactive experience * Fix - code formatting --- frontend/.eslintrc.json | 13 +++- .../dirent-grid-view/dirent-grid-item.js | 72 +++++++++++-------- frontend/src/css/grid-view.css | 21 +++--- 3 files changed, 66 insertions(+), 40 deletions(-) diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index 415149d7cb..fc5072ef7c 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -48,6 +48,17 @@ "no-useless-concat": "off", "jsx-a11y/anchor-has-content": "off", "jsx-a11y/href-no-hash": "off", - "jsx-a11y/anchor-is-valid": "off" + "jsx-a11y/anchor-is-valid": "off", + "space-before-blocks": ["warn", "always"], + "space-in-parens": ["warn", "never"], + "keyword-spacing": ["warn", { + "before": true, + "after": true, + "overrides": { + "if" : { + "after": true + } + } + }] } } diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-item.js b/frontend/src/components/dirent-grid-view/dirent-grid-item.js index 6b23d6831c..cf4f98ddc5 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-item.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-item.js @@ -40,14 +40,20 @@ class DirentGridItem extends React.Component { this.canDrag = modify; } + this.clickTimeout = null; } - UNSAFE_componentWillReceiveProps(nextProps) { - this.setState({isGridSelected: false}, () => { - if (nextProps.activeDirent && nextProps.activeDirent.name === nextProps.dirent.name) { - this.setState({isGridSelected: true}); - } - }); + componentWillUnmount() { + if (this.clickTimeout) { + clearTimeout(this.clickTimeout); + } + } + + componentDidUpdate(prevProps) { + if (prevProps.activeDirent !== this.props.activeDirent) { + const isSelected = this.props.activeDirent && this.props.activeDirent.name === this.props.dirent.name; + this.setState({ isGridSelected: isSelected }); + } } onItemMove = (destRepo, dirent, selectedPath, currentPath) => { @@ -57,31 +63,43 @@ class DirentGridItem extends React.Component { onItemClick = (e) => { e.preventDefault(); e.stopPropagation(); + this.setState({isGridSelected: false}); const { dirent, activeDirent } = this.props; - if (dirent.isDir()) { - this.props.onItemClick(dirent); + + if (this.clickTimeout) { + clearTimeout(this.clickTimeout); + this.clickTimeout = null; + this.handleSingleClick(dirent, activeDirent); return; } - // is have preview permission + this.clickTimeout = setTimeout(() => { + this.clickTimeout = null; + this.handleSingleClick(dirent, activeDirent); + }, 250); //A click within 250 milliseconds is considered a single click. + }; + + handleSingleClick = (dirent, activeDirent) => { if (!this.canPreview) { return; } if (dirent === activeDirent) { - this.setState({isGridSelected: false}); - if (Utils.imageCheck(dirent.name)) { - this.props.showImagePopup(dirent); - } else { - this.props.onItemClick(dirent); - } + this.handleDoubleClick(dirent); } else { - this.setState({isGridSelected: false}); this.props.onGridItemClick(this.props.dirent); } }; + handleDoubleClick = (dirent) => { + if (Utils.imageCheck(dirent.name)) { + this.props.showImagePopup(dirent); + } else { + this.props.onItemClick(dirent); + } + }; + onItemLinkClick = (e) => { e.preventDefault(); const dirent = this.props.dirent; @@ -96,11 +114,7 @@ class DirentGridItem extends React.Component { return; } - if (Utils.imageCheck(dirent.name)) { - this.props.showImagePopup(dirent); - } else { - this.props.onItemClick(dirent); - } + this.handleDoubleClick(dirent); }; onGridItemDragStart = (e) => { @@ -211,7 +225,7 @@ class DirentGridItem extends React.Component { for (let i = 0; i < frontName.length; i++) { // Use charCodeAt(i) > 127 to check Chinese and English. // English and symbols occupy 1 position, Chinese and others occupy 2 positions. - frontName.charCodeAt(i) > 127 ? (sum = sum + 2 ) : (sum = sum + 1); + frontName.charCodeAt(i) > 127 ? (sum = sum + 2) : (sum = sum + 1); // When sum position exceeds 20, back string will not be displayed. if (sum > 20) { frontName = frontName.slice(0, i) + '...'; @@ -248,7 +262,6 @@ class DirentGridItem extends React.Component { } let gridClass = 'grid-file-img-link cursor-pointer'; - gridClass += this.state.isGridSelected ? ' grid-selected-active' : ' '; gridClass += this.state.isGridDropTipShow ? ' grid-drop-show' : ' '; let lockedInfo = dirent.is_freezed ? gettext('Frozen by {name}') : gettext('locked by {name}'); @@ -259,7 +272,10 @@ class DirentGridItem extends React.Component { const showName = this.getRenderedText(dirent); return ( -
  • +
  • {showName} : {showName} } diff --git a/frontend/src/css/grid-view.css b/frontend/src/css/grid-view.css index 034a253857..e47f893aed 100644 --- a/frontend/src/css/grid-view.css +++ b/frontend/src/css/grid-view.css @@ -15,12 +15,9 @@ line-height: 0; } -.grid-item:hover .grid-file-img-link { - background: #f8f8f8; -} - -.grid-item:hover a { - color: #eb8205; +.grid-item:hover { + background: #f5f5f5; + border-radius: 5px; } .grid-file-img-link { @@ -67,6 +64,11 @@ word-break: break-all; } +.grid-file-name-link:hover { + color: #212529; + text-decoration: none; +} + .grid-file-locked-icon { position: absolute; bottom: 0; @@ -75,11 +77,8 @@ } .grid-selected-active { - background-color: #f8f8f8; -} - -.grid-link-selected-active { - color: #eb8205; + background-color: #f2f4f6; + border-radius: 5px; } .grid-drop-show {