From 3a47a4f836ffa1fc5db37e27dc21a454433f5cdb Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Fri, 22 Feb 2019 22:19:16 +0100
Subject: [PATCH] mol-plugin: ui
---
.../skin/base/components/transformer.scss | 43 ++++++++++++++++---
src/mol-plugin/ui/state/common.tsx | 21 ++++++---
src/mol-plugin/ui/state/tree.tsx | 2 +-
src/mol-plugin/ui/state/update-transform.tsx | 15 +++----
4 files changed, 59 insertions(+), 22 deletions(-)
diff --git a/src/mol-plugin/skin/base/components/transformer.scss b/src/mol-plugin/skin/base/components/transformer.scss
index e753f8524..f9d0105a7 100644
--- a/src/mol-plugin/skin/base/components/transformer.scss
+++ b/src/mol-plugin/skin/base/components/transformer.scss
@@ -42,16 +42,44 @@
margin-bottom: $control-spacing;
}
-.msp-transform-header {
- position: relative;
- // border-top: 1px solid $entity-color-Behaviour; // TODO: separate color
+.msp-transform-update-wrapper {
+ border-bottom: $control-spacing solid $control-background;
+}
- > button {
+.msp-transform-update-wrapper-collapsed {
+ margin-bottom: 1px;
+}
+
+.msp-transform-update-wrapper, .msp-transform-update-wrapper-collapsed {
+ > .msp-transform-header > button {
text-align: left;
padding-left: $row-height;
background: $control-background; // color-lower-contrast($default-background, 4%);
font-weight: bold;
}
+}
+
+.msp-transform-wrapper > .msp-transform-header > button {
+ text-align: left;
+ background: color-lower-contrast($default-background, 4%);
+ font-weight: bold;
+}
+
+.msp-transform-header {
+ position: relative;
+ // border-top: 1px solid $entity-color-Behaviour; // TODO: separate color
+
+ // > button {
+ // text-align: left;
+ // padding-left: $row-height;
+ // background: $control-background; // color-lower-contrast($default-background, 4%);
+ // font-weight: bold;
+ // }
+
+ > button > small {
+ font-weight: normal;
+ float: right;
+ }
> button:hover {
color: color-lower-contrast($font-color, 15%);
@@ -59,9 +87,11 @@
}
.msp-transform-default-params {
+ background: $default-background;
position: absolute;
- right: 0;
+ left: 0;
top: 0;
+ width: $row-height;
}
.msp-transform-default-params:hover {
@@ -75,7 +105,8 @@
}
.msp-transform-refresh {
- width: $control-label-width + $control-spacing;
+ width: $control-label-width + $control-spacing - $row-height - 1;
+ margin-left: $row-height + 1;
background: $default-background;
text-align: right;
}
diff --git a/src/mol-plugin/ui/state/common.tsx b/src/mol-plugin/ui/state/common.tsx
index d6cc4c8f8..57659f7aa 100644
--- a/src/mol-plugin/ui/state/common.tsx
+++ b/src/mol-plugin/ui/state/common.tsx
@@ -87,7 +87,7 @@ namespace StateTransformParameters {
}
namespace TransformContolBase {
- export interface ControlState {
+ export interface ComponentState {
params: any,
error?: string,
busy: boolean,
@@ -96,7 +96,7 @@ namespace TransformContolBase {
}
}
-abstract class TransformContolBase<P, S extends TransformContolBase.ControlState> extends PurePluginUIComponent<P, S> {
+abstract class TransformContolBase<P, S extends TransformContolBase.ComponentState> extends PurePluginUIComponent<P, S> {
abstract applyAction(): Promise<void>;
abstract getInfo(): StateTransformParameters.Props['info'];
abstract getHeader(): StateTransformer.Definition['display'];
@@ -175,17 +175,26 @@ abstract class TransformContolBase<P, S extends TransformContolBase.ControlState
? this.plugin.customParamEditors.get(tId)!
: StateTransformParameters;
- return <div className='msp-transform-wrapper'>
+ const wrapClass = this.isUpdate()
+ ? !isEmpty && !this.state.isCollapsed
+ ? 'msp-transform-update-wrapper'
+ : 'msp-transform-update-wrapper-collapsed'
+ : 'msp-transform-wrapper';
+
+ return <div className={wrapClass}>
<div className='msp-transform-header'>
- <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded} title={display.description}>{display.name}</button>
- {!isEmpty && !this.state.isCollapsed && <button className='msp-btn msp-btn-link msp-transform-default-params' onClick={this.setDefault} disabled={this.state.busy} style={{ float: 'right'}} title='Set default params'>↻</button>}
+ <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded} title={display.description}>
+ {display.name}
+ {!isEmpty && this.state.isCollapsed && this.isUpdate() && <small>Click to Edit</small>}
+ </button>
</div>
{!isEmpty && !this.state.isCollapsed && <>
<ParamEditor info={info} events={this.events} params={this.state.params} isDisabled={this.state.busy} />
<div className='msp-transform-apply-wrap'>
+ <button className='msp-btn msp-btn-block msp-transform-default-params' onClick={this.setDefault} disabled={this.state.busy} title='Set default params'>↻</button>
<button className='msp-btn msp-btn-block msp-transform-refresh msp-form-control' title='Refresh params' onClick={this.refresh} disabled={this.state.busy || this.state.isInitial}>
- ↶ Reset
+ ↶ Back
</button>
<div className='msp-transform-apply'>
<button className={`msp-btn msp-btn-block msp-btn-commit msp-btn-commit-${this.canApply() ? 'on' : 'off'}`} onClick={this.apply} disabled={!this.canApply()}>
diff --git a/src/mol-plugin/ui/state/tree.tsx b/src/mol-plugin/ui/state/tree.tsx
index 6b42be65b..b98a60577 100644
--- a/src/mol-plugin/ui/state/tree.tsx
+++ b/src/mol-plugin/ui/state/tree.tsx
@@ -251,6 +251,6 @@ class StateTreeNodeTransform extends PluginUIComponent<{ nodeRef: string, state:
if (!parent || parent.status !== 'ok') return null;
const transform = cell.transform;
- return <UpdateTransformContol state={this.props.state} transform={transform} />;
+ return <UpdateTransformContol state={this.props.state} transform={transform} initiallyCollapsed={true} />;
}
}
\ No newline at end of file
diff --git a/src/mol-plugin/ui/state/update-transform.tsx b/src/mol-plugin/ui/state/update-transform.tsx
index e60eae066..31f1a498b 100644
--- a/src/mol-plugin/ui/state/update-transform.tsx
+++ b/src/mol-plugin/ui/state/update-transform.tsx
@@ -13,15 +13,12 @@ export { UpdateTransformContol };
namespace UpdateTransformContol {
export interface Props {
transform: StateTransform,
- state: State
+ state: State,
+ initiallyCollapsed?: boolean
}
- export interface ComponentState {
- transform: StateTransform,
- params: any,
- error?: string,
- busy: boolean,
- isInitial: boolean
+ export interface ComponentState extends TransformContolBase.ComponentState {
+ transform: StateTransform
}
}
@@ -48,10 +45,10 @@ class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Pr
private _getInfo = memoizeLatest((t: StateTransform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, this.props.transform));
- state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false };
+ state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };
static getDerivedStateFromProps(props: UpdateTransformContol.Props, state: UpdateTransformContol.ComponentState) {
- if (props.transform === state.transform) return null;
+ if (props.transform === state.transform && props.initiallyCollapsed) return null;
const cell = props.state.cells.get(props.transform.ref)!;
const newState: Partial<UpdateTransformContol.ComponentState> = {
transform: props.transform,
--
GitLab