diff --git a/admin/templates/default/app.css b/admin/templates/default/app.css index ca0a01b4ca..ebb934e81d 100644 --- a/admin/templates/default/app.css +++ b/admin/templates/default/app.css @@ -191,6 +191,9 @@ select#admin-mailaccount_ident_id { /* Admin command */ +#admin-index_ajax_target { + height: 100%; +} #admin-cmds_nm {min-height: 100px;} #admin-cmds .et2_split {padding-right: 10px;} diff --git a/admin/templates/pixelegg/app.css b/admin/templates/pixelegg/app.css index bbfbd24cfb..64f178c53e 100755 --- a/admin/templates/pixelegg/app.css +++ b/admin/templates/pixelegg/app.css @@ -150,21 +150,19 @@ span#admin-mailaccount_acc_id { padding-left: 5px; } #admin-mailaccount_button\[multiple\] { - height: auto; - padding-left: 5px; - margin: 2px; - width: 16px; - vertical-align: top; + height: auto; + padding-left: 5px; + margin: 2px; + width: 16px; + vertical-align: top; } - #admin-mailaccount_button\[placeholders\] { - height: 16px; - padding-left: 5px; - align-self: center; + height: 16px; + padding-left: 5px; + align-self: center; } - #admin-mailaccount_mailLocalAddress { - width: 98%; + width: 98%; } select#admin-mailaccount_ident_id { width: 95%; @@ -196,6 +194,9 @@ select#admin-mailaccount_ident_id { /* Admin command */ +#admin-index_ajax_target { + height: 100%; +} #admin-cmds_nm { min-height: 100px; } diff --git a/api/etemplate.php b/api/etemplate.php index c4ec622d8e..227ecbe8db 100644 --- a/api/etemplate.php +++ b/api/etemplate.php @@ -221,7 +221,7 @@ function send_template() preg_match_all('/(^| )([a-z0-9_-]+)="([^"]+)"/', $matches[1], $attrs, PREG_PATTERN_ORDER); $attrs = array_combine($attrs[2], $attrs[3]); - $attrs['vertical'] = $attrs['orientation'] == 'v' ? "true" : "false"; + $attrs['vertical'] = $attrs['orientation'] == 'h' ? "true" : "false"; if(str_contains($attrs['dock_side'], 'top') || str_contains($attrs['dock_side'], 'left')) { $attrs['primary'] = "end"; diff --git a/api/js/etemplate/Layout/Et2Split/Et2Split.ts b/api/js/etemplate/Layout/Et2Split/Et2Split.ts index 353befac6d..10afa08563 100644 --- a/api/js/etemplate/Layout/Et2Split/Et2Split.ts +++ b/api/js/etemplate/Layout/Et2Split/Et2Split.ts @@ -37,6 +37,9 @@ export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel)) background-position: center; background-repeat: no-repeat; } + :host([vertical]) ::slotted(.split-handle) { + background-image: ${cssImage("splitter_horz")}; + } ` ]; } @@ -50,15 +53,18 @@ export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel)) * Defaults to 50% of the container's initial size */ position: Number, - /** - * Draws the split panel in a vertical orientation with the start panel above the end panel - */ - vertical: Boolean, /** * If no primary panel is designated, both panels will resize proportionally and docking is disabled * "start" | "end" | undefined */ - primary: String + primary: String, + + /** + * Legacy orientation + * "v" | "h" + * @deprecated use vertical=true|false instead + */ + orientation: String } } @@ -121,9 +127,10 @@ export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel)) height: () => parseInt(getComputedStyle(this.shadowRoot.querySelector(".start")).height) - 3, offset: () => 0 }; - widget.dynheight.initialized = false; - widget.dynheight._initialize(); - widget.dynheight.bottomNodes = widget.dynheight.bottomNodes.filter((node) => (node[0].parentNode != this)); + widget.dynheight._collectBottomNodes = function() + { + this.bottomNodes = [];//widget.dynheight.bottomNodes.filter((node) => (node[0].parentNode != this)); + }; } if(widget.resize) { @@ -173,8 +180,29 @@ export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel)) this.position = dock ? (this.primary == 'start' ? 100 : 0) : undocked; } + dock() { return this.toggleDock(true);} + undock() { return this.toggleDock(false)} + /** + * Set the orientation of the splitter + * + * "h" for the splitter bar to be horizontal (children are stacked vertically) + * "v" for the splitter bar to be vertical (children are side by side horizontally) + * + * @param {string} orientation + */ + set orientation(orientation) + { + this.vertical = orientation == "h"; + this.requestUpdate("vertical"); + } + + get orientation() + { + return this.vertical ? "h" : "v"; + } + /** * Load user's size preference * @@ -190,7 +218,12 @@ export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel)) let pref = this.egw().preference(Et2Split.PREF_PREFIX + this.id, this.egw().getAppName()); if(pref) { - this.position = parseInt(pref[this.vertical ? 'sizeLeft' : 'sizeTop']); + // Doesn't matter if it's left or top or what, we just want the number + this.position = parseInt(Object.values(pref)[0]); + if(typeof this.position != "number" || isNaN(this.position)) + { + this.position = 50; + } } this._undock_position = this.position; } @@ -208,7 +241,7 @@ export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel)) } // Store current position in preferences - let size = this.vertical ? {sizeLeft: Math.round(this.position)} : {sizeTop: Math.round(this.position)}; + let size = this.vertical ? {sizeTop: Math.round(this.position)} : {sizeLeft: Math.round(this.position)}; this.egw().set_preference(this.egw().getAppName(), Et2Split.PREF_PREFIX + this.id, size); } @@ -228,6 +261,30 @@ export class Et2Split extends Et2Widget(SlotMixin(SlSplitPanel)) } } + /** + * Override parent to avoid resizing when not visible, as that breaks size calculations + * + * @returns {any} + */ + handlePositionChange() + { + if(this.offsetParent !== null) + { + return super.handlePositionChange(); + } + } + + /** + * Override parent to avoid resizing when not visible, as that breaks size calculations + */ + handleResize(entries) + { + if(this.offsetParent !== null) + { + return super.handleResize(entries); + } + } + /** * Handle a resize * This includes notifying any manually resizing widgets, and updating preference if needed