From 3b95de51fb679c34429179c269e0b3347e1e45c2 Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Mon, 26 Nov 2018 13:24:07 +0100
Subject: [PATCH] mol-plugin: better Log styling
---
src/mol-plugin/state/actions/basic.ts | 6 +++---
src/mol-plugin/ui/plugin.tsx | 9 ++++++---
2 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/src/mol-plugin/state/actions/basic.ts b/src/mol-plugin/state/actions/basic.ts
index 92da1e4c6..b50889e6b 100644
--- a/src/mol-plugin/state/actions/basic.ts
+++ b/src/mol-plugin/state/actions/basic.ts
@@ -63,13 +63,13 @@ const DownloadStructure = StateAction.build({
url = src.params;
break;
case 'pdbe-updated':
- url = { url: `https://www.ebi.ac.uk/pdbe/static/entry/${src.params.id.toLowerCase()}_updated.cif`, isBinary: false, label: `PDBe: ${src.params}` };
+ url = { url: `https://www.ebi.ac.uk/pdbe/static/entry/${src.params.id.toLowerCase()}_updated.cif`, isBinary: false, label: `PDBe: ${src.params.id}` };
break;
case 'rcsb':
- url = { url: `https://files.rcsb.org/download/${src.params.id.toUpperCase()}.cif`, isBinary: false, label: `RCSB: ${src.params}` };
+ url = { url: `https://files.rcsb.org/download/${src.params.id.toUpperCase()}.cif`, isBinary: false, label: `RCSB: ${src.params.id}` };
break;
case 'bcif-static':
- url = { url: `https://webchem.ncbr.muni.cz/ModelServer/static/bcif/${src.params.id.toLowerCase()}`, isBinary: true, label: `BinaryCIF: ${src.params}` };
+ url = { url: `https://webchem.ncbr.muni.cz/ModelServer/static/bcif/${src.params.id.toLowerCase()}`, isBinary: true, label: `BinaryCIF: ${src.params.id}` };
break;
default: throw new Error(`${(src as any).name} not supported.`);
}
diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin/ui/plugin.tsx
index 4ef23dd07..f804c5548 100644
--- a/src/mol-plugin/ui/plugin.tsx
+++ b/src/mol-plugin/ui/plugin.tsx
@@ -96,6 +96,7 @@ export class Log extends PluginComponent<{}, { entries: List<LogEntry> }> {
private wrapper = React.createRef<HTMLDivElement>();
componentDidMount() {
+ // TODO: only show last 100 entries.
this.subscribe(this.plugin.events.log, e => this.setState({ entries: this.state.entries.push(e) }));
}
@@ -111,10 +112,12 @@ export class Log extends PluginComponent<{}, { entries: List<LogEntry> }> {
}
render() {
- return <div ref={this.wrapper} style={{ position: 'absolute', top: '0', right: '0', bottom: '0', left: '0', overflowY: 'auto' }}>
- <ul style={{ listStyle: 'none' }} className='msp-log-list'>
+ return <div ref={this.wrapper} className='msp-log' style={{ position: 'absolute', top: '0', right: '0', bottom: '0', left: '0', overflowY: 'auto' }}>
+ <ul className='msp-list-unstyled'>
{this.state.entries.map((e, i) => <li key={i}>
- <b>[{formatTime(e!.timestamp)} | {e!.type}]</b> {e!.message}
+ <div className={'msp-log-entry-badge msp-log-entry-' + e!.type} />
+ <div className='msp-log-timestamp'>{formatTime(e!.timestamp)}</div>
+ <div className='msp-log-entry'>{e!.message}</div>
</li>)}
</ul>
</div>;
--
GitLab