From 47fdd666d7f7e826be511aa5748dd2c1021455b0 Mon Sep 17 00:00:00 2001 From: llj Date: Wed, 3 Jul 2019 16:12:10 +0800 Subject: [PATCH] [shared dir view] added 'grid mode' --- frontend/src/css/shared-dir-view.css | 31 ++++++ frontend/src/shared-dir-view.js | 115 ++++++++++++++++++-- seahub/templates/view_shared_dir_react.html | 2 + 3 files changed, 136 insertions(+), 12 deletions(-) diff --git a/frontend/src/css/shared-dir-view.css b/frontend/src/css/shared-dir-view.css index 1675e0d985..11f86494ae 100644 --- a/frontend/src/css/shared-dir-view.css +++ b/frontend/src/css/shared-dir-view.css @@ -26,3 +26,34 @@ body { background: #f2f2f2; border-radius: 2px; } + +.sf-view-mode-btn { + padding: 0; + height: 30px; + min-width: 2rem; + color: #aaa; + background-color: #fff; + border: 1px solid #ccc; + line-height: 29px; + font-size: 18px; + border-radius: 2px; +} +.sf-view-mode-btn.current-mode { + background-color: #ccc; + color: #fff; +} +.zip-btn { + height: 30px; + line-height: 30px; + padding: 0 10px; +} +.grid-item .action-icon { + position: absolute; + top: 10px; + right: 24px; + padding: 3px 5px; + background: #fff; + border: 1px solid #eee; + border-radius: 3px; + margin: 0; +} diff --git a/frontend/src/shared-dir-view.js b/frontend/src/shared-dir-view.js index c04b66fb45..a56d57a950 100644 --- a/frontend/src/shared-dir-view.js +++ b/frontend/src/shared-dir-view.js @@ -13,9 +13,10 @@ import ZipDownloadDialog from './components/dialog/zip-download-dialog'; import ImageDialog from './components/dialog/image-dialog'; import './css/shared-dir-view.css'; +import './css/grid-view.css'; let loginUser = window.app.pageOptions.name; -const { token, trafficOverLimit, dirName, sharedBy, path, canDownload } = window.shared.pageOptions; +const { token, trafficOverLimit, dirName, sharedBy, path, canDownload, mode, thumbnailSize } = window.shared.pageOptions; const showDownloadIcon = !trafficOverLimit && canDownload; @@ -44,7 +45,7 @@ class SharedDirView extends React.Component { }); } - seafileAPI.listSharedDir(token, path).then((res) => { + seafileAPI.listSharedDir(token, path, thumbnailSize).then((res) => { const items = res.data['dirent_list']; this.setState({ isLoading: false, @@ -79,7 +80,6 @@ class SharedDirView extends React.Component { } const len = items.length; - const thumbnailSize = 48; const _this = this; let getThumbnail = function(i) { const curItem = items[i]; @@ -110,13 +110,13 @@ class SharedDirView extends React.Component { let pathList = path.substr(0, path.length -1).split('/'); return ( - {dirName} + {dirName} / {pathList.map((item, index) => { if (index > 0 && index != pathList.length - 1) { return ( - {pathList[index]} + {pathList[index]} / ); @@ -199,6 +199,7 @@ class SharedDirView extends React.Component { } render() { + const modeBaseClass = 'btn btn-secondary btn-icon sf-view-mode-btn'; return (
@@ -214,9 +215,15 @@ class SharedDirView extends React.Component {

{gettext('Shared by: ')}{sharedBy}

{gettext('Current path: ')}{this.renderPath()}

- {showDownloadIcon && - - } +
+
+ + +
+ {showDownloadIcon && + + } +
{errorMsg}

; } - return ( + return mode == 'list' ? ( @@ -285,6 +293,17 @@ class Content extends React.Component { })}
+ ) : ( +
    + {items.map((item, index) => { + return ; + })} +
); } } @@ -311,7 +330,7 @@ class Item extends React.Component { this.props.zipDownloadFolder.bind(this, this.props.item.folder_path)(); } - handleFileNameLinkClick = (e) => { + handleFileClick = (e) => { const item = this.props.item; if (!Utils.imageCheck(item.file_name)) { return; @@ -330,7 +349,7 @@ class Item extends React.Component { - {item.folder_name} + {item.folder_name} {moment(item.last_modified).format('YYYY-MM-DD')} @@ -354,7 +373,7 @@ class Item extends React.Component { } - {item.file_name} + {item.file_name} {Utils.bytesToSize(item.size)} {moment(item.last_modified).format('YYYY-MM-DD')} @@ -370,6 +389,78 @@ class Item extends React.Component { } } +class GridItem extends React.Component { + + constructor(props) { + super(props); + this.state = { + isIconShown: false + }; + } + + handleMouseOver = () => { + this.setState({isIconShown: true}); + } + + handleMouseOut = () => { + this.setState({isIconShown: false}); + } + + zipDownloadFolder = (e) => { + e.preventDefault(); + this.props.zipDownloadFolder.bind(this, this.props.item.folder_path)(); + } + + handleFileClick = (e) => { + const item = this.props.item; + if (!Utils.imageCheck(item.file_name)) { + return; + } + + e.preventDefault(); + this.props.showImagePopup(item); + } + + render() { + const item = this.props.item; + const { isIconShown } = this.state; + + if (item.is_dir) { + const folderURL = `?p=${encodeURIComponent(item.folder_path.substr(0, item.folder_path.length - 1))}&mode=${mode}`; + return ( +
  • + + + + {item.folder_name} + {showDownloadIcon && + + + } +
    • + ); + } else { + const fileURL = `${siteRoot}d/${token}/files/?p=${encodeURIComponent(item.file_path)}`; + const thumbnailURL = item.encoded_thumbnail_src ? `${siteRoot}${item.encoded_thumbnail_src}` : ''; + return ( +
  • + + {thumbnailURL ? + : + + } + + {item.file_name} + {showDownloadIcon && + + + } +
    • + ); + } + } +} + ReactDOM.render( , document.getElementById('wrapper') diff --git a/seahub/templates/view_shared_dir_react.html b/seahub/templates/view_shared_dir_react.html index f719d4e697..5817fa2c1a 100644 --- a/seahub/templates/view_shared_dir_react.html +++ b/seahub/templates/view_shared_dir_react.html @@ -23,6 +23,8 @@ sharedBy: '{{ username|email2nickname|escapejs }}', path: '{{ path|escapejs }}', token: '{{ token }}', + mode: '{{ mode }}', + thumbnailSize: {{ thumbnail_size }}, trafficOverLimit: {% if traffic_over_limit %}true{% else %}false{% endif %}, canDownload: {% if permissions.can_download %}true{% else %}false{% endif %} }