diff --git a/src/mol-plugin/skin/base/components/temp.scss b/src/mol-plugin/skin/base/components/temp.scss index ff1859fb9aac3308d3f2bfa8e301dd5ae7822806..492afe1d9f313da6ef49beb5c31a55ed37030491 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 f5b669e2756bc25be1cc98b1ec4108554fcd0152..38a1b4e38cf89464b5e973b5a68ea582b10ab355 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 b8e0847fadb18dea5803a8866dc7160dd78fc9b9..6d283b897d89fb5667bb110900ec7cc5f00b3efb 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 7d778a60f6ba85d7f01321e023121c9504282f82..986d181d776a4d0266e51db601e3562e26e7c5ca 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 74c8373f7fe033778004905b024ee122bf7bc9b7..7e3a896c5376e962e718278a485b98548bf49de9 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 {