mol-plugin: more ui tweaks

src/mol-plugin/skin/base/components/controls-base.scss

@@ -146,10 +146,8 @@
     .msp-icon {
         display: block-inline;
         line-height: $row-height;
-        margin-right: $control-spacing;
         width: $row-height;
         text-align: center;
-        float: left;
     } 
 }
 

src/mol-plugin/skin/base/components/temp.scss

@@ -6,12 +6,18 @@
     height: $row-height;
     line-height: $row-height;
     margin-bottom: $control-spacing;
-    text-align: center;
+    text-align: right;
+    padding: 0 $control-spacing;
     font-weight: bold;
     background: $default-background;
     // border-right: $control-spacing solid $entity-color-Group; // TODO separate color
-    border-top: 1px 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
+
+    > .msp-icon {
+        display: block;
+        float: left;
+    }
 }
 
 .msp-current-header {
@@ -217,4 +223,10 @@
         right: 0;
         top: 0
     }
+}
+
+.msp-state-actions {
+    .msp-transform-wrapper:last-child {
+        margin-bottom: 10px;
+    }
 }

src/mol-plugin/skin/base/components/transformer.scss

@@ -42,6 +42,10 @@
     margin-bottom: $control-spacing;
 }
 
+.msp-transform-wrapper-collapsed {
+    margin-bottom: 1px;
+}
+
 .msp-transform-update-wrapper {
     margin-bottom: 1px;
 }

src/mol-plugin/skin/base/icons.scss

@@ -54,6 +54,10 @@
 	content: "\e812";
 }
 
+.msp-icon-back:before { 
+	content: "\e820";
+}
+
 .msp-icon-cross:before { 
 	content: "\e868";
 }
@@ -192,4 +196,16 @@
 
 .msp-icon-database:before {
 	content: "\e8d3";
+}
+
+.msp-icon-upload:before {
+	content: "\e82e";
+}
+
+.msp-icon-record:before {
+	content: "\e89a";
+}
+
+.msp-icon-code:before {
+	content: "\e834";
 }

src/mol-plugin/ui/camera.tsx

@@ -9,11 +9,12 @@ import * as React from 'react';
 import { PluginUIComponent } from './base';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { ParameterControls } from './controls/parameters';
+import { Icon } from './controls/common';
 
 export class CameraSnapshots extends PluginUIComponent<{ }, { }> {
     render() {
         return <div>
-            <div className='msp-section-header'>Camera Snapshots</div>
+            <div className='msp-section-header'><Icon name='code' /> Camera Snapshots</div>
             <CameraSnapshotControls />
             <CameraSnapshotList />
         </div>;

src/mol-plugin/ui/state.tsx

@@ -13,17 +13,33 @@ import { ParameterControls } from './controls/parameters';
 import { ParamDefinition as PD} from 'mol-util/param-definition';
 import { PluginState } from 'mol-plugin/state';
 import { urlCombine } from 'mol-util/url';
-import { IconButton } from './controls/common';
+import { IconButton, Icon } from './controls/common';
 import { formatTimespan } from 'mol-util/now';
 
 export class StateSnapshots extends PluginUIComponent<{ }> {
+    downloadToFile = () => {
+        PluginCommands.State.Snapshots.DownloadToFile.dispatch(this.plugin, { });
+    }
+
+    open = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!e.target.files || !e.target.files![0]) return;
+
+        PluginCommands.State.Snapshots.OpenFile.dispatch(this.plugin, { file: e.target.files![0] });
+    }
 
     render() {
         return <div>
-            <div className='msp-section-header'>State</div>
+            <div className='msp-section-header'><Icon name='code' /> State</div>
             <LocalStateSnapshots />
             <LocalStateSnapshotList />
             <RemoteStateSnapshots />
+
+            <div className='msp-btn-row-group' style={{ marginTop: '10px' }}>
+                <button className='msp-btn msp-btn-block msp-form-control' onClick={this.downloadToFile}>Download JSON</button>
+                <div className='msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file'>
+                    {'Open JSON'} <input onChange={this.open} type='file' multiple={false} accept='.json' />
+                </div>
+            </div>
         </div>;
     }
 }
@@ -67,26 +83,9 @@ class LocalStateSnapshots extends PluginUIComponent<
         return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
     }
 
-    downloadToFile = () => {
-        PluginCommands.State.Snapshots.DownloadToFile.dispatch(this.plugin, { name: this.state.params.name });
-    }
-
-    open = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (!e.target.files || !e.target.files![0]) return;
-
-        PluginCommands.State.Snapshots.OpenFile.dispatch(this.plugin, { file: e.target.files![0] });
-    }
-
     render() {
         // TODO: proper styling
         return <div>
-            <div className='msp-btn-row-group' style={{ marginBottom: '10px' }}>
-                <button className='msp-btn msp-btn-block msp-form-control' onClick={this.downloadToFile}>Download JSON</button>
-                <div className='msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file'>
-                    {'Open JSON'} <input onChange={this.open} type='file' multiple={false} accept='.json' />
-                </div>
-            </div>
-
             <ParameterControls params={LocalStateSnapshots.Params} values={this.state.params} onEnter={this.add} onChange={p => {
                 const params = { ...this.state.params, [p.name]: p.value };
                 this.setState({ params } as any);
@@ -94,7 +93,7 @@ class LocalStateSnapshots extends PluginUIComponent<
             }}/>
 
             <div className='msp-btn-row-group'>
-                <button className='msp-btn msp-btn-block msp-form-control' onClick={this.add}>Save</button>
+                <button className='msp-btn msp-btn-block msp-form-control' onClick={this.add}><Icon name='record' /> Save</button>
                 {/* <button className='msp-btn msp-btn-block msp-form-control' onClick={this.upload} disabled={this.state.isUploading}>Upload</button> */}
                 <button className='msp-btn msp-btn-block msp-form-control' onClick={this.clear}>Clear</button>
             </div>
@@ -251,14 +250,14 @@ class RemoteStateSnapshots extends PluginUIComponent<
 
     render() {
         return <div>
-            <div className='msp-section-header'>Remote State</div>
+            <div className='msp-section-header'><Icon name='code' /> Remote State</div>
 
             <ParameterControls params={RemoteStateSnapshots.Params} values={this.state.params} onEnter={this.upload} onChange={p => {
                 this.setState({ params: { ...this.state.params, [p.name]: p.value } } as any);
             }} isDisabled={this.state.isBusy}/>
 
             <div className='msp-btn-row-group'>
-                <button className='msp-btn msp-btn-block msp-form-control' onClick={this.upload} disabled={this.state.isBusy}>Upload</button>
+                <button className='msp-btn msp-btn-block msp-form-control' onClick={this.upload} disabled={this.state.isBusy}><Icon name='upload' /> Upload</button>
                 <button className='msp-btn msp-btn-block msp-form-control' onClick={this.refresh} disabled={this.state.isBusy}>Refresh</button>
             </div>
 

src/mol-plugin/ui/state/actions.tsx

@@ -8,6 +8,7 @@ import * as React from 'react';
 import { PluginUIComponent } from '../base';
 import { ApplyActionContol } from './apply-action';
 import { State } from 'mol-state';
+import { Icon } from '../controls/common';
 
 export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string, hideHeader?: boolean, initiallyColapsed?: boolean }> {
     get current() {
@@ -35,9 +36,9 @@ export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRe
         const def = cell.transform.transformer.definition;
         const display = cell.obj ? cell.obj.label : (def.display && def.display.name) || def.name;
 
-        return <>
-            {!this.props.hideHeader && <div className='msp-section-header'>{`Actions (${display})`}</div> }
+        return <div className='msp-state-actions'>
+            {!this.props.hideHeader && <div className='msp-section-header'><Icon name='code' /> {`Actions (${display})`}</div> }
             {actions.map((act, i) => <ApplyActionContol plugin={this.plugin} key={`${act.id}`} state={state} action={act} nodeRef={ref} initiallyCollapsed={this.props.initiallyColapsed} />)}
-        </>;
+        </div>;
     }
 }

src/mol-plugin/ui/state/animation.tsx

@@ -14,7 +14,7 @@ export class AnimationControlsWrapper extends PluginUIComponent<{ }> {
         const anim = this.plugin.state.animation;
         if (anim.isEmpty) return null;
         return <div className='msp-contols-section'>
-            <div className='msp-section-header'>Animations</div>
+            <div className='msp-section-header'><Icon name='code' /> Animations</div>
             <AnimationControls />
         </div>
     }

src/mol-plugin/ui/state/common.tsx

@@ -11,6 +11,7 @@ import { ParameterControls, ParamOnChange } from '../controls/parameters';
 import { PluginContext } from 'mol-plugin/context';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { Subject } from 'rxjs';
+import { Icon } from '../controls/common';
 
 export { StateTransformParameters, TransformContolBase };
 
@@ -175,7 +176,9 @@ abstract class TransformContolBase<P, S extends TransformContolBase.ComponentSta
             ? this.plugin.customParamEditors.get(tId)!
             : StateTransformParameters;
 
-        const wrapClass = 'msp-transform-wrapper';
+        const wrapClass = this.state.isCollapsed
+            ? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
+            : 'msp-transform-wrapper';
         // this.isUpdate()
         //     ? !isEmpty && !this.state.isCollapsed
         //     ? 'msp-transform-update-wrapper'
@@ -193,12 +196,13 @@ abstract class TransformContolBase<P, S extends TransformContolBase.ComponentSta
                 <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-default-params' onClick={this.setDefault} disabled={this.state.busy} title='Set default params'><Icon name='cw' /></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}>
-                        ↶ Back
+                        <Icon name='back' /> 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()}>
+                            {this.canApply() && <Icon name='ok' />}
                             {this.applyText()}
                         </button>
                     </div>