haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-13 22:01:06 +00:00
Code Issues Releases Wiki Activity

modify table css (#2537)

Browse Source
This commit is contained in:
杨顺强
2018-11-22 11:05:47 +08:00
committed by Daniel Pan
parent 464ef84b35
commit 921089bd01
12 changed files with 112 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/dirent-detail/detail-list-view.js
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import moment from 'moment'; import moment from 'moment';
import { gettext } from '../../utils/constants'; import { gettext } from '../../utils/constants';
@@ -45,22 +45,20 @@ class DetailListView extends React.Component {
let position = this.getDirentPostion(); let position = this.getDirentPostion();
if (direntType === 'dir') { if (direntType === 'dir') {
return ( return (
<div className="dirent-table-container"> <table>
<table> <tbody>
<tbody> <tr><th width="35%"></th><td width="65%"></td></tr>
<tr><th width="35%"></th><td width="65%"></td></tr> <tr><th>{gettext('Folder')}</th><td>{direntDetail.dir_count}</td></tr>
<tr><th>{gettext('Folder')}</th><td>{direntDetail.dir_count}</td></tr> <tr><th>{gettext('File')}</th><td>{direntDetail.file_count}</td></tr>
<tr><th>{gettext('File')}</th><td>{direntDetail.file_count}</td></tr> <tr><th>{gettext('Size')}</th><td>{Utils.bytesToSize(direntDetail.size)}</td></tr>
<tr><th>{gettext('Size')}</th><td>{Utils.bytesToSize(direntDetail.size)}</td></tr> <tr><th>{gettext('Position')}</th><td>{position}</td></tr>
<tr><th>{gettext('Position')}</th><td>{position}</td></tr> <tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr>
<tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr> </tbody>
</tbody> </table>
</table>
</div>
); );
} else { } else {
return ( return (
<div className="dirent-table-container"> <Fragment>
<table> <table>
<tbody> <tbody>
<tr><th width="35%"></th><td width="65%"></td></tr> <tr><th width="35%"></th><td width="65%"></td></tr>
@@ -93,7 +91,7 @@ class DetailListView extends React.Component {
onFileTagChanged={this.props.onFileTagChanged} onFileTagChanged={this.props.onFileTagChanged}
/> />
} }
</div> </Fragment>
); );
} }
} }

18
frontend/src/components/dirent-detail/dirent-details.js
View File

@@ -81,14 +81,16 @@ class DirentDetail extends React.Component {
<img src={dirent.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt="icon"></img> <img src={dirent.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt="icon"></img>
</div> </div>
{this.state.direntDetail && {this.state.direntDetail &&
<DetailListView <div className="dirent-table-container">
repo={this.state.repo} <DetailListView
direntPath={this.props.direntPath} repo={this.state.repo}
direntType={this.state.direntType} direntPath={this.props.direntPath}
direntDetail={this.state.direntDetail} direntType={this.state.direntType}
fileTagList={this.state.fileTagList} direntDetail={this.state.direntDetail}
onFileTagChanged={this.props.onFileTagChanged} fileTagList={this.state.fileTagList}
/> onFileTagChanged={this.props.onFileTagChanged}
/>
</div>
} }
</div> </div>
</div> </div>

6
frontend/src/components/dirent-list-view/dirent-list-view.js
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { gettext, repoID } from '../../utils/constants'; import { gettext, repoID } from '../../utils/constants';
import URLDecorator from '../../utils/url-decorator'; import URLDecorator from '../../utils/url-decorator';
@@ -140,7 +140,7 @@ class DirentListView extends React.Component {
} }
return ( return (
<div className="table-container"> <Fragment>
<table> <table>
<thead> <thead>
<tr> <tr>
@@ -202,7 +202,7 @@ class DirentListView extends React.Component {
onCancelCopy={this.onCancelCopy} onCancelCopy={this.onCancelCopy}
/> />
} }
</div> </Fragment>
); );
} }
} }

50
frontend/src/components/draft-list-view/draft-list-view.js
View File

@@ -14,32 +14,30 @@ class DraftListView extends React.Component {
render() { render() {
let drafts = this.props.draftList; let drafts = this.props.draftList;
return ( return (
<div className="table-container"> <table>
<table> <thead>
<thead> <tr>
<tr> <th style={{width: '4%'}}>{/*img*/}</th>
<th style={{width: '4%'}}>{/*img*/}</th> <th style={{width: '46%'}}>{gettext('Name')}</th>
<th style={{width: '46%'}}>{gettext('Name')}</th> <th style={{width: '20%'}}>{gettext('Library')}</th>
<th style={{width: '20%'}}>{gettext('Library')}</th> <th style={{width: '10%'}}>{gettext('Review')}</th>
<th style={{width: '10%'}}>{gettext('Review')}</th> <th style={{width: '10%'}}>{gettext('Last Update')}</th>
<th style={{width: '10%'}}>{gettext('Last Update')}</th> <th style={{width: '10%'}}></th>
<th style={{width: '10%'}}></th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> { drafts && drafts.map((draft) => {
{ drafts && drafts.map((draft) => { return (
return ( <DraftListItem
<DraftListItem key={draft.id}
key={draft.id} draft={draft}
draft={draft} onMenuToggleClick={this.props.onMenuToggleClick}
onMenuToggleClick={this.props.onMenuToggleClick} isItemFreezed={this.props.isItemFreezed}
isItemFreezed={this.props.isItemFreezed} />
/> );
); })}
})} </tbody>
</tbody> </table>
</table>
</div>
); );
} }
} }

6
frontend/src/components/review-list-view/review-list-view.js
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Nav, NavItem, NavLink } from 'reactstrap'; import { Nav, NavItem, NavLink } from 'reactstrap';
import classnames from 'classnames'; import classnames from 'classnames';
@@ -26,7 +26,7 @@ class ReviewListView extends React.Component {
render() { render() {
let items = this.props.itemsList; let items = this.props.itemsList;
return ( return (
<div className="table-container"> <Fragment>
<Nav tabs> <Nav tabs>
<NavItem> <NavItem>
<NavLink <NavLink
@@ -76,7 +76,7 @@ class ReviewListView extends React.Component {
})} })}
</tbody> </tbody>
</table> </table>
</div> </Fragment>
); );
} }
} }

36
frontend/src/components/tree-dir-view/tree-dir-view.js
View File

@@ -15,25 +15,23 @@ class TreeDirView extends React.Component {
let children = node.hasChildren() ? node.children : null; let children = node.hasChildren() ? node.children : null;
return ( return (
<div className="table-container"> <table>
<table> <thead>
<thead> <tr>
<tr> <th style={{width: '4%'}}></th>
<th style={{width: '4%'}}></th> <th style={{width: '66%'}}>{gettext('Name')}</th>
<th style={{width: '66%'}}>{gettext('Name')}</th> <th style={{width: '15%'}}>{gettext('Size')}</th>
<th style={{width: '15%'}}>{gettext('Size')}</th> <th style={{width: '15%'}}>{gettext('Last Update')}</th>
<th style={{width: '15%'}}>{gettext('Last Update')}</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {children && children.map((node, index) => {
{children && children.map((node, index) => { return (
return ( <TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}/>
<TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}/> );
); })}
})} </tbody>
</tbody> </table>
</table>
</div>
); );
} }
} }

2
frontend/src/css/layout.css
View File

@@ -95,7 +95,7 @@
} }
.cur-view-content { .cur-view-content {
padding: 0; padding: 0.625rem 1rem 1.25rem;
height: calc(100% - 40px); height: calc(100% - 40px);
flex: 1; flex: 1;
min-height: 0; min-height: 0;

13
frontend/src/css/react-resumable.css
View File

@@ -1,13 +0,0 @@
.sf-resumable-input-container {
display: flex;
flex: 1;
}
.sf-resumable-input-container .resumable-input {
display: none;
}
.sf-resumable-input-container .input-placeholder {
display: flex;
flex: 1;
}

6
frontend/src/css/wiki.css
View File

@@ -58,7 +58,7 @@ img[src=""] {
} }
.cur-view-content .markdown-container{ .cur-view-content .markdown-container{
padding: 10px 40px 20px; padding: 0 1.5rem;
display: flex; display: flex;
flex: 1; flex: 1;
overflow: auto; overflow: auto;
@@ -71,7 +71,7 @@ img[src=""] {
.cur-view-content .markdown-outline { .cur-view-content .markdown-outline {
position: fixed; position: fixed;
padding-right: 18px; padding-right: 1rem;
top: 97px; top: 97px;
right: 0; right: 0;
width: 200px; width: 200px;
@@ -84,7 +84,7 @@ img[src=""] {
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.cur-view-content .markdown-container { .cur-view-content .markdown-container {
padding-right: 40px; padding-right: 1.5rem;
} }
.cur-view-content .markdown-content { .cur-view-content .markdown-content {
width: 100%; width: 100%;

6
frontend/src/pages/linked-devices/linked-devices.js
View File

@@ -38,7 +38,7 @@ class Content extends Component {
); );
return ( return (
<table className="table table-hover table-vcenter"> <table>
{window.innerWidth >= 768 ? desktopThead : mobileThead} {window.innerWidth >= 768 ? desktopThead : mobileThead}
<TableBody items={items} /> <TableBody items={items} />
</table> </table>
@@ -201,9 +201,7 @@ class LinkedDevices extends Component {
<h3 className="sf-heading">{gettext('Linked Devices')}</h3> <h3 className="sf-heading">{gettext('Linked Devices')}</h3>
</div> </div>
<div className="cur-view-content"> <div className="cur-view-content">
<div className="table-container"> <Content data={this.state} />
<Content data={this.state} />
</div>
</div> </div>
</div> </div>
); );

6
frontend/src/pages/starred/starred.js
View File

@@ -35,7 +35,7 @@ class Content extends Component {
); );
return ( return (
<table className="table table-hover table-vcenter"> <table>
{window.innerWidth >= 768 ? desktopThead : mobileThead} {window.innerWidth >= 768 ? desktopThead : mobileThead}
<TableBody items={items} /> <TableBody items={items} />
</table> </table>
@@ -267,9 +267,7 @@ class Starred extends Component {
<h3 className="sf-heading">{gettext('Favorites')}</h3> <h3 className="sf-heading">{gettext('Favorites')}</h3>
</div> </div>
<div className="cur-view-content"> <div className="cur-view-content">
<div className="table-container"> <Content data={this.state} />
<Content data={this.state} />
</div>
</div> </div>
</div> </div>
); );

75
media/css/seahub_react.css
View File

@@ -752,7 +752,7 @@ a.op-icon:focus {
/* begin path navigation */ /* begin path navigation */
.path-containter { /* for the real path */ .path-containter { /* for the real path */
font-size:16px; font-size: 1rem;
word-break: break-all; word-break: break-all;
} }
.path-split { .path-split {
@@ -771,46 +771,53 @@ a.op-icon:focus {
/* end path navigation */ /* end path navigation */
/* begin main table list style */ /* begin main table list style */
.table-container { table {
flex: 1;
padding: 10px 16px 20px;
overflow: auto;
}
.table-container table {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
} }
.table-container table th { table th, table td {
padding: 5px 3px;
border-bottom: 1px solid #eee;
}
table th {
padding-top: 1rem;
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
color: #9c9c9c; color: #9c9c9c;
} }
.table-container table td { table td {
color: #333; color: #333;
font-size: 14px; font-size: 14px;
word-break: break-all; word-break: break-all;
} }
.table-container table th, .table-container table td {
padding: 5px 3px; table .select,
border-bottom: 1px solid #eee; table .star,
} table .icon {
.table-container table th {
padding-top: 1rem;
}
.table-container table .select,
.table-container table .star,
.table-container table .icon {
position: relative; position: relative;
text-align: center; text-align: center;
} }
.table-container table .star { table .icon img {
width: 1.5rem;
height: 1.5rem;
}
table .dir-icon {
position: relative;
}
table .star {
cursor: pointer; cursor: pointer;
} }
.table-container table .rename-container input { table .star .empty {
color: #d0d0d0;
}
table .rename-container input {
box-sizing: content-box; box-sizing: content-box;
padding: 2px 3px; padding: 2px 3px;
width: 16.25rem; width: 16.25rem;
@@ -822,14 +829,14 @@ a.op-icon:focus {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.table-container table .rename-container input:focus { table .rename-container input:focus {
background-color: #fff; background-color: #fff;
border-color: #1991eb; border-color: #1991eb;
outline: 0; outline: 0;
box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25); box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
} }
.table-container table .rename-container button { table .rename-container button {
margin-left: 0.25rem; margin-left: 0.25rem;
padding: 5px 6px; padding: 5px 6px;
font-size: 1rem; font-size: 1rem;
@@ -838,25 +845,11 @@ a.op-icon:focus {
min-width: 0; min-width: 0;
} }
.table-container table .rename-container .confirm { table .rename-container .confirm {
color: green; color: green;
} }
table .dir-icon .locked {
.table-container table .star .empty {
color: #d0d0d0;
}
.table-container table .icon img {
width: 1.5rem;
height: 1.5rem;
}
.table-container table .dir-icon {
position: relative;
}
.table-container table .dir-icon .locked {
position: absolute; position: absolute;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@@ -864,14 +857,14 @@ a.op-icon:focus {
left: 50%; left: 50%;
} }
.table-container table .menu-toggle { table .menu-toggle {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.tr-highlight { .tr-highlight {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
/* end table list style */ /* end table list style */
/* begin dropdown-menu style */ /* begin dropdown-menu style */