plugin layout config improvements

src/apps/viewer/index.ts

@@ -29,6 +29,9 @@ function init() {
             initial: {
                 isExpanded: true,
                 showControls: !hideControls
+            },
+            controls: {
+                ...DefaultPluginSpec.layout && DefaultPluginSpec.layout.controls
             }
         }
     };

src/mol-plugin/index.ts

@@ -77,7 +77,10 @@ export const DefaultPluginSpec: PluginSpec = {
         AnimateAssemblyUnwind,
         AnimateUnitsExplode,
         AnimateStateInterpolation
-    ]
+    ],
+    layout: {
+        controls: { top: 'none' }
+    }
 }
 
 export function createPlugin(target: HTMLElement, spec?: PluginSpec): PluginContext {

src/mol-plugin/skin/base/layout/common.scss

@@ -33,34 +33,34 @@
     overflow: hidden;
 }
 
-.msp-layout-main, .msp-layout-bottom {
-    .msp-layout-static {        
+.msp-layout-top, .msp-layout-main, .msp-layout-bottom {
+    .msp-layout-static {
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
-    }    
+    }
 }
 
-.msp-layout-right {        
-    .msp-layout-static {        
+.msp-layout-right {
+    .msp-layout-static {
         left: 0;
         right: 0;
         top: 0;
         bottom: 0; // height: $row-height + $control-spacing;
     }
-    
+
     .msp-layout-scrollable {
         left: 0;
         right: 0;
         top: $row-height + $control-spacing + 1;
         bottom: 0;
-     }   
-    
+     }
+
 }
 
-.msp-layout-left {    
-    .msp-layout-static {        
+.msp-layout-left {
+    .msp-layout-static {
         left: 0;
         right: 0;
         bottom: 0;

src/mol-plugin/spec.ts

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
 import { StateTransformer, StateAction } from '../mol-state';
@@ -18,11 +19,7 @@ interface PluginSpec {
     customParamEditors?: [StateAction | StateTransformer, StateTransformParameters.Class][],
     layout?: {
         initial?: Partial<PluginLayoutStateProps>,
-        controls?: {
-            left?: React.ComponentClass | 'none',
-            right?: React.ComponentClass | 'none',
-            bottom?: React.ComponentClass | 'none'
-        }
+        controls?: PluginSpec.LayoutControls
     }
 }
 
@@ -47,6 +44,7 @@ namespace PluginSpec {
     }
 
     export interface LayoutControls {
+        top?: React.ComponentClass | 'none',
         left?: React.ComponentClass | 'none',
         right?: React.ComponentClass | 'none',
         bottom?: React.ComponentClass | 'none'

src/mol-plugin/ui/plugin.tsx

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
 import { List } from 'immutable';
@@ -47,27 +48,51 @@ export class PluginContextContainer extends React.Component<{ plugin: PluginCont
     }
 }
 
+type RegionKind = 'top' | 'left' | 'right' | 'bottom' | 'main'
+
 class Layout extends PluginUIComponent {
     componentDidMount() {
         this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
     }
 
-    region(kind: 'left' | 'right' | 'bottom' | 'main', Element: React.ComponentClass) {
+    region(kind: RegionKind, Element?: React.ComponentClass) {
         return <div className={`msp-layout-region msp-layout-${kind}`}>
             <div className='msp-layout-static'>
-                <Element />
+                {Element ? <Element /> : null}
             </div>
         </div>;
     }
 
+    get layoutVisibilityClassName() {
+        const layout = this.plugin.layout.state;
+        const controls = (this.plugin.spec.layout && this.plugin.spec.layout.controls) || { };
+
+        const classList: string[] = []
+        if (controls.top === 'none' || !layout.showControls) {
+            classList.push('msp-layout-hide-top')
+        }
+        if (controls.left === 'none' || !layout.showControls) {
+            classList.push('msp-layout-hide-left')
+        }
+        if (controls.right === 'none' || !layout.showControls) {
+            classList.push('msp-layout-hide-right')
+        }
+        if (controls.bottom === 'none' || !layout.showControls) {
+            classList.push('msp-layout-hide-bottom')
+        }
+
+        return classList.join(' ')
+    }
+
     render() {
         const layout = this.plugin.layout.state;
         const controls = (this.plugin.spec.layout && this.plugin.spec.layout.controls) || { };
 
         return <div className='msp-plugin'>
             <div className={`msp-plugin-content ${layout.isExpanded ? 'msp-layout-expanded' : 'msp-layout-standard msp-layout-standard-outside'}`}>
-                <div className={layout.showControls ? 'msp-layout-hide-top' : 'msp-layout-hide-top msp-layout-hide-right msp-layout-hide-bottom msp-layout-hide-left'}>
+                <div className={this.layoutVisibilityClassName}>
                     {this.region('main', ViewportWrapper)}
+                    {layout.showControls && controls.top !== 'none' && this.region('top', controls.top)}
                     {layout.showControls && controls.left !== 'none' && this.region('left', controls.left || State)}
                     {layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper)}
                     {layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)}
@@ -77,7 +102,6 @@ class Layout extends PluginUIComponent {
     }
 }
 
-
 export class ControlsWrapper extends PluginUIComponent {
     render() {
         return <div className='msp-scrollable-container msp-right-controls'>