Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve UI record file table #1844

Closed
wants to merge 3 commits into from
Closed

Improve UI record file table #1844

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c62295e
Improve record file table
hevp Mar 17, 2021
867b253
Cleanup
hevp Mar 17, 2021
b804a49
Limit record file list length
hevp Mar 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 15 additions & 18 deletions webui/app/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1069,49 +1069,46 @@ a.navbar-brand {
filter: none;
}

.fileList .fileHeader {
.filelist .fileheader {
padding: 0.5em 0;
border-bottom: 1px solid #ddd;
}
.fileList .fileHeader *{
font-weight: bold;
margin-top: 0.5em,
margin-bottom: 0.5em
}
.fileList .buttons {
padding: 0px;
overflow-x: auto;
}
.fileList .buttons > *:not(:first-child) {
margin-left: 5px;
.filelist .files {
max-height: 800px; /* about 20 single line files */
overflow-y: auto;
overflow-x: hidden;
}
.fileList .file {
.filelist .file {
padding: 0.5em 0;
word-wrap: break-word;
}
.fileList .file .details {
.filelist .file .details {
margin-left: 1em;
overflow-x: auto;
}
.fileList .file .details > div {
.filelist .file .details > div {
margin-left: 1em;
white-space: nowrap
}
.fileList .file:nth-child(odd) {
.filelist .file:nth-child(odd) {
background-color: #f4f4f4;
}
.fileList .file:nth-child(even) {
.filelist .file:nth-child(even) {
background-color: #fafafa;
}
.fileList .file:hover {
.filelist .file:hover {
background-color: #fff;
}

.fileList .file .btn.remove {
.filelist .file .btn.remove {
float: right;
color: #F45D00;
margin-right: 1em;
border-color: #eee;
}
.fileList .file .btn.remove:hover {
.filelist .file .btn.remove:hover {
color: red;
}

Expand Down
61 changes: 28 additions & 33 deletions webui/src/components/editfiles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ const B2DropZone = React.createClass({
renderFiles: function() {
return (
<div style={{margin:'1em'}}>
<ol className="list-unstyled fileList" style={{textAlign:'left', minHeight:'30em'}}>
<ol className="list-unstyled filelist" style={{textAlign:'left', minHeight:'30em'}}>
<li className="heading row" style={{padding:'0.5em 0'}}>
<div className="col-sm-6" style={{fontWeight:'bold'}}>File Name</div>
<div className="col-sm-3" style={{fontWeight:'bold'}}>Size</div>
Expand Down Expand Up @@ -253,7 +253,6 @@ const B2DropZone = React.createClass({


const B2SafeZone = React.createClass({

getInitialState() {
return {
state: 'b2safe',
Expand Down Expand Up @@ -500,7 +499,7 @@ export const EditFiles = React.createClass({
}
return(
<div className="well" style={{marginTop:'1em'}}>
<div className="fileList">
<div className="filelist">
<FileUploadHeader/>
{ this.state.files.map(f =>
<FileUploadRow key={f.name} file={f} remove={() => this.removeUploadFile(f)} />) }
Expand Down Expand Up @@ -531,7 +530,7 @@ export const EditFiles = React.createClass({
}
return(
<div className="well" style={{marginTop:'1em'}}>
<div className="fileList">
<div className="filelist">
<FileRecordHeader/>
{ this.props.files.map(f =>
<FileRecordRow key={f.key} file={f} remove={()=>this.removeRecordFile(f)} />) }
Expand Down Expand Up @@ -587,7 +586,7 @@ export const FileUploadHeader = React.createClass({
mixins: [React.addons.PureRenderMixin],
render() {
return (
<div className="row fileHeader" style={{marginTop:'0.5em', marginBottom:'0.5em'}}>
<div className="row fileheader">
<div className="col-sm-6">Name</div>
<div className="col-sm-3">Size</div>
</div>
Expand Down Expand Up @@ -642,21 +641,19 @@ const FileUploadRow = React.createClass({
<a style={{marginLeft:'1em'}}>{file.name}</a>
</div>
<div className="col-sm-3">{humanSize(file.size)}</div>
{ this.props.remove ?
{ this.props.remove &&
<div className="col-sm-3">
<button type="button" className="btn btn-default btn-xs remove" onClick={()=>this.setState({remove:true})}>
<i className="glyphicon glyphicon-remove"/>&nbsp;Cancel
</button>
</div> : false
}
</div> }
</div>
{ this.state.remove ?
{ this.state.remove &&
<FileRemoveDialog file={file}
remove={this.props.remove}
cancel={()=>this.setState({remove:false})} />
: false }
{ file.progress ? this.renderProgress(file) : false }
{ file.error ? this.renderError(file) : false }
cancel={()=>this.setState({remove:false})} /> }
{ file.progress && this.renderProgress(file) }
{ file.error && this.renderError(file) }
</div>
);
},
Expand All @@ -666,10 +663,10 @@ export const FileRecordHeader = React.createClass({
mixins: [React.addons.PureRenderMixin],
render() {
return (
<div className="row fileHeader" style={{marginTop:'0.5em', marginBottom:'0.5em'}}>
<div className="row fileheader">
<div className="col-sm-8">Name</div>
<div className="col-sm-2 p-0">Size</div>
<div className="col-sm-2 p-0">{/*Actions*/}</div>
<div className="col-sm-1 p-0">Size</div>
<div className="col-sm-3 p-0">{/*Actions*/}</div>
</div>
);
}
Expand Down Expand Up @@ -715,7 +712,7 @@ export const FileRecordRow = React.createClass({
style={{fontSize:10}} aria-hidden="true"/>
<span className={"glyphicon glyphicon-file"}
style={{marginLeft:'0.5em', fontSize:10}} aria-hidden="true"/>
<a style={{display:'inline-block', marginLeft:'0.5em'}}
<a style={{display:'inline-block', marginLeft:'0.5em'}}
onClick={e => {
this.props.catchMatomoEvent(new Event('filedownload'));
e.stopPropagation();
Expand All @@ -734,11 +731,12 @@ export const FileRecordRow = React.createClass({
</span> : null
}
</div>
<div className={"col-sm-"+(this.props.remove? "1":"2")} style={{padding: '0px'}} onClick={e => this.setState({open:!this.state.open})}>{
<div className="col-sm-1" style={{padding: '0px'}} onClick={e => this.setState({open:!this.state.open})}>{
file.b2safe ?
"-" : humanSize(file.size)
}</div>
<div className="col-sm-2 buttons">
<div className="col-sm-3">
<div className="btn-group" role="group" aria-label="...">
{ this.props.b2noteWidget }
{ !file.checksum ? false :
<button type="button" className="btn btn-default btn-xs" onClick={() => this.copyIdentifier(file.checksum, 'File checksum')} title="Copy checksum to clipboard">
Expand All @@ -749,31 +747,28 @@ export const FileRecordRow = React.createClass({
<i className="glyphicon glyphicon-globe"/>
</button> }
{ !this.props.remove ? false :
<button type="button" className="btn btn-default btn-xs remove" onClick={()=>this.setState({remove:true})} title="Delete">
<button type="button" className="btn btn-default btn-xs remove" onClick={()=>this.setState({remove:true})} title="Delete this file">
<i className="glyphicon glyphicon-remove"/>
</button> }
</div>
</div>
</div>
{ allowDetails && this.state.open ?
{ allowDetails && this.state.open &&
<div className="details">
{ file.checksum ?
{ file.checksum &&
<div>
Checksum:
<PersistentIdentifier style={{marginLeft:'0.2em'}} pid={file.checksum} />
</div>
: false }
{ file.ePIC_PID ?
Checksum: <PersistentIdentifier style={{marginLeft:'0.2em'}} pid={file.checksum} />
</div> }
{ file.ePIC_PID &&
<div>
PID: <PersistentIdentifier style={{marginLeft:'0.2em'}} pid={file.ePIC_PID} />
</div>
: false }
</div> : false }
</div> }
</div> }

{ this.props.remove && this.state.remove ?
{ this.props.remove && this.state.remove &&
<FileRemoveDialog file={file}
remove={this.props.remove}
cancel={()=>this.setState({remove:false})} />
: false }
cancel={()=>this.setState({remove:false})} /> }
</div>
);
},
Expand Down
2 changes: 1 addition & 1 deletion webui/src/components/newrecord.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export const NewRecordRoute = React.createClass({
</div>
</form>
</div>
<div className="row buttons">
<div className="row">
<div className="col-sm-9 col-sm-offset-3">
<p className="alert alert-warning" style={{color:'black'}}>
You can also update the data in an existing record by creating a new version of that record.
Expand Down
6 changes: 4 additions & 2 deletions webui/src/components/record.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const B2NoteWidget = React.createClass({
}

return (
<form id="b2note_form_" action={this.props.b2noteUrl + '/widget'} method="post" target="b2note_iframe" style={{display: 'inline-block'}} onSubmit={this.handleSubmit}>
<form id="b2note_form_" action={this.props.b2noteUrl + '/widget'} className="btn btn-xs" method="post" target="b2note_iframe" style={{padding: '0px', border: '0px'}} onSubmit={this.handleSubmit}>
<input type="hidden" name="recordurl_tofeed" value={record_url} className="field left" readOnly="readonly"/>
<input type="hidden" name="pid_tofeed" value={pid} className="field left" readOnly="readonly"/>
<input type="hidden" name="subject_tofeed" value={object_url} className="field left" readOnly="readonly"/>
Expand Down Expand Up @@ -367,9 +367,11 @@ const Record = React.createClass({
return <FileRecordRow key={f.get('key')} file={f} b2noteWidget={b2noteWidget} showDownloads={showDownloads} catchMatomoEvent={this.catchMatomoEvent} />
}
fileComponent =
<div className='fileList'>
<div className='filelist'>
<FileRecordHeader/>
<div className='files'>
{ files.map(fileRecordRowFn) }
</div>
</div>;
}
return (
Expand Down
10 changes: 5 additions & 5 deletions webui/src/data/misc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,15 @@ export function humanSize(sz) {
let K = 1000, M = K*K, G = K*M, T = K*G;

if (sz < K) {
return [sz,'B '];
return [sz,' B'];
} else if (sz < M) {
return [(sz/K).toFixed(2), 'KB'];
return [(sz/K).toFixed(2), ' KB'];
} else if (sz < G) {
return [(sz/M).toFixed(2), 'MB'];
return [(sz/M).toFixed(2), ' MB'];
} else if (sz < T) {
return [(sz/G).toFixed(2), 'GB'];
return [(sz/G).toFixed(2), ' GB'];
} else {
return [(sz/T).toFixed(2), 'TB'];
return [(sz/T).toFixed(2), ' TB'];
}
}

Expand Down