From a0b537ef6412a1946b00ebb1e2cb6bd70c6e0027 Mon Sep 17 00:00:00 2001 From: David Sehnal <david.sehnal@gmail.com> Date: Tue, 26 Nov 2019 15:04:33 +0100 Subject: [PATCH] mol-plugin: cleaner object update UI --- src/mol-plugin/skin/base/components/temp.scss | 5 +++++ src/mol-plugin/skin/base/icons.scss | 4 ++++ src/mol-plugin/ui/plugin.tsx | 9 ++++++++- src/mol-plugin/ui/state/common.tsx | 10 +++++----- src/mol-plugin/ui/state/update-transform.tsx | 2 +- 5 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/mol-plugin/skin/base/components/temp.scss b/src/mol-plugin/skin/base/components/temp.scss index ff1859fb9..492afe1d9 100644 --- a/src/mol-plugin/skin/base/components/temp.scss +++ b/src/mol-plugin/skin/base/components/temp.scss @@ -14,11 +14,16 @@ // border-right: $control-spacing solid $entity-color-Group; // TODO separate color border-bottom: 1px solid $entity-color-Group; // TODO separate color // border-bottom: 1px solid $entity-color-Group; // TODO separate color + cursor: default; > .msp-icon { display: block; float: left; } + + > small { + font-weight: normal; + } } .msp-current-header { diff --git a/src/mol-plugin/skin/base/icons.scss b/src/mol-plugin/skin/base/icons.scss index f5b669e27..38a1b4e38 100644 --- a/src/mol-plugin/skin/base/icons.scss +++ b/src/mol-plugin/skin/base/icons.scss @@ -219,4 +219,8 @@ .msp-icon-help-circle-collapse:before { width: 2.5em !important; content: "\e81d\0020\e883"; +} + +.msp-icon-flow-cascade:before { + content: "\e8d8"; } \ No newline at end of file diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin/ui/plugin.tsx index b8e0847fa..6d283b897 100644 --- a/src/mol-plugin/ui/plugin.tsx +++ b/src/mol-plugin/ui/plugin.tsx @@ -23,6 +23,7 @@ import { UpdateTransformControl } from './state/update-transform'; import { SequenceView } from './sequence'; import { Toasts } from './toast'; import { ImageControls } from './image'; +import { Icon } from './controls/common'; export class Plugin extends React.Component<{ plugin: PluginContext }, {}> { region(kind: 'left' | 'right' | 'bottom' | 'main', element: JSX.Element) { @@ -246,7 +247,13 @@ export class CurrentObject extends PluginUIComponent { if (!showActions) return null; return <> - {(cell.status === 'ok' || cell.status === 'error') && <UpdateTransformControl state={current.state} transform={transform} /> } + {(cell.status === 'ok' || cell.status === 'error') && <> + <div className='msp-section-header' style={{ margin: '0 0 -1px 0' }}> + <Icon name='flow-cascade' /> + {`${cell.obj?.label || transform.transformer.definition.display.name}`} <small>{transform.transformer.definition.display.name}</small> + </div> + <UpdateTransformControl state={current.state} transform={transform} customHeader='none' /> + </> } {cell.status === 'ok' && <StateObjectActions state={current.state} nodeRef={ref} initiallyCollapsed />} </>; } diff --git a/src/mol-plugin/ui/state/common.tsx b/src/mol-plugin/ui/state/common.tsx index 7d778a60f..986d181d7 100644 --- a/src/mol-plugin/ui/state/common.tsx +++ b/src/mol-plugin/ui/state/common.tsx @@ -102,7 +102,7 @@ namespace TransformControlBase { abstract class TransformControlBase<P, S extends TransformControlBase.ComponentState> extends PurePluginUIComponent<P, S> { abstract applyAction(): Promise<void>; abstract getInfo(): StateTransformParameters.Props['info']; - abstract getHeader(): StateTransformer.Definition['display']; + abstract getHeader(): StateTransformer.Definition['display'] | 'none'; abstract canApply(): boolean; abstract getTransformerId(): string; abstract canAutoApply(newParams: any): boolean; @@ -187,12 +187,12 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS const { a, b } = this.getSourceAndTarget(); return <div className={wrapClass}> - <div className='msp-transform-header'> - <button className='msp-btn msp-btn-block msp-btn-collapse' onClick={this.toggleExpanded} title={display.description}> - <span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} /> + {display !== 'none' && <div className='msp-transform-header'> + <button className={`msp-btn msp-btn-block${isEmpty ? '' : ' msp-btn-collapse'}`} onClick={this.toggleExpanded} title={display.description}> + {!isEmpty && <span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />} {display.name} </button> - </div> + </div>} {!isEmpty && !this.state.isCollapsed && <> <ParamEditor info={info} a={a} b={b} events={this.events} params={this.state.params} isDisabled={this.state.busy} /> diff --git a/src/mol-plugin/ui/state/update-transform.tsx b/src/mol-plugin/ui/state/update-transform.tsx index 74c8373f7..7e3a896c5 100644 --- a/src/mol-plugin/ui/state/update-transform.tsx +++ b/src/mol-plugin/ui/state/update-transform.tsx @@ -19,7 +19,7 @@ namespace UpdateTransformControl { state: State, toggleCollapsed?: Observable<any>, initiallyCollapsed?: boolean, - customHeader?: StateTransformer.Definition['display'] + customHeader?: StateTransformer.Definition['display'] | 'none' } export interface ComponentState extends TransformControlBase.ComponentState { -- GitLab