diff --git a/src/mol-plugin/behavior/dynamic/volume-streaming/behavior.ts b/src/mol-plugin/behavior/dynamic/volume-streaming/behavior.ts index e9640e9b877b4a72446ea865dd40dbeb422bf358..11282871cf9674cafdbd026e3553e3f972fd3f7c 100644 --- a/src/mol-plugin/behavior/dynamic/volume-streaming/behavior.ts +++ b/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 { diff --git a/src/mol-plugin/skin/base/components/temp.scss b/src/mol-plugin/skin/base/components/temp.scss index 5af9e21bfd36743ffea31b7b59ae277f65b45da6..66994b60058476742a11762dfe0cb8300baf1b4e 100644 --- a/src/mol-plugin/skin/base/components/temp.scss +++ b/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; diff --git a/src/mol-plugin/skin/base/components/viewport.scss b/src/mol-plugin/skin/base/components/viewport.scss index 70987257e3cf01c8cf3b1c05232c43c4d086624f..b77e628d4ea8d97ca5e521501db3b53797263596 100644 --- a/src/mol-plugin/skin/base/components/viewport.scss +++ b/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; diff --git a/src/mol-plugin/ui/controls.tsx b/src/mol-plugin/ui/controls.tsx index df288666e14a3a010746afbbd56a9d01e1663a6a..e7772bb589bf121cc420bcf890ce98ee891d0d01 100644 --- a/src/mol-plugin/ui/controls.tsx +++ b/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'> - <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> + <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>} diff --git a/src/mol-plugin/ui/viewport.tsx b/src/mol-plugin/ui/viewport.tsx index 679648ea25d7d632f450afe81d757896e0c7672b..98b3f885e1ecb348ded15bd8d7615d1cac97615c 100644 --- a/src/mol-plugin/ui/viewport.tsx +++ b/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)}