diff --git a/package-lock.json b/package-lock.json
index 605e1611df4ab524c47dbe00a43672a7a7baae23..b106e176188ca986cb199149fe3e9ea887de3ee7 100644
Binary files a/package-lock.json and b/package-lock.json differ
diff --git a/package.json b/package.json
index f31046997786efaa8547c2283e2d9c53182c70e1..b2ec0df7163ce369f232acb6385ab0296cdd0cd0 100644
--- a/package.json
+++ b/package.json
@@ -117,8 +117,6 @@
"webpack-version-file-plugin": "^0.4.0"
},
"dependencies": {
- "@material-ui/core": "^4.9.13",
- "@material-ui/icons": "^4.9.1",
"@types/argparse": "^1.0.38",
"@types/benchmark": "^1.0.31",
"@types/compression": "1.7.0",
diff --git a/src/extensions/rcsb/assembly-symmetry/ui.tsx b/src/extensions/rcsb/assembly-symmetry/ui.tsx
index a51bb0089de3efd5f4fc7504e671d286a0466c48..f7d640b21d73ff99356b537434774145fd34ae96 100644
--- a/src/extensions/rcsb/assembly-symmetry/ui.tsx
+++ b/src/extensions/rcsb/assembly-symmetry/ui.tsx
@@ -16,8 +16,7 @@ import { StateAction, StateSelection } from '../../../mol-state';
import { PluginStateObject } from '../../../mol-plugin-state/objects';
import { PluginContext } from '../../../mol-plugin/context';
import { Task } from '../../../mol-task';
-import Check from '@material-ui/icons/Check';
-import Extension from '@material-ui/icons/Extension';
+import { ExtensionSvg, CheckSvg } from '../../../mol-plugin-ui/controls/icons';
interface AssemblySymmetryControlState extends CollapsableState {
isBusy: boolean
@@ -30,7 +29,7 @@ export class AssemblySymmetryControls extends CollapsableControls<{}, AssemblySy
isCollapsed: false,
isBusy: false,
isHidden: true,
- brand: { accent: 'cyan', svg: Extension }
+ brand: { accent: 'cyan', svg: ExtensionSvg }
};
}
@@ -62,7 +61,7 @@ export class AssemblySymmetryControls extends CollapsableControls<{}, AssemblySy
renderEnable() {
const pivot = this.pivot;
if (!pivot.cell.parent) return null;
- return <ApplyActionControl state={pivot.cell.parent} action={EnableAssemblySymmetry3D} initiallyCollapsed={true} nodeRef={pivot.cell.transform.ref} simpleApply={{ header: 'Enable', icon: Check }} />;
+ return <ApplyActionControl state={pivot.cell.parent} action={EnableAssemblySymmetry3D} initiallyCollapsed={true} nodeRef={pivot.cell.transform.ref} simpleApply={{ header: 'Enable', icon: CheckSvg }} />;
}
renderNoSymmetries() {
diff --git a/src/mol-plugin-ui/base.tsx b/src/mol-plugin-ui/base.tsx
index d175494ca9103cbafc42f65e76c4f034c05d74c3..f2826b3c5097d3c9f519fdc6e27462495ebb0a63 100644
--- a/src/mol-plugin-ui/base.tsx
+++ b/src/mol-plugin-ui/base.tsx
@@ -9,9 +9,7 @@ import * as React from 'react';
import { Observable, Subscription } from 'rxjs';
import { PluginContext } from '../mol-plugin/context';
import { Button, ColorAccent } from './controls/common';
-import ArrowRight from '@material-ui/icons/ArrowRight';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
-import { Icon } from './controls/icons';
+import { Icon, ArrowRightSvg, ArrowDropDownSvg } from './controls/icons';
export const PluginReactContext = React.createContext(void 0 as any as PluginContext);
@@ -104,7 +102,7 @@ export abstract class CollapsableControls<P = {}, S = {}, SS = {}> extends Plugi
return <div className={wrapClass}>
<div className='msp-transform-header'>
- <Button icon={this.state.brand ? void 0 : this.state.isCollapsed ? ArrowRight : ArrowDropDown} noOverflow onClick={this.toggleCollapsed}
+ <Button icon={this.state.brand ? void 0 : this.state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg} noOverflow onClick={this.toggleCollapsed}
className={this.state.brand ? `msp-transform-header-brand msp-transform-header-brand-${this.state.brand.accent}` : void 0} title={`Click to ${this.state.isCollapsed ? 'expand' : 'collapse'}`}>
{/* {this.state.brand && <div className={`msp-accent-bg-${this.state.brand.accent}`}>{this.state.brand.svg ? <Icon svg={this.state.brand.svg} /> : this.state.brand.name}</div>} */}
<Icon svg={this.state.brand?.svg} inline />
diff --git a/src/mol-plugin-ui/controls.tsx b/src/mol-plugin-ui/controls.tsx
index b0e317111b150820d5f94ceadfc8db54acdcc2c9..a820782a29d2ca5233f02d9f002b8b8c3b127392 100644
--- a/src/mol-plugin-ui/controls.tsx
+++ b/src/mol-plugin-ui/controls.tsx
@@ -5,13 +5,6 @@
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
-import Build from '@material-ui/icons/Build';
-import NavigateBefore from '@material-ui/icons/NavigateBefore';
-import NavigateNext from '@material-ui/icons/NavigateNext';
-import PlayArrow from '@material-ui/icons/PlayArrow';
-import SkipPrevious from '@material-ui/icons/SkipPrevious';
-import Stop from '@material-ui/icons/Stop';
-import SubscriptionsOutlined from '@material-ui/icons/SubscriptionsOutlined';
import * as React from 'react';
import { UpdateTrajectory } from '../mol-plugin-state/actions/structure';
import { LociLabel } from '../mol-plugin-state/manager/loci-label';
@@ -22,7 +15,7 @@ import { PluginCommands } from '../mol-plugin/commands';
import { StateTransformer } from '../mol-state';
import { PluginUIComponent } from './base';
import { IconButton } from './controls/common';
-import { Icon } from './controls/icons';
+import { Icon, NavigateBeforeSvg, NavigateNextSvg, SkipPreviousSvg, StopSvg, PlayArrowSvg, SubscriptionsOutlinedSvg, BuildSvg } from './controls/icons';
import { AnimationControls } from './state/animation';
import { StructureComponentControls } from './structure/components';
import { StructureMeasurementsControls } from './structure/measurements';
@@ -97,9 +90,9 @@ export class TrajectoryViewportControls extends PluginUIComponent<{}, { show: bo
if (!this.state.show || (isAnimating && !this.state.label)) return null;
return <div className='msp-traj-controls'>
- {!isAnimating && <IconButton svg={SkipPrevious} title='First Model' onClick={this.reset} disabled={isAnimating} />}
- {!isAnimating && <IconButton svg={NavigateBefore} title='Previous Model' onClick={this.prev} disabled={isAnimating} />}
- {!isAnimating && <IconButton svg={NavigateNext} title='Next Model' onClick={this.next} disabled={isAnimating} />}
+ {!isAnimating && <IconButton svg={SkipPreviousSvg} title='First Model' onClick={this.reset} disabled={isAnimating} />}
+ {!isAnimating && <IconButton svg={NavigateBeforeSvg} title='Previous Model' onClick={this.prev} disabled={isAnimating} />}
+ {!isAnimating && <IconButton svg={NavigateNextSvg} title='Next Model' onClick={this.next} disabled={isAnimating} />}
{!!this.state.label && <span>{this.state.label}</span> }
</div>;
}
@@ -187,11 +180,11 @@ export class StateSnapshotViewportControls extends PluginUIComponent<{}, { isBus
{!current && <option key='none' value='none'></option>}
{snapshots.state.entries.valueSeq().map((e, i) => <option key={e!.snapshot.id} value={e!.snapshot.id}>{`[${i! + 1}/${count}]`} {e!.name || new Date(e!.timestamp).toLocaleString()}</option>)}
</select>
- <IconButton svg={isPlaying ? Stop : PlayArrow} title={isPlaying ? 'Pause' : 'Cycle States'} onClick={this.togglePlay}
+ <IconButton svg={isPlaying ? StopSvg : PlayArrowSvg} title={isPlaying ? 'Pause' : 'Cycle States'} onClick={this.togglePlay}
disabled={isPlaying ? false : this.state.isBusy} />
{!isPlaying && <>
- <IconButton svg={NavigateBefore} title='Previous State' onClick={this.prev} disabled={this.state.isBusy || isPlaying} />
- <IconButton svg={NavigateNext} title='Next State' onClick={this.next} disabled={this.state.isBusy || isPlaying} />
+ <IconButton svg={NavigateBeforeSvg} title='Previous State' onClick={this.prev} disabled={this.state.isBusy || isPlaying} />
+ <IconButton svg={NavigateNextSvg} title='Next State' onClick={this.next} disabled={this.state.isBusy || isPlaying} />
</>}
</div>;
}
@@ -229,7 +222,7 @@ export class AnimationViewportControls extends PluginUIComponent<{}, { isEmpty:
return <div className='msp-animation-viewport-controls'>
<div>
<div className='msp-semi-transparent-background' />
- <IconButton svg={isAnimating || isPlaying ? Stop : SubscriptionsOutlined} transparent title={isAnimating ? 'Stop' : 'Select Animation'}
+ <IconButton svg={isAnimating || isPlaying ? StopSvg : SubscriptionsOutlinedSvg} transparent title={isAnimating ? 'Stop' : 'Select Animation'}
onClick={isAnimating || isPlaying ? this.stop : this.toggleExpanded} toggleState={this.state.isExpanded}
disabled={isAnimating || isPlaying ? false : this.state.isBusy || this.state.isPlaying || this.state.isEmpty} />
</div>
@@ -293,7 +286,7 @@ export class CustomStructureControls extends PluginUIComponent<{ initiallyCollap
export class DefaultStructureTools extends PluginUIComponent {
render() {
return <>
- <div className='msp-section-header'><Icon svg={Build} />Structure Tools</div>
+ <div className='msp-section-header'><Icon svg={BuildSvg} />Structure Tools</div>
<StructureSourceControls />
<StructureMeasurementsControls />
diff --git a/src/mol-plugin-ui/controls/action-menu.tsx b/src/mol-plugin-ui/controls/action-menu.tsx
index a9f196937123325582917a974fbfb66f2a9df7eb..b06987a49fea732911a9b3e91a5fabad5ca54f9e 100644
--- a/src/mol-plugin-ui/controls/action-menu.tsx
+++ b/src/mol-plugin-ui/controls/action-menu.tsx
@@ -8,10 +8,7 @@
import * as React from 'react';
import { ParamDefinition } from '../../mol-util/param-definition';
import { Button, ControlGroup } from './common';
-import ArrowRight from '@material-ui/icons/ArrowRight';
-import Check from '@material-ui/icons/Check';
-import Close from '@material-ui/icons/Close';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import { CloseSvg, ArrowDropDownSvg, ArrowRightSvg, CheckSvg } from './icons';
export class ActionMenu extends React.PureComponent<ActionMenu.Props> {
hide = () => this.props.onSelect(void 0)
@@ -20,7 +17,7 @@ export class ActionMenu extends React.PureComponent<ActionMenu.Props> {
const cmd = this.props;
const section = <Section items={cmd.items} onSelect={cmd.onSelect} current={cmd.current} multiselect={this.props.multiselect} noOffset={this.props.noOffset} noAccent={this.props.noAccent} />;
return <div className={`msp-action-menu-options${cmd.header ? '' : ' msp-action-menu-options-no-header'}`}>
- {cmd.header && <ControlGroup header={cmd.header} title={cmd.title} initialExpanded={true} hideExpander={true} hideOffset onHeaderClick={this.hide} topRightIcon={Close}>
+ {cmd.header && <ControlGroup header={cmd.header} title={cmd.title} initialExpanded={true} hideExpander={true} hideOffset onHeaderClick={this.hide} topRightIcon={CloseSvg}>
{section}
</ControlGroup>}
{!cmd.header && section}
@@ -229,13 +226,13 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
const { header, hasCurrent } = this.state;
return <div className='msp-flex-row msp-control-group-header'>
- <Button icon={this.state.isExpanded ? ArrowDropDown : ArrowRight} flex noOverflow onClick={this.toggleExpanded} title={`Click to ${this.state.isExpanded ? 'collapse' : 'expand'}.${header?.description ? ` ${header?.description}` : ''}`}>
+ <Button icon={this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg} flex noOverflow onClick={this.toggleExpanded} title={`Click to ${this.state.isExpanded ? 'collapse' : 'expand'}.${header?.description ? ` ${header?.description}` : ''}`}>
{hasCurrent ? <b>{header?.label}</b> : header?.label}
</Button>
- <Button icon={Check} flex onClick={this.selectAll} style={{ flex: '0 0 50px', textAlign: 'right' }}>
+ <Button icon={CheckSvg} flex onClick={this.selectAll} style={{ flex: '0 0 50px', textAlign: 'right' }}>
All
</Button>
- <Button icon={Close} flex onClick={this.selectNone} style={{ flex: '0 0 50px', textAlign: 'right' }}>
+ <Button icon={CloseSvg} flex onClick={this.selectNone} style={{ flex: '0 0 50px', textAlign: 'right' }}>
None
</Button>
</div>;
@@ -245,7 +242,7 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
const { header, hasCurrent } = this.state;
return <div className='msp-control-group-header' style={{ marginTop: '1px' }}>
- <Button noOverflow icon={this.state.isExpanded ? ArrowDropDown : ArrowRight} onClick={this.toggleExpanded} title={`Click to ${this.state.isExpanded ? 'collapse' : 'expand'}. ${header?.description ? header?.description : ''}`}>
+ <Button noOverflow icon={this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg} onClick={this.toggleExpanded} title={`Click to ${this.state.isExpanded ? 'collapse' : 'expand'}. ${header?.description ? header?.description : ''}`}>
{hasCurrent ? <b>{header?.label}</b> : header?.label}
</Button>
</div>;
diff --git a/src/mol-plugin-ui/controls/common.tsx b/src/mol-plugin-ui/controls/common.tsx
index 7577a2e7c3b40b9121af89edd5555746a2c6b57d..e89af928aa3702b18a1ff80b90c954d1a3b80cba 100644
--- a/src/mol-plugin-ui/controls/common.tsx
+++ b/src/mol-plugin-ui/controls/common.tsx
@@ -6,11 +6,7 @@
import * as React from 'react';
import { Color } from '../../mol-util/color';
-import { Icon } from './icons';
-import ArrowRight from '@material-ui/icons/ArrowRight';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
-import Remove from '@material-ui/icons/Remove';
-import Add from '@material-ui/icons/Add';
+import { Icon, ArrowRightSvg, ArrowDropDownSvg, RemoveSvg, AddSvg } from './icons';
export type ColorAccent = 'cyan' | 'red' | 'gray' | 'green' | 'purple' | 'blue' | 'orange'
@@ -45,7 +41,7 @@ export class ControlGroup extends React.Component<{
return <div className='msp-control-group-wrapper' style={{ position: 'relative', marginTop: this.props.noTopMargin ? 0 : void 0 }}>
<div className='msp-control-group-header' style={{ marginLeft: this.props.headerLeftMargin }} title={this.props.title}>
<Button onClick={this.headerClicked}>
- {!this.props.hideExpander && <Icon svg={this.state.isExpanded ? ArrowRight : ArrowDropDown} />}
+ {!this.props.hideExpander && <Icon svg={this.state.isExpanded ? ArrowRightSvg : ArrowDropDownSvg} />}
{this.props.topRightIcon && <Icon svg={this.props.topRightIcon} style={{ position: 'absolute', right: '2px', top: 0 }} />}
<b>{this.props.header}</b>
</Button>
@@ -206,7 +202,7 @@ export class ExpandableControlRow extends React.Component<{
{label}
<button className='msp-btn-link msp-btn-icon msp-control-group-expander' onClick={this.toggleExpanded} title={`${this.state.isExpanded ? 'Less' : 'More'} options`}
style={{ background: 'transparent', textAlign: 'left', padding: '0' }}>
- <Icon svg={this.state.isExpanded ? Remove : Add} style={{ display: 'inline-block' }} />
+ <Icon svg={this.state.isExpanded ? RemoveSvg : AddSvg} style={{ display: 'inline-block' }} />
</button>
</>} control={pivot}>
{this.props.colorStripe && <div className='msp-expandable-group-color-stripe' style={{ backgroundColor: Color.toStyle(this.props.colorStripe) }} />}
@@ -347,7 +343,7 @@ export class ExpandGroup extends React.PureComponent<{ header: string, headerSty
return <>
<div className='msp-control-group-header' style={{ marginTop: this.props.marginTop !== void 0 ? this.props.marginTop : '1px', marginLeft: this.props.headerLeftMargin }}>
<button className='msp-btn msp-form-control msp-btn-block' onClick={this.toggleExpanded} style={this.props.headerStyle}>
- <Icon svg={this.state.isExpanded ? ArrowDropDown : ArrowRight} />
+ <Icon svg={this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg} />
{this.props.header}
</button>
</div>
diff --git a/src/mol-plugin-ui/controls/icons.tsx b/src/mol-plugin-ui/controls/icons.tsx
index d205b56bc36abd0b1fe315544b59df394ef15044..1ab19b208291f5f1f3987ca061e75c49f3518d21 100644
--- a/src/mol-plugin-ui/controls/icons.tsx
+++ b/src/mol-plugin-ui/controls/icons.tsx
@@ -21,92 +21,421 @@ export function Icon(props: {
//
-export function UnionSvg() { return _union; }
-export function SubtractSvg() { return _subtract; }
-export function IntersectSvg() { return _intersect; }
-export function SetSvg() { return _set; }
-export function MoleculeSvg() { return _molecule; }
-export function RulerSvg() { return _ruler; }
-export function CubeSvg() { return _cube; }
-export function CursorSvg() { return _cursor; }
-
const circleLeft = <circle r="6px" id="circle-left" cy="12px" cx="8px" strokeWidth="1" />;
const circleRight = <circle r="6px" id="circle-right" cy="12px" cx="16px" strokeWidth="1" />;
-const _union = <svg width="24px" height="24px" viewBox="0 0 24 24">
- <defs>
- {circleLeft}
- {circleRight}
- </defs>
- <g>
- <use href="#circle-left" className="msp-shape-filled" />
- <use href="#circle-right" className="msp-shape-filled" />
- <use href="#circle-left" className="msp-shape-empty" />
- </g>
-</svg>;
-
-const _subtract = <svg width="24px" height="24px" viewBox="0 0 24 24">
- <defs>
- {circleLeft}
- {circleRight}
- <mask id="mask-left">
- <use href="#circle-left" fill="white" stroke="white" />
- <use href="#circle-right" fill="black" strokeWidth="0" stroke="white" />
- </mask>
- </defs>
- <g>
- <use href="#circle-left" className="msp-shape-filled" mask="url(#mask-left)" />
- <use href="#circle-right" className="msp-shape-empty" />
- </g>
-</svg>;
-
-const _intersect = <svg width="24px" height="24px" viewBox="0 0 24 24">
- <defs>
- {circleLeft}
- {circleRight}
- <clipPath id="clip-left">
- <use href="#circle-right" />
- </clipPath>
- </defs>
- <g>
- <use href="#circle-left" className="msp-shape-filled" clipPath="url(#clip-left)" />
- <use href="#circle-left" className="msp-shape-empty" />
- <use href="#circle-right" className="msp-shape-empty" />
- </g>
-</svg>;
-
-const _set = <svg width="24px" height="24px" viewBox="0 0 24 24">
- <defs>
- {circleLeft}
- {circleRight}
- </defs>
- <g>
- <use href="#circle-left" className="msp-shape-empty" />
- <use href="#circle-right" className="msp-shape-filled" />
- </g>
-</svg>;
-
-const _molecule = <svg width="17px" height="17px" viewBox="0 0 299.463 299.463">
- <g>
- <path d="M256.851,173.832v-48.201c22.916-4.918,34.151-30.668,22.556-50.771c-11.547-20.004-39.486-23.251-55.242-5.844 l-41.746-24.106C189.618,22.603,172.861,0,149.734,0c-23.132,0-39.881,22.609-32.685,44.911L75.305,69.016 C59.522,51.586,31.597,54.88,20.061,74.863c-11.63,20.163-0.298,45.862,22.557,50.769v48.2 c-22.821,4.898-34.195,30.591-22.556,50.771c11.529,19.972,39.454,23.285,55.242,5.845l41.746,24.106 c-7.199,22.308,9.559,44.911,32.685,44.911c23.132,0,39.88-22.609,32.685-44.911l41.745-24.106 c15.817,17.469,43.73,14.099,55.242-5.844c0,0,0-0.001,0.001-0.002c4.587-7.953,5.805-17.213,3.431-26.076 C279.392,185.657,269.129,176.461,256.851,173.832z M249.62,72.088c20.568,0,27.428,27.191,10.008,37.239 c-0.003,0.002-0.006,0.003-0.009,0.005c-10.04,5.81-22.85,1.762-27.877-8.475C225.206,87.548,234.938,72.088,249.62,72.088z M149.734,14.4c11.005,0,19.958,8.954,19.958,19.959c0,11.127-9.077,19.958-19.958,19.958c-10.95,0-19.958-8.9-19.958-19.958 C129.776,23.354,138.729,14.4,149.734,14.4z M39.84,109.328c-17.451-10.067-10.534-37.24,10.01-37.24 c15.311,0,24.922,16.653,17.251,29.942C61.681,111.397,49.517,114.925,39.84,109.328z M59.802,224.702 c-9.535,5.503-21.768,2.229-27.268-7.298c-7.639-13.242,1.887-29.945,17.236-29.945c0.013,0,0.027,0,0.04,0 C70.07,187.48,77.49,214.469,59.802,224.702z M149.734,285.062c-11.005,0-19.958-8.954-19.958-19.958 c0-11.127,9.077-19.958,19.958-19.958c10.954,0,19.958,8.903,19.958,19.958C169.693,276.109,160.74,285.062,149.734,285.062z M216.953,217.982l-41.727,24.095c-13.778-15.22-37.459-14.94-50.983,0l-41.728-24.096c6.196-19.289-5.541-39.835-25.498-44.149 V125.63c19.752-4.268,31.762-24.65,25.498-44.149l41.727-24.095c13.629,15.055,37.32,15.093,50.983,0l41.728,24.096 c-6.196,19.29,5.534,39.835,25.498,44.149v48.202C222.61,178.123,210.721,198.581,216.953,217.982z M266.935,217.404 c-5.501,9.528-17.732,12.802-27.261,7.302c-17.682-10.23-10.301-37.247,10.032-37.247 C264.984,187.459,274.602,204.112,266.935,217.404z"/>
- </g>
-</svg>;
-
-const _ruler = <svg viewBox="0 0 508.073 508.073" width="17px" height="17px">
- <g>
- <path d="M470.459,378.925c-0.7-2.1-1.9-4-3.4-5.5l-113.9-113.9l149.8-149.8c10-10,2.6-17.3,0-19.9l-85.7-85.7 c-5.5-5.5-14.4-5.5-19.9,0l-149.8,149.8l-134.7-134.7c-25.5-25.5-67.8-25.6-93.4,0c-25.8,25.8-25.8,67.7,0,93.5l134.6,134.7 l-149.9,149.9c-5.5,5.5-5.5,14.4,0,19.9l85.6,85.7c2.6,2.6,10,10,19.9,0l150-149.9l113.9,113.9c1.5,1.5,3.4,2.7,5.5,3.4 l110.4,36.9c6,2,10.7,0.3,14.4-3.4c3.8-3.8,5.1-9.4,3.4-14.4L470.459,378.925z M276.159,165.225l29.9,29.9 c5.5,5.5,14.4,5.5,19.9,0c5-5,5.5-14.4,0-19.9l-29.9-29.9l23.7-23.7l13,13c5.5,5.5,14.4,5.5,19.9,0c5.2-5.2,6.2-13.7,0-19.9 l-13-13l23.7-23.7l29.4,29.4c5.5,5.5,14.4,5.5,19.9,0c5.6-5.6,5.5-14.4,0-19.9l-29.4-29.5l24-24l65.8,65.7l-139.8,139.9 l-65.8-65.8L276.159,165.225z M39.359,92.825c-14.8-14.8-14.8-38.8,0-53.6c14.1-14.1,38.8-14.7,53.6,0l15.5,15.5l-53.6,53.6 L39.359,92.825z M99.759,473.025l-65.7-65.7l24-24l13.2,13.2c5.5,5.5,14.4,5.6,19.9,0c5.5-5.5,5.5-14.4,0-19.9l-13.1-13.3 l23.7-23.7l29.6,29.6c6.2,6.2,14.7,5.2,19.9,0c5.5-5.5,5.5-14.4,0-19.9l-29.6-29.6l23.7-23.7l13.2,13.2c5.5,5.5,14.9,5,19.9,0 c5.5-5.5,5.5-14.4,0-19.9l-13.2-13.2l8.8-8.8l65.8,65.7L99.759,473.025z M74.759,128.225l53.6-53.6l308.7,308.7l-53.6,53.6 L74.759,128.225z M409.659,450.725l41.3-41.3l20.7,61.9L409.659,450.725z"/>
- </g>
-</svg>;
-
-const _cube = <svg viewBox="0 0 270.06 270.06" width="17px" height="17px">
- <g>
- <path d="M264.898,0.007 c-0.181,0.006-0.362,0.023-0.541,0.049H84.996c-1.326,0-2.598,0.527-3.535,1.465l-80,80C0.525,82.459-0.001,83.73,0,85.056v180 c0,2.761,2.239,5,5,5h180c1.326,0,2.598-0.527,3.535-1.465l80-80c0.938-0.938,1.465-2.209,1.465-3.535V5.819 c0.14-0.893,0.035-1.807-0.303-2.645c-0.016-0.045-0.033-0.09-0.051-0.135c-0.808-1.89-2.69-3.093-4.744-3.033L264.898,0.007z M87.066,10.056h165.859l-70,70H17.066L87.066,10.056z M259.996,17.126v165.859l-70,70V87.126L259.996,17.126L259.996,17.126z M84.92,19.985c-2.759,0.042-4.963,2.311-4.924,5.07v40c-0.039,2.761,2.168,5.032,4.929,5.071s5.032-2.168,5.071-4.929 c0.001-0.047,0.001-0.094,0-0.141v-40c0.039-2.761-2.168-5.031-4.93-5.07C85.018,19.984,84.969,19.984,84.92,19.985z M9.996,90.056 h170v170h-170V90.056L9.996,90.056z M84.92,99.985c-2.759,0.042-4.963,2.311-4.924,5.07v30c-0.039,2.761,2.168,5.032,4.929,5.071 s5.032-2.168,5.071-4.929c0.001-0.047,0.001-0.094,0-0.141v-30c0.039-2.761-2.168-5.031-4.93-5.07 C85.018,99.984,84.969,99.984,84.92,99.985z M84.92,159.985c-2.759,0.042-4.963,2.311-4.924,5.07v17.93L61.461,201.52 c-1.992,1.913-2.057,5.078-0.144,7.07c1.913,1.992,5.078,2.057,7.07,0.144c0.049-0.047,0.097-0.095,0.144-0.144l18.535-18.535h17.93 c2.761,0.039,5.032-2.168,5.071-4.929s-2.168-5.032-4.929-5.071c-0.047-0.001-0.094-0.001-0.141,0h-15v-15 c0.039-2.761-2.168-5.031-4.93-5.07C85.018,159.984,84.969,159.984,84.92,159.985z M134.996,180.055 c-2.761-0.039-5.032,2.168-5.071,4.929c-0.039,2.761,2.168,5.032,4.929,5.071c0.047,0.001,0.094,0.001,0.141,0h30 c2.761,0.039,5.032-2.168,5.071-4.929c0.039-2.761-2.168-5.032-4.929-5.071c-0.047-0.001-0.094-0.001-0.141,0H134.996z M204.996,180.055c-2.761-0.039-5.032,2.168-5.071,4.929c-0.039,2.761,2.168,5.032,4.929,5.071c0.047,0.001,0.094,0.001,0.141,0h40 c2.761,0.039,5.032-2.168,5.071-4.929s-2.168-5.032-4.929-5.071c-0.047-0.001-0.094-0.001-0.141,0H204.996z M44.898,220.007 c-1.299,0.039-2.532,0.582-3.438,1.514l-20,20c-1.992,1.913-2.057,5.078-0.144,7.07c1.913,1.992,5.078,2.057,7.07,0.144 c0.049-0.047,0.097-0.095,0.144-0.144l20-20c1.98-1.925,2.025-5.091,0.1-7.071C47.654,220.514,46.3,219.965,44.898,220.007z"/>
- </g>
-</svg>;
-
-// Icons below are adapted from https://materialdesignicons.com/ and
+export function UnionSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <defs>
+ {circleLeft}
+ {circleRight}
+ </defs>
+ <g>
+ <use href="#circle-left" className="msp-shape-filled" />
+ <use href="#circle-right" className="msp-shape-filled" />
+ <use href="#circle-left" className="msp-shape-empty" />
+ </g>
+ </svg>;
+}
+
+export function SubtractSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <defs>
+ {circleLeft}
+ {circleRight}
+ <mask id="mask-left">
+ <use href="#circle-left" fill="white" stroke="white" />
+ <use href="#circle-right" fill="black" strokeWidth="0" stroke="white" />
+ </mask>
+ </defs>
+ <g>
+ <use href="#circle-left" className="msp-shape-filled" mask="url(#mask-left)" />
+ <use href="#circle-right" className="msp-shape-empty" />
+ </g>
+ </svg>;
+}
+
+export function IntersectSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <defs>
+ {circleLeft}
+ {circleRight}
+ <clipPath id="clip-left">
+ <use href="#circle-right" />
+ </clipPath>
+ </defs>
+ <g>
+ <use href="#circle-left" className="msp-shape-filled" clipPath="url(#clip-left)" />
+ <use href="#circle-left" className="msp-shape-empty" />
+ <use href="#circle-right" className="msp-shape-empty" />
+ </g>
+ </svg>;
+}
+
+export function SetSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <defs>
+ {circleLeft}
+ {circleRight}
+ </defs>
+ <g>
+ <use href="#circle-left" className="msp-shape-empty" />
+ <use href="#circle-right" className="msp-shape-filled" />
+ </g>
+ </svg>;
+}
+
+export function MoleculeSvg() {
+ return <svg width="17px" height="17px" viewBox="0 0 299.463 299.463">
+ <g>
+ <path d="M256.851,173.832v-48.201c22.916-4.918,34.151-30.668,22.556-50.771c-11.547-20.004-39.486-23.251-55.242-5.844 l-41.746-24.106C189.618,22.603,172.861,0,149.734,0c-23.132,0-39.881,22.609-32.685,44.911L75.305,69.016 C59.522,51.586,31.597,54.88,20.061,74.863c-11.63,20.163-0.298,45.862,22.557,50.769v48.2 c-22.821,4.898-34.195,30.591-22.556,50.771c11.529,19.972,39.454,23.285,55.242,5.845l41.746,24.106 c-7.199,22.308,9.559,44.911,32.685,44.911c23.132,0,39.88-22.609,32.685-44.911l41.745-24.106 c15.817,17.469,43.73,14.099,55.242-5.844c0,0,0-0.001,0.001-0.002c4.587-7.953,5.805-17.213,3.431-26.076 C279.392,185.657,269.129,176.461,256.851,173.832z M249.62,72.088c20.568,0,27.428,27.191,10.008,37.239 c-0.003,0.002-0.006,0.003-0.009,0.005c-10.04,5.81-22.85,1.762-27.877-8.475C225.206,87.548,234.938,72.088,249.62,72.088z M149.734,14.4c11.005,0,19.958,8.954,19.958,19.959c0,11.127-9.077,19.958-19.958,19.958c-10.95,0-19.958-8.9-19.958-19.958 C129.776,23.354,138.729,14.4,149.734,14.4z M39.84,109.328c-17.451-10.067-10.534-37.24,10.01-37.24 c15.311,0,24.922,16.653,17.251,29.942C61.681,111.397,49.517,114.925,39.84,109.328z M59.802,224.702 c-9.535,5.503-21.768,2.229-27.268-7.298c-7.639-13.242,1.887-29.945,17.236-29.945c0.013,0,0.027,0,0.04,0 C70.07,187.48,77.49,214.469,59.802,224.702z M149.734,285.062c-11.005,0-19.958-8.954-19.958-19.958 c0-11.127,9.077-19.958,19.958-19.958c10.954,0,19.958,8.903,19.958,19.958C169.693,276.109,160.74,285.062,149.734,285.062z M216.953,217.982l-41.727,24.095c-13.778-15.22-37.459-14.94-50.983,0l-41.728-24.096c6.196-19.289-5.541-39.835-25.498-44.149 V125.63c19.752-4.268,31.762-24.65,25.498-44.149l41.727-24.095c13.629,15.055,37.32,15.093,50.983,0l41.728,24.096 c-6.196,19.29,5.534,39.835,25.498,44.149v48.202C222.61,178.123,210.721,198.581,216.953,217.982z M266.935,217.404 c-5.501,9.528-17.732,12.802-27.261,7.302c-17.682-10.23-10.301-37.247,10.032-37.247 C264.984,187.459,274.602,204.112,266.935,217.404z"/>
+ </g>
+ </svg>;
+}
+
+export function RulerSvg() {
+ return <svg viewBox="0 0 508.073 508.073" width="17px" height="17px">
+ <g>
+ <path d="M470.459,378.925c-0.7-2.1-1.9-4-3.4-5.5l-113.9-113.9l149.8-149.8c10-10,2.6-17.3,0-19.9l-85.7-85.7 c-5.5-5.5-14.4-5.5-19.9,0l-149.8,149.8l-134.7-134.7c-25.5-25.5-67.8-25.6-93.4,0c-25.8,25.8-25.8,67.7,0,93.5l134.6,134.7 l-149.9,149.9c-5.5,5.5-5.5,14.4,0,19.9l85.6,85.7c2.6,2.6,10,10,19.9,0l150-149.9l113.9,113.9c1.5,1.5,3.4,2.7,5.5,3.4 l110.4,36.9c6,2,10.7,0.3,14.4-3.4c3.8-3.8,5.1-9.4,3.4-14.4L470.459,378.925z M276.159,165.225l29.9,29.9 c5.5,5.5,14.4,5.5,19.9,0c5-5,5.5-14.4,0-19.9l-29.9-29.9l23.7-23.7l13,13c5.5,5.5,14.4,5.5,19.9,0c5.2-5.2,6.2-13.7,0-19.9 l-13-13l23.7-23.7l29.4,29.4c5.5,5.5,14.4,5.5,19.9,0c5.6-5.6,5.5-14.4,0-19.9l-29.4-29.5l24-24l65.8,65.7l-139.8,139.9 l-65.8-65.8L276.159,165.225z M39.359,92.825c-14.8-14.8-14.8-38.8,0-53.6c14.1-14.1,38.8-14.7,53.6,0l15.5,15.5l-53.6,53.6 L39.359,92.825z M99.759,473.025l-65.7-65.7l24-24l13.2,13.2c5.5,5.5,14.4,5.6,19.9,0c5.5-5.5,5.5-14.4,0-19.9l-13.1-13.3 l23.7-23.7l29.6,29.6c6.2,6.2,14.7,5.2,19.9,0c5.5-5.5,5.5-14.4,0-19.9l-29.6-29.6l23.7-23.7l13.2,13.2c5.5,5.5,14.9,5,19.9,0 c5.5-5.5,5.5-14.4,0-19.9l-13.2-13.2l8.8-8.8l65.8,65.7L99.759,473.025z M74.759,128.225l53.6-53.6l308.7,308.7l-53.6,53.6 L74.759,128.225z M409.659,450.725l41.3-41.3l20.7,61.9L409.659,450.725z"/>
+ </g>
+ </svg>;
+}
+
+export function CubeSvg() {
+ return <svg viewBox="0 0 270.06 270.06" width="17px" height="17px">
+ <g>
+ <path d="M264.898,0.007 c-0.181,0.006-0.362,0.023-0.541,0.049H84.996c-1.326,0-2.598,0.527-3.535,1.465l-80,80C0.525,82.459-0.001,83.73,0,85.056v180 c0,2.761,2.239,5,5,5h180c1.326,0,2.598-0.527,3.535-1.465l80-80c0.938-0.938,1.465-2.209,1.465-3.535V5.819 c0.14-0.893,0.035-1.807-0.303-2.645c-0.016-0.045-0.033-0.09-0.051-0.135c-0.808-1.89-2.69-3.093-4.744-3.033L264.898,0.007z M87.066,10.056h165.859l-70,70H17.066L87.066,10.056z M259.996,17.126v165.859l-70,70V87.126L259.996,17.126L259.996,17.126z M84.92,19.985c-2.759,0.042-4.963,2.311-4.924,5.07v40c-0.039,2.761,2.168,5.032,4.929,5.071s5.032-2.168,5.071-4.929 c0.001-0.047,0.001-0.094,0-0.141v-40c0.039-2.761-2.168-5.031-4.93-5.07C85.018,19.984,84.969,19.984,84.92,19.985z M9.996,90.056 h170v170h-170V90.056L9.996,90.056z M84.92,99.985c-2.759,0.042-4.963,2.311-4.924,5.07v30c-0.039,2.761,2.168,5.032,4.929,5.071 s5.032-2.168,5.071-4.929c0.001-0.047,0.001-0.094,0-0.141v-30c0.039-2.761-2.168-5.031-4.93-5.07 C85.018,99.984,84.969,99.984,84.92,99.985z M84.92,159.985c-2.759,0.042-4.963,2.311-4.924,5.07v17.93L61.461,201.52 c-1.992,1.913-2.057,5.078-0.144,7.07c1.913,1.992,5.078,2.057,7.07,0.144c0.049-0.047,0.097-0.095,0.144-0.144l18.535-18.535h17.93 c2.761,0.039,5.032-2.168,5.071-4.929s-2.168-5.032-4.929-5.071c-0.047-0.001-0.094-0.001-0.141,0h-15v-15 c0.039-2.761-2.168-5.031-4.93-5.07C85.018,159.984,84.969,159.984,84.92,159.985z M134.996,180.055 c-2.761-0.039-5.032,2.168-5.071,4.929c-0.039,2.761,2.168,5.032,4.929,5.071c0.047,0.001,0.094,0.001,0.141,0h30 c2.761,0.039,5.032-2.168,5.071-4.929c0.039-2.761-2.168-5.032-4.929-5.071c-0.047-0.001-0.094-0.001-0.141,0H134.996z M204.996,180.055c-2.761-0.039-5.032,2.168-5.071,4.929c-0.039,2.761,2.168,5.032,4.929,5.071c0.047,0.001,0.094,0.001,0.141,0h40 c2.761,0.039,5.032-2.168,5.071-4.929s-2.168-5.032-4.929-5.071c-0.047-0.001-0.094-0.001-0.141,0H204.996z M44.898,220.007 c-1.299,0.039-2.532,0.582-3.438,1.514l-20,20c-1.992,1.913-2.057,5.078-0.144,7.07c1.913,1.992,5.078,2.057,7.07,0.144 c0.049-0.047,0.097-0.095,0.144-0.144l20-20c1.98-1.925,2.025-5.091,0.1-7.071C47.654,220.514,46.3,219.965,44.898,220.007z"/>
+ </g>
+ </svg>;
+}
+
+// The following icons are adapted from https://materialdesignicons.com/ and
// licensed with https://github.com/Templarian/MaterialDesign/blob/master/LICENSE
-const _cursor = <svg width="24px" height="24px" viewBox="0 0 24 24">
- <path d="M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z" />
-</svg>;
\ No newline at end of file
+export function CursorDefaultOutlineSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z" />
+ </svg>;
+}
+
+export function FileOutlineSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24" strokeWidth="0.1">
+ <path fill="currentColor" d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
+ </svg>;
+}
+
+// The following icons are adapted from https://material-ui.com/components/material-icons/ and
+// licensed with https://github.com/mui-org/material-ui/blob/master/LICENSE
+
+export function AccountTreeOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3h7zM7 9H4V5h3v4zm10 6h3v4h-3v-4zm0-10h3v4h-3V5z" />
+ </svg>;
+}
+
+export function AddSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+ </svg>;
+}
+
+export function ArrowDownwardSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />
+ </svg>;
+}
+
+export function ArrowDropDownSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M7 10l5 5 5-5z" />
+ </svg>;
+}
+
+export function ArrowRightSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M10 17l5-5-5-5v10z" />
+ </svg>;
+}
+
+export function ArrowUpwardSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+ </svg>;
+}
+
+export function AutorenewSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z" />
+ </svg>;
+}
+
+export function BlurOnSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M6 13c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-3 .5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM6 5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm15 5.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM14 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-3.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zm-11 10c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm0-17c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM10 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 5.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm8 .5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm3 8.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM14 17c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-4-12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0 8.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm4-4.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-4c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z" />
+ </svg>;
+}
+
+export function BookmarksOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M15 7v12.97l-4.21-1.81-.79-.34-.79.34L5 19.97V7h10m4-6H8.99C7.89 1 7 1.9 7 3h10c1.1 0 2 .9 2 2v13l2 1V3c0-1.1-.9-2-2-2zm-4 4H5c-1.1 0-2 .9-2 2v16l7-3 7 3V7c0-1.1-.9-2-2-2z" />
+ </svg>;
+}
+
+export function BrushSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34a.9959.9959 0 00-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z" />
+ </svg>;
+}
+
+export function BuildOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M22.61 18.99l-9.08-9.08c.93-2.34.45-5.1-1.44-7C9.79.61 6.21.4 3.66 2.26L7.5 6.11 6.08 7.52 2.25 3.69C.39 6.23.6 9.82 2.9 12.11c1.86 1.86 4.57 2.35 6.89 1.48l9.11 9.11c.39.39 1.02.39 1.41 0l2.3-2.3c.4-.38.4-1.01 0-1.41zm-3 1.6l-9.46-9.46c-.61.45-1.29.72-2 .82-1.36.2-2.79-.21-3.83-1.25C3.37 9.76 2.93 8.5 3 7.26l3.09 3.09 4.24-4.24-3.09-3.09c1.24-.07 2.49.37 3.44 1.31 1.08 1.08 1.49 2.57 1.24 3.96-.12.71-.42 1.37-.88 1.96l9.45 9.45-.88.89z" />
+ </svg>;
+}
+
+export function BuildSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z" />
+ </svg>;
+}
+
+export function CameraOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M14.25 2.26l-.08-.04-.01.02C13.46 2.09 12.74 2 12 2 6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10c0-4.75-3.31-8.72-7.75-9.74zM19.41 9h-7.99l2.71-4.7c2.4.66 4.35 2.42 5.28 4.7zM13.1 4.08L10.27 9l-1.15 2L6.4 6.3C7.84 4.88 9.82 4 12 4c.37 0 .74.03 1.1.08zM5.7 7.09L8.54 12l1.15 2H4.26C4.1 13.36 4 12.69 4 12c0-1.85.64-3.55 1.7-4.91zM4.59 15h7.98l-2.71 4.7c-2.4-.67-4.34-2.42-5.27-4.7zm6.31 4.91L14.89 13l2.72 4.7C16.16 19.12 14.18 20 12 20c-.38 0-.74-.04-1.1-.09zm7.4-3l-4-6.91h5.43c.17.64.27 1.31.27 2 0 1.85-.64 3.55-1.7 4.91z" />
+ </svg>;
+}
+
+export function CameraSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M9.4 10.5l4.77-8.26C13.47 2.09 12.75 2 12 2c-2.4 0-4.6.85-6.32 2.25l3.66 6.35.06-.1zM21.54 9c-.92-2.92-3.15-5.26-6-6.34L11.88 9h9.66zm.26 1h-7.49l.29.5 4.76 8.25C21 16.97 22 14.61 22 12c0-.69-.07-1.35-.2-2zM8.54 12l-3.9-6.75C3.01 7.03 2 9.39 2 12c0 .69.07 1.35.2 2h7.49l-1.15-2zm-6.08 3c.92 2.92 3.15 5.26 6 6.34L12.12 15H2.46zm11.27 0l-3.9 6.76c.7.15 1.42.24 2.17.24 2.4 0 4.6-.85 6.32-2.25l-3.66-6.35-.93 1.6z" />
+ </svg>;
+}
+
+export function CancelOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z" />
+ </svg>;
+}
+
+export function CancelSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" />
+ </svg>;
+}
+
+export function CenterFocusStrongSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-7 7H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4z" />
+ </svg>;
+}
+
+export function CheckSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+ </svg>;
+}
+
+export function ClearSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+ </svg>;
+}
+
+export function CloseSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+ </svg>;
+}
+
+export function CloudUploadSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" />
+ </svg>;
+}
+
+export function CodeSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
+ </svg>;
+}
+
+export function DeleteOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" />
+ </svg>;
+}
+
+export function DeleteSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+ </svg>;
+}
+
+export function ErrorSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+ </svg>;
+}
+
+export function ExtensionSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z" />
+ </svg>;
+}
+
+export function FlipToFrontSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24" strokeWidth="0.1px">
+ <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />
+ </svg>;
+}
+
+export function FullscreenSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+ </svg>;
+}
+
+export function GetAppSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
+ </svg>;
+}
+
+export function HelpOutlineSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" />
+ </svg>;
+}
+
+export function HomeOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z" />
+ </svg>;
+}
+
+export function LaunchSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+ </svg>;
+}
+
+export function LinearScaleSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M19.5 9.5c-1.03 0-1.9.62-2.29 1.5h-2.92c-.39-.88-1.26-1.5-2.29-1.5s-1.9.62-2.29 1.5H6.79c-.39-.88-1.26-1.5-2.29-1.5C3.12 9.5 2 10.62 2 12s1.12 2.5 2.5 2.5c1.03 0 1.9-.62 2.29-1.5h2.92c.39.88 1.26 1.5 2.29 1.5s1.9-.62 2.29-1.5h2.92c.39.88 1.26 1.5 2.29 1.5 1.38 0 2.5-1.12 2.5-2.5s-1.12-2.5-2.5-2.5z" />
+ </svg>;
+}
+
+export function MoreHorizSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
+ </svg>;
+}
+
+export function NavigateBeforeSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+ </svg>;
+}
+
+export function NavigateNextSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+ </svg>;
+}
+
+export function OpenInBrowserSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z" />
+ </svg>;
+}
+
+export function PlayArrowSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M8 5v14l11-7z" />
+ </svg>;
+}
+
+export function RefreshSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
+ </svg>;
+}
+
+export function RemoveSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M19 13H5v-2h14v2z" />
+ </svg>;
+}
+
+export function RestoreSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
+ </svg>;
+}
+
+export function SaveOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM6 6h9v4H6z" />
+ </svg>;
+}
+
+export function ScatterPlotSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <circle cx="7" cy="14" r="3" /><circle cx="11" cy="6" r="3" /><circle cx="16.6" cy="17.6" r="3" />
+ </svg>;
+}
+
+export function SkipPreviousSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
+ </svg>;
+}
+
+export function StopSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M6 6h12v12H6z" />
+ </svg>;
+}
+
+export function SubscriptionsOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M4 6h16v2H4zm2-4h12v2H6zm14 8H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm0 10H4v-8h16v8zm-10-7.27v6.53L16 16z" />
+ </svg>;
+}
+
+export function SwapHorizSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" />
+ </svg>;
+}
+
+export function TuneSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" />
+ </svg>;
+}
+
+export function VisibilityOffOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z" />
+ </svg>;
+}
+
+export function VisibilityOutlinedSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z" />
+ </svg>;
+}
+
+export function WarningSvg() {
+ return <svg width="24px" height="24px" viewBox="0 0 24 24">
+ <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+ </svg>;
+}
+
+// Aliases
+
+export const SelectionModeSvg = CursorDefaultOutlineSvg;
+export const SuperposeAtomsSvg = ScatterPlotSvg;
+export const SuperposeChainsSvg = LinearScaleSvg;
+export const SuperpositionSvg = FlipToFrontSvg;
diff --git a/src/mol-plugin-ui/controls/parameters.tsx b/src/mol-plugin-ui/controls/parameters.tsx
index 675488da40f3128a83bcc06ab19eb9ae91e0765d..58781714fdb56a322e1eeff60ec5cc20252b7eeb 100644
--- a/src/mol-plugin-ui/controls/parameters.tsx
+++ b/src/mol-plugin-ui/controls/parameters.tsx
@@ -5,16 +5,6 @@
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
-import ArrowRight from '@material-ui/icons/ArrowRight';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
-import BookmarksOutlined from '@material-ui/icons/BookmarksOutlined';
-import Check from '@material-ui/icons/Check';
-import Clear from '@material-ui/icons/Clear';
-import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
-import HelpOutline from '@material-ui/icons/HelpOutline';
-import MoreHoriz from '@material-ui/icons/MoreHoriz';
import * as React from 'react';
import { Mat4, Vec2, Vec3 } from '../../mol-math/linear-algebra';
import { PluginContext } from '../../mol-plugin/context';
@@ -30,7 +20,7 @@ import { PluginUIComponent } from '../base';
import { ActionMenu } from './action-menu';
import { ColorOptions, ColorValueOption, CombinedColorControl } from './color';
import { Button, ControlGroup, ControlRow, ExpandGroup, IconButton, TextInput, ToggleButton } from './common';
-import { Icon } from './icons';
+import { Icon, HelpOutlineSvg, CheckSvg, ClearSvg, BookmarksOutlinedSvg, MoreHorizSvg, ArrowDropDownSvg, ArrowRightSvg, ArrowDownwardSvg, ArrowUpwardSvg, DeleteOutlinedSvg } from './icons';
import { legendFor } from './legend';
import LineGraphComponent from './line-graph/line-graph-component';
import { Slider, Slider2 } from './slider';
@@ -216,7 +206,7 @@ export class ParamHelp<L extends LegendData> extends React.PureComponent<{ legen
return <div className='msp-help-text'>
<div>
- <div className='msp-help-description'><Icon svg={HelpOutline} inline />{description}</div>
+ <div className='msp-help-description'><Icon svg={HelpOutlineSvg} inline />{description}</div>
{Legend && <div className='msp-help-legend'><Legend legend={legend} /></div>}
</div>
</div>;
@@ -259,8 +249,7 @@ function renderSimple(options: { props: ParamProps<any>, state: { showHelp: bool
<button className='msp-help msp-btn-link msp-btn-icon msp-control-group-expander' onClick={toggleHelp}
title={desc || `${state.showHelp ? 'Hide' : 'Show'} help`}
style={{ background: 'transparent', textAlign: 'left', padding: '0' }}>
- {/* TODO: <Icon name={state.showHelp ? 'help-circle-collapse' : 'help-circle-expand'} /> */}
- <Icon svg={HelpOutline} />
+ <Icon svg={HelpOutlineSvg} />
</button>
}
</>}
@@ -300,7 +289,7 @@ export class BoolControl extends SimpleParam<PD.BooleanParam> {
onClick = (e: React.MouseEvent<HTMLButtonElement>) => { this.update(!this.props.value); e.currentTarget.blur(); }
renderControl() {
return <button onClick={this.onClick} disabled={this.props.isDisabled}>
- <Icon svg={this.props.value ? Check : Clear} />
+ <Icon svg={this.props.value ? CheckSvg : ClearSvg} />
{this.props.value ? 'On' : 'Off'}
</button>;
}
@@ -466,8 +455,8 @@ export class SelectControl extends React.PureComponent<ParamProps<PD.Select<stri
const toggle = this.props.param.cycle ? this.cycle : this.toggle;
const textAlign = this.props.param.cycle ? 'center' : 'left';
const icon = this.props.param.cycle
- ? (this.props.value === 'on' ? Check
- : this.props.value === 'off' ? Clear : void 0)
+ ? (this.props.value === 'on' ? CheckSvg
+ : this.props.value === 'off' ? ClearSvg : void 0)
: void 0;
return <ToggleButton disabled={this.props.isDisabled} style={{ textAlign, overflow: 'hidden', textOverflow: 'ellipsis' }}
@@ -644,7 +633,7 @@ export class ColorListControl extends React.PureComponent<ParamProps<PD.ColorLis
{value.colors.length === 1 ? '1 color' : `${value.colors.length} colors`}
<div style={colorStripStyle(value, '33px')} />
</button>
- <IconButton svg={BookmarksOutlined} onClick={this.togglePresets} toggleState={this.state.show === 'presets'} title='Color Presets'
+ <IconButton svg={BookmarksOutlinedSvg} onClick={this.togglePresets} toggleState={this.state.show === 'presets'} title='Color Presets'
style={{ padding: 0, position: 'absolute', right: 0, top: 0, width: '32px' }} />
</>;
}
@@ -939,7 +928,7 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>>
if (!this.state.isExpanded) {
return <div className='msp-mapped-parameter-group'>
{ctrl}
- <IconButton svg={MoreHoriz} onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`More Options`} />
+ <IconButton svg={MoreHorizSvg} onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`More Options`} />
</div>;
}
@@ -950,7 +939,7 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>>
return <div className='msp-mapped-parameter-group'>
{ctrl}
- <IconButton svg={MoreHoriz} onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`More Options`} />
+ <IconButton svg={MoreHorizSvg} onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`More Options`} />
<div className='msp-control-offset'>
<ParameterControls params={filtered} onEnter={this.props.onEnter} values={this.props.value} onChange={this.onChangeParam} isDisabled={this.props.isDisabled} />
</div>
@@ -980,7 +969,7 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>>
return <div className='msp-control-group-wrapper'>
<div className='msp-control-group-header'>
<button className='msp-btn msp-form-control msp-btn-block' onClick={this.toggleExpanded}>
- <Icon svg={this.state.isExpanded ? ArrowDropDown : ArrowRight} />
+ <Icon svg={this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg} />
{label}
</button>
</div>
@@ -1056,7 +1045,7 @@ export class MappedControl extends React.PureComponent<ParamProps<PD.Mapped<any>
if (!this.areParamsEmpty(param.params)) {
return <div className='msp-mapped-parameter-group'>
{Select}
- <IconButton svg={MoreHoriz} onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`${label} Properties`} />
+ <IconButton svg={MoreHorizSvg} onClick={this.toggleExpanded} toggleState={this.state.isExpanded} title={`${label} Properties`} />
{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>;
}
@@ -1134,9 +1123,9 @@ class ObjectListItem extends React.PureComponent<ObjectListItemProps, { isExpand
{this.props.param.getLabel(this.props.value)}
</button>
<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={DeleteOutlined} title='Remove' onClick={this.remove} small={true} />
+ <IconButton svg={ArrowDownwardSvg} title='Move Up' onClick={this.moveUp} small={true} />
+ <IconButton svg={ArrowUpwardSvg} title='Move Down' onClick={this.moveDown} small={true} />
+ <IconButton svg={DeleteOutlinedSvg} title='Remove' onClick={this.remove} small={true} />
</div>
</div>
{this.state.isExpanded && <div className='msp-control-offset'>
diff --git a/src/mol-plugin-ui/custom/volume.tsx b/src/mol-plugin-ui/custom/volume.tsx
index 80c58e54c87b3cbe421e0748e23f4cd59f236f1f..853867f3dfe76bb517f49db371d9f25f8a672c03 100644
--- a/src/mol-plugin-ui/custom/volume.tsx
+++ b/src/mol-plugin-ui/custom/volume.tsx
@@ -16,10 +16,9 @@ import { Volume, Grid } from '../../mol-model/volume';
import { Vec3 } from '../../mol-math/linear-algebra';
import { ColorNames } from '../../mol-util/color/names';
import { toPrecision } from '../../mol-util/number';
-import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
-import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
import { StateSelection, StateObjectCell } from '../../mol-state';
import { setSubtreeVisibility } from '../../mol-plugin/behavior/static/state';
+import { VisibilityOutlinedSvg, VisibilityOffOutlinedSvg } from '../controls/icons';
const ChannelParams = {
color: PD.Color(ColorNames.black, { description: 'Display color of the volume.' }),
@@ -107,7 +106,7 @@ class Channel extends PluginUIComponent<{
pivot={<div className='msp-volume-channel-inline-controls'>
<Slider value={value} min={ctrlMin} max={ctrlMax} step={step}
onChange={v => props.changeIso(props.name, v, isRelative)} disabled={props.params.isDisabled} onEnter={props.params.events.onEnter} />
- <IconButton svg={this.getVisible() ? VisibilityOutlined : VisibilityOffOutlined} onClick={this.toggleVisible} toggleState={false} disabled={props.params.isDisabled} />
+ <IconButton svg={this.getVisible() ? VisibilityOutlinedSvg : VisibilityOffOutlinedSvg} onClick={this.toggleVisible} toggleState={false} disabled={props.params.isDisabled} />
</div>}
controls={<ParameterControls onChange={({ name, value }) => props.changeParams(props.name, name, value)} params={ChannelParams} values={channel} onEnter={props.params.events.onEnter} isDisabled={props.params.isDisabled} />}
/>;
diff --git a/src/mol-plugin-ui/left-panel.tsx b/src/mol-plugin-ui/left-panel.tsx
index 1669b6005899cbab3c87da298c15a0bddba24b98..9498ccbe956779be3d7c92f57fdb770bc5419fc9 100644
--- a/src/mol-plugin-ui/left-panel.tsx
+++ b/src/mol-plugin-ui/left-panel.tsx
@@ -4,12 +4,6 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
-import AccountTreeOutlined from '@material-ui/icons/AccountTreeOutlined';
-import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
-import HelpOutline from '@material-ui/icons/HelpOutline';
-import HomeOutlined from '@material-ui/icons/HomeOutlined';
-import SaveOutlined from '@material-ui/icons/SaveOutlined';
-import Tune from '@material-ui/icons/Tune';
import * as React from 'react';
import { Canvas3DParams } from '../mol-canvas3d/canvas3d';
import { PluginCommands } from '../mol-plugin/commands';
@@ -23,6 +17,7 @@ import { StateObjectActions } from './state/actions';
import { RemoteStateSnapshots, StateSnapshots } from './state/snapshots';
import { StateTree } from './state/tree';
import { HelpContent } from './viewport/help';
+import { HomeOutlinedSvg, AccountTreeOutlinedSvg, TuneSvg, HelpOutlineSvg, SaveOutlinedSvg, DeleteOutlinedSvg } from './controls/icons';
export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTabName }> {
state = { tab: this.plugin.behaviors.layout.leftPanelTabName.value };
@@ -57,21 +52,21 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTab
tabs: { [K in LeftPanelTabName]: JSX.Element } = {
'none': <></>,
'root': <>
- <SectionHeader icon={HomeOutlined} title='Home' />
+ <SectionHeader icon={HomeOutlinedSvg} title='Home' />
<StateObjectActions state={this.plugin.state.data} nodeRef={StateTransform.RootRef} hideHeader={true} initiallyCollapsed={true} alwaysExpandFirst={true} />
{this.plugin.spec.components?.remoteState !== 'none' && <RemoteStateSnapshots listOnly /> }
</>,
'data': <>
- <SectionHeader icon={AccountTreeOutlined} title={<><RemoveAllButton /> State Tree</>} />
+ <SectionHeader icon={AccountTreeOutlinedSvg} title={<><RemoveAllButton /> State Tree</>} />
<StateTree state={this.plugin.state.data} />
</>,
'states': <StateSnapshots />,
'settings': <>
- <SectionHeader icon={Tune} title='Plugin Settings' />
+ <SectionHeader icon={TuneSvg} title='Plugin Settings' />
<FullSettings />
</>,
'help': <>
- <SectionHeader icon={HelpOutline} title='Help' />
+ <SectionHeader icon={HelpOutlineSvg} title='Help' />
<HelpContent />
</>
}
@@ -81,12 +76,12 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTab
return <div className='msp-left-panel-controls'>
<div className='msp-left-panel-controls-buttons'>
- <IconButton svg={HomeOutlined} toggleState={tab === 'root'} transparent onClick={() => this.set('root')} title='Home' />
+ <IconButton svg={HomeOutlinedSvg} toggleState={tab === 'root'} transparent onClick={() => this.set('root')} title='Home' />
<DataIcon set={this.set} />
- <IconButton svg={SaveOutlined} toggleState={tab === 'states'} transparent onClick={() => this.set('states')} title='Plugin State' />
- <IconButton svg={HelpOutline} toggleState={tab === 'help'} transparent onClick={() => this.set('help')} title='Help' />
+ <IconButton svg={SaveOutlinedSvg} toggleState={tab === 'states'} transparent onClick={() => this.set('states')} title='Plugin State' />
+ <IconButton svg={HelpOutlineSvg} toggleState={tab === 'help'} transparent onClick={() => this.set('help')} title='Help' />
<div className='msp-left-panel-controls-buttons-bottom'>
- <IconButton svg={Tune} toggleState={tab === 'settings'} transparent onClick={() => this.set('settings')} title='Settings' />
+ <IconButton svg={TuneSvg} toggleState={tab === 'settings'} transparent onClick={() => this.set('settings')} title='Settings' />
</div>
</div>
<div className='msp-scrollable-container'>
@@ -116,7 +111,7 @@ class DataIcon extends PluginUIComponent<{ set: (tab: LeftPanelTabName) => void
render() {
return <IconButton
- svg={AccountTreeOutlined} toggleState={this.tab === 'data'} transparent onClick={() => this.props.set('data')} title='State Tree'
+ svg={AccountTreeOutlinedSvg} toggleState={this.tab === 'data'} transparent onClick={() => this.props.set('data')} title='State Tree'
style={{ position: 'relative' }} extraContent={this.state.changed ? <div className='msp-left-panel-controls-button-data-dirty' /> : void 0} />;
}
}
@@ -168,6 +163,6 @@ 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={DeleteOutlined} onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small className='msp-no-hover-outline' transparent />;
+ return <IconButton svg={DeleteOutlinedSvg} onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small className='msp-no-hover-outline' transparent />;
}
}
diff --git a/src/mol-plugin-ui/sequence.tsx b/src/mol-plugin-ui/sequence.tsx
index e3acb28f067d7e295268dae73c8e6a00f4385066..6ba8b0a4726528520c28eb1452465fc0da4e035f 100644
--- a/src/mol-plugin-ui/sequence.tsx
+++ b/src/mol-plugin-ui/sequence.tsx
@@ -20,9 +20,8 @@ import { State, StateSelection } from '../mol-state';
import { ChainSequenceWrapper } from './sequence/chain';
import { ElementSequenceWrapper } from './sequence/element';
import { elementLabel } from '../mol-theme/label';
-import { Icon } from './controls/icons';
+import { Icon, HelpOutlineSvg } from './controls/icons';
import { StructureSelectionManager } from '../mol-plugin-state/manager/structure/selection';
-import HelpOutline from '@material-ui/icons/HelpOutline';
const MaxDisplaySequenceLength = 5000;
@@ -296,7 +295,7 @@ export class SequenceView extends PluginUIComponent<{ }, SequenceViewState> {
if (this.getStructure(this.state.structureRef) === Structure.Empty) {
return <div className='msp-sequence'>
<div className='msp-sequence-select'>
- <Icon svg={HelpOutline} style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
+ <Icon svg={HelpOutlineSvg} style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
title='This shows a single sequence. Use the controls to show a different sequence.'/>
<span>Sequence</span><span style={{ fontWeight: 'normal' }}>No structure available</span>
@@ -311,7 +310,7 @@ export class SequenceView extends PluginUIComponent<{ }, SequenceViewState> {
return <div className='msp-sequence'>
<div className='msp-sequence-select'>
- <Icon svg={HelpOutline} style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
+ <Icon svg={HelpOutlineSvg} style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
title='This shows a single sequence. Use the controls to show a different sequence.' />
<span>Sequence of</span>
diff --git a/src/mol-plugin-ui/state/actions.tsx b/src/mol-plugin-ui/state/actions.tsx
index a0cf634b94f041ba2dd77728d5932d7d328aeced..34fd173d2399e7ec0a349bab4018fa227e1e56fa 100644
--- a/src/mol-plugin-ui/state/actions.tsx
+++ b/src/mol-plugin-ui/state/actions.tsx
@@ -7,9 +7,8 @@
import * as React from 'react';
import { State } from '../../mol-state';
import { PluginUIComponent } from '../base';
-import { Icon } from '../controls/icons';
+import { Icon, CodeSvg } from '../controls/icons';
import { ApplyActionControl } from './apply-action';
-import Code from '@material-ui/icons/Code';
export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string, hideHeader?: boolean, initiallyCollapsed?: boolean, alwaysExpandFirst?: boolean }> {
get current() {
@@ -42,7 +41,7 @@ export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRe
const display = cell.obj ? cell.obj.label : (def.display && def.display.name) || def.name;
return <div className='msp-state-actions'>
- {!this.props.hideHeader && <div className='msp-section-header'><Icon svg={Code} /> {`Actions (${display})`}</div> }
+ {!this.props.hideHeader && <div className='msp-section-header'><Icon svg={CodeSvg} /> {`Actions (${display})`}</div> }
{actions.map((act, i) => <ApplyActionControl
key={`${act.id}`} state={state} action={act} nodeRef={ref}
initiallyCollapsed={i === 0 ? !this.props.alwaysExpandFirst && this.props.initiallyCollapsed : this.props.initiallyCollapsed} />)}
diff --git a/src/mol-plugin-ui/state/animation.tsx b/src/mol-plugin-ui/state/animation.tsx
index c929d6b420a718d261745508f32c38adda760dd0..2230723b517c167d06ba720012a3344513fff124 100644
--- a/src/mol-plugin-ui/state/animation.tsx
+++ b/src/mol-plugin-ui/state/animation.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
import { PluginUIComponent } from '../base';
import { ParameterControls, ParamOnChange } from '../controls/parameters';
import { Button } from '../controls/common';
-import PlayArrow from '@material-ui/icons/PlayArrow';
+import { PlayArrowSvg } from '../controls/icons';
export class AnimationControls extends PluginUIComponent<{ onStart?: () => void }> {
componentDidMount() {
@@ -44,7 +44,7 @@ export class AnimationControls extends PluginUIComponent<{ onStart?: () => void
<ParameterControls params={anim.current.params} values={anim.current.paramValues} onChange={this.updateCurrentParams} isDisabled={isDisabled} />
<div className='msp-flex-row'>
- <Button icon={anim.state.animationState !== 'playing' ? void 0 : PlayArrow} onClick={this.startOrStop} disabled={canApply !== void 0 && canApply.canApply === false}>
+ <Button icon={anim.state.animationState !== 'playing' ? void 0 : PlayArrowSvg} onClick={this.startOrStop} disabled={canApply !== void 0 && canApply.canApply === false}>
{anim.state.animationState === 'playing' ? 'Stop' : canApply === void 0 || canApply.canApply ? 'Start' : canApply.reason || 'Start'}
</Button>
</div>
diff --git a/src/mol-plugin-ui/state/common.tsx b/src/mol-plugin-ui/state/common.tsx
index d4e2c9c4e34946df54a50abf82a5a3364e032007..6f90b37776f634102dddeec6a23fcb0c3ece5707 100644
--- a/src/mol-plugin-ui/state/common.tsx
+++ b/src/mol-plugin-ui/state/common.tsx
@@ -11,13 +11,8 @@ 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/icons';
+import { Icon, RefreshSvg, CheckSvg, ArrowRightSvg, ArrowDropDownSvg, TuneSvg } from '../controls/icons';
import { ExpandGroup, ToggleButton, Button, IconButton } from '../controls/common';
-import Refresh from '@material-ui/icons/Refresh';
-import ArrowRight from '@material-ui/icons/ArrowRight';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
-import Check from '@material-ui/icons/Check';
-import Tune from '@material-ui/icons/Tune';
export { StateTransformParameters, TransformControlBase };
@@ -199,9 +194,9 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
if (this.props.autoHideApply && (!canApply || this.canAutoApply(this.state.params))) return null;
return <div className='msp-transform-apply-wrap'>
- <IconButton svg={Refresh} className='msp-transform-default-params' onClick={this.setDefault} disabled={this.state.busy} title='Set default params' />
+ <IconButton svg={RefreshSvg} className='msp-transform-default-params' onClick={this.setDefault} disabled={this.state.busy} title='Set default params' />
<div className={`msp-transform-apply-wider`}>
- <Button icon={canApply ? Check : void 0} className={`msp-btn-commit msp-btn-commit-${canApply ? 'on' : 'off'}`} onClick={this.apply} disabled={!canApply}>
+ <Button icon={canApply ? CheckSvg : void 0} className={`msp-btn-commit msp-btn-commit-${canApply ? 'on' : 'off'}`} onClick={this.apply} disabled={!canApply}>
{this.props.applyLabel || this.applyText()}
</Button>
</div>
@@ -236,7 +231,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
const ctrl = <div className={wrapClass} style={{ marginBottom: this.props.noMargin ? 0 : void 0 }}>
{display !== 'none' && !this.props.wrapInExpander && <div className='msp-transform-header'>
<Button onClick={this.toggleExpanded} title={display.description}>
- {!isEmpty && <Icon svg={this.state.isCollapsed ? ArrowRight : ArrowDropDown} />}
+ {!isEmpty && <Icon svg={this.state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg} />}
{display.name}
</Button>
</div>}
@@ -258,7 +253,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
<Button icon={this.props.simpleApply?.icon} title={this.props.simpleApply?.title} disabled={this.state.busy || !canApply} onClick={this.apply} className='msp-btn-apply-simple'>
{this.props.simpleApply?.header}
</Button>
- {!info.isEmpty && <ToggleButton icon={Tune} label='' title='Options' toggle={this.toggleExpanded} isSelected={!this.state.isCollapsed} disabled={this.state.busy} style={{ flex: '0 0 40px', padding: 0 }} />}
+ {!info.isEmpty && <ToggleButton icon={TuneSvg} label='' title='Options' toggle={this.toggleExpanded} isSelected={!this.state.isCollapsed} disabled={this.state.busy} style={{ flex: '0 0 40px', padding: 0 }} />}
</div>;
if (this.state.isCollapsed) return apply;
diff --git a/src/mol-plugin-ui/state/snapshots.tsx b/src/mol-plugin-ui/state/snapshots.tsx
index 693742d51d4099b7851977642b74ff2d2173f253..c69317987232af36b2d2259c94cb8c143d21fb2f 100644
--- a/src/mol-plugin-ui/state/snapshots.tsx
+++ b/src/mol-plugin-ui/state/snapshots.tsx
@@ -4,17 +4,6 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
-import Add from '@material-ui/icons/Refresh';
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
-import CloudUpload from '@material-ui/icons/CloudUpload';
-import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
-import GetApp from '@material-ui/icons/GetApp';
-import OpenInBrowser from '@material-ui/icons/OpenInBrowser';
-import SaveOutlined from '@material-ui/icons/SaveOutlined';
-import SwapHoriz from '@material-ui/icons/SwapHoriz';
-import Refresh from '@material-ui/icons/Refresh';
-import Warning from '@material-ui/icons/Warning';
import { OrderedMap } from 'immutable';
import * as React from 'react';
import { PluginCommands } from '../../mol-plugin/commands';
@@ -26,13 +15,13 @@ import { ParamDefinition as PD } from '../../mol-util/param-definition';
import { urlCombine } from '../../mol-util/url';
import { PluginUIComponent, PurePluginUIComponent } from '../base';
import { Button, ExpandGroup, IconButton, SectionHeader } from '../controls/common';
-import { Icon } from '../controls/icons';
+import { Icon, SaveOutlinedSvg, GetAppSvg, OpenInBrowserSvg, WarningSvg, DeleteOutlinedSvg, AddSvg, ArrowUpwardSvg, SwapHorizSvg, ArrowDownwardSvg, RefreshSvg, CloudUploadSvg } from '../controls/icons';
import { ParameterControls } from '../controls/parameters';
export class StateSnapshots extends PluginUIComponent<{}> {
render() {
return <div>
- <SectionHeader icon={SaveOutlined} title='Plugin State' />
+ <SectionHeader icon={SaveOutlinedSvg} title='Plugin State' />
<div style={{ marginBottom: '10px' }}>
<ExpandGroup header='Save Options' initiallyExpanded={false}>
@@ -76,18 +65,18 @@ export class StateExportImportControls extends PluginUIComponent<{ onAction?: ()
render() {
return <>
<div className='msp-flex-row'>
- <Button icon={GetApp} onClick={this.downloadToFileJson} title='Save the state description. Input data are loaded using the provided sources. Does not work if local files are used as input.'>
+ <Button icon={GetAppSvg} onClick={this.downloadToFileJson} title='Save the state description. Input data are loaded using the provided sources. Does not work if local files are used as input.'>
State
</Button>
- <Button icon={GetApp} onClick={this.downloadToFileZip} title='Save the state including the input data.'>
+ <Button icon={GetAppSvg} onClick={this.downloadToFileZip} title='Save the state including the input data.'>
Session
</Button>
<div className='msp-btn msp-btn-block msp-btn-action msp-loader-msp-btn-file'>
- <Icon svg={OpenInBrowser} inline /> Open <input onChange={this.open} type='file' multiple={false} accept='.molx,.molj' />
+ <Icon svg={OpenInBrowserSvg} inline /> Open <input onChange={this.open} type='file' multiple={false} accept='.molx,.molj' />
</div>
</div>
<div className='msp-help-text' style={{ padding: '10px'}}>
- <Icon svg={Warning} /> This is an experimental feature and stored states/sessions might not be openable in a future version.
+ <Icon svg={WarningSvg} /> This is an experimental feature and stored states/sessions might not be openable in a future version.
</div>
</>;
}
@@ -134,8 +123,8 @@ class LocalStateSnapshots extends PluginUIComponent<
return <div>
<ParameterControls params={LocalStateSnapshots.Params} values={this.state.params} onEnter={this.add} onChangeValues={this.updateParams} />
<div className='msp-flex-row'>
- <IconButton onClick={this.clear} svg={DeleteOutlined} title='Remove All' />
- <Button onClick={this.add} icon={Add} style={{ textAlign: 'right' }} commit>Add</Button>
+ <IconButton onClick={this.clear} svg={DeleteOutlinedSvg} title='Remove All' />
+ <Button onClick={this.add} icon={AddSvg} style={{ textAlign: 'right' }} commit>Add</Button>
</div>
</div>;
}
@@ -186,10 +175,10 @@ class LocalStateSnapshotList extends PluginUIComponent<{}, {}> {
{`${e!.snapshot.durationInMs ? formatTimespan(e!.snapshot.durationInMs, false) + `${e!.description ? ', ' : ''}` : ''}${e!.description ? e!.description : ''}`}
</small>
</Button>
- <IconButton svg={ArrowUpward} data-id={e!.snapshot.id} title='Move Up' onClick={this.moveUp} flex='20px' />
- <IconButton svg={ArrowDownward} data-id={e!.snapshot.id} title='Move Down' onClick={this.moveDown} flex='20px' />
- <IconButton svg={SwapHoriz} data-id={e!.snapshot.id} title='Replace' onClick={this.replace} flex='20px' />
- <IconButton svg={DeleteOutlined} data-id={e!.snapshot.id} title='Remove' onClick={this.remove} flex='20px' />
+ <IconButton svg={ArrowUpwardSvg} data-id={e!.snapshot.id} title='Move Up' onClick={this.moveUp} flex='20px' />
+ <IconButton svg={ArrowDownwardSvg} data-id={e!.snapshot.id} title='Move Down' onClick={this.moveDown} flex='20px' />
+ <IconButton svg={SwapHorizSvg} data-id={e!.snapshot.id} title='Replace' onClick={this.replace} flex='20px' />
+ <IconButton svg={DeleteOutlinedSvg} data-id={e!.snapshot.id} title='Remove' onClick={this.remove} flex='20px' />
</li>)}
</ul>;
}
@@ -317,8 +306,8 @@ export class RemoteStateSnapshots extends PluginUIComponent<
this.setState({ params: { ...this.state.params, [p.name]: p.value } } as any);
}} isDisabled={this.state.isBusy} />
<div className='msp-flex-row'>
- <IconButton onClick={this.refresh} disabled={this.state.isBusy} svg={Refresh} />
- <Button icon={CloudUpload} onClick={this.upload} disabled={this.state.isBusy} commit>Upload</Button>
+ <IconButton onClick={this.refresh} disabled={this.state.isBusy} svg={RefreshSvg} />
+ <Button icon={CloudUploadSvg} onClick={this.upload} disabled={this.state.isBusy} commit>Upload</Button>
</div>
</>}
@@ -330,7 +319,7 @@ export class RemoteStateSnapshots extends PluginUIComponent<
this.setState({ params: { ...this.state.params, [p.name]: p.value } } as any);
}} isDisabled={this.state.isBusy} />
<div className='msp-flex-row'>
- <Button onClick={this.refresh} disabled={this.state.isBusy} icon={Refresh}>Refresh</Button>
+ <Button onClick={this.refresh} disabled={this.state.isBusy} icon={RefreshSvg}>Refresh</Button>
</div>
</div>}
</>;
@@ -361,7 +350,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={DeleteOutlined} data-id={e!.id} title='Remove' onClick={this.props.remove} disabled={this.props.isBusy} small />}
+ {!e!.isSticky && this.props.remove && <IconButton svg={DeleteOutlinedSvg} 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 cd19a9f7f7329e82fabebe96ab35e4578315136e..a84d2ebac91c5bbf6b721c8c79fe355dd21388e4 100644
--- a/src/mol-plugin-ui/state/tree.tsx
+++ b/src/mol-plugin-ui/state/tree.tsx
@@ -4,13 +4,6 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
-import ArrowRight from '@material-ui/icons/ArrowRight';
-import Close from '@material-ui/icons/Close';
-import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
-import HomeOutlined from '@material-ui/icons/HomeOutlined';
-import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
-import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
import * as React from 'react';
import { debounceTime, filter } from 'rxjs/operators';
import { PluginStateObject } from '../../mol-plugin-state/objects';
@@ -20,7 +13,7 @@ import { StateTreeSpine } from '../../mol-state/tree/spine';
import { PluginUIComponent, _Props, _State } from '../base';
import { ActionMenu } from '../controls/action-menu';
import { Button, ControlGroup, IconButton } from '../controls/common';
-import { Icon } from '../controls/icons';
+import { Icon, HomeOutlinedSvg, ArrowRightSvg, ArrowDropDownSvg, DeleteOutlinedSvg, VisibilityOffOutlinedSvg, VisibilityOutlinedSvg, CloseSvg } from '../controls/icons';
import { ApplyActionControl } from './apply-action';
import { UpdateTransformControl } from './update-transform';
@@ -50,7 +43,7 @@ export class StateTree extends PluginUIComponent<{ state: State }, { showActions
if (this.state.showActions) {
return <div style={{ margin: '10px', cursor: 'default' }}>
<p>Nothing to see here yet.</p>
- <p>Structures and Volumes can be loaded from the <Icon svg={HomeOutlined} /> tab.</p>
+ <p>Structures and Volumes can be loaded from the <Icon svg={HomeOutlinedSvg} /> tab.</p>
</div>;
}
return <StateTreeNode cell={this.props.state.cells.get(ref)!} depth={0} />;
@@ -306,9 +299,9 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
const children = cell.parent!.tree.children.get(this.ref);
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={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 expand = <IconButton svg={cellState.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg} 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={DeleteOutlinedSvg} onClick={this.remove} disabled={disabled} small toggleState={false} /> : void 0;
+ const visibility = <IconButton svg={cellState.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg} toggleState={false} disabled={disabled} small onClick={this.toggleVisible} />;
const marginStyle: React.CSSProperties = {
marginLeft: `${this.props.depth * 8}px`
@@ -326,7 +319,7 @@ class StateTreeNodeLabel extends PluginUIComponent<{ cell: StateObjectCell, dept
if (this.state.action === 'apply' && this.state.currentAction) {
return <div style={{ marginBottom: '1px' }}>
{row}
- <ControlGroup header={`Apply ${this.state.currentAction.definition.display.name}`} initialExpanded={true} hideExpander={true} hideOffset={false} onHeaderClick={this.hideApply} topRightIcon={Close} headerLeftMargin={`${this.props.depth * 8 + 21}px`}>
+ <ControlGroup header={`Apply ${this.state.currentAction.definition.display.name}`} initialExpanded={true} hideExpander={true} hideOffset={false} onHeaderClick={this.hideApply} topRightIcon={CloseSvg} headerLeftMargin={`${this.props.depth * 8 + 21}px`}>
<ApplyActionControl onApply={this.hideApply} state={this.props.cell.parent!} action={this.state.currentAction} nodeRef={this.props.cell.transform.ref} hideHeader noMargin />
</ControlGroup>
</div>;
diff --git a/src/mol-plugin-ui/structure/components.tsx b/src/mol-plugin-ui/structure/components.tsx
index c857ca85e7aac0174418cc0cfb5ec0ce4ba56cd4..c36e8c1763e9ab754014fc3c6cf9c481a245df79 100644
--- a/src/mol-plugin-ui/structure/components.tsx
+++ b/src/mol-plugin-ui/structure/components.tsx
@@ -4,15 +4,6 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
-import Add from '@material-ui/icons/Add';
-import BookmarksOutlined from '@material-ui/icons/BookmarksOutlined';
-import Delete from '@material-ui/icons/Delete';
-import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
-import MoreHoriz from '@material-ui/icons/MoreHoriz';
-import Restore from '@material-ui/icons/Restore';
-import Tune from '@material-ui/icons/Tune';
-import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
-import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
import * as React from 'react';
import { getStructureThemeTypes } from '../../mol-plugin-state/helpers/structure-representation-params';
import { StructureComponentManager } from '../../mol-plugin-state/manager/structure/component';
@@ -24,7 +15,7 @@ import { ParamDefinition } from '../../mol-util/param-definition';
import { CollapsableControls, CollapsableState, PurePluginUIComponent } from '../base';
import { ActionMenu } from '../controls/action-menu';
import { Button, ExpandGroup, IconButton, ToggleButton } from '../controls/common';
-import { CubeSvg, IntersectSvg, SetSvg, SubtractSvg, UnionSvg } from '../controls/icons';
+import { CubeSvg, IntersectSvg, SetSvg, SubtractSvg, UnionSvg, BookmarksOutlinedSvg, AddSvg, TuneSvg, RestoreSvg, DeleteSvg, VisibilityOffOutlinedSvg, VisibilityOutlinedSvg, DeleteOutlinedSvg, MoreHorizSvg } from '../controls/icons';
import { ParameterControls } from '../controls/parameters';
import { UpdateTransformControl } from '../state/update-transform';
import { GenericEntryListControls } from './generic';
@@ -130,10 +121,10 @@ class ComponentEditorControls extends PurePluginUIComponent<{}, ComponentEditorC
: 'Some mistakes of the past can be undone.';
return <>
<div className='msp-flex-row'>
- <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={Restore} className='msp-flex-item' flex='40px' onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} title={undoTitle} />
+ <ToggleButton icon={BookmarksOutlinedSvg} 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={AddSvg} label='Add' title='Add a new representation component for a selection.' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.isDisabled} />
+ <ToggleButton icon={TuneSvg} 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={RestoreSvg} 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'>
@@ -179,7 +170,7 @@ export class AddComponentControls extends PurePluginUIComponent<AddComponentCont
render() {
return <>
<ParameterControls params={this.state.params} values={this.state.values} onChangeValues={this.paramsChanged} />
- <Button icon={Add} title='Use Selection and optional Representation to create a new Component.' className='msp-btn-commit msp-btn-commit-on' onClick={this.apply} style={{ marginTop: '1px' }}>
+ <Button icon={AddSvg} title='Use Selection and optional Representation to create a new Component.' className='msp-btn-commit msp-btn-commit-on' onClick={this.apply} style={{ marginTop: '1px' }}>
Create Component
</Button>
</>;
@@ -286,7 +277,7 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
get removeActions(): ActionMenu.Items {
const ret = [
- ActionMenu.Item('Remove', () => this.plugin.managers.structure.hierarchy.remove(this.props.group, true), { icon: Delete })
+ ActionMenu.Item('Remove', () => this.plugin.managers.structure.hierarchy.remove(this.props.group, true), { icon: DeleteSvg })
];
const reprs = this.pivot.representations;
@@ -294,7 +285,7 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
return ret;
}
- ret.push(ActionMenu.Item(`Remove Representation${reprs.length > 1 ? 's' : ''}`, () => this.plugin.managers.structure.component.removeRepresentations(this.props.group), { icon: Delete }));
+ ret.push(ActionMenu.Item(`Remove Representation${reprs.length > 1 ? 's' : ''}`, () => this.plugin.managers.structure.component.removeRepresentations(this.props.group), { icon: DeleteSvg }));
return ret;
}
@@ -357,9 +348,9 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
{label}
<small className='msp-25-lower-contrast-text' style={{ float: 'right' }}>{reprLabel}</small>
</Button>
- <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 />
+ <IconButton svg={cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg} toggleState={false} onClick={this.toggleVisible} title={`${cell.state.isHidden ? 'Show' : 'Hide'} component`} small className='msp-form-control' flex />
+ <IconButton svg={DeleteOutlinedSvg} onClick={this.toggleRemove} title='Remove' small toggleState={this.state.action === 'remove'} className='msp-form-control' flex />
+ <IconButton svg={MoreHorizSvg} onClick={this.toggleAction} title='Actions' toggleState={this.state.action === 'action'} className='msp-form-control' flex />
</div>
{this.state.action === 'remove' && <div style={{ marginBottom: '6px' }}>
<ActionMenu items={this.removeActions} onSelect={this.selectRemoveAction} />
@@ -398,10 +389,10 @@ 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={DeleteOutlined} onClick={this.remove} title='Remove' small className='msp-default-bg' toggleState={false} style={{
+ <IconButton svg={DeleteOutlinedSvg} 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={this.props.representation.cell.state.isHidden ? VisibilityOffOutlined : VisibilityOutlined} toggleState={false} onClick={this.toggleVisible} title='Toggle Visibility' small className='msp-default-bg' style={{
+ <IconButton svg={this.props.representation.cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg} 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/focus.tsx b/src/mol-plugin-ui/structure/focus.tsx
index 0fb3495dca5620e210a413ed31161cfae7e27556..1cb7b703f9973f797f106882a08e26e6efcedfbb 100644
--- a/src/mol-plugin-ui/structure/focus.tsx
+++ b/src/mol-plugin-ui/structure/focus.tsx
@@ -4,8 +4,6 @@
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
-import CenterFocusStrong from '@material-ui/icons/CenterFocusStrong';
-import CancelOutlined from '@material-ui/icons/CancelOutlined';
import * as React from 'react';
import { OrderedSet, SortedArray } from '../../mol-data/int';
import { MmcifFormat } from '../../mol-model-formats/structure/mmcif';
@@ -21,6 +19,7 @@ import { memoizeLatest } from '../../mol-util/memoize';
import { PluginUIComponent } from '../base';
import { ActionMenu } from '../controls/action-menu';
import { Button, IconButton, ToggleButton } from '../controls/common';
+import { CancelOutlinedSvg, CenterFocusStrongSvg } from '../controls/icons';
interface StructureFocusControlsState {
isBusy: boolean
@@ -238,8 +237,8 @@ export class StructureFocusControls extends PluginUIComponent<{}, StructureFocus
style={{ textAlignLast: current ? 'left' : void 0 }}>
{label}
</Button>
- {current && <IconButton svg={CancelOutlined} onClick={this.clear} title='Clear' className='msp-form-control' flex disabled={this.isDisabled} />}
- <ToggleButton icon={CenterFocusStrong} title='Select a focus target to center on an show its surroundings. Hold shift to focus on multiple targets.' toggle={this.toggleAction} isSelected={this.state.showAction} disabled={this.isDisabled} style={{ flex: '0 0 40px', padding: 0 }} />
+ {current && <IconButton svg={CancelOutlinedSvg} onClick={this.clear} title='Clear' className='msp-form-control' flex disabled={this.isDisabled} />}
+ <ToggleButton icon={CenterFocusStrongSvg} title='Select a focus target to center on an show its surroundings. Hold shift to focus on multiple targets.' toggle={this.toggleAction} isSelected={this.state.showAction} disabled={this.isDisabled} style={{ flex: '0 0 40px', padding: 0 }} />
</div>
{this.state.showAction && <ActionMenu items={this.actionItems} onSelect={this.selectAction} />}
</>;
diff --git a/src/mol-plugin-ui/structure/generic.tsx b/src/mol-plugin-ui/structure/generic.tsx
index 72f400190a8a6dc6a1b296df01cda77b8c8b3c44..e76c11939483bd51cabf13b4f1dfe1e14ea69644 100644
--- a/src/mol-plugin-ui/structure/generic.tsx
+++ b/src/mol-plugin-ui/structure/generic.tsx
@@ -5,9 +5,6 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
-import MoreHoriz from '@material-ui/icons/MoreHoriz';
-import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
-import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
import * as React from 'react';
import { StructureHierarchyRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
import { PluginCommands } from '../../mol-plugin/commands';
@@ -15,6 +12,7 @@ import { State } from '../../mol-state';
import { PurePluginUIComponent } from '../base';
import { IconButton } from '../controls/common';
import { UpdateTransformControl } from '../state/update-transform';
+import { VisibilityOffOutlinedSvg, VisibilityOutlinedSvg, MoreHorizSvg } from '../controls/icons';
export class GenericEntryListControls extends PurePluginUIComponent {
get current() {
@@ -143,8 +141,8 @@ export class GenericEntry<T extends StructureHierarchyRef> extends PurePluginUIC
<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={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 />}
+ <IconButton svg={pivot.cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg} toggleState={false} className='msp-form-control' onClick={this.toggleVisibility} title={`${pivot.cell.state.isHidden ? 'Show' : 'Hide'}`} small flex />
+ {refs.length === 1 && <IconButton svg={MoreHorizSvg} className='msp-form-control' onClick={this.toggleOptions} title='Options' toggleState={this.state.showOptions} flex />}
</div>
{(refs.length === 1 && this.state.showOptions && pivot.cell.parent) && <>
<div className='msp-control-offset'>
diff --git a/src/mol-plugin-ui/structure/measurements.tsx b/src/mol-plugin-ui/structure/measurements.tsx
index 3b3022d2ca03cbf816f4a674b7181d4ed4e25fd1..d845cadbb3cc180ddafe51580f71aad6477a959e 100644
--- a/src/mol-plugin-ui/structure/measurements.tsx
+++ b/src/mol-plugin-ui/structure/measurements.tsx
@@ -5,15 +5,6 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
-import Add from '@material-ui/icons/Add';
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
-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 Tune from '@material-ui/icons/Tune';
-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';
@@ -26,7 +17,7 @@ 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, RulerSvg, SetSvg } from '../controls/icons';
+import { Icon, RulerSvg, SetSvg, ArrowUpwardSvg, ArrowDownwardSvg, DeleteOutlinedSvg, HelpOutlineSvg, AddSvg, TuneSvg, VisibilityOffOutlinedSvg, VisibilityOutlinedSvg, MoreHorizSvg } from '../controls/icons';
import { ParameterControls } from '../controls/parameters';
import { UpdateTransformControl } from '../state/update-transform';
import { ToggleSelectionModeButton } from './selection';
@@ -152,9 +143,9 @@ export class MeasurementControls extends PurePluginUIComponent<{}, { isBusy: boo
<Button noOverflow title='Click to focus. Hover to highlight.' onClick={() => this.focusLoci(e.loci)} style={{ width: 'auto', textAlign: 'left' }} onMouseEnter={() => this.highlight(e.loci)} onMouseLeave={this.plugin.managers.interactivity.lociHighlights.clearHighlights}>
{idx}. <span dangerouslySetInnerHTML={{ __html: e.label }} />
</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={DeleteOutlined} small={true} className='msp-form-control' onClick={() => this.plugin.managers.structure.selection.modifyHistory(e, 'remove')} flex title={'Remove'} />
+ {history.length > 1 && <IconButton svg={ArrowUpwardSvg} small={true} className='msp-form-control' onClick={() => this.moveHistory(e, 'up')} flex='20px' title={'Move up'} />}
+ {history.length > 1 && <IconButton svg={ArrowDownwardSvg} small={true} className='msp-form-control' onClick={() => this.moveHistory(e, 'down')} flex='20px' title={'Move down'} />}
+ <IconButton svg={DeleteOutlinedSvg} small={true} className='msp-form-control' onClick={() => this.plugin.managers.structure.selection.modifyHistory(e, 'remove')} flex title={'Remove'} />
</div>;
}
@@ -172,7 +163,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 (toggle <ToggleSelectionModeButton inline /> mode)</div>
+ <div className='msp-help-description'><Icon svg={HelpOutlineSvg} inline />Add one or more selections (toggle <ToggleSelectionModeButton inline /> mode)</div>
</div>}
</>;
}
@@ -180,8 +171,8 @@ export class MeasurementControls extends PurePluginUIComponent<{}, { isBusy: boo
render() {
return <>
<div className='msp-flex-row'>
- <ToggleButton icon={Add} label='Add' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.state.isBusy} className='msp-btn-apply-simple' />
- <ToggleButton icon={Tune} label='' title='Options' toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.state.isBusy} style={{ flex: '0 0 40px', padding: 0 }} />
+ <ToggleButton icon={AddSvg} label='Add' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.state.isBusy} className='msp-btn-apply-simple' />
+ <ToggleButton icon={TuneSvg} label='' title='Options' toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.state.isBusy} style={{ flex: '0 0 40px', padding: 0 }} />
</div>
{this.state.action === 'add' && this.add()}
{this.state.action === 'options' && <MeasurementsOptions />}
@@ -297,9 +288,9 @@ 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={cell.state.isHidden ? VisibilityOffOutlined : VisibilityOutlined} toggleState={false} small className='msp-form-control' onClick={this.toggleVisibility} flex title={cell.state.isHidden ? 'Show' : 'Hide'} />
- <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} />
+ <IconButton svg={cell.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg} toggleState={false} small className='msp-form-control' onClick={this.toggleVisibility} flex title={cell.state.isHidden ? 'Show' : 'Hide'} />
+ <IconButton svg={DeleteOutlinedSvg} small className='msp-form-control' onClick={this.delete} flex title='Delete' toggleState={false} />
+ <IconButton svg={MoreHorizSvg} className='msp-form-control' onClick={this.toggleUpdate} flex title='Actions' toggleState={this.state.showUpdate} />
</div>
{this.state.showUpdate && cell.parent && <>
<div className='msp-accent-offset'>
diff --git a/src/mol-plugin-ui/structure/selection.tsx b/src/mol-plugin-ui/structure/selection.tsx
index 6a2e20317b29856f6a0d9632576a9bf5796c12ac..ec8728301c522a8e437be976348b99e1fa96199b 100644
--- a/src/mol-plugin-ui/structure/selection.tsx
+++ b/src/mol-plugin-ui/structure/selection.tsx
@@ -5,12 +5,6 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
-import Close from '@material-ui/icons/Close';
-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 HelpOutline from '@material-ui/icons/HelpOutline';
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';
@@ -24,7 +18,7 @@ import { PluginUIComponent, PurePluginUIComponent } from '../base';
import { ActionMenu } from '../controls/action-menu';
import { Button, ControlGroup, IconButton, ToggleButton } from '../controls/common';
import { ParameterControls, ParamOnChange, PureSelectControl } from '../controls/parameters';
-import { UnionSvg, SubtractSvg, IntersectSvg, SetSvg, CubeSvg, Icon, CursorSvg } from '../controls/icons';
+import { UnionSvg, SubtractSvg, IntersectSvg, SetSvg, CubeSvg, Icon, SelectionModeSvg, RemoveSvg, RestoreSvg, HelpOutlineSvg, CancelOutlinedSvg, BrushSvg, CloseSvg } from '../controls/icons';
import { AddComponentControls } from './components';
import Structure from '../../mol-model/structure/structure/structure';
import { ViewportHelpContent, HelpGroup, HelpText } from '../viewport/help';
@@ -45,7 +39,7 @@ export class ToggleSelectionModeButton extends PurePluginUIComponent<{ inline?:
const style = this.props.inline
? { background: 'transparent', width: 'auto', height: 'auto', lineHeight: 'unset' }
: { background: 'transparent' };
- return <IconButton svg={CursorSvg} onClick={this._toggleSelMode} title={'Toggle Selection Mode'} style={style} toggleState={this.plugin.selectionMode} />;
+ return <IconButton svg={SelectionModeSvg} onClick={this._toggleSelMode} title={'Toggle Selection Mode'} style={style} toggleState={this.plugin.selectionMode} />;
}
}
@@ -202,34 +196,34 @@ export class StructureSelectionActionsControls extends PluginUIComponent<{}, Str
<ToggleButton icon={IntersectSvg} title={`${ActionHeader.get('intersect')}. Hold shift key to keep menu open.`} toggle={this.toggleIntersect} isSelected={this.state.action === 'intersect'} disabled={this.isDisabled} />
<ToggleButton icon={SetSvg} title={`${ActionHeader.get('set')}. Hold shift key to keep menu open.`} toggle={this.toggleSet} isSelected={this.state.action === 'set'} disabled={this.isDisabled} />
- <ToggleButton icon={Brush} title='Color Selection' toggle={this.toggleColor} isSelected={this.state.action === 'color'} disabled={this.isDisabled} style={{ marginLeft: '10px' }} />
+ <ToggleButton icon={BrushSvg} title='Color Selection' toggle={this.toggleColor} isSelected={this.state.action === 'color'} disabled={this.isDisabled} style={{ marginLeft: '10px' }} />
<ToggleButton icon={CubeSvg} title='Create Representation of Selection' toggle={this.toggleAddRepr} isSelected={this.state.action === 'add-repr'} disabled={this.isDisabled} />
- <IconButton svg={Remove} title='Subtract Selection from Representations' onClick={this.subtract} disabled={this.isDisabled} />
- <IconButton svg={Restore} onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} title={undoTitle} />
+ <IconButton svg={RemoveSvg} title='Subtract Selection from Representations' onClick={this.subtract} disabled={this.isDisabled} />
+ <IconButton svg={RestoreSvg} onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} title={undoTitle} />
- <ToggleButton icon={HelpOutline} title='Show/hide help' toggle={this.toggleHelp} style={{ marginLeft: '10px' }} isSelected={this.state.action === 'help'} />
- <IconButton svg={CancelOutlined} title='Turn selection mode off' onClick={this.turnOff} />
+ <ToggleButton icon={HelpOutlineSvg} title='Show/hide help' toggle={this.toggleHelp} style={{ marginLeft: '10px' }} isSelected={this.state.action === 'help'} />
+ <IconButton svg={CancelOutlinedSvg} title='Turn selection mode off' onClick={this.turnOff} />
</div>
{(this.state.action && this.state.action !== 'color' && this.state.action !== 'add-repr' && this.state.action !== 'help') && <div className='msp-selection-viewport-controls-actions'>
<ActionMenu header={ActionHeader.get(this.state.action as StructureSelectionModifier)} title='Click to close.' items={this.queries} onSelect={this.selectQuery} noOffset />
</div>}
{this.state.action === 'color' && <div className='msp-selection-viewport-controls-actions'>
- <ControlGroup header='Color' title='Click to close.' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleColor} topRightIcon={Close}>
+ <ControlGroup header='Color' title='Click to close.' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleColor} topRightIcon={CloseSvg}>
<ApplyColorControls onApply={this.toggleColor} />
</ControlGroup>
</div>}
{this.state.action === 'add-repr' && <div className='msp-selection-viewport-controls-actions'>
- <ControlGroup header='Add Representation' title='Click to close.' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleAddRepr} topRightIcon={Close}>
+ <ControlGroup header='Add Representation' title='Click to close.' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleAddRepr} topRightIcon={CloseSvg}>
<AddComponentControls onApply={this.toggleAddRepr} forSelection />
</ControlGroup>
</div>}
{this.state.action === 'help' && <div className='msp-selection-viewport-controls-actions'>
- <ControlGroup header='Help' title='Click to close.' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleHelp} topRightIcon={Close} maxHeight='300px'>
+ <ControlGroup header='Help' title='Click to close.' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleHelp} topRightIcon={CloseSvg} maxHeight='300px'>
<HelpGroup header='Selection Operations'>
<HelpText>Use <Icon svg={UnionSvg} inline /> <Icon svg={SubtractSvg} inline /> <Icon svg={IntersectSvg} inline /> <Icon svg={SetSvg} inline /> to modify the selection.</HelpText>
</HelpGroup>
<HelpGroup header='Representation Operations'>
- <HelpText>Use <Icon svg={Brush} inline /> <Icon svg={CubeSvg} inline /> <Icon svg={Remove} inline /> <Icon svg={Restore} inline /> to color, create selection/representation, subtract it, or undo actions.</HelpText>
+ <HelpText>Use <Icon svg={BrushSvg} inline /> <Icon svg={CubeSvg} inline /> <Icon svg={RemoveSvg} inline /> <Icon svg={RestoreSvg} inline /> to color, create selection/representation, subtract it, or undo actions.</HelpText>
</HelpGroup>
<ViewportHelpContent selectOnly={true} />
</ControlGroup>
@@ -305,7 +299,7 @@ export class StructureSelectionStatsControls extends PluginUIComponent<{ hideOnE
style={{ textAlignLast: !empty ? 'left' : void 0 }}>
{this.stats}
</Button>
- {!empty && <IconButton svg={CancelOutlined} onClick={this.clear} title='Clear' className='msp-form-control' flex />}
+ {!empty && <IconButton svg={CancelOutlinedSvg} onClick={this.clear} title='Clear' className='msp-form-control' flex />}
</div>
</>;
}
@@ -335,7 +329,7 @@ class ApplyColorControls extends PurePluginUIComponent<ApplyColorControlsProps,
render() {
return <>
<ParameterControls params={this.params} values={this.state.values} onChangeValues={this.paramsChanged} />
- <Button icon={Brush} className='msp-btn-commit msp-btn-commit-on' onClick={this.apply} style={{ marginTop: '1px' }}>
+ <Button icon={BrushSvg} className='msp-btn-commit msp-btn-commit-on' onClick={this.apply} style={{ marginTop: '1px' }}>
Apply Coloring
</Button>
</>;
diff --git a/src/mol-plugin-ui/structure/source.tsx b/src/mol-plugin-ui/structure/source.tsx
index 01c3b6c5eb9490e76260501fc1b8f8e4b632bb4c..a383b27f4fd1e2eedbf4ca1e562e0d4c153a2b81 100644
--- a/src/mol-plugin-ui/structure/source.tsx
+++ b/src/mol-plugin-ui/structure/source.tsx
@@ -16,8 +16,7 @@ import { StructureFocusControls } from './focus';
import { UpdateTransformControl } from '../state/update-transform';
import { StructureSelectionStatsControls } from './selection';
import { StateSelection } from '../../mol-state';
-import BookmarksOutlined from '@material-ui/icons/BookmarksOutlined';
-import { MoleculeSvg } from '../controls/icons';
+import { MoleculeSvg, BookmarksOutlinedSvg } from '../controls/icons';
interface StructureSourceControlState extends CollapsableState {
isBusy: boolean,
@@ -270,7 +269,7 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
return <>
<div className='msp-flex-row' style={{ marginTop: '1px' }}>
<Button noOverflow flex onClick={this.toggleHierarchy} disabled={disabled} title={label}>{label}</Button>
- {presets.length > 0 && <IconButton svg={BookmarksOutlined} className='msp-form-control' flex='40px' onClick={this.togglePreset} title='Apply a structure presets to the current hierarchy.' toggleState={this.state.show === 'presets'} disabled={disabled} />}
+ {presets.length > 0 && <IconButton svg={BookmarksOutlinedSvg} className='msp-form-control' flex='40px' onClick={this.togglePreset} title='Apply a structure presets to the current hierarchy.' toggleState={this.state.show === 'presets'} disabled={disabled} />}
</div>
{this.state.show === 'hierarchy' && <ActionMenu items={this.hierarchyItems} onSelect={this.selectHierarchy} multiselect />}
{this.state.show === 'presets' && <ActionMenu items={presets} onSelect={this.applyPreset} />}
diff --git a/src/mol-plugin-ui/structure/superposition.tsx b/src/mol-plugin-ui/structure/superposition.tsx
index 921af94e9c78aa8d304fff4bf691a9a7d84382b0..07f175d0bfcf1e616bf8fe90c3dd668939de83a8 100644
--- a/src/mol-plugin-ui/structure/superposition.tsx
+++ b/src/mol-plugin-ui/structure/superposition.tsx
@@ -5,16 +5,8 @@
*/
import * as React from 'react';
-import FlipToFrontIcon from '@material-ui/icons/FlipToFront';
-import HelpOutline from '@material-ui/icons/HelpOutline';
-import LinearScaleIcon from '@material-ui/icons/LinearScale';
-import ScatterPlotIcon from '@material-ui/icons/ScatterPlot';
-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 { CollapsableControls, PurePluginUIComponent } from '../base';
-import { Icon } from '../controls/icons';
+import { Icon, ArrowUpwardSvg, ArrowDownwardSvg, DeleteOutlinedSvg, HelpOutlineSvg, TuneSvg, SuperposeAtomsSvg, SuperposeChainsSvg, SuperpositionSvg } from '../controls/icons';
import { Button, ToggleButton, IconButton } from '../controls/common';
import { StructureElement, StructureSelection, QueryContext, Structure, StructureProperties } from '../../mol-model/structure';
import { Mat4 } from '../../mol-math/linear-algebra';
@@ -35,7 +27,7 @@ export class StructureSuperpositionControls extends CollapsableControls {
return {
isCollapsed: false,
header: 'Superposition',
- brand: { accent: 'gray' as const, svg: FlipToFrontIcon },
+ brand: { accent: 'gray' as const, svg: SuperpositionSvg },
isHidden: true
};
}
@@ -203,9 +195,9 @@ export class SuperpositionControls extends PurePluginUIComponent<{}, Superpositi
<Button noOverflow title='Click to focus. Hover to highlight.' onClick={() => this.focusLoci(e.loci)} style={{ width: 'auto', textAlign: 'left' }} onMouseEnter={() => this.highlight(e.loci)} onMouseLeave={this.plugin.managers.interactivity.lociHighlights.clearHighlights}>
{idx}. <span dangerouslySetInnerHTML={{ __html: e.label }} />
</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={DeleteOutlined} small={true} className='msp-form-control' onClick={() => this.plugin.managers.structure.selection.modifyHistory(e, 'remove')} flex title={'Remove'} />
+ {history.length > 1 && <IconButton svg={ArrowUpwardSvg} small={true} className='msp-form-control' onClick={() => this.moveHistory(e, 'up')} flex='20px' title={'Move up'} />}
+ {history.length > 1 && <IconButton svg={ArrowDownwardSvg} small={true} className='msp-form-control' onClick={() => this.moveHistory(e, 'down')} flex='20px' title={'Move down'} />}
+ <IconButton svg={DeleteOutlinedSvg} small={true} className='msp-form-control' onClick={() => this.plugin.managers.structure.selection.modifyHistory(e, 'remove')} flex title={'Remove'} />
</div>;
}
@@ -278,7 +270,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 (toggle <ToggleSelectionModeButton inline /> mode) from separate structures. Selections must be limited to single polymer chains or residues therein.</div>
+ <div className='msp-help-description'><Icon svg={HelpOutlineSvg} inline />Add 2 or more selections (toggle <ToggleSelectionModeButton inline /> mode) from separate structures. Selections must be limited to single polymer chains or residues therein.</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
@@ -293,7 +285,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 (toggle <ToggleSelectionModeButton inline /> mode) from
+ <div className='msp-help-description'><Icon svg={HelpOutlineSvg} inline />Add 1 or more selections (toggle <ToggleSelectionModeButton inline /> mode) 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' }}>
@@ -309,9 +301,9 @@ export class SuperpositionControls extends PurePluginUIComponent<{}, Superpositi
render() {
return <>
<div className='msp-flex-row'>
- <ToggleButton icon={LinearScaleIcon} label='By Chains' toggle={this.toggleByChains} isSelected={this.state.action === 'byChains'} disabled={this.state.isBusy} />
- <ToggleButton icon={ScatterPlotIcon} label='By Atoms' toggle={this.toggleByAtoms} isSelected={this.state.action === 'byAtoms'} disabled={this.state.isBusy} />
- <ToggleButton icon={Tune} label='' title='Options' toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.state.isBusy} style={{ flex: '0 0 40px', padding: 0 }} />
+ <ToggleButton icon={SuperposeChainsSvg} label='By Chains' toggle={this.toggleByChains} isSelected={this.state.action === 'byChains'} disabled={this.state.isBusy} />
+ <ToggleButton icon={SuperposeAtomsSvg} label='By Atoms' toggle={this.toggleByAtoms} isSelected={this.state.action === 'byAtoms'} disabled={this.state.isBusy} />
+ <ToggleButton icon={TuneSvg} label='' title='Options' toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.state.isBusy} style={{ flex: '0 0 40px', padding: 0 }} />
</div>
{this.state.action === 'byChains' && this.addByChains()}
{this.state.action === 'byAtoms' && this.addByAtoms()}
diff --git a/src/mol-plugin-ui/structure/volume.tsx b/src/mol-plugin-ui/structure/volume.tsx
index 3cc907d7a98eaaeadf65da196d16045dafa1087d..140ec6458f617ebbd398d1a83ffa86a2b9a42802 100644
--- a/src/mol-plugin-ui/structure/volume.tsx
+++ b/src/mol-plugin-ui/structure/volume.tsx
@@ -5,14 +5,6 @@
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
-import Add from '@material-ui/icons/Add';
-import BlurOn from '@material-ui/icons/BlurOn';
-import Check from '@material-ui/icons/Check';
-import ErrorSvg from '@material-ui/icons/Error';
-import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
-import MoreHoriz from '@material-ui/icons/MoreHoriz';
-import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
-import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
import * as React from 'react';
import { StructureHierarchyManager } from '../../mol-plugin-state/manager/structure/hierarchy';
import { VolumeHierarchyManager } from '../../mol-plugin-state/manager/volume/hierarchy';
@@ -28,6 +20,7 @@ import { ApplyActionControl } from '../state/apply-action';
import { UpdateTransformControl } from '../state/update-transform';
import { BindingsHelp } from '../viewport/help';
import { PluginCommands } from '../../mol-plugin/commands';
+import { BlurOnSvg, ErrorSvg, CheckSvg, AddSvg, VisibilityOffOutlinedSvg, VisibilityOutlinedSvg, DeleteOutlinedSvg, MoreHorizSvg } from '../controls/icons';
interface VolumeStreamingControlState extends CollapsableState {
isBusy: boolean
@@ -40,7 +33,7 @@ export class VolumeStreamingControls extends CollapsableControls<{}, VolumeStrea
isCollapsed: false,
isBusy: false,
isHidden: true,
- brand: { accent: 'cyan', svg: BlurOn }
+ brand: { accent: 'cyan', svg: BlurOnSvg }
};
}
@@ -84,7 +77,7 @@ export class VolumeStreamingControls extends CollapsableControls<{}, VolumeStrea
? { header: 'Error enabling', icon: ErrorSvg, title: rootCell.errorText }
: rootCell && rootCell.obj?.data.entries.length === 0
? { header: 'Error enabling', icon: ErrorSvg, title: 'No entry for streaming found' }
- : { header: 'Enable', icon: Check, title: 'Enable' };
+ : { header: 'Enable', icon: CheckSvg, title: 'Enable' };
return <ApplyActionControl state={pivot.cell.parent} action={InitVolumeStreaming} initiallyCollapsed={true} nodeRef={pivot.cell.transform.ref} simpleApply={simpleApply} />;
}
@@ -121,7 +114,7 @@ export class VolumeSourceControls extends CollapsableControls<{}, VolumeSourceCo
isCollapsed: false,
isBusy: false,
isHidden: true,
- brand: { accent: 'purple', svg: BlurOn }
+ brand: { accent: 'purple', svg: BlurOnSvg }
};
}
@@ -199,7 +192,7 @@ export class VolumeSourceControls extends CollapsableControls<{}, VolumeSourceCo
return <>
<div className='msp-flex-row' style={{ marginTop: '1px' }}>
<Button noOverflow flex onClick={this.toggleHierarchy} disabled={disabled} title={label}>{label}</Button>
- {!this.isEmpty && <IconButton svg={Add} onClick={this.toggleAddRepr} title='Apply a structure presets to the current hierarchy.' toggleState={this.state.show === 'add-repr'} disabled={disabled} />}
+ {!this.isEmpty && <IconButton svg={AddSvg} onClick={this.toggleAddRepr} title='Apply a structure presets to the current hierarchy.' toggleState={this.state.show === 'add-repr'} disabled={disabled} />}
</div>
{this.state.show === 'hierarchy' && <ActionMenu items={this.hierarchyItems} onSelect={this.selectCurrent} />}
{this.state.show === 'add-repr' && <ActionMenu items={this.addActions} onSelect={this.selectAdd} />}
@@ -258,9 +251,9 @@ class VolumeRepresentationControls extends PurePluginUIComponent<{ representatio
{repr.obj?.label}
<small className='msp-25-lower-contrast-text' style={{ float: 'right' }}>{repr.obj?.description}</small>
</Button>
- <IconButton svg={repr.state.isHidden ? VisibilityOffOutlined : VisibilityOutlined} toggleState={false} onClick={this.toggleVisible} title={`${repr.state.isHidden ? 'Show' : 'Hide'} component`} small className='msp-form-control' flex />
- <IconButton svg={DeleteOutlined} onClick={this.remove} title='Remove' small />
- <IconButton svg={MoreHoriz} onClick={this.toggleUpdate} title='Actions' toggleState={this.state.action === 'update'} />
+ <IconButton svg={repr.state.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg} toggleState={false} onClick={this.toggleVisible} title={`${repr.state.isHidden ? 'Show' : 'Hide'} component`} small className='msp-form-control' flex />
+ <IconButton svg={DeleteOutlinedSvg} onClick={this.remove} title='Remove' small />
+ <IconButton svg={MoreHorizSvg} onClick={this.toggleUpdate} title='Actions' toggleState={this.state.action === 'update'} />
</div>
{this.state.action === 'update' && !!repr.parent && <div style={{ marginBottom: '6px' }} className='msp-accent-offset'>
<UpdateTransformControl state={repr.parent} transform={repr.transform} customHeader='none' noMargin />
diff --git a/src/mol-plugin-ui/task.tsx b/src/mol-plugin-ui/task.tsx
index f3fffb77b99345f592a942bcfbadacbac4f602a3..597514a3848a100b28546cdac09a748f8de81265 100644
--- a/src/mol-plugin-ui/task.tsx
+++ b/src/mol-plugin-ui/task.tsx
@@ -11,7 +11,7 @@ import { TaskManager } from '../mol-plugin/util/task-manager';
import { filter } from 'rxjs/operators';
import { Progress } from '../mol-task';
import { IconButton } from './controls/common';
-import Cancel from '@material-ui/icons/Cancel';
+import { CancelSvg } from './controls/icons';
export class BackgroundTaskProgress extends PluginUIComponent<{ }, { tracked: OrderedMap<number, TaskManager.ProgressEvent> }> {
componentDidMount() {
@@ -49,7 +49,7 @@ class ProgressEntry extends PluginUIComponent<{ event: TaskManager.ProgressEvent
return <div className='msp-task-state'>
<div>
- {root.progress.canAbort && <IconButton svg={Cancel} onClick={this.abort} title='Abort' />}
+ {root.progress.canAbort && <IconButton svg={CancelSvg} onClick={this.abort} title='Abort' />}
<div>
{root.progress.message} {pr} {subtasks}
</div>
diff --git a/src/mol-plugin-ui/toast.tsx b/src/mol-plugin-ui/toast.tsx
index cb6adabacb8e66bb4084118e98ebf6dfcd582e50..071261b460bb8e8b1896f7ffac9cc62b522985ba 100644
--- a/src/mol-plugin-ui/toast.tsx
+++ b/src/mol-plugin-ui/toast.tsx
@@ -10,7 +10,7 @@ import * as React from 'react';
import { PluginUIComponent } from './base';
import { PluginToastManager } from '../mol-plugin/util/toast';
import { IconButton } from './controls/common';
-import Cancel from '@material-ui/icons/Cancel';
+import { CancelSvg } from './controls/icons';
class ToastEntry extends PluginUIComponent<{ entry: PluginToastManager.Entry }> {
private hide = () => {
@@ -33,7 +33,7 @@ class ToastEntry extends PluginUIComponent<{ entry: PluginToastManager.Entry }>
</div>
<div className='msp-toast-clear'></div>
<div className='msp-toast-hide'>
- <IconButton svg={Cancel} onClick={this.hide} title='Hide' className='msp-no-hover-outline' />
+ <IconButton svg={CancelSvg} onClick={this.hide} title='Hide' className='msp-no-hover-outline' />
</div>
</div>;
}
diff --git a/src/mol-plugin-ui/viewport.tsx b/src/mol-plugin-ui/viewport.tsx
index 42987dab9aed66f973da7df0cf89e70969bfe9eb..fb8e71cf81b6bc01317ca8ca75ed54be8c9405bb 100644
--- a/src/mol-plugin-ui/viewport.tsx
+++ b/src/mol-plugin-ui/viewport.tsx
@@ -5,12 +5,6 @@
* @author David Sehnal <david.sehnal@gmail.com>
*/
-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 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';
@@ -23,6 +17,7 @@ import { ControlGroup, IconButton } from './controls/common';
import { ToggleSelectionModeButton } from './structure/selection';
import { DownloadScreenshotControls } from './viewport/screenshot';
import { SimpleSettingsControl } from './viewport/simple-settings';
+import { AutorenewSvg, CameraOutlinedSvg, BuildOutlinedSvg, FullscreenSvg, TuneSvg, CloseSvg } from './controls/icons';
interface ViewportControlsState {
isSettingsExpanded: boolean,
@@ -93,17 +88,17 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
<div className='msp-viewport-controls-buttons'>
<div>
<div className='msp-semi-transparent-background' />
- {this.icon(Autorenew, this.resetCamera, 'Reset Camera')}
+ {this.icon(AutorenewSvg, this.resetCamera, 'Reset Camera')}
</div>
<div>
<div className='msp-semi-transparent-background' />
- {this.icon(CameraOutlined, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)}
+ {this.icon(CameraOutlinedSvg, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)}
</div>
<div>
<div className='msp-semi-transparent-background' />
- {this.icon(BuildOutlined, this.toggleControls, 'Toggle Controls Panel', this.plugin.layout.state.showControls)}
- {this.plugin.config.get(PluginConfig.Viewport.ShowExpand) && this.icon(Fullscreen, this.toggleExpanded, 'Toggle Expanded Viewport', this.plugin.layout.state.isExpanded)}
- {this.icon(Tune, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)}
+ {this.icon(BuildOutlinedSvg, this.toggleControls, 'Toggle Controls Panel', this.plugin.layout.state.showControls)}
+ {this.plugin.config.get(PluginConfig.Viewport.ShowExpand) && this.icon(FullscreenSvg, this.toggleExpanded, 'Toggle Expanded Viewport', this.plugin.layout.state.isExpanded)}
+ {this.icon(TuneSvg, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)}
</div>
{this.plugin.config.get(PluginConfig.Viewport.ShowSelectionMode) && <div>
<div className='msp-semi-transparent-background' />
@@ -112,13 +107,13 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
</div>
{this.state.isScreenshotExpanded && <div className='msp-viewport-controls-panel'>
<ControlGroup header='Screenshot / State' title='Click to close.' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleScreenshotExpanded}
- topRightIcon={Close} noTopMargin childrenClassName='msp-viewport-controls-panel-controls'>
+ topRightIcon={CloseSvg} noTopMargin childrenClassName='msp-viewport-controls-panel-controls'>
<DownloadScreenshotControls close={this.toggleScreenshotExpanded} />
</ControlGroup>
</div>}
{this.state.isSettingsExpanded && <div className='msp-viewport-controls-panel'>
<ControlGroup header='Settings / Controls Info' title='Click to close.' initialExpanded={true} hideExpander={true} hideOffset={true} onHeaderClick={this.toggleSettingsExpanded}
- topRightIcon={Close} noTopMargin childrenClassName='msp-viewport-controls-panel-controls'>
+ topRightIcon={CloseSvg} noTopMargin childrenClassName='msp-viewport-controls-panel-controls'>
<SimpleSettingsControl />
</ControlGroup>
</div>}
diff --git a/src/mol-plugin-ui/viewport/help.tsx b/src/mol-plugin-ui/viewport/help.tsx
index 84d9bded75c7c4dbee3143dd3a9567295f31c0ec..c8ffc22f6293d79b7ee1b7fa0a1609e453a63fb6 100644
--- a/src/mol-plugin-ui/viewport/help.tsx
+++ b/src/mol-plugin-ui/viewport/help.tsx
@@ -10,11 +10,8 @@ import { PluginUIComponent } from '../base';
import { StateTransformer, StateSelection } from '../../mol-state';
import { SelectLoci } from '../../mol-plugin/behavior/dynamic/representation';
import { FocusLoci } from '../../mol-plugin/behavior/dynamic/representation';
-import { Icon } from '../controls/icons';
+import { Icon, ArrowDropDownSvg, ArrowRightSvg, CameraSvg } from '../controls/icons';
import { Button } from '../controls/common';
-import ArrowRight from '@material-ui/icons/ArrowRight';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
-import Camera from '@material-ui/icons/Camera';
function getBindingsList(bindings: { [k: string]: Binding }) {
return Object.keys(bindings).map(k => [k, bindings[k]] as [string, Binding]);
@@ -60,7 +57,7 @@ export class HelpGroup extends React.PureComponent<{ header: string, initiallyEx
return <div className='msp-control-group-wrapper'>
<div className='msp-control-group-header'>
<Button onClick={this.toggleExpanded}>
- <Icon svg={this.state.isExpanded ? ArrowDropDown : ArrowRight} />
+ <Icon svg={this.state.isExpanded ? ArrowDropDownSvg : ArrowRightSvg} />
{this.props.header}
</Button>
</div>
@@ -155,7 +152,7 @@ export class HelpContent extends PluginUIComponent {
<HelpSection header='How-to Guides' />
<HelpGroup header='Create an Image'>
<HelpText>
- <p>Use the <Icon svg={Camera} /> icon in the viewport to bring up the screenshot controls.</p>
+ <p>Use the <Icon svg={CameraSvg} /> icon in the viewport to bring up the screenshot controls.</p>
<p>To adjust the size of the image, use the <i>Resolution</i> dropdown.</p>
</HelpText>
</HelpGroup>
diff --git a/src/mol-plugin-ui/viewport/screenshot.tsx b/src/mol-plugin-ui/viewport/screenshot.tsx
index 902de18f1dffda7a9f8a915f60db2b1809276da2..4d1bdef21129863daf45758d503511c33f6202db 100644
--- a/src/mol-plugin-ui/viewport/screenshot.tsx
+++ b/src/mol-plugin-ui/viewport/screenshot.tsx
@@ -14,10 +14,9 @@ import { Subject } from 'rxjs';
import { ViewportScreenshotHelper } from '../../mol-plugin/util/viewport-screenshot';
import { Button, ExpandGroup } from '../controls/common';
import { CameraHelperProps } from '../../mol-canvas3d/helper/camera-helper';
-import GetApp from '@material-ui/icons/GetApp';
-import Launch from '@material-ui/icons/Launch';
import { PluginCommands } from '../../mol-plugin/commands';
import { StateExportImportControls, LocalStateSnapshotParams } from '../state/snapshots';
+import { GetAppSvg, LaunchSvg } from '../controls/icons';
interface ImageControlsState {
showPreview: boolean
@@ -141,8 +140,8 @@ export class DownloadScreenshotControls extends PluginUIComponent<{ close: () =>
<span>Right-click the image to Copy.</span>
</div>
<div className='msp-flex-row'>
- <Button icon={GetApp} onClick={this.download} disabled={this.state.isDisabled}>Download</Button>
- <Button icon={Launch} onClick={this.openTab} disabled={this.state.isDisabled}>Open in new Tab</Button>
+ <Button icon={GetAppSvg} onClick={this.download} disabled={this.state.isDisabled}>Download</Button>
+ <Button icon={LaunchSvg} onClick={this.openTab} disabled={this.state.isDisabled}>Open in new Tab</Button>
</div>
<ParameterControls params={this.plugin.helpers.viewportScreenshot!.params} values={this.plugin.helpers.viewportScreenshot!.values} onChange={this.setProps} isDisabled={this.state.isDisabled} />
<ExpandGroup header='State'>