From 9a43e08279ad6c3f4ced5801a4e7553f0ce08e8c Mon Sep 17 00:00:00 2001 From: llj Date: Thu, 25 Jul 2019 15:06:58 +0800 Subject: [PATCH] [Activities] mobile: redesigned it (#3913) --- frontend/src/css/files-activities.css | 34 +-- .../src/pages/dashboard/files-activities.js | 207 +++++++++++------- 2 files changed, 144 insertions(+), 97 deletions(-) diff --git a/frontend/src/css/files-activities.css b/frontend/src/css/files-activities.css index 9a409343d7..36ce527858 100644 --- a/frontend/src/css/files-activities.css +++ b/frontend/src/css/files-activities.css @@ -1,16 +1,20 @@ -table tr .activity-date { - border-top: 0; -} -table .activity-detail { - word-break: break-word; -} -table .activity-detail div { - display: inline; -} -table .activity-detail span { - color: #888; -} -table .activity-detail span:hover { - color: #333; +.activity-details { text-decoration: underline; -} \ No newline at end of file + cursor: pointer; +} +.activity-details:hover { + color: #333; +} +.mobile-activity-op { + display: inline-block; + margin: 0 0 .2em .8em; + padding: 0 .5em; + background: #ffbd6f; + border-radius: 2px; + color: #fff; + font-size: 0.75rem; +} +.mobile-activity-time { + display: inline-block; + margin-bottom: .2em; +} diff --git a/frontend/src/pages/dashboard/files-activities.js b/frontend/src/pages/dashboard/files-activities.js index 4b29154d4c..7bd0cd6350 100644 --- a/frontend/src/pages/dashboard/files-activities.js +++ b/frontend/src/pages/dashboard/files-activities.js @@ -8,6 +8,7 @@ import Loading from '../../components/loading'; import Activity from '../../models/activity'; import ListCreatedFileDialog from '../../components/dialog/list-created-files-dialog'; import ModalPortal from '../../components/modal-portal'; + import '../../css/files-activities.css'; moment.locale(window.app.config.lang); @@ -17,20 +18,39 @@ const contentPropTypes = { items: PropTypes.array.isRequired, }; +const isDesktop = window.innerWidth >= 768; + class FileActivitiesContent extends Component { render() { - let {items, isLoadingMore} = this.props; + let { items, isLoadingMore } = this.props; + + const desktopThead = ( + + + {/* avatar */} + {gettext('User')} + {gettext('Operation')} + {gettext('File')} / {gettext('Library')} + {gettext('Time')} + + + ); + + const mobileThead = ( + + + + + + + + ); + return ( - - - - - - - - +
+ {isDesktop ? desktopThead : mobileThead} {items.map((item, index) => { return ( @@ -75,7 +95,7 @@ class ActivityItem extends Component { render() { let {item, index, items} = this.props; - let op, details; + let op, details, moreDetails = false; let userProfileURL = `${siteRoot}profile/${encodeURIComponent(item.author_email)}/`; let libURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + '/'; @@ -86,34 +106,36 @@ class ActivityItem extends Component { switch(item.op_type) { case 'create': op = gettext('Created library'); - details = ; + details = libLink; break; case 'rename': op = gettext('Renamed library'); - details = ; + details = {item.old_repo_name} => {libLink}; break; case 'delete': op = gettext('Deleted library'); - details = ; + details = item.repo_name; break; case 'recover': op = gettext('Restored library'); - details = ; + details = libLink; break; case 'clean-up-trash': - if (item.days == 0) { - details = ; - } else { - details = ; - } op = gettext('Cleaned trash'); + if (item.days == 0) { + details = gettext('Removed all items from trash.'); + } else { + details = gettext('Removed items older than {n} days from trash.').replace('{n}', item.days); + } + moreDetails = true; break; } } else if (item.obj_type == 'draft') { let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`; let fileLink = {item.name}; op = gettext('Publish draft'); - details = ; + details = fileLink; + moreDetails = true; } else if (item.obj_type == 'files') { let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`; if (item.name.endsWith('(draft).md')) { @@ -124,91 +146,87 @@ class ActivityItem extends Component { fileLink = item.name; } let fileCount = item.createdFilesCount - 1; - let firstLine = gettext('{file} and {n} other files'); - firstLine = firstLine.replace('{file}', fileLink); - firstLine = firstLine.replace('{n}', fileCount); + let firstLine = gettext('{file} and {n} other files') + .replace('{file}', fileLink) + .replace('{n}', fileCount); op = gettext('Created {n} files').replace('{n}', item.createdFilesCount); - details = - ; + details = ( + +

+ {isDesktop && {gettext('details')}} + + ); + moreDetails = true; } else if (item.obj_type == 'file') { - let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`; - if (item.name.endsWith('(draft).md')) { - fileURL = serviceURL + '/drafts/' + item.draft_id + '/'; - } + const isDraft = item.name.endsWith('(draft).md'); + const fileURL = isDraft ? serviceURL + '/drafts/' + item.draft_id + '/' : + `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`; let fileLink = {item.name}; - if (item.name.endsWith('(draft).md') && !item.draft_id) { + if (isDraft && !item.draft_id) { fileLink = item.name; } - switch(item.op_type) { + switch (item.op_type) { case 'create': - if (item.name.endsWith('(draft).md')) { - op = gettext('Created draft'); - details = ; - break; - } - op = gettext('Created file'); - details = ; + op = isDraft ? gettext('Created draft') : gettext('Created file'); + details = fileLink; + moreDetails = true; break; case 'delete': - if (item.name.endsWith('(draft).md')) { - op = gettext('Deleted draft'); - details = ; - break; - } - op = gettext('Deleted file'); - details = ; + op = isDraft ? gettext('Deleted draft') : gettext('Deleted file'); + details = item.name; + moreDetails = true; break; case 'recover': op = gettext('Restored file'); - details = ; + details = fileLink; + moreDetails = true; break; case 'rename': op = gettext('Renamed file'); - details = ; + details = {item.old_name} => {fileLink}; + moreDetails = true; break; case 'move': - var filePathLink = {item.path}; + const filePathLink = {item.path}; op = gettext('Moved file'); - details = ; + details = {item.old_path} => {filePathLink}; + moreDetails = true; break; case 'edit': // update - if (item.name.endsWith('(draft).md')) { - op = gettext('Updated draft'); - details = ; - break; - } - op = gettext('Updated file'); - details = ; + op = isDraft ? gettext('Updated draft') : gettext('Updated file'); + details = fileLink; + moreDetails = true; break; } } else { // dir let dirURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + Utils.encodePath(item.path); let dirLink = {item.name}; - switch(item.op_type) { + switch (item.op_type) { case 'create': op = gettext('Created folder'); - details = ; + details = dirLink; + moreDetails = true; break; case 'delete': op = gettext('Deleted folder'); - details = ; + details = item.name; + moreDetails = true; break; case 'recover': op = gettext('Restored folder'); - details = ; + details = dirLink; + moreDetails = true; break; case 'rename': op = gettext('Renamed folder'); - details = ; + details = {item.old_name} => {dirLink}; + moreDetails = true; break; case 'move': - var dirPathLink = {item.path}; + const dirPathLink = {item.path}; op = gettext('Moved folder'); - details = ; + details = {item.old_path} => {dirPathLink}; + moreDetails = true; break; } } @@ -221,24 +239,49 @@ class ActivityItem extends Component { return ( - { isShowDate && + {isShowDate && - + } - - - - - {details} - - + {isDesktop ? ( + + + + + + + + ) : ( + + + + + + + )} {this.state.isListCreatedFiles &&
{libLink}{item.old_repo_name} => {libLink}{item.repo_name}{libLink}{gettext('Removed all items from trash.')}
{libLink}		{gettext('Removed items older than {n} days from trash.').replace('{n}', item.days)}
{libLink}		{fileLink}
{smallLibLink}		 -
{' '} - {gettext('details')} -
{smallLibLink} - 		{fileLink}
{smallLibLink}		{fileLink}
{smallLibLink}		{item.name}
{smallLibLink}		{item.name}
{smallLibLink}		{fileLink}
{smallLibLink}		{item.old_name} => {fileLink}
{smallLibLink}		{item.old_path} => {filePathLink}
{smallLibLink}		{fileLink}
{smallLibLink}		{fileLink}
{smallLibLink}		{dirLink}
{smallLibLink}		{item.name}
{smallLibLink}		{dirLink}
{smallLibLink}		{item.old_name} => {dirLink}
{smallLibLink}		{item.old_path} => {dirPathLink}
{smallLibLink}
{moment(item.time).format('YYYY-MM-DD')}{moment(item.time).format('YYYY-MM-DD')}
- - - {item.author_name} - {op} - -
+ + + {item.author_name} + {op} + {details} + {moreDetails &&
} + {moreDetails && smallLibLink} + 		+ +
+ + + {item.author_name} + {op} +
{details} + 		+ + + + {moreDetails &&
} + {moreDetails && libLink} +