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

Improve code for tables (#2730)

Browse Source
This commit is contained in:
杨顺强
2018-12-28 16:34:04 +08:00
committed by Daniel Pan
parent df39fc4162
commit 8c2944d124
11 changed files with 174 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/dialog/list-taggedfiles-dialog.js
View File

@@ -51,7 +51,7 @@ class ListTaggedFilesDialog extends React.Component {
</ModalHeader> </ModalHeader>
<ModalBody className="dialog-list-container"> <ModalBody className="dialog-list-container">
<table> <table>
<thead className="table-thread-hidden"> <thead className="table-thead-hidden">
<tr> <tr>
<th width='50%' className="ellipsis">{gettext('Name')}</th> <th width='50%' className="ellipsis">{gettext('Name')}</th>
<th width='25%'>{gettext('Size')}</th> <th width='25%'>{gettext('Size')}</th>

2
frontend/src/components/dialog/share-dialog.js
View File

@@ -109,7 +109,7 @@ class ShareDialog extends React.Component {
<div> <div>
<Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog"> <Modal isOpen={true} style={{maxWidth: '720px'}} className="share-dialog">
<ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="sf-font" title={itemName}>{itemName}</span></ModalHeader> <ModalHeader toggle={this.props.toggleDialog}>{gettext('Share')} <span className="sf-font" title={itemName}>{itemName}</span></ModalHeader>
<ModalBody className="share-dialog-content"> <ModalBody className="dialog-list-container share-dialog-content">
{(itemType === 'library' || itemType === 'dir') && this.renderDirContent()} {(itemType === 'library' || itemType === 'dir') && this.renderDirContent()}
{itemType === 'file' && this.renderFileContent()} {itemType === 'file' && this.renderFileContent()}
</ModalBody> </ModalBody>

117
frontend/src/components/dialog/share-to-group.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 { Button } from 'reactstrap'; import { Button } from 'reactstrap';
import Select from 'react-select'; import Select from 'react-select';
@@ -246,56 +246,71 @@ class ShareToGroup extends React.Component {
render() { render() {
return ( return (
<table> <Fragment>
<thead> <table>
<tr> <thead>
<th style={{'width': '40%'}}>{gettext('Group')}</th> <tr>
<th style={{'width': '40%'}}>{gettext('Permission')}</th> <th width="40%">{gettext('Group')}</th>
<th></th> <th width="40%">{gettext('Permission')}</th>
</tr> <th width="20%"></th>
<tr> </tr>
<td> </thead>
<Select <tbody>
isMulti <tr>
onChange={this.handleSelectChange} <td>
options={this.options} <Select
placeholder={gettext('Select a group')} isMulti
components={makeAnimated()} onChange={this.handleSelectChange}
inputId={'react-select-2-input'} options={this.options}
value={this.state.selectedOption} placeholder={gettext('Select a group')}
/> components={makeAnimated()}
</td> inputId={'react-select-2-input'}
<td> value={this.state.selectedOption}
<PermissionEditor />
isTextMode={false} </td>
isEditIconShow={false} <td>
currentPermission={this.state.permission} <PermissionEditor
permissions={this.permissions} isTextMode={false}
onPermissionChangedHandler={this.setPermission} isEditIconShow={false}
/> currentPermission={this.state.permission}
</td> permissions={this.permissions}
<td> onPermissionChangedHandler={this.setPermission}
<Button onClick={this.shareToGroup}>{gettext('Submit')}</Button> />
</td> </td>
</tr> <td>
{this.state.errorMsg.length > 0 && <Button onClick={this.shareToGroup}>{gettext('Submit')}</Button>
this.state.errorMsg.map((item, index) => { </td>
let errMessage = item.group_name + ': ' + item.error_msg; </tr>
return ( {this.state.errorMsg.length > 0 &&
<tr key={index}> this.state.errorMsg.map((item, index) => {
<td colSpan={3}><p className="error">{errMessage}</p></td> let errMessage = item.group_name + ': ' + item.error_msg;
</tr> return (
); <tr key={index}>
}) <td colSpan={3}><p className="error">{errMessage}</p></td>
} </tr>
</thead> );
<GroupList })
items={this.state.sharedItems} }
permissions={this.permissions} </tbody>
deleteShareItem={this.deleteShareItem} </table>
onChangeUserPermission={this.onChangeUserPermission} <div className="share-list-container">
/> <table className="table-thead-hidden">
</table> <thead>
<tr>
<th width="40%">{gettext('Group')}</th>
<th width="40%">{gettext('Permission')}</th>
<th width="20%"></th>
</tr>
</thead>
<GroupList
items={this.state.sharedItems}
permissions={this.permissions}
deleteShareItem={this.deleteShareItem}
onChangeUserPermission={this.onChangeUserPermission}
/>
</table>
</div>
</Fragment>
); );
} }
} }

131
frontend/src/components/dialog/share-to-user.js
View File

@@ -263,64 +263,79 @@ class ShareToUser extends React.Component {
render() { render() {
let { sharedItems } = this.state; let { sharedItems } = this.state;
return ( return (
<table> <Fragment>
<thead> <table>
<tr> <thead>
<th style={{'width': '40%'}}>{gettext('User')}</th> <tr>
<th style={{'width': '40%'}}>{gettext('Permission')}</th> <th width="40%">{gettext('User')}</th>
<th></th> <th width="40%">{gettext('Permission')}</th>
</tr> <th width="20%"></th>
<tr> </tr>
<td> </thead>
<AsyncSelect <tbody>
inputId={'react-select-1-input'} <tr>
className='reviewer-select' <td>
placeholder={gettext('Select users...')} <AsyncSelect
loadOptions={this.loadOptions} inputId={'react-select-1-input'}
onChange={this.handleSelectChange} className='reviewer-select'
value={this.state.selectedOption} placeholder={gettext('Select users...')}
isMulti loadOptions={this.loadOptions}
isFocused onChange={this.handleSelectChange}
isClearable value={this.state.selectedOption}
classNamePrefix isMulti
/> isFocused
</td> isClearable
<td> classNamePrefix
<PermissionEditor />
isTextMode={false} </td>
isEditIconShow={false} <td>
currentPermission={this.state.permission} <PermissionEditor
permissions={this.permissions} isTextMode={false}
onPermissionChangedHandler={this.setPermission} isEditIconShow={false}
/> currentPermission={this.state.permission}
</td> permissions={this.permissions}
<td> onPermissionChangedHandler={this.setPermission}
<Button onClick={this.shareToUser}>{gettext('Submit')}</Button> />
</td> </td>
</tr> <td>
{this.state.errorMsg.length > 0 && <Button onClick={this.shareToUser}>{gettext('Submit')}</Button>
this.state.errorMsg.map((item, index) => { </td>
let errMessage = ''; </tr>
if (item.email) { {this.state.errorMsg.length > 0 &&
errMessage = item.email + ': ' + item.error_msg; this.state.errorMsg.map((item, index) => {
} else { let errMessage = '';
errMessage = item; if (item.email) {
} errMessage = item.email + ': ' + item.error_msg;
return ( } else {
<tr key={index}> errMessage = item;
<td colSpan={3}><p className="error">{errMessage}</p></td> }
</tr> return (
); <tr key={index}>
}) <td colSpan={3}><p className="error">{errMessage}</p></td>
} </tr>
</thead> );
<UserList })
items={sharedItems} }
permissions={this.permissions} </tbody>
deleteShareItem={this.deleteShareItem} </table>
onChangeUserPermission={this.onChangeUserPermission} <div className="share-list-container">
/> <table className="table-thead-hidden">
</table> <thead>
<tr>
<th width="40%">{gettext('User')}</th>
<th width="40%">{gettext('Permission')}</th>
<th width="20%"></th>
</tr>
</thead>
<UserList
items={sharedItems}
permissions={this.permissions}
deleteShareItem={this.deleteShareItem}
onChangeUserPermission={this.onChangeUserPermission}
/>
</table>
</div>
</Fragment>
); );
} }
} }

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

@@ -111,7 +111,7 @@ class DetailListView extends React.Component {
); );
})} })}
</ul> </ul>
<i className='fa fa-pencil tag-edit-icon' onClick={this.onEditFileTagToggle}></i> <i className='fa fa-pencil attr-action-icon' onClick={this.onEditFileTagToggle}></i>
</td> </td>
</tr> </tr>
<tr className="file-related-files"> <tr className="file-related-files">

3
frontend/src/components/permission-editor.js
View File

@@ -80,8 +80,7 @@ class PermissionEditor extends React.Component {
{this.props.isEditIconShow && ( {this.props.isEditIconShow && (
<span <span
title={gettext('Edit')} title={gettext('Edit')}
style={{fontSize: '0.875rem', marginLeft: '0.5rem'}} className="fa fa-pencil attr-action-icon"
className="fa fa-pencil action-icon"
onClick={this.onEidtPermission}> onClick={this.onEidtPermission}>
</span> </span>
)} )}

2
frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
View File

@@ -52,7 +52,7 @@ class SharedRepoListView extends React.Component {
let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true; let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
return ( return (
<table> <table>
<thead className={isShowTableThread ? '' : 'table-thread-hidden'}> <thead className={isShowTableThread ? '' : 'table-thead-hidden'}>
<tr> <tr>
<th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th> <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
<th width="40%">{gettext("Name")} <th width="40%">{gettext("Name")}

10
frontend/src/css/repo-tag.css
View File

@@ -70,16 +70,6 @@
right: 0.5rem; right: 0.5rem;
} }
.tag-edit-icon {
padding: 0 0.5rem;
color: #888;
cursor: pointer;
}
.tag-edit-icon:hover {
color: #333;
}
.file-tag-item { .file-tag-item {
margin: 0.25rem 0; margin: 0.25rem 0;
padding: 0 0.5rem; padding: 0 0.5rem;

6
frontend/src/css/share-link-dialog.css
View File

@@ -3,6 +3,7 @@
min-height: 15rem; min-height: 15rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow: hidden;
} }
.share-dialog-content .share-dialog-side { .share-dialog-content .share-dialog-side {
@@ -21,6 +22,11 @@
flex: 1; flex: 1;
} }
.share-list-container {
max-height: 15rem;
overflow: auto;
}
.share-dialog-content label { .share-dialog-content label {
padding: 0.5rem 0 0.25rem; padding: 0.5rem 0 0.25rem;
} }

2
frontend/src/pages/shared-libs/shared-libs.js
View File

@@ -196,7 +196,7 @@ class Item extends Component {
let iconVisibility = this.state.showOpIcon ? '' : ' invisible'; let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
let shareIconClassName = 'op-icon sf2-icon-share repo-share-btn' + iconVisibility; let shareIconClassName = 'op-icon sf2-icon-share repo-share-btn' + iconVisibility;
let leaveShareIconClassName = 'op-icon sf2-icon-delete' + iconVisibility; let leaveShareIconClassName = 'op-icon sf2-icon-x3' + iconVisibility;
const desktopItem = ( const desktopItem = (
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}> <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>

30
media/css/seahub_react.css
View File

@@ -150,6 +150,7 @@ ul,ol,li {
} }
.sf-dropdown-toggle { .sf-dropdown-toggle {
margin-left: 0.5rem;
vertical-align: middle; vertical-align: middle;
font-style: normal; font-style: normal;
font-size: 0.85rem; font-size: 0.85rem;
@@ -166,8 +167,9 @@ ul,ol,li {
user-select: none; user-select: none;
} }
.dialog-list-container { /*for content is list dialog*/ .dialog-list-container { /* for dialog containing list */
height: 20rem; min-height: 15rem;
max-height: 35rem;
overflow: auto; overflow: auto;
} }
@@ -297,8 +299,9 @@ ul,ol,li {
/** op-icon **/ /** op-icon **/
.op-icon, .op-icon,
.action-icon { .action-icon,
margin-right: 0.5rem; .attr-action-icon {
margin-left: 0.5rem;
font-size: 1.25rem; font-size: 1.25rem;
font-style: normal; font-style: normal;
line-height: 1; line-height: 1;
@@ -316,16 +319,24 @@ ul,ol,li {
border-bottom: 0.125rem solid #f89a68; border-bottom: 0.125rem solid #f89a68;
} }
.action-icon { .action-icon,
.attr-action-icon {
margin-right: 0.25rem;
color:#888; color:#888;
} }
.action-icon:focus, .action-icon:focus,
.action-icon:hover { .action-icon:hover,
.attr-action-icon:focus,
.attr-action-icon:hover {
color: #333; color: #333;
text-decoration: none; text-decoration: none;
} }
.attr-action-icon {
font-size: 0.875rem;
}
/** Account info **/ /** Account info **/
#account { #account {
position:relative; position:relative;
@@ -837,7 +848,12 @@ table td img {
height: 1.5rem; height: 1.5rem;
} }
.table-thread-hidden th { /* hide table th */ .table-thead-hidden thead tr {
height: 0;
border: 0;
}
.table-thead-hidden th { /* hide table th */
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 0; font-size: 0;