added svg icon shapes for set operations

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

@@ -8,6 +8,7 @@ import * as React from 'react';
 import { Color } from '../../mol-util/color';
 import { PurePluginUIComponent } from '../base';
 import { IconName, Icon } from './icons';
+import { ShapeName, Shape } from './shapes';
 
 export class ControlGroup extends React.Component<{
     header: string,
@@ -311,6 +312,7 @@ export type ToggleButtonProps = {
     label?: string | JSX.Element,
     title?: string,
     icon?: IconName,
+    shape?: ShapeName,
     isSelected?: boolean,
     toggle: () => void
 }
@@ -327,6 +329,7 @@ export class ToggleButton extends React.PureComponent<ToggleButtonProps> {
         return <button onClick={this.onClick} title={this.props.title}
             disabled={props.disabled} style={props.style} className={props.className}>
             <Icon name={this.props.icon} />
+            <Shape name={this.props.shape} />
             {label && this.props.isSelected ? <b>{label}</b> : label}
         </button>;
     }

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

@@ -6,7 +6,7 @@
 
 import * as React from 'react';
 
-export type IconName = 
+export type IconName =
     | '' | 'expand-layout' | 'plus' | 'minus' | 'reset-scene' | 'ok' | 'back' | 'block' | 'off' | 'expand' | 'collapse' | 'visual-visibility'
     | 'abort' | 'focus-on-visual' | 'settings' | 'tools' | 'log' | 'remove' | 'help' | 'help-circle' | 'info' | 'left-open-big' | 'right-open-big'
     | 'left-open' | 'right-open' | 'screenshot' | 'model-prev' | 'model-next' | 'model-first' | 'down-thin' | 'up-thin' | 'left-thin' | 'right-thin'

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

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import * as React from 'react';
+
+export type ShapeName =
+    | '' | 'set' | 'intersect' | 'union' | 'subtract'
+
+export function Shape(props: {
+    name?: ShapeName,
+    style?: React.CSSProperties,
+    title?: string
+}) {
+    const shape = getShape(props.name)
+    if (!shape) return null
+    return <span style={props.style} title={props.title}>
+        {shape}
+    </span>;
+}
+
+function getShape(name?: ShapeName) {
+    switch (name) {
+        case 'union': return <Union />
+        case 'subtract': return <Subtract />
+        case 'intersect': return <Intersect />
+        case 'set': return <Set />
+        default: return null
+    }
+}
+
+const circleLeft = <circle r="6px" id="circle-left" cy="16px" cx="12px" strokeWidth="1"/>
+const circleRight = <circle r="6px" id="circle-right" cy="16px" cx="20px" strokeWidth="1"/>
+
+function Union() {
+    return <svg width="32px" height="32px">
+        <defs>
+            {circleLeft}
+            {circleRight}
+        </defs>
+        <g>
+            <use href="#circle-left" className="msp-shape-filled"/>
+            <use href="#circle-right" className="msp-shape-filled"/>
+        </g>
+    </svg>;
+}
+
+function Subtract() {
+    return <svg width="32px" height="32px">
+        <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>;
+}
+
+function Intersect() {
+    return <svg width="32px" height="32px">
+        <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>;
+}
+
+function Set() {
+    return <svg width="32px" height="32px">
+        <defs>
+            {circleLeft}
+            {circleRight}
+        </defs>
+        <g>
+            <use href="#circle-left" className="msp-shape-filled"/>
+            <use href="#circle-right" className="msp-shape-empty"/>
+        </g>
+    </svg>;
+}

src/mol-plugin-ui/skin/base/components/misc.scss

@@ -78,13 +78,13 @@
     margin: 0;
     text-align: center;
     padding-right: $control-spacing;
-    padding-left: $control-spacing;        
-    
+    padding-left: $control-spacing;
+
     &:hover {
         border-color: color-increase-contrast($msp-form-control-background, 5%) !important;
         border: none;
         outline-offset: -1px  !important;
-        outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;  
+        outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;
     }
 }
 
@@ -97,7 +97,7 @@
     .msp-btn {
         &:hover {
             outline-offset: -1px  !important;
-            outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;  
+            outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;
         }
     }
 }
@@ -129,11 +129,11 @@
     margin-bottom: 5px;
     padding: 0 10px;
     font-weight: 500;
-    background: $default-background; 
+    background: $default-background;
     color: $font-color;
 }
 
-.msp-left-panel-controls-buttons {    
+.msp-left-panel-controls-buttons {
     position: absolute;
     width: $row-height;
     top: 0;
@@ -183,4 +183,14 @@
         width: 32px;
         top: 0;
     }
+}
+
+.msp-shape-filled {
+    fill: $font-color;
+    stroke: $font-color;
+}
+
+.msp-shape-empty {
+    fill: none;
+    stroke: $font-color;
 }

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

@@ -134,14 +134,13 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
     toggleSet = this.showAction('set')
     toggleColor = this.showAction('color')
 
-    // TODO better icons
     get controls() {
         return <div>
             <div className='msp-control-row msp-select-row'>
-                <ToggleButton icon='plus' title='Add' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.isDisabled} />
-                <ToggleButton icon='minus' title='Remove' toggle={this.toggleRemove} isSelected={this.state.action === 'remove'} disabled={this.isDisabled} />
-                <ToggleButton icon='star' title='Intersect' toggle={this.toggleIntersect} isSelected={this.state.action === 'intersect'} disabled={this.isDisabled} />
-                <ToggleButton icon='flash' title='Set' toggle={this.toggleSet} isSelected={this.state.action === 'set'} disabled={this.isDisabled} />
+                <ToggleButton shape='union' title='Add/Union' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.isDisabled} />
+                <ToggleButton shape='subtract' title='Remove/Subtract' toggle={this.toggleRemove} isSelected={this.state.action === 'remove'} disabled={this.isDisabled} />
+                <ToggleButton shape='intersect' title='Intersect' toggle={this.toggleIntersect} isSelected={this.state.action === 'intersect'} disabled={this.isDisabled} />
+                <ToggleButton shape='set' title='Set' toggle={this.toggleSet} isSelected={this.state.action === 'set'} disabled={this.isDisabled} />
                 <ToggleButton icon='brush' title='Color' toggle={this.toggleColor} isSelected={this.state.action === 'color'} disabled={this.isDisabled} />
             </div>
             {(this.state.action && this.state.action !== 'color') && <ActionMenu items={this.queries} onSelect={this.selectQuery} />}