icon tweaks

src/mol-plugin-ui/camera.tsx

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Code, Delete } from '@material-ui/icons';
+import { Code, DeleteOutlined } from '@material-ui/icons';
 import * as React from 'react';
 import { PluginCommands } from '../mol-plugin/commands';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
@@ -70,7 +70,7 @@ class CameraSnapshotList extends PluginUIComponent<{ }, { }> {
         return <ul style={{ listStyle: 'none' }} className='msp-state-list'>
             {this.plugin.state.cameraSnapshots.state.entries.valueSeq().map(e =><li key={e!.id}>
                 <Button onClick={this.apply(e!.id)}>{e!.name || e!.timestamp} <small>{e!.description}</small></Button>
-                <IconButton svg={Delete} onClick={this.remove(e!.id)} className='msp-state-list-remove-button' />
+                <IconButton svg={DeleteOutlined} onClick={this.remove(e!.id)} className='msp-state-list-remove-button' />
             </li>)}
         </ul>;
     }

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

@@ -5,7 +5,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { ArrowDownward, ArrowUpward, BookmarksOutlined, Delete, MoreHoriz, HelpOutline, Check, Clear, ArrowRight, ArrowDropDown } from '@material-ui/icons';
+import { ArrowDownward, ArrowDropDown, ArrowRight, ArrowUpward, BookmarksOutlined, Check, Clear, DeleteOutlined, HelpOutline, MoreHoriz } from '@material-ui/icons';
 import * as React from 'react';
 import { Mat4, Vec2, Vec3 } from '../../mol-math/linear-algebra';
 import { PluginContext } from '../../mol-plugin/context';
@@ -1092,7 +1092,7 @@ class ObjectListItem extends React.PureComponent<ObjectListItemProps, { isExpand
                 <div>
                     <IconButton svg={ArrowDownward} title='Move Up' onClick={this.moveUp} small={true} />
                     <IconButton svg={ArrowUpward} title='Move Down' onClick={this.moveDown} small={true} />
-                    <IconButton svg={Delete} title='Remove' onClick={this.remove} small={true} />
+                    <IconButton svg={DeleteOutlined} title='Remove' onClick={this.remove} small={true} />
                 </div>
             </div>
             {this.state.isExpanded && <div className='msp-control-offset'>

src/mol-plugin-ui/left-panel.tsx

@@ -4,20 +4,20 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+import { AccountTree, DeleteOutlined, HelpOutline, Home, Save, Tune } from '@material-ui/icons';
 import * as React from 'react';
+import { Canvas3DParams } from '../mol-canvas3d/canvas3d';
+import { PluginCommands } from '../mol-plugin/commands';
+import { LeftPanelTabName } from '../mol-plugin/layout';
+import { StateTransform } from '../mol-state';
+import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { PluginUIComponent } from './base';
-import { StateTree } from './state/tree';
 import { IconButton, SectionHeader } from './controls/common';
-import { StateObjectActions } from './state/actions';
-import { StateTransform } from '../mol-state';
-import { PluginCommands } from '../mol-plugin/commands';
 import { ParameterControls } from './controls/parameters';
-import { Canvas3DParams } from '../mol-canvas3d/canvas3d';
-import { ParamDefinition as PD } from '../mol-util/param-definition';
-import { StateSnapshots, RemoteStateSnapshots } from './state/snapshots';
+import { StateObjectActions } from './state/actions';
+import { RemoteStateSnapshots, StateSnapshots } from './state/snapshots';
+import { StateTree } from './state/tree';
 import { HelpContent } from './viewport/help';
-import { LeftPanelTabName } from '../mol-plugin/layout';
-import { Home, HelpOutline, Save, Tune, Delete, AccountTree } from '@material-ui/icons';
 
 export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTabName }> {
     state = { tab: this.plugin.behaviors.layout.leftPanelTabName.value };
@@ -165,6 +165,6 @@ export class RemoveAllButton extends PluginUIComponent<{ }> {
     render() {
         const count = this.plugin.state.data.tree.children.get(StateTransform.RootRef).size;
         if (count === 0) return null;
-        return <IconButton svg={Delete} onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small className='msp-no-hover-outline' transparent />;
+        return <IconButton svg={DeleteOutlined} onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small className='msp-no-hover-outline' transparent />;
     }
 }

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

@@ -4,19 +4,19 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { PluginCommands } from '../../mol-plugin/commands';
-import * as React from 'react';
-import { PluginUIComponent, PurePluginUIComponent } from '../base';
-import { shallowEqualObjects } from '../../mol-util';
+import { ArrowDownward, ArrowUpward, CloudUpload, DeleteOutlined, Save, SwapHoriz } from '@material-ui/icons';
 import { OrderedMap } from 'immutable';
-import { ParameterControls } from '../controls/parameters';
-import { ParamDefinition as PD} from '../../mol-util/param-definition';
+import * as React from 'react';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { PluginConfig } from '../../mol-plugin/config';
 import { PluginState } from '../../mol-plugin/state';
-import { urlCombine } from '../../mol-util/url';
-import { IconButton, SectionHeader, Button } from '../controls/common';
+import { shallowEqualObjects } from '../../mol-util';
 import { formatTimespan } from '../../mol-util/now';
-import { PluginConfig } from '../../mol-plugin/config';
-import { ArrowUpward, SwapHoriz, Delete, ArrowDownward, CloudUpload, Save } from '@material-ui/icons';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { urlCombine } from '../../mol-util/url';
+import { PluginUIComponent, PurePluginUIComponent } from '../base';
+import { Button, IconButton, SectionHeader } from '../controls/common';
+import { ParameterControls } from '../controls/parameters';
 
 export class StateSnapshots extends PluginUIComponent<{ }> {
     downloadToFile = () => {
@@ -151,7 +151,7 @@ class LocalStateSnapshotList extends PluginUIComponent<{ }, { }> {
                     <IconButton svg={ArrowUpward} data-id={e!.snapshot.id} title='Move Up' onClick={this.moveUp} small={true} />
                     <IconButton svg={ArrowDownward} data-id={e!.snapshot.id} title='Move Down' onClick={this.moveDown} small={true} />
                     <IconButton svg={SwapHoriz}  data-id={e!.snapshot.id} title='Replace' onClick={this.replace} small={true} />
-                    <IconButton svg={Delete} data-id={e!.snapshot.id} title='Remove' onClick={this.remove} small={true} />
+                    <IconButton svg={DeleteOutlined} data-id={e!.snapshot.id} title='Remove' onClick={this.remove} small={true} />
                 </div>
             </li>)}
         </ul>;
@@ -320,7 +320,7 @@ class RemoteStateSnapshotList extends PurePluginUIComponent<
                     disabled={this.props.isBusy} onContextMenu={this.open} title='Click to download, right-click to open in a new tab.'>
                     {e!.name || new Date(e!.timestamp).toLocaleString()} <small>{e!.description}</small>
                 </Button>
-                {!e!.isSticky && this.props.remove && <IconButton svg={Delete} data-id={e!.id} title='Remove' onClick={this.props.remove} disabled={this.props.isBusy} small />}
+                {!e!.isSticky && this.props.remove && <IconButton svg={DeleteOutlined} data-id={e!.id} title='Remove' onClick={this.props.remove} disabled={this.props.isBusy} small />}
             </li>)}
         </ul>;
     }

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

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { ArrowDropDown, ArrowRight, Delete, Home, Visibility, Close } from '@material-ui/icons';
+import { ArrowDropDown, ArrowRight, Close, DeleteOutlined, Home, VisibilityOutlined, VisibilityOffOutlined } from '@material-ui/icons';
 import * as React from 'react';
 import { debounceTime, filter } from 'rxjs/operators';
 import { PluginStateObject } from '../../mol-plugin-state/objects';
@@ -299,8 +299,8 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
         const cellState = cell.state;
 
         const expand = <IconButton svg={cellState.isCollapsed ? ArrowRight : ArrowDropDown} flex='20px' disabled={disabled} onClick={this.toggleExpanded} transparent className='msp-no-hover-outline' style={{ visibility: children.size > 0 ? 'visible' : 'hidden' }} />;
-        const remove = !cell.state.isLocked ? <IconButton svg={Delete} onClick={this.remove} disabled={disabled} small toggleState={false} /> : void 0;
-        const visibility = <IconButton svg={Visibility} toggleState={!cellState.isHidden} disabled={disabled} small onClick={this.toggleVisible} />;
+        const remove = !cell.state.isLocked ? <IconButton svg={DeleteOutlined} onClick={this.remove} disabled={disabled} small toggleState={false} /> : void 0;
+        const visibility = <IconButton svg={cellState.isHidden ? VisibilityOffOutlined : VisibilityOutlined} toggleState={false} disabled={disabled} small onClick={this.toggleVisible} />;
 
         const marginStyle: React.CSSProperties = {
             marginLeft: `${this.props.depth * 8}px`

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

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Add, BookmarksOutlined, Delete, MoreHoriz, Tune, Undo, Visibility } from '@material-ui/icons';
+import { Add, BookmarksOutlined, Delete, DeleteOutlined, MoreHoriz, Tune, Restore, VisibilityOutlined, VisibilityOffOutlined } from '@material-ui/icons';
 import * as React from 'react';
 import { getStructureThemeTypes } from '../../mol-plugin-state/helpers/structure-representation-params';
 import { StructureComponentManager } from '../../mol-plugin-state/manager/structure/component';
@@ -120,7 +120,7 @@ class ComponentEditorControls extends PurePluginUIComponent<{}, ComponentEditorC
                 <ToggleButton icon={BookmarksOutlined} label='Preset' title='Apply a representation preset for the current structure(s).' toggle={this.togglePreset} isSelected={this.state.action === 'preset'} disabled={this.isDisabled} />
                 <ToggleButton icon={Add} label='Add' title='Add a new representation component for a selection.' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.isDisabled} />
                 <ToggleButton icon={Tune} label='' title='Options that are applied to all applicable representations.' style={{ flex: '0 0 40px', padding: 0 }} toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.isDisabled} />
-                <IconButton svg={Undo} className='msp-flex-item' flex='40px' onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} title={undoTitle} />
+                <IconButton svg={Restore} className='msp-flex-item' flex='40px' onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} title={undoTitle} />
             </div>
             {this.state.action === 'preset' && this.presetControls}
             {this.state.action === 'add' && <div className='msp-control-offset'>
@@ -345,8 +345,8 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
                     {label}
                     <small className='msp-25-lower-contrast-text' style={{ float: 'right' }}>{reprLabel}</small>
                 </Button>
-                <IconButton svg={Visibility} onClick={this.toggleVisible} toggleState={!cell.state.isHidden} title={`${cell.state.isHidden ? 'Show' : 'Hide'} component`} small className='msp-form-control' flex />
-                <IconButton svg={Delete} onClick={this.toggleRemove} title='Remove' small toggleState={this.state.action === 'remove'} className='msp-form-control' flex />
+                <IconButton svg={cell.state.isHidden ? VisibilityOffOutlined : VisibilityOutlined} toggleState={false} onClick={this.toggleVisible} title={`${cell.state.isHidden ? 'Show' : 'Hide'} component`} small className='msp-form-control' flex />
+                <IconButton svg={DeleteOutlined} onClick={this.toggleRemove} title='Remove' small toggleState={this.state.action === 'remove'} className='msp-form-control' flex />
                 <IconButton svg={MoreHoriz} onClick={this.toggleAction} title='Actions' toggleState={this.state.action === 'action'} className='msp-form-control' flex />
             </div>
             {this.state.action === 'remove' && <div style={{ marginBottom: '6px' }}>
@@ -386,11 +386,11 @@ class StructureRepresentationEntry extends PurePluginUIComponent<{ group: Struct
             {repr.parent && <ExpandGroup header={`${repr.obj?.label || ''} Representation`} noOffset>
                 <UpdateTransformControl state={repr.parent} transform={repr.transform} customHeader='none' customUpdate={this.update} noMargin />
             </ExpandGroup>}
-            <IconButton svg={Delete} onClick={this.remove} title='Remove' small className='msp-default-bg' style={{
-                position: 'absolute', top: 0, right: '32px', lineHeight: '24px', height: '24px', textAlign: 'right', width: '44px', paddingRight: '6px'
+            <IconButton svg={DeleteOutlined} onClick={this.remove} title='Remove' small className='msp-default-bg' toggleState={false} style={{
+                position: 'absolute', top: 0, right: '32px', lineHeight: '24px', height: '24px', textAlign: 'right', width: '44px', paddingRight: '6px', background: 'none'
             }} />
-            <IconButton svg={Visibility} onClick={this.toggleVisible} toggleState={!this.props.representation.cell.state.isHidden} title='Remove' small className='msp-default-bg' style={{
-                position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '32px', paddingRight: '6px'
+            <IconButton svg={this.props.representation.cell.state.isHidden ? VisibilityOffOutlined : VisibilityOutlined} toggleState={false} onClick={this.toggleVisible} title='Toggle Visibility' small className='msp-default-bg' style={{
+                position: 'absolute', top: 0, right: 0, lineHeight: '24px', height: '24px', textAlign: 'right', width: '32px', paddingRight: '6px', background: 'none'
             }} />
         </div>;
     }

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

@@ -5,6 +5,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+import { MoreHoriz, VisibilityOutlined, VisibilityOffOutlined } from '@material-ui/icons';
 import * as React from 'react';
 import { HierarchyRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
 import { PluginCommands } from '../../mol-plugin/commands';
@@ -12,7 +13,6 @@ import { State } from '../../mol-state';
 import { PurePluginUIComponent } from '../base';
 import { IconButton } from '../controls/common';
 import { UpdateTransformControl } from '../state/update-transform';
-import { Visibility, MoreHoriz } from '@material-ui/icons';
 
 export class GenericEntryListControls extends PurePluginUIComponent {
     get current() {
@@ -141,7 +141,7 @@ export class GenericEntry<T extends HierarchyRef> extends PurePluginUIComponent<
                 <button className='msp-form-control msp-control-button-label' title={`${label}. Click to focus.`} onClick={this.focus} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={{ textAlign: 'left' }}>
                     {label} <small>{description}</small>
                 </button>
-                <IconButton svg={Visibility} className='msp-form-control' onClick={this.toggleVisibility} toggleState={!pivot.cell.state.isHidden} title={`${pivot.cell.state.isHidden ? 'Show' : 'Hide'}`} small flex />
+                <IconButton svg={pivot.cell.state.isHidden ? VisibilityOffOutlined : VisibilityOutlined} toggleState={false} className='msp-form-control' onClick={this.toggleVisibility} title={`${pivot.cell.state.isHidden ? 'Show' : 'Hide'}`} small flex />
                 {refs.length === 1 && <IconButton svg={MoreHoriz} className='msp-form-control' onClick={this.toggleOptions} title='Options' toggleState={this.state.showOptions} flex />}
             </div>
             {(refs.length === 1 && this.state.showOptions && pivot.cell.parent) && <>

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

@@ -5,6 +5,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
+import { Add, ArrowDownward, ArrowUpward, DeleteOutlined, HelpOutline, MoreHoriz, RemoveOutlined, Tune, VisibilityOutlined, VisibilityOffOutlined } from '@material-ui/icons';
 import * as React from 'react';
 import { Loci } from '../../mol-model/loci';
 import { StructureElement } from '../../mol-model/structure';
@@ -14,13 +15,12 @@ import { PluginStateObject } from '../../mol-plugin-state/objects';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { angleLabel, dihedralLabel, distanceLabel, lociLabel } from '../../mol-theme/label';
 import { FiniteArray } from '../../mol-util/type-helpers';
-import { PurePluginUIComponent, CollapsableControls } from '../base';
+import { CollapsableControls, PurePluginUIComponent } from '../base';
 import { ActionMenu } from '../controls/action-menu';
-import { ExpandGroup, IconButton, ToggleButton, Button } from '../controls/common';
+import { Button, ExpandGroup, IconButton, ToggleButton } from '../controls/common';
 import { Icon, SetSvg } from '../controls/icons';
 import { ParameterControls } from '../controls/parameters';
 import { UpdateTransformControl } from '../state/update-transform';
-import { ArrowUpward, ArrowDownward, Delete, Visibility, Remove, MoreHoriz, HelpOutline, Add, Tune } from '@material-ui/icons';
 
 // TODO details, options (e.g. change text for labels)
 
@@ -145,7 +145,7 @@ export class MeasurementControls extends PurePluginUIComponent<{}, { isBusy: boo
             </Button>
             {history.length > 1 && <IconButton svg={ArrowUpward} small={true} className='msp-form-control' onClick={() => this.moveHistory(e, 'up')} flex='20px' title={'Move up'} />}
             {history.length > 1 && <IconButton svg={ArrowDownward} small={true} className='msp-form-control' onClick={() => this.moveHistory(e, 'down')} flex='20px' title={'Move down'} />}
-            <IconButton svg={Delete} small={true} className='msp-form-control' onClick={() => this.plugin.managers.structure.selection.modifyHistory(e, 'remove')} flex title={'Remove'} />
+            <IconButton svg={DeleteOutlined} small={true} className='msp-form-control' onClick={() => this.plugin.managers.structure.selection.modifyHistory(e, 'remove')} flex title={'Remove'} />
         </div>;
     }
 
@@ -289,8 +289,8 @@ class MeasurementEntry extends PurePluginUIComponent<{ cell: StructureMeasuremen
                 <button className='msp-form-control msp-control-button-label msp-no-overflow' title='Click to focus. Hover to highlight.' onClick={this.focus} style={{ width: 'auto', textAlign: 'left' }}>
                     <span dangerouslySetInnerHTML={{ __html: this.label }} />
                 </button>
-                <IconButton svg={Visibility} small className='msp-form-control' onClick={this.toggleVisibility} flex title={cell.state.isHidden ? 'Show' : 'Hide'} toggleState={!cell.state.isHidden} />
-                <IconButton svg={Remove} small className='msp-form-control' onClick={this.delete} flex title='Delete' />
+                <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={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/viewport.tsx

@@ -5,7 +5,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Autorenew, Build, Camera, Crop, Fullscreen, Tune, Close } from '@material-ui/icons';
+import { Autorenew, BuildOutlined, CameraAltOutlined, Close, Crop, Fullscreen, Tune } from '@material-ui/icons';
 import * as React from 'react';
 import { resizeCanvas } from '../mol-canvas3d/util';
 import { PluginCommands } from '../mol-plugin/commands';
@@ -94,11 +94,11 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
                 </div>
                 <div>
                     <div className='msp-semi-transparent-background' />
-                    {this.icon(Camera, this.toggleScreenshotExpanded, 'Screenshot', this.state.isScreenshotExpanded)}
+                    {this.icon(CameraAltOutlined, this.toggleScreenshotExpanded, 'Screenshot', this.state.isScreenshotExpanded)}
                 </div>
                 <div>
                     <div className='msp-semi-transparent-background' />
-                    {this.icon(Build, this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}
+                    {this.icon(BuildOutlined, this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}
                     {this.plugin.config.get(PluginConfig.Viewport.ShowExpand) && this.icon(Fullscreen, this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.state.isExpanded)}
                     {this.icon(Tune, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)}
                 </div>