ui tweaks

src/mol-plugin-state/manager/structure/component.ts

@@ -291,7 +291,7 @@ namespace StructureComponentManager {
                 return {
                     kind: PD.Value<ActionType>(action, { isHidden: true }),
                     action: PD.MappedStatic('color', {
-                        color: PD.Color(ColorNames.black),
+                        color: PD.Color(ColorNames.black, { label: 'Color' }),
                         reset: PD.EmptyGroup()
                     }),
                     // TODO: filter by representation type

src/mol-plugin-ui/controls/parameters.tsx

@@ -852,7 +852,7 @@ export class MappedControl extends React.PureComponent<ParamProps<PD.Mapped<any>
                 return <div className='msp-mapped-parameter-group'>
                     {Select}
                     <IconButton icon='log' onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`${label} Properties`} />
-                    {this.state.isExpanded && <GroupControl inMapped param={param} value={value.params} name={`${label} Properties`} onChange={this.onChangeParam} onEnter={this.props.onEnter} isDisabled={this.props.isDisabled} />}
+                    {this.state.isExpanded && <GroupControl inMapped param={param} value={value.params} name={value.name} onChange={this.onChangeParam} onEnter={this.props.onEnter} isDisabled={this.props.isDisabled} />}
                 </div>
             }
 
@@ -861,7 +861,7 @@ export class MappedControl extends React.PureComponent<ParamProps<PD.Mapped<any>
 
         return <>
             {Select}
-            <Mapped param={param} value={value.params} name={`${label} Properties`} onChange={this.onChangeParam} onEnter={this.props.onEnter} isDisabled={this.props.isDisabled} />
+            <Mapped param={param} value={value.params} name={value.name} onChange={this.onChangeParam} onEnter={this.props.onEnter} isDisabled={this.props.isDisabled} />
         </>
     }
 }

src/mol-plugin-ui/structure/components.tsx

@@ -72,19 +72,6 @@ class ComponentEditorControls extends PurePluginUIComponent<{}, ComponentEditorC
     toggleOptions = this.toggleAction('options');
     hideAction = () => this.setState({ action: void 0 });
 
-    modifyControls = {
-        add: () => { },
-    }
-
-    modifySelect() {
-        return <div className='msp-control-row msp-select-row'>
-            <button><Icon name='plus' /> Add</button>
-            <button><Icon name='flow-branch' /> Merge</button>
-            <button><Icon name='minus' /> Sub</button>
-            <button><Icon name='brush' /> Color</button>
-        </div>;
-    }
-
     get presetControls() {
         return <ActionMenu items={this.presetActions} onSelect={this.applyPreset} />
     }
@@ -174,8 +161,8 @@ class ModifyComponentControls extends PurePluginUIComponent<{ onApply: () => voi
     render() {
         return <>
             <div className='msp-control-row msp-select-row'>
-                <ToggleButton icon='plus' label='Add' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} />
-                <ToggleButton icon='flow-branch' label='Merge' toggle={this.toggleMerge} isSelected={this.state.action === 'merge'} />
+                <ToggleButton icon='plus' label='New' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} />
+                <ToggleButton icon='flow-branch' label='Union' toggle={this.toggleMerge} isSelected={this.state.action === 'merge'} />
                 <ToggleButton icon='minus' label='Sub' toggle={this.toggleSubtract} isSelected={this.state.action === 'subtract'} />
                 <ToggleButton icon='brush' label='Color' toggle={this.toggleColor} isSelected={this.state.action === 'color'} />
             </div>
@@ -207,7 +194,7 @@ class ComponentListControls extends PurePluginUIComponent {
 
     render() {
         const componentGroups = this.plugin.managers.structure.hierarchy.componentGroups;
-        return <div style={{ marginTop: '8px' }}>
+        return <div>
             {componentGroups.map(g => <StructureComponentGroup key={g[0].cell.transform.ref} group={g} />)}
         </div>;
     }
@@ -284,7 +271,7 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
         const cell = component.cell;
         const label = cell.obj?.label;
         return <>
-            <div className='msp-control-row'>
+            <div className='msp-control-row' style={{ marginTop: '6px' }}>
                 <button className='msp-control-button-label' title={`${label}. Click to focus.`} onClick={this.focus} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={{ textAlign: 'left' }}>
                     {label}
                 </button>

src/mol-plugin-ui/structure/selection.tsx

@@ -168,7 +168,7 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
         return <>
             {this.controls}
             <ParameterControls params={StructureSelectionParams} values={this.values} onChange={this.setProps} isDisabled={this.state.isDisabled} />
-            <div className='msp-control-row msp-row-text'>
+            <div className='msp-control-row msp-row-text' style={{ marginTop: '6px' }}>
                 <button className='msp-btn msp-btn-block' onClick={this.focus}>
                     <Icon name='focus-on-visual' style={{ position: 'absolute', left: '5px' }} />
                     {this.stats}