CSS & structure type auto-apply tweaks

src/mol-plugin-state/helpers/root-structure.ts

@@ -94,8 +94,9 @@ export namespace RootStructureDefinition {
 
     export type Params = PD.Values<ReturnType<typeof getParams>>['type']
 
-    export function isSymmetryType(params: Params) {
-        return params.name.indexOf('symmetry') >= 0;
+    export function canAutoUpdate(oldParams: Params, newParams: Params) {
+        if (newParams.name === 'symmetry-assembly' || (newParams.name === 'symmetry' && oldParams.name === 'symmetry')) return false;
+        return true;
     }
 
     async function buildAssembly(plugin: PluginContext, ctx: RuntimeContext, model: Model, id?: string) {

src/mol-plugin-state/transforms/model.ts

@@ -279,8 +279,8 @@ const StructureFromModel = PluginStateTransform.BuiltIn({
     to: SO.Molecule.Structure,
     params(a) { return RootStructureDefinition.getParams(a && a.data); }
 })({
-    canAutoUpdate({ newParams }) {
-        return !RootStructureDefinition.isSymmetryType(newParams.type);
+    canAutoUpdate({ oldParams, newParams }) {
+        return RootStructureDefinition.canAutoUpdate(oldParams.type, newParams.type);
     },
     apply({ a, params }, plugin: PluginContext) {
         return Task.create('Build Structure', async ctx => {

src/mol-plugin-ui/controls.tsx

@@ -235,7 +235,7 @@ export class AnimationViewportControls extends PluginUIComponent<{}, { isEmpty:
         return <div className='msp-animation-viewport-controls'>
             <div>
                 <div className='msp-semi-transparent-background' />
-                <IconButton icon={isAnimating || isPlaying ? 'stop' : 'tape'} title={isAnimating ? 'Stop' : 'Select Animation'}
+                <IconButton icon={isAnimating || isPlaying ? 'stop' : 'tape'} transparent title={isAnimating ? 'Stop' : 'Select Animation'}
                     onClick={isAnimating || isPlaying ? this.stop : this.toggleExpanded}
                     disabled={isAnimating|| isPlaying ? false : this.state.isBusy || this.state.isPlaying || this.state.isEmpty} />
             </div>

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

@@ -313,12 +313,16 @@ export function IconButton(props: {
     style?: React.CSSProperties,
     'data-id'?: string,
     extraContent?: JSX.Element,
-    flex?: boolean | string | number
+    flex?: boolean | string | number,
+    transparent?: boolean
 }) {
     let className = `msp-btn msp-btn-icon${props.small ? '-small' : ''}${props.className ? ' ' + props.className : ''}`;
     if (typeof props.toggleState !== 'undefined') {
         className += ` msp-btn-link-toggle-${props.toggleState ? 'on' : 'off'}`
     }
+    if (props.transparent) {
+        className+= ' msp-transparent-bg'
+    }
     const iconStyle = props.small ? { fontSize: '80%' } : void 0;
 
     let style: React.CSSProperties | undefined = void 0;

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

@@ -80,8 +80,8 @@ function getSvg(name: SvgIconName) {
     }
 }
 
-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"/>
+const circleLeft = <circle r="6px" id="circle-left" cy="16px" cx="12px" strokeWidth="0.5"/>
+const circleRight = <circle r="6px" id="circle-right" cy="16px" cx="20px" strokeWidth="0.5"/>
 
 function Union() {
     return <svg width="32px" height="32px" viewBox="0 0 32 32">
@@ -92,6 +92,7 @@ function Union() {
         <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>;
 }

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

@@ -287,6 +287,10 @@ select.msp-form-control:-moz-focusring {
     background: $default-background;
 }
 
+.msp-transparent-bg {
+    background: transparent;
+}
+
 .msp-no-hover-outline {
     &:hover {
         color: $hover-font-color;