From 2fdc22de7189ecfc54bb48940a1e8cb3554451e9 Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Thu, 13 Jun 2019 09:48:49 -0700
Subject: [PATCH] plugin layout config improvements
---
src/apps/viewer/index.ts | 3 ++
src/mol-plugin/index.ts | 5 ++-
src/mol-plugin/skin/base/layout/common.scss | 20 ++++++------
src/mol-plugin/spec.ts | 10 +++---
src/mol-plugin/ui/plugin.tsx | 34 ++++++++++++++++++---
5 files changed, 50 insertions(+), 22 deletions(-)
diff --git a/src/apps/viewer/index.ts b/src/apps/viewer/index.ts
index f99f91a1b..4a55dab09 100644
--- a/src/apps/viewer/index.ts
+++ b/src/apps/viewer/index.ts
@@ -29,6 +29,9 @@ function init() {
initial: {
isExpanded: true,
showControls: !hideControls
+ },
+ controls: {
+ ...DefaultPluginSpec.layout && DefaultPluginSpec.layout.controls
}
}
};
diff --git a/src/mol-plugin/index.ts b/src/mol-plugin/index.ts
index 732ec2206..419577f39 100644
--- a/src/mol-plugin/index.ts
+++ b/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 {
diff --git a/src/mol-plugin/skin/base/layout/common.scss b/src/mol-plugin/skin/base/layout/common.scss
index 222235224..615a068ca 100644
--- a/src/mol-plugin/skin/base/layout/common.scss
+++ b/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;
diff --git a/src/mol-plugin/spec.ts b/src/mol-plugin/spec.ts
index f165ddad1..970a6921e 100644
--- a/src/mol-plugin/spec.ts
+++ b/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'
diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin/ui/plugin.tsx
index d911bd492..26413e9ac 100644
--- a/src/mol-plugin/ui/plugin.tsx
+++ b/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'>
--
GitLab