mol-plugin: semi-transparent viewport controls background

src/mol-plugin/behavior/dynamic/volume-streaming/behavior.ts

@@ -213,7 +213,7 @@ export namespace VolumeStreaming {
             });
 
             this.subscribeObservable(this.plugin.behaviors.interaction.click, ({ current, buttons, modifiers }) => {
-                if (!Binding.match(this.params.bindings.clickVolumeAroundOnly || DefaultBindings.clickVolumeAroundOnly, buttons, modifiers)) return;
+                if (!Binding.match((this.params.bindings && this.params.bindings.clickVolumeAroundOnly) || DefaultBindings.clickVolumeAroundOnly, buttons, modifiers)) return;
                 if (this.params.view.name !== 'selection-box') {
                     this.lastLoci = this.getNormalizedLoci(current.loci);
                 } else {

src/mol-plugin/skin/base/components/temp.scss

@@ -225,7 +225,16 @@
         float: left;
         margin-right: $control-spacing;
         position: relative;
-        background: $default-background;
+        // background: $default-background;
+
+        > div:first-child {
+            position: relative;
+            display: inline-block;
+
+            > button {
+                position: relative;
+            }
+        }
 
         .msp-animation-viewport-controls-select {
             width: 290px;

src/mol-plugin/skin/base/components/viewport.scss

@@ -34,16 +34,17 @@
     right: $control-spacing;
     top: $control-spacing;
     width: 32px;
-    background: $default-background;
 }
 
 .msp-viewport-controls-buttons {
     text-align: right;
+    position: relative;
 
     > button {
         padding: 0;
         text-align: center;
         width: $row-height;
+        position: relative;
     }
 
     .msp-btn-link-toggle-off {
@@ -55,6 +56,16 @@
     }
 }
 
+.msp-semi-transparent-background {    
+    background: $default-background;
+    opacity: 0.2;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
 .msp-viewport-controls-scene-options {
     overflow-y: auto;
     max-height: 400px;

src/mol-plugin/ui/controls.tsx

@@ -223,14 +223,17 @@ export class AnimationViewportControls extends PluginUIComponent<{}, { isEmpty:
     render() {
         // if (!this.state.show) return null;
         const isPlaying = this.plugin.state.snapshots.state.isPlaying;
-        if (isPlaying) return null;
+        if (isPlaying || this.state.isEmpty) return null;
 
         const isAnimating = this.state.isAnimating;
 
         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'}
                     onClick={isAnimating || isPlaying ? this.stop : this.toggleExpanded}
                     disabled={isAnimating|| isPlaying ? false : this.state.isUpdating || this.state.isPlaying || this.state.isEmpty} />
+            </div>
             {(this.state.isExpanded && !this.state.isUpdating) && <div className='msp-animation-viewport-controls-select'>
                 <AnimationControls onStart={this.toggleExpanded} />
             </div>}

src/mol-plugin/ui/viewport.tsx

@@ -76,6 +76,7 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
     render() {
         return <div className={'msp-viewport-controls'} onMouseMove={this.onMouseMove}>
             <div className='msp-viewport-controls-buttons'>
+                <div className='msp-semi-transparent-background' />
                 {this.icon('reset-scene', this.resetCamera, 'Reset Camera')}
                 {this.icon('tools', this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}
                 {this.icon('expand-layout', this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.state.isExpanded)}