added controls display options: outside, portrait, landscape, reactive

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 {

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';
-    }  ;
+    };
 }

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(' ')