From c62295e0cf8d9564aa38a0a8547633699adcfc55 Mon Sep 17 00:00:00 2001 From: hevp Date: Wed, 17 Mar 2021 10:29:34 +0100 Subject: [PATCH 1/3] Improve record file table --- webui/app/css/app.css | 1 - webui/src/components/editfiles.jsx | 32 ++++++++++++++---------------- webui/src/components/record.jsx | 2 +- webui/src/data/misc.js | 10 +++++----- 4 files changed, 21 insertions(+), 24 deletions(-) diff --git a/webui/app/css/app.css b/webui/app/css/app.css index 8cc7b8ab3c..91dda46db7 100644 --- a/webui/app/css/app.css +++ b/webui/app/css/app.css @@ -1109,7 +1109,6 @@ a.navbar-brand { float: right; color: #F45D00; margin-right: 1em; - border-color: #eee; } .fileList .file .btn.remove:hover { color: red; diff --git a/webui/src/components/editfiles.jsx b/webui/src/components/editfiles.jsx index 535cc35a25..cef690552a 100644 --- a/webui/src/components/editfiles.jsx +++ b/webui/src/components/editfiles.jsx @@ -715,7 +715,7 @@ export const FileRecordRow = React.createClass({ style={{fontSize:10}} aria-hidden="true"/> : null } -
this.setState({open:!this.state.open})}>{ +
this.setState({open:!this.state.open})}>{ file.b2safe ? "-" : humanSize(file.size) }
-
+
+
{ this.props.b2noteWidget } { !file.checksum ? false : } { !this.props.remove ? false : - } +
- { allowDetails && this.state.open ? + { allowDetails && this.state.open &&
- { file.checksum ? + { file.checksum &&
- Checksum: - -
- : false } - { file.ePIC_PID ? + Checksum: +
} + { file.ePIC_PID &&
PID: -
- : false } -
: false } + } + } - { this.props.remove && this.state.remove ? + { this.props.remove && this.state.remove && this.setState({remove:false})} /> - : false } + cancel={()=>this.setState({remove:false})} /> } ); }, diff --git a/webui/src/components/record.jsx b/webui/src/components/record.jsx index cdde95b324..dbdf7c4daf 100644 --- a/webui/src/components/record.jsx +++ b/webui/src/components/record.jsx @@ -100,7 +100,7 @@ const B2NoteWidget = React.createClass({ } return ( -
+ diff --git a/webui/src/data/misc.js b/webui/src/data/misc.js index e1f4510f8b..348a70450e 100644 --- a/webui/src/data/misc.js +++ b/webui/src/data/misc.js @@ -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']; } } From 867b2535191bdd2ad6ac80c381f2586a9855ee8f Mon Sep 17 00:00:00 2001 From: hevp Date: Wed, 17 Mar 2021 10:43:56 +0100 Subject: [PATCH 2/3] Cleanup --- webui/app/css/app.css | 13 +++---------- webui/src/components/editfiles.jsx | 23 ++++++++++------------- webui/src/components/newrecord.jsx | 2 +- webui/src/data/misc.js | 2 +- 4 files changed, 15 insertions(+), 25 deletions(-) diff --git a/webui/app/css/app.css b/webui/app/css/app.css index 91dda46db7..455ca3d5f8 100644 --- a/webui/app/css/app.css +++ b/webui/app/css/app.css @@ -1069,19 +1069,12 @@ a.navbar-brand { filter: none; } -.fileList .fileHeader { +.fileList .fileheader { padding: 0.5em 0; border-bottom: 1px solid #ddd; -} -.fileList .fileHeader *{ font-weight: bold; -} -.fileList .buttons { - padding: 0px; - overflow-x: auto; -} -.fileList .buttons > *:not(:first-child) { - margin-left: 5px; + margin-top: 0.5em, + margin-bottom: 0.5em } .fileList .file { padding: 0.5em 0; diff --git a/webui/src/components/editfiles.jsx b/webui/src/components/editfiles.jsx index cef690552a..aa3d3c8c88 100644 --- a/webui/src/components/editfiles.jsx +++ b/webui/src/components/editfiles.jsx @@ -253,7 +253,6 @@ const B2DropZone = React.createClass({ const B2SafeZone = React.createClass({ - getInitialState() { return { state: 'b2safe', @@ -587,7 +586,7 @@ export const FileUploadHeader = React.createClass({ mixins: [React.addons.PureRenderMixin], render() { return ( -
+
Name
Size
@@ -642,21 +641,19 @@ const FileUploadRow = React.createClass({ {file.name}
{humanSize(file.size)}
- { this.props.remove ? + { this.props.remove &&
-
: false - } + } - { this.state.remove ? + { this.state.remove && 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) } ); }, @@ -666,10 +663,10 @@ export const FileRecordHeader = React.createClass({ mixins: [React.addons.PureRenderMixin], render() { return ( -
+
Name
-
Size
-
{/*Actions*/}
+
Size
+
{/*Actions*/}
); } diff --git a/webui/src/components/newrecord.jsx b/webui/src/components/newrecord.jsx index 95c9a87b4e..10caee0694 100644 --- a/webui/src/components/newrecord.jsx +++ b/webui/src/components/newrecord.jsx @@ -137,7 +137,7 @@ export const NewRecordRoute = React.createClass({
-
+

You can also update the data in an existing record by creating a new version of that record. diff --git a/webui/src/data/misc.js b/webui/src/data/misc.js index 348a70450e..c49a146853 100644 --- a/webui/src/data/misc.js +++ b/webui/src/data/misc.js @@ -42,7 +42,7 @@ 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']; } else if (sz < G) { From b804a49c4a72b6bb30e1a9c1cf89d499c5cd0866 Mon Sep 17 00:00:00 2001 From: hevp Date: Wed, 17 Mar 2021 10:59:41 +0100 Subject: [PATCH 3/3] Limit record file list length --- webui/app/css/app.css | 23 ++++++++++++++--------- webui/src/components/editfiles.jsx | 6 +++--- webui/src/components/record.jsx | 4 +++- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/webui/app/css/app.css b/webui/app/css/app.css index 455ca3d5f8..e767d844d1 100644 --- a/webui/app/css/app.css +++ b/webui/app/css/app.css @@ -1069,41 +1069,46 @@ a.navbar-brand { filter: none; } -.fileList .fileheader { +.filelist .fileheader { padding: 0.5em 0; border-bottom: 1px solid #ddd; font-weight: bold; margin-top: 0.5em, margin-bottom: 0.5em } -.fileList .file { +.filelist .files { + max-height: 800px; /* about 20 single line files */ + overflow-y: auto; + overflow-x: hidden; +} +.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; } -.fileList .file .btn.remove:hover { +.filelist .file .btn.remove:hover { color: red; } diff --git a/webui/src/components/editfiles.jsx b/webui/src/components/editfiles.jsx index aa3d3c8c88..2ae52f7522 100644 --- a/webui/src/components/editfiles.jsx +++ b/webui/src/components/editfiles.jsx @@ -200,7 +200,7 @@ const B2DropZone = React.createClass({ renderFiles: function() { return (

-
    +
    1. File Name
      Size
      @@ -499,7 +499,7 @@ export const EditFiles = React.createClass({ } return(
      -
      +
      { this.state.files.map(f => this.removeUploadFile(f)} />) } @@ -530,7 +530,7 @@ export const EditFiles = React.createClass({ } return(
      -
      +
      { this.props.files.map(f => this.removeRecordFile(f)} />) } diff --git a/webui/src/components/record.jsx b/webui/src/components/record.jsx index dbdf7c4daf..314cc9a496 100644 --- a/webui/src/components/record.jsx +++ b/webui/src/components/record.jsx @@ -367,9 +367,11 @@ const Record = React.createClass({ return } fileComponent = -
      +
      +
      { files.map(fileRecordRowFn) } +
      ; } return (