haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-11 03:41:12 +00:00
Code Issues Releases Wiki Activity

[wiki] dir view: redesigned the UI for mobile; fixed 'can not scroll' bug (#4352)

Browse Source
This commit is contained in:
llj
2019-12-12 22:34:53 +08:00
committed by Daniel Pan
parent 7bc3793d8a
commit ec6535af8a
4 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js
View File

@@ -41,7 +41,8 @@ class WikiDirListItem extends React.Component {
let href = siteRoot + 'published' + Utils.joinPath(path, dirent.name);
let iconUrl = Utils.getDirentIcon(dirent);
return (
const isDesktop = Utils.isDesktop();
return isDesktop ? (
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onContextMenu={this.onContextMenu}>
<td className="text-center">
<img src={iconUrl} width="24" alt="" />
@@ -50,7 +51,19 @@ class WikiDirListItem extends React.Component {
<a href={href} onClick={this.onDirentClick}>{dirent.name}</a>
</td>
<td>{dirent.size}</td>
<td title={dirent.mtime_relative}>{dirent.mtime_relative}</td>
<td>{dirent.mtime_relative}</td>
</tr>
) : (
<tr>
<td className="text-center">
<img src={iconUrl} width="24" alt="" />
</td>
<td>
<a href={href} onClick={this.onDirentClick}>{dirent.name}</a>
<br />
<span className="item-meta-info">{dirent.size}</span>
<span className="item-meta-info">{dirent.mtime_relative}</span>
</td>
</tr>
);
}

23
frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js
View File

@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import WikiDirListItem from './wiki-dir-list-item';
const propTypes = {
@@ -12,15 +13,23 @@ const propTypes = {
class WikiDirListView extends React.Component {
render() {
const isDesktop = Utils.isDesktop();
return (
<table>
<table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
<thead>
<tr>
<th style={{width: '4%'}}></th>
<th style={{width: '66%'}}>{gettext('Name')}</th>
<th style={{width: '15%'}}>{gettext('Size')}</th>
<th style={{width: '15%'}}>{gettext('Last Update')}</th>
</tr>
{isDesktop ? (
<tr>
<th style={{width: '4%'}}></th>
<th style={{width: '66%'}}>{gettext('Name')}</th>
<th style={{width: '15%'}}>{gettext('Size')}</th>
<th style={{width: '15%'}}>{gettext('Last Update')}</th>
</tr>
) : (
<tr>
<th width="12%"></th>
<th width="88%"></th>
</tr>
)}
</thead>
<tbody>
{this.props.direntList.length !== 0 && this.props.direntList.map((dirent, index) => {