Skip to content
Snippets Groups Projects
Commit 3a47a4f8 authored by David Sehnal's avatar David Sehnal
Browse files

mol-plugin: ui

parent 466c9bd6
Branches
Tags
No related merge requests found
......@@ -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;
}
.msp-transform-update-wrapper-collapsed {
margin-bottom: 1px;
}
> button {
.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;
}
......
......@@ -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()}>
......
......@@ -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
......@@ -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,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment