Icon tweaks

- measurement remove
- selection mode

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

@@ -11,10 +11,9 @@ import ArrowUpward from '@material-ui/icons/ArrowUpward';
 import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
 import HelpOutline from '@material-ui/icons/HelpOutline';
 import MoreHoriz from '@material-ui/icons/MoreHoriz';
-import RemoveOutlined from '@material-ui/icons/RemoveOutlined';
 import Tune from '@material-ui/icons/Tune';
-import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
 import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
+import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
 import * as React from 'react';
 import { Loci } from '../../mol-model/loci';
 import { StructureElement } from '../../mol-model/structure';
@@ -27,9 +26,10 @@ import { FiniteArray } from '../../mol-util/type-helpers';
 import { CollapsableControls, PurePluginUIComponent } from '../base';
 import { ActionMenu } from '../controls/action-menu';
 import { Button, ExpandGroup, IconButton, ToggleButton } from '../controls/common';
-import { Icon, SetSvg, RulerSvg } from '../controls/icons';
+import { Icon, RulerSvg, SetSvg } from '../controls/icons';
 import { ParameterControls } from '../controls/parameters';
 import { UpdateTransformControl } from '../state/update-transform';
+import { ToggleSelectionModeButton } from './selection';
 
 // TODO details, options (e.g. change text for labels)
 
@@ -172,7 +172,7 @@ export class MeasurementControls extends PurePluginUIComponent<{}, { isBusy: boo
                 {entries}
             </div>}
             {entries.length === 0 && <div className='msp-control-offset msp-help-text'>
-                <div className='msp-help-description'><Icon svg={HelpOutline} inline />Add one or more selections</div>
+                <div className='msp-help-description' style={{ padding: 0 }}><Icon svg={HelpOutline} inline />Add <ToggleSelectionModeButton /> one or more selections</div>
             </div>}
         </>;
     }
@@ -298,7 +298,7 @@ class MeasurementEntry extends PurePluginUIComponent<{ cell: StructureMeasuremen
                     <span dangerouslySetInnerHTML={{ __html: this.label }} />
                 </button>
                 <IconButton svg={cell.state.isHidden ? VisibilityOffOutlined : VisibilityOutlined} toggleState={false} small className='msp-form-control' onClick={this.toggleVisibility} flex title={cell.state.isHidden ? 'Show' : 'Hide'} />
-                <IconButton svg={RemoveOutlined} small className='msp-form-control' onClick={this.delete} flex title='Delete' />
+                <IconButton svg={DeleteOutlined} small className='msp-form-control' onClick={this.delete} flex title='Delete' toggleState={false} />
                 <IconButton svg={MoreHoriz} className='msp-form-control' onClick={this.toggleUpdate} flex title='Actions' toggleState={this.state.showUpdate} />
             </div>
             {this.state.showUpdate && cell.parent && <>

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

@@ -10,6 +10,7 @@ import CancelOutlined from '@material-ui/icons/CancelOutlined';
 import Brush from '@material-ui/icons/Brush';
 import Restore from '@material-ui/icons/Restore';
 import Remove from '@material-ui/icons/Remove';
+import SelectAll from '@material-ui/icons/SelectAll';
 import * as React from 'react';
 import { StructureSelectionQueries, StructureSelectionQuery, getNonStandardResidueQueries, getElementQueries, getPolymerAndBranchedEntityQueries } from '../../mol-plugin-state/helpers/structure-selection-query';
 import { InteractivityManager } from '../../mol-plugin-state/manager/interactivity';
@@ -27,6 +28,24 @@ import { Union, Subtract, Intersect, SetSvg as SetSvg, CubeSvg } from '../contro
 import { AddComponentControls } from './components';
 import Structure from '../../mol-model/structure/structure/structure';
 
+
+export class ToggleSelectionModeButton extends PurePluginUIComponent {
+    componentDidMount() {
+        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
+        this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
+        this.subscribe(this.plugin.behaviors.interaction.selectionMode, () => this.forceUpdate());
+    }
+
+    _toggleSelMode = () => {
+        this.plugin.selectionMode = !this.plugin.selectionMode;
+    }
+
+    render() {
+        return <IconButton svg={SelectAll} onClick={this._toggleSelMode} title={'Toggle Selection Mode'} style={{ background: 'transparent' }} toggleState={this.plugin.selectionMode} />;
+    }
+}
+
+
 const StructureSelectionParams = {
     granularity: InteractivityManager.Params.granularity,
 };

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

@@ -13,7 +13,6 @@ import ArrowDownward from '@material-ui/icons/ArrowDownward';
 import ArrowUpward from '@material-ui/icons/ArrowUpward';
 import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
 import Tune from '@material-ui/icons/Tune';
-import Crop from '@material-ui/icons/Crop';
 import { CollapsableControls, PurePluginUIComponent } from '../base';
 import { Icon } from '../controls/icons';
 import { Button, ToggleButton, IconButton } from '../controls/common';
@@ -29,6 +28,7 @@ import { structureElementStatsLabel, elementLabel } from '../../mol-theme/label'
 import { ParameterControls } from '../controls/parameters';
 import { stripTags } from '../../mol-util/string';
 import { StructureSelectionHistoryEntry } from '../../mol-plugin-state/manager/structure/selection';
+import { ToggleSelectionModeButton } from './selection';
 
 // TODO not working with already transformed structures in the general case
 
@@ -264,14 +264,6 @@ export class SuperpositionControls extends PurePluginUIComponent<{}, Superpositi
         return entries;
     }
 
-    _toggleSelMode = () => {
-        this.plugin.selectionMode = !this.plugin.selectionMode;
-    }
-
-    get toggleSelectionMode() {
-        return <IconButton svg={Crop} onClick={this._toggleSelMode} title={'Toggle Selection Mode'} style={{ background: 'transparent' }} />;
-    }
-
     addByChains() {
         const entries = this.chainEntries;
         return <>
@@ -279,7 +271,7 @@ export class SuperpositionControls extends PurePluginUIComponent<{}, Superpositi
                 {entries.map((e, i) => this.lociEntry(e, i))}
             </div>}
             {entries.length < 2 && <div className='msp-control-offset msp-help-text'>
-                <div className='msp-help-description'><Icon svg={HelpOutline} inline />Add 2 or more selections {this.toggleSelectionMode} from separate structures. Selections must be limited to single chains or parts of single chains.</div>
+                <div className='msp-help-description'><Icon svg={HelpOutline} inline />Add 2 or more selections <ToggleSelectionModeButton /> from separate structures. Selections must be limited to single chains or parts of single chains.</div>
             </div>}
             {entries.length > 1 && <Button title='Superpose structures by selected chains.' className='msp-btn-commit msp-btn-commit-on' onClick={this.superposeChains} style={{ marginTop: '1px' }}>
                 Superpose
@@ -294,7 +286,7 @@ export class SuperpositionControls extends PurePluginUIComponent<{}, Superpositi
                 {entries.map((e, i) => this.atomsLociEntry(e, i))}
             </div>}
             {entries.length < 2 && <div className='msp-control-offset msp-help-text'>
-                <div className='msp-help-description'><Icon svg={HelpOutline} inline />Add 1 or more selections {this.toggleSelectionMode} from
+                <div className='msp-help-description'><Icon svg={HelpOutline} inline />Add 1 or more selections <ToggleSelectionModeButton /> from
                 separate structures. Selections must be limited to single atoms.</div>
             </div>}
             {entries.length > 1 && <Button title='Superpose structures by selected atoms.' className='msp-btn-commit msp-btn-commit-on' onClick={this.superposeAtoms} style={{ marginTop: '1px' }}>

src/mol-plugin-ui/viewport.tsx

@@ -9,20 +9,20 @@ import Autorenew from '@material-ui/icons/Autorenew';
 import BuildOutlined from '@material-ui/icons/BuildOutlined';
 import CameraOutlined from '@material-ui/icons/CameraOutlined';
 import Close from '@material-ui/icons/Close';
-import Crop from '@material-ui/icons/Crop';
 import Fullscreen from '@material-ui/icons/Fullscreen';
 import Tune from '@material-ui/icons/Tune';
 import * as React from 'react';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import { resizeCanvas } from '../mol-canvas3d/util';
 import { PluginCommands } from '../mol-plugin/commands';
 import { PluginConfig } from '../mol-plugin/config';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { PluginUIComponent } from './base';
 import { ControlGroup, IconButton } from './controls/common';
+import { ToggleSelectionModeButton } from './structure/selection';
 import { DownloadScreenshotControls } from './viewport/screenshot';
 import { SimpleSettingsControl } from './viewport/simple-settings';
-import { Subject } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
 
 interface ViewportControlsState {
     isSettingsExpanded: boolean,
@@ -62,10 +62,6 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
         PluginCommands.Layout.Update(this.plugin, { state: { isExpanded: !this.plugin.layout.state.isExpanded } });
     }
 
-    toggleSelectionMode = () => {
-        this.plugin.selectionMode = !this.plugin.selectionMode;
-    }
-
     setSettings = (p: { param: PD.Base<any>, name: string, value: any }) => {
         PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { [p.name]: p.value } });
     }
@@ -81,7 +77,6 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
     componentDidMount() {
         this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
         this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
-        this.subscribe(this.plugin.behaviors.interaction.selectionMode, () => this.forceUpdate());
     }
 
     icon(icon: React.FC, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {
@@ -112,7 +107,7 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
                 </div>
                 {this.plugin.config.get(PluginConfig.Viewport.ShowSelectionMode) && <div>
                     <div className='msp-semi-transparent-background' />
-                    {this.icon(Crop, this.toggleSelectionMode, 'Toggle Selection Mode', this.plugin.behaviors.interaction.selectionMode.value)}
+                    <ToggleSelectionModeButton />
                 </div>}
             </div>
             {this.state.isScreenshotExpanded && <div className='msp-viewport-controls-panel'>