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';
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 {
......
......@@ -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
......@@ -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(' ')
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment