haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-15 23:00:57 +00:00
Code Issues Releases Wiki Activity

repair activity icon (#3015)

Browse Source
This commit is contained in:
王健辉
2019-02-28 18:09:21 +08:00
committed by Daniel Pan
parent c459c350bc
commit d063acece5
2 changed files with 193 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/css/files-activities.css
View File

@@ -1,6 +1,6 @@
table tr .activity-date { table tr .activity-date {
border-top: 0; border-top: 0;
} }
table td .created-files-detail { table td .activity-detail {
display: inline-block; display: inline;
} }

366
frontend/src/pages/dashboard/files-activities.js
View File

@@ -31,7 +31,18 @@ class FileActivitiesContent extends Component {
<col width="37%" /> <col width="37%" />
<col width="20%" /> <col width="20%" />
</colgroup> </colgroup>
<TableBody items={items} /> <tbody>
{items.map((item, index) => {
return (
<ActivityItem
key={index}
item={item}
index={index}
items={items}
/>
);
})}
</tbody>
</table> </table>
{isLoadingMore ? <span className="loading-icon loading-tip"></span> : ''} {isLoadingMore ? <span className="loading-icon loading-tip"></span> : ''}
</Fragment> </Fragment>
@@ -41,205 +52,210 @@ class FileActivitiesContent extends Component {
FileActivitiesContent.propTypes = contentPropTypes; FileActivitiesContent.propTypes = contentPropTypes;
const activityPropTypes = {
const tablePropTypes = { item: PropTypes.object.isRequired,
index: PropTypes.number.isRequired,
items: PropTypes.array.isRequired, items: PropTypes.array.isRequired,
}; };
class TableBody extends Component { class ActivityItem extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
isListCreatedFiles: false, isListCreatedFiles: false,
activity: '', active: false,
}; };
} }
onListCreatedFilesToggle = (activity) => { onMouseEnter = () => {
this.setState({
active: true
});
}
onMouseLeave = () => {
this.setState({
active: false
});
}
onListCreatedFilesToggle = () => {
this.setState({ this.setState({
isListCreatedFiles: !this.state.isListCreatedFiles, isListCreatedFiles: !this.state.isListCreatedFiles,
activity: activity,
}); });
} }
render() { render() {
let listFilesActivities = this.props.items.map(function(item, index) { let {item, index, items} = this.props;
let op, details; let op, details;
let userProfileURL = `${siteRoot}profile/${encodeURIComponent(item.author_email)}/`; let userProfileURL = `${siteRoot}profile/${encodeURIComponent(item.author_email)}/`;
let libURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + '/'; let libURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + '/';
let libLink = <a href={libURL}>{item.repo_name}</a>; let libLink = <a href={libURL}>{item.repo_name}</a>;
let smallLibLink = <a className="small text-secondary" href={libURL}>{item.repo_name}</a>; let smallLibLink = <a className="small text-secondary" href={libURL}>{item.repo_name}</a>;
if (item.obj_type == 'repo') { if (item.obj_type == 'repo') {
switch(item.op_type) { switch(item.op_type) {
case 'create': case 'create':
op = gettext('Created library'); op = gettext('Created library');
details = <td>{libLink}</td>; details = <td>{libLink}</td>;
break; break;
case 'rename': case 'rename':
op = gettext('Renamed library'); op = gettext('Renamed library');
details = <td>{item.old_repo_name} => {libLink}</td>; details = <td>{item.old_repo_name} => {libLink}</td>;
break; break;
case 'delete': case 'delete':
op = gettext('Deleted library'); op = gettext('Deleted library');
details = <td>{item.repo_name}</td>; details = <td>{item.repo_name}</td>;
break; break;
case 'recover': case 'recover':
op = gettext('Restored library'); op = gettext('Restored library');
details = <td>{libLink}</td>; details = <td>{libLink}</td>;
break; break;
case 'clean-up-trash': case 'clean-up-trash':
if (item.days == 0) { if (item.days == 0) {
op = gettext('Removed all items from trash.'); op = gettext('Removed all items from trash.');
} else { } else {
op = gettext('Removed items older than {n} days from trash.').replace('{n}', item.days); op = gettext('Removed items older than {n} days from trash.').replace('{n}', item.days);
}
details = <td>{libLink}</td>;
break;
}
} else if (item.obj_type == 'review') {
let fileURL = `${siteRoot}drafts/review/${item.review_id}`;
let fileLink = <a href={fileURL} target="_blank">{item.name}</a>;
switch(item.op_type) {
case 'open':
op = gettext('Open review');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
case 'closed':
op = gettext('Close review');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
case 'finished':
op = gettext('Publish draft');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
}
} else if (item.obj_type == 'files') {
let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
let fileLink = `<a href=${fileURL} target="_blank">${item.name}</a>`;
let fileCount = item.createdFilesCount - 1;
let firstLine = gettext('{file} and {n} other files');
firstLine = firstLine.replace('{file}', fileLink);
firstLine = firstLine.replace('{n}', fileCount);
op = gettext('Created {n} files').replace('{n}', item.createdFilesCount);
details =
<td>
<div className="created-files-detail" dangerouslySetInnerHTML={{__html: firstLine}}></div>
{' '}<i className="fas fa-eye" onClick={this.onListCreatedFilesToggle.bind(this, item)}></i>
<br />{smallLibLink}
</td>;
} else if (item.obj_type == 'file') {
let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
let fileLink = <a href={fileURL} target="_blank">{item.name}</a>;
switch(item.op_type) {
case 'create':
if (item.name.endsWith('(draft).md')) {
op = gettext('Created draft');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
}
op = gettext('Created file');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
case 'delete':
if (item.name.endsWith('(draft).md')) {
op = gettext('Deleted draft');
details = <td>{item.name}<br />{smallLibLink}</td>;
break;
}
op = gettext('Deleted file');
details = <td>{item.name}<br />{smallLibLink}</td>;
break;
case 'recover':
op = gettext('Restored file');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
case 'rename':
op = gettext('Renamed file');
details = <td>{item.old_name} => {fileLink}<br />{smallLibLink}</td>;
break;
case 'move':
var filePathLink = <a href={fileURL}>{item.path}</a>;
op = gettext('Moved file');
details = <td>{item.old_path} => {filePathLink}<br />{smallLibLink}</td>;
break;
case 'edit': // update
if (item.name.endsWith('(draft).md')) {
op = gettext('Updated draft');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
}
op = gettext('Updated file');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
}
} else { // dir
let dirURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + Utils.encodePath(item.path);
let dirLink = <a href={dirURL} target="_blank">{item.name}</a>;
switch(item.op_type) {
case 'create':
op = gettext('Created folder');
details = <td>{dirLink}<br />{smallLibLink}</td>;
break;
case 'delete':
op = gettext('Deleted folder');
details = <td>{item.name}<br />{smallLibLink}</td>;
break;
case 'recover':
op = gettext('Restored folder');
details = <td>{dirLink}<br />{smallLibLink}</td>;
break;
case 'rename':
op = gettext('Renamed folder');
details = <td>{item.old_name} => {dirLink}<br />{smallLibLink}</td>;
break;
case 'move':
var dirPathLink = <a href={dirURL}>{item.path}</a>;
op = gettext('Moved folder');
details = <td>{item.old_path} => {dirPathLink}<br />{smallLibLink}</td>;
break;
}
}
let isShowDate = true;
if (index > 0) {
let lastEventTime = this.props.items[index - 1].time;
isShowDate = moment(item.time).isSame(lastEventTime, 'day') ? false : true;
}
return (
<Fragment key={index}>
{ isShowDate &&
<tr>
<td colSpan='5' className="activity-date">{moment(item.time).format('YYYY-MM-DD')}</td>
</tr>
} }
<tr> details = <td>{libLink}</td>;
<td className="text-center"> break;
<img src={item.avatar_url} alt="" width="36px" height="36px" className="avatar" /> }
</td> } else if (item.obj_type == 'review') {
<td> let fileURL = `${siteRoot}drafts/review/${item.review_id}`;
<a href={userProfileURL}>{item.author_name}</a> let fileLink = <a href={fileURL} target="_blank">{item.name}</a>;
</td> switch(item.op_type) {
<td><span className="activity-op">{op}</span></td> case 'open':
{details} op = gettext('Open review');
<td className="text-secondary"> details = <td>{fileLink}<br />{smallLibLink}</td>;
<time datetime={item.time} is="relative-time" title={moment(item.time).format('llll')}>{moment(item.time).fromNow()}</time> break;
</td> case 'closed':
</tr> op = gettext('Close review');
</Fragment> details = <td>{fileLink}<br />{smallLibLink}</td>;
); break;
}, this); case 'finished':
op = gettext('Publish draft');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
}
} else if (item.obj_type == 'files') {
let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
let fileLink = `<a href=${fileURL} target="_blank">${item.name}</a>`;
let fileCount = item.createdFilesCount - 1;
let firstLine = gettext('{file} and {n} other files');
firstLine = firstLine.replace('{file}', fileLink);
firstLine = firstLine.replace('{n}', fileCount);
op = gettext('Created {n} files').replace('{n}', item.createdFilesCount);
details =
<td>
<div className="activity-detail" dangerouslySetInnerHTML={{__html: firstLine}}></div>{' '}
{this.state.active && <i className="attr-action-icon fas fa-eye" onClick={this.onListCreatedFilesToggle}></i>}
<br />{smallLibLink}
</td>;
} else if (item.obj_type == 'file') {
let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
let fileLink = <a href={fileURL} target="_blank">{item.name}</a>;
switch(item.op_type) {
case 'create':
if (item.name.endsWith('(draft).md')) {
op = gettext('Created draft');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
}
op = gettext('Created file');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
case 'delete':
if (item.name.endsWith('(draft).md')) {
op = gettext('Deleted draft');
details = <td>{item.name}<br />{smallLibLink}</td>;
break;
}
op = gettext('Deleted file');
details = <td>{item.name}<br />{smallLibLink}</td>;
break;
case 'recover':
op = gettext('Restored file');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
case 'rename':
op = gettext('Renamed file');
details = <td>{item.old_name} => {fileLink}<br />{smallLibLink}</td>;
break;
case 'move':
var filePathLink = <a href={fileURL}>{item.path}</a>;
op = gettext('Moved file');
details = <td>{item.old_path} => {filePathLink}<br />{smallLibLink}</td>;
break;
case 'edit': // update
if (item.name.endsWith('(draft).md')) {
op = gettext('Updated draft');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
}
op = gettext('Updated file');
details = <td>{fileLink}<br />{smallLibLink}</td>;
break;
}
} else { // dir
let dirURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + Utils.encodePath(item.path);
let dirLink = <a href={dirURL} target="_blank">{item.name}</a>;
switch(item.op_type) {
case 'create':
op = gettext('Created folder');
details = <td>{dirLink}<br />{smallLibLink}</td>;
break;
case 'delete':
op = gettext('Deleted folder');
details = <td>{item.name}<br />{smallLibLink}</td>;
break;
case 'recover':
op = gettext('Restored folder');
details = <td>{dirLink}<br />{smallLibLink}</td>;
break;
case 'rename':
op = gettext('Renamed folder');
details = <td>{item.old_name} => {dirLink}<br />{smallLibLink}</td>;
break;
case 'move':
var dirPathLink = <a href={dirURL}>{item.path}</a>;
op = gettext('Moved folder');
details = <td>{item.old_path} => {dirPathLink}<br />{smallLibLink}</td>;
break;
}
}
let isShowDate = true;
if (index > 0) {
let lastEventTime = items[index - 1].time;
isShowDate = moment(item.time).isSame(lastEventTime, 'day') ? false : true;
}
return ( return (
<Fragment> <Fragment>
<tbody>{listFilesActivities}</tbody> { isShowDate &&
<tr>
<td colSpan='5' className="activity-date">{moment(item.time).format('YYYY-MM-DD')}</td>
</tr>
}
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<td className="text-center">
<img src={item.avatar_url} alt="" width="36px" height="36px" className="avatar" />
</td>
<td>
<a href={userProfileURL}>{item.author_name}</a>
</td>
<td><span className="activity-op">{op}</span></td>
{details}
<td className="text-secondary">
<time datetime={item.time} is="relative-time" title={moment(item.time).format('llll')}>{moment(item.time).fromNow()}</time>
</td>
</tr>
{this.state.isListCreatedFiles && {this.state.isListCreatedFiles &&
<ModalPortal> <ModalPortal>
<ListCreatedFileDialog <ListCreatedFileDialog
activity={this.state.activity} activity={item}
toggleCancel={this.onListCreatedFilesToggle} toggleCancel={this.onListCreatedFilesToggle}
/> />
</ModalPortal> </ModalPortal>
@@ -249,7 +265,7 @@ class TableBody extends Component {
} }
} }
TableBody.propTypes = tablePropTypes; ActivityItem.propTypes = activityPropTypes;
class FilesActivities extends Component { class FilesActivities extends Component {
constructor(props) { constructor(props) {