diff --git a/src/mol-plugin-ui/camera.tsx b/src/mol-plugin-ui/camera.tsx
index 07e90bc561c17d31658a29bda7c52620ee4c906c..87097a555016376707e6949a7b1a8a75728ab4c0 100644
--- a/src/mol-plugin-ui/camera.tsx
+++ b/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>;
}
diff --git a/src/mol-plugin-ui/controls/parameters.tsx b/src/mol-plugin-ui/controls/parameters.tsx
index df0f79d4a223a0ebc980ba4283b02f0ca61c32d1..83f7a11dd79e84b76f2a3fc2a0ab9b5de6bd14dd 100644
--- a/src/mol-plugin-ui/controls/parameters.tsx
+++ b/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'>
diff --git a/src/mol-plugin-ui/left-panel.tsx b/src/mol-plugin-ui/left-panel.tsx
index 91ef05da63ef4b1bd9aceaff198a34e7539cea44..9c08e85a67452b904b99a31e47635627ff635e1a 100644
--- a/src/mol-plugin-ui/left-panel.tsx
+++ b/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 />;
}
}
diff --git a/src/mol-plugin-ui/state/snapshots.tsx b/src/mol-plugin-ui/state/snapshots.tsx
index eadb440fea0dc4799888df635d81aa77b36b226d..57dfc7a1083994173d0677d51abe7b2997667955 100644
--- a/src/mol-plugin-ui/state/snapshots.tsx
+++ b/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>;
}
diff --git a/src/mol-plugin-ui/state/tree.tsx b/src/mol-plugin-ui/state/tree.tsx
index bbeb9f9df2aa4431a7f6d0f50a4515d317bed5f2..823729affd5327f426ab7867bb0b049980fb206d 100644
--- a/src/mol-plugin-ui/state/tree.tsx
+++ b/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`
diff --git a/src/mol-plugin-ui/structure/components.tsx b/src/mol-plugin-ui/structure/components.tsx
index c6325bcc8feae5f9d77404986db9f72bd96c3621..44e1c98e9c9abeda2603f838a6c23ea18d91de76 100644
--- a/src/mol-plugin-ui/structure/components.tsx
+++ b/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>;
}
diff --git a/src/mol-plugin-ui/structure/generic.tsx b/src/mol-plugin-ui/structure/generic.tsx
index a4058e722438378f56bcd68f81c095b13bef641b..f080f835b43cef72fd16ffbfaffafa69cae8e3b1 100644
--- a/src/mol-plugin-ui/structure/generic.tsx
+++ b/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) && <>
diff --git a/src/mol-plugin-ui/structure/measurements.tsx b/src/mol-plugin-ui/structure/measurements.tsx
index 6995138b5a50131c9f352adff27ab20bec4a4164..10464ac90004a866efef5e072559925e3083e44f 100644
--- a/src/mol-plugin-ui/structure/measurements.tsx
+++ b/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 && <>
diff --git a/src/mol-plugin-ui/viewport.tsx b/src/mol-plugin-ui/viewport.tsx
index d4e345926b522807847917b5649a35fdd0d4bef4..bbf243286496927085e2a6e0acdfc19a5885eeae 100644
--- a/src/mol-plugin-ui/viewport.tsx
+++ b/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>