Skip to content
Snippets Groups Projects
Commit a2eda6c5 authored by Alexander Rose's avatar Alexander Rose
Browse files

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

parent 338489fe
No related branches found
No related tags found
No related merge requests found
...@@ -10,13 +10,12 @@ import { PluginComponent } from './component'; ...@@ -10,13 +10,12 @@ import { PluginComponent } from './component';
import { PluginContext } from './context'; import { PluginContext } from './context';
import { PluginCommands } from './command'; import { PluginCommands } from './command';
// TODO: support collapsed state control orientation export type PluginLayoutControlsDisplay = 'outside' | 'portrait' | 'landscape' | 'reactive'
export const PluginLayoutStateParams = { export const PluginLayoutStateParams = {
isExpanded: PD.Boolean(false), isExpanded: PD.Boolean(false),
showControls: PD.Boolean(true), showControls: PD.Boolean(true),
outsideControls: PD.Boolean(true, { isHidden: true }) controlsDisplay: PD.Value<PluginLayoutControlsDisplay>('outside', { isHidden: true })
} }
export type PluginLayoutStateProps = PD.Values<typeof PluginLayoutStateParams> export type PluginLayoutStateProps = PD.Values<typeof PluginLayoutStateParams>
interface RootState { interface RootState {
......
...@@ -3,27 +3,39 @@ ...@@ -3,27 +3,39 @@
.msp-layout-standard-outside { .msp-layout-standard-outside {
position: absolute; position: absolute;
@import 'layout/controls-outside'; @import 'layout/controls-outside';
} }
.msp-layout-standard-landscape { .msp-layout-standard-landscape {
position: absolute; position: absolute;
@import 'layout/controls-landscape'; @import 'layout/controls-landscape';
} }
.msp-layout-standard-portrait { .msp-layout-standard-portrait {
position: absolute; 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; position: fixed;
@media (orientation:landscape) { @media (orientation:landscape) {
@import 'layout/controls-landscape'; @import 'layout/controls-landscape';
}; };
@media (orientation:portrait) { @media (orientation:portrait) {
@import 'layout/controls-portrait'; @import 'layout/controls-portrait';
} ; };
} }
\ No newline at end of file
...@@ -93,12 +93,7 @@ class Layout extends PluginUIComponent { ...@@ -93,12 +93,7 @@ class Layout extends PluginUIComponent {
if (layout.isExpanded) { if (layout.isExpanded) {
classList.push('msp-layout-expanded') classList.push('msp-layout-expanded')
} else { } else {
classList.push('msp-layout-standard') classList.push('msp-layout-standard', `msp-layout-standard-${layout.controlsDisplay}`)
if (layout.outsideControls) {
classList.push('msp-layout-standard-outside')
} else {
classList.push('msp-layout-standard-landscape')
}
} }
return classList.join(' ') return classList.join(' ')
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment