Bugfix and improve layout change handling

This commit is contained in:
djmaze 2021-03-19 10:09:30 +01:00
parent 407a69e100
commit 46531c7831
2 changed files with 16 additions and 11 deletions

View file

@ -845,24 +845,25 @@ class AppUser extends AbstractApp {
initHorizontalLayoutResizer() {
const top = doc.querySelector('.b-message-list-wrapper'),
bottom = doc.querySelector('.b-message-view-wrapper'),
fDisable = bDisable => {
fToggle = () => {
this.setLayoutResizer(top, bottom, ClientSideKeyName.MessageListSize,
(bDisable || !$htmlCL.contains('rl-bottom-preview-pane')) ? null : 'height');
(ThemeStore.isMobile() || Layout.BottomPreview !== SettingsUserStore.layout()) ? null : 'height');
};
if (top && bottom) {
fDisable(ThemeStore.isMobile());
addEventListener('rl-layout', e => fDisable(Layout.BottomPreview !== e.detail));
fToggle();
addEventListener('rl-layout', fToggle);
}
}
initVerticalLayoutResizer() {
const left = elementById('rl-left'),
right = elementById('rl-right'),
fDisable = bDisable =>
this.setLayoutResizer(left, right, ClientSideKeyName.FolderListSize, bDisable ? null : 'width');
fToggle = () =>
this.setLayoutResizer(left, right, ClientSideKeyName.FolderListSize,
(ThemeStore.isMobile() || leftPanelDisabled()) ? null : 'width');
if (left && right) {
fDisable(ThemeStore.isMobile());
leftPanelDisabled.subscribe(value => fDisable(value));
fToggle();
leftPanelDisabled.subscribe(fToggle);
}
}

View file

@ -10,7 +10,7 @@ export const SettingsUserStore = new class {
constructor() {
this.layout = ko
.observable(pInt(SettingsGet('Layout')))
.extend({ limitedList: [Layout.SidePreview, Layout.BottomPreview, Layout.NoPreview] });
.extend({ limitedList: Object.values(Layout) });
this.editorDefaultType = ko.observable(SettingsGet('EditorDefaultType')).extend({
limitedList: [
@ -36,12 +36,16 @@ export const SettingsUserStore = new class {
this.usePreviewPane = ko.computed(() => Layout.NoPreview !== this.layout() && !ThemeStore.isMobile());
this.layout.subscribe(value => {
const toggleLayout = () => {
const value = ThemeStore.isMobile() ? Layout.NoPreview : this.layout();
$htmlCL.toggle('rl-no-preview-pane', Layout.NoPreview === value);
$htmlCL.toggle('rl-side-preview-pane', Layout.SidePreview === value);
$htmlCL.toggle('rl-bottom-preview-pane', Layout.BottomPreview === value);
dispatchEvent(new CustomEvent('rl-layout', {detail:value}));
});
};
this.layout.subscribe(toggleLayout);
ThemeStore.isMobile.subscribe(toggleLayout);
toggleLayout();
let iAutoLogoutTimer;
this.delayLogout = (() => {