From a2eda6c5af56b5772c1b3acc31bffd9bc50888d7 Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Thu, 24 Oct 2019 11:32:00 -0700
Subject: [PATCH] added controls display options: outside, portrait, landscape,
reactive
---
src/mol-plugin/layout.ts | 5 ++---
src/mol-plugin/skin/base/layout.scss | 28 ++++++++++++++++++++--------
src/mol-plugin/ui/plugin.tsx | 7 +------
3 files changed, 23 insertions(+), 17 deletions(-)
diff --git a/src/mol-plugin/layout.ts b/src/mol-plugin/layout.ts
index c57d11a61..346e6c92c 100644
--- a/src/mol-plugin/layout.ts
+++ b/src/mol-plugin/layout.ts
@@ -10,13 +10,12 @@ import { PluginComponent } from './component';
import { PluginContext } from './context';
import { PluginCommands } from './command';
-// TODO: support collapsed state control orientation
+export type PluginLayoutControlsDisplay = 'outside' | 'portrait' | 'landscape' | 'reactive'
export const PluginLayoutStateParams = {
isExpanded: PD.Boolean(false),
showControls: PD.Boolean(true),
- outsideControls: PD.Boolean(true, { isHidden: true })
+ controlsDisplay: PD.Value<PluginLayoutControlsDisplay>('outside', { isHidden: true })
}
-
export type PluginLayoutStateProps = PD.Values<typeof PluginLayoutStateParams>
interface RootState {
diff --git a/src/mol-plugin/skin/base/layout.scss b/src/mol-plugin/skin/base/layout.scss
index 8f05c4dab..b10a90baa 100644
--- a/src/mol-plugin/skin/base/layout.scss
+++ b/src/mol-plugin/skin/base/layout.scss
@@ -3,27 +3,39 @@
.msp-layout-standard-outside {
position: absolute;
- @import 'layout/controls-outside';
+ @import 'layout/controls-outside';
}
.msp-layout-standard-landscape {
position: absolute;
- @import 'layout/controls-landscape';
+ @import 'layout/controls-landscape';
}
.msp-layout-standard-portrait {
position: absolute;
- @import 'layout/controls-portrait';
+ @import 'layout/controls-portrait';
}
-.msp-layout-expanded {
+.msp-layout-standard-reactive {
+ position: absolute;
+
+ @media (orientation:landscape) {
+ @import 'layout/controls-landscape';
+ };
+
+ @media (orientation:portrait) {
+ @import 'layout/controls-portrait';
+ };
+}
+
+.msp-layout-expanded {
position: fixed;
-
+
@media (orientation:landscape) {
@import 'layout/controls-landscape';
- };
-
+ };
+
@media (orientation:portrait) {
@import 'layout/controls-portrait';
- } ;
+ };
}
\ No newline at end of file
diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin/ui/plugin.tsx
index b1b451881..ca22c0089 100644
--- a/src/mol-plugin/ui/plugin.tsx
+++ b/src/mol-plugin/ui/plugin.tsx
@@ -93,12 +93,7 @@ class Layout extends PluginUIComponent {
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')
- }
+ classList.push('msp-layout-standard', `msp-layout-standard-${layout.controlsDisplay}`)
}
return classList.join(' ')
--
GitLab