Fix export dialog tab sizing

This commit is contained in:
nathan 2024-11-27 13:33:42 -07:00 committed by ralf
parent 24b54e947d
commit 2e9b1cd268
3 changed files with 52 additions and 59 deletions

View File

@ -78,6 +78,7 @@ export class Et2Tabs extends Et2InputWidget(SlTabGroup) implements et2_IResizeab
/** /**
* Set the height for tabs * Set the height for tabs
* Leave unset to size automatically from either parent height attribute, or height of first tabpanel * Leave unset to size automatically from either parent height attribute, or height of first tabpanel
* Set to 'auto' to allow tab height to flex to fill parent element
*/ */
tabHeight: {type: String}, tabHeight: {type: String},
@ -396,7 +397,7 @@ export class Et2Tabs extends Et2InputWidget(SlTabGroup) implements et2_IResizeab
if(body) if(body)
{ {
body.style.setProperty("height", this.tabHeight == parseInt(this.tabHeight) + "" ? this.tabHeight + "px" : this.tabHeight); body.style.setProperty("height", this.tabHeight == parseInt(this.tabHeight) + "" ? this.tabHeight + "px" : this.tabHeight);
body.classList.toggle("tab-group__body-fixed-height", this.tabHeight !== ''); body.classList.toggle("tab-group__body-fixed-height", this.tabHeight !== '' && this.tabHeight !== 'auto');
} }
} }
} }
@ -684,7 +685,7 @@ export class Et2Tabs extends Et2InputWidget(SlTabGroup) implements et2_IResizeab
resize(_height) resize(_height)
{ {
if(_height) if(_height && this.tabHeight != 'auto')
{ {
this.tabHeight = parseInt(this.tabHeight) + parseInt(_height); this.tabHeight = parseInt(this.tabHeight) + parseInt(_height);
} }

View File

@ -125,7 +125,7 @@ class importexport_export_ui {
} }
else { else {
$readonlys['plugin'] = true; $readonlys['plugin'] = true;
$readonlys['save_definition'] = true; $readonlys['save_as_definition'] = true;
$definition = new importexport_definition($content['definition']); $definition = new importexport_definition($content['definition']);
if($definition) { if($definition) {

View File

@ -46,45 +46,31 @@
</grid> </grid>
</template> </template>
<template id="importexport.export_dialog.selection_tab" template="" lang="" group="0" version=""> <template id="importexport.export_dialog.selection_tab" template="" lang="" group="0" version="">
<grid width="100%" height="200px"> <et2-hbox disabled="@plugin_selectors_template">
<columns> <html id="plugin_selectors_html" no_lang="1"/>
<column width="150"/> <et2-box class="filters">
<column width="300" disabled="@no_filter"/> <filter id="filter_html"/>
</columns> </et2-box>
<rows> </et2-hbox>
<row class="th" height="20" disabled="@plugin_selectors_template"> <et2-hbox disabled="!@plugin_selectors_template">
<et2-description></et2-description> <template id="@plugin_selectors_template"/>
<et2-description value="Definition filter"></et2-description> <et2-groupbox summary="Definition filter" onclick="document.getElementById('importexport-export_dialog_selection-filter').checked=true;"
</row> class="filters">
<row valign="top" disabled="@plugin_selectors_template"> <filter id="filter_tpl"/>
<html id="plugin_selectors_html" no_lang="1"/> </et2-groupbox>
<et2-box class="filters"> </et2-hbox>
<filter id="filter_html"/>
</et2-box>
</row>
<row class="th" height="20" disabled="!@plugin_selectors_template">
<et2-description></et2-description>
<et2-description value="Definition filter"></et2-description>
</row>
<row valign="top" disabled="!@plugin_selectors_template">
<template id="@plugin_selectors_template"/>
<et2-box
onclick="document.getElementById('importexport-export_dialog_selection-filter').checked=true;"
class="filters">
<filter id="filter_tpl"/>
</et2-box>
</row>
</rows>
</grid>
<styles> <styles>
select[multiple] { #importexport-export_dialog_importexport-export_dialog-selection_tab et2-hbox {
width: 400px; height: 100%;
} }
.filters { .filters {
max-height: 300px; flex-grow: 1;
min-height: 150px; min-height: 5em;
overflow-y: auto; overflow-y: auto;
} }
.filters > table {
min-height: 0px;
}
</styles> </styles>
</template> </template>
<template id="importexport.export_dialog.options_tab" template="" lang="" group="0" version=""> <template id="importexport.export_dialog.options_tab" template="" lang="" group="0" version="">
@ -125,16 +111,9 @@
</styles> </styles>
</template> </template>
<template id="importexport.export_dialog" template="" lang="" group="0" version="1.9.001"> <template id="importexport.export_dialog" template="" lang="" group="0" version="1.9.001">
<grid width="100%"> <et2-vbox>
<columns> <et2-description id="msg"></et2-description>
<column/> <et2-tabbox id="general_tab|selection_tab|options_tab" tabHeight="auto">
</columns>
<rows>
<row>
<et2-description id="msg"></et2-description>
</row>
<row>
<et2-tabbox id="general_tab|selection_tab|options_tab">
<tabs> <tabs>
<tab id="general_tab" label="General"/> <tab id="general_tab" label="General"/>
<tab id="selection_tab" label="Selection"/> <tab id="selection_tab" label="Selection"/>
@ -146,30 +125,43 @@
<template id="importexport.export_dialog.options_tab"/> <template id="importexport.export_dialog.options_tab"/>
</tabpanels> </tabpanels>
</et2-tabbox> </et2-tabbox>
</row> </et2-vbox>
<row class="save_definition dialog-operators high">
<et2-checkbox label="Save as definition" id="save_as_definition"></et2-checkbox> <et2-hbox class="dialog-footer-toolbar dialogFooterToolbar">
</row> <et2-hbox style="flex: 1 1 auto">
<row class="dialog-footer-toolbar">
<et2-hbox span="all">
<et2-hbox> <et2-hbox>
<et2-button label="Export" id="export" image="export"></et2-button> <et2-button label="Export" id="export" image="export"></et2-button>
<et2-button label="Preview" id="preview" onclick="app.importexport.export_preview" image="prieview"></et2-button> <et2-button label="Preview" id="preview" onclick="app.importexport.export_preview" image="prieview"></et2-button>
</et2-hbox> </et2-hbox>
<et2-checkbox label="Save as definition" id="save_as_definition"></et2-checkbox>
<et2-button class="cancel" align="right" label="Cancel" id="cancel" onclick="window.close(); return false;" image="cancel"></et2-button> <et2-button class="cancel" align="right" label="Cancel" id="cancel" onclick="window.close(); return false;" image="cancel"></et2-button>
</et2-hbox> </et2-hbox>
</row> </et2-hbox>
<row>
<et2-vbox id="preview_box" span="all" class="preview"> <et2-vbox id="preview_box" span="all" class="preview">
<html id="preview-box" class="content"/> <html id="preview-box" class="content"/>
<et2-box align="center" id="preview-box-buttons" class="preview-box-buttons"> <et2-box align="center" id="preview-box-buttons" class="preview-box-buttons">
<et2-button align="center" label="OK" onclick="jQuery(this).parents('.preview').css('display','none'); return false;"></et2-button> <et2-button align="center" label="OK" onclick="jQuery(this).parents('.preview').css('display','none'); return false;"></et2-button>
</et2-box> </et2-box>
</et2-vbox> </et2-vbox>
</row>
</rows>
</grid>
<styles> <styles>
.popupMainDiv {
height: calc(100vh - 16px);
}
#importexport-export_dialog > div {
display: flex;
flex-direction: column;
}
#importexport-export_dialog > div > et2-vbox {
flex: 1 1 auto;
min-height: 5em;
}
et2-tabbox {
flex: 1 1;
min-height: 5em;
}
et2-tabbox::part(base) {
min-height: 5em;
}
div.preview_box { div.preview_box {
position: absolute; position: absolute;
top: 0px; top: 0px;