diff --git a/src/mol-plugin/layout.ts b/src/mol-plugin/layout.ts index e430acaca9f176e82afbb651928eeecc35e33b7d..94cbdd8f30b057e9ef26139eeea914b27bae89a0 100644 --- a/src/mol-plugin/layout.ts +++ b/src/mol-plugin/layout.ts @@ -12,7 +12,8 @@ import { PluginCommands } from './command'; // TODO: support collapsed state control orientation export const PluginLayoutStateParams = { isExpanded: PD.Boolean(false), - showControls: PD.Boolean(true) + showControls: PD.Boolean(true), + outsideControls: PD.Boolean(true, { isHidden: true }) } export type PluginLayoutStateProps = PD.Values<typeof PluginLayoutStateParams> diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin/ui/plugin.tsx index e432dc420209d350293cd1480a6b3de64f9756ac..f13a8ec289cf62088607153cf4639cfdca68b55a 100644 --- a/src/mol-plugin/ui/plugin.tsx +++ b/src/mol-plugin/ui/plugin.tsx @@ -85,12 +85,30 @@ class Layout extends PluginUIComponent { return classList.join(' ') } + get layoutClassName() { + const layout = this.plugin.layout.state; + + const classList: string[] = ['msp-plugin-content'] + if (layout.isExpanded) { + classList.push('msp-layout-expanded') + } else { + classList.push('msp-layout-standard') + if (layout.outsideControls) { + classList.push('msp-layout-standard-outside') + } else { + classList.push('msp-layout-standard-landscape') + } + } + + 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={this.layoutClassName}> <div className={this.layoutVisibilityClassName}> {this.region('main', ViewportWrapper)} {layout.showControls && controls.top !== 'none' && this.region('top', controls.top || SequenceView)}