fix(wizard-dialog): avoid header overlap with extra action buttons (o…

…penscd#703)
sprinteins · Apr 26, 2022 · ffe7859 · ffe7859
1 parent ccad42d
commit ffe7859
Show file tree

Hide file tree

Showing 44 changed files with 93 additions and 0 deletions.
diff --git a/src/wizard-dialog.ts b/src/wizard-dialog.ts
@@ -297,12 +297,19 @@ export class WizardDialog extends LitElement {
   renderPage(page: WizardPage, index: number): TemplateResult {
     const showCodeToggleButton =
       page.element && localStorage.getItem('mode') === 'pro';
+    const extraWidth =
+      showCodeToggleButton && page.menuActions
+        ? 96
+        : showCodeToggleButton || page.menuActions
+        ? 48
+        : 0;
 
     return html`<mwc-dialog
       defaultAction="close"
       ?open=${index === this.pageIndex}
       heading=${page.title}
       @closed=${this.onClosed}
+      style="--mdc-dialog-min-width:calc(100% + ${extraWidth}px)"
     >
       ${showCodeToggleButton || page.menuActions
         ? html`<nav>

diff --git a/.../integration/editors/communication/__snapshots__/subnetwork-editor-wizarding.test.snap.js b/.../integration/editors/communication/__snapshots__/subnetwork-editor-wizarding.test.snap.js
@@ -6,6 +6,7 @@ snapshots["subnetwork-editor wizarding integration edit/add Subnetwork wizard lo
   defaultaction="close"
   heading="[wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/integration/editors/templates/__snapshots__/datype-wizarding.test.snap.js b/test/integration/editors/templates/__snapshots__/datype-wizarding.test.snap.js
@@ -6,6 +6,7 @@ snapshots["DAType wizards defines a createDATypeWizard looks like the latest sna
   defaultaction="close"
   heading="[datype.wizard.title.add]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-select
@@ -618,6 +619,7 @@ snapshots["DAType wizards defines a dATypeWizard looks like the latest snapshot"
   defaultaction="close"
   heading="[datype.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 48px)"
 >
   <nav>
     <mwc-icon-button icon="more_vert">

diff --git a/test/integration/editors/templates/__snapshots__/dotype-wizarding.test.snap.js b/test/integration/editors/templates/__snapshots__/dotype-wizarding.test.snap.js
@@ -6,6 +6,7 @@ snapshots["DOType wizards defines a createDOTypeWizard looks like the latest sna
   defaultaction="close"
   heading="[dotype.wizard.title.add]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-select
@@ -721,6 +722,7 @@ snapshots["DOType wizards defines a dOTypeWizard looks like the latest snapshot"
   defaultaction="close"
   heading="[dotype.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 48px)"
 >
   <nav>
     <mwc-icon-button icon="more_vert">
@@ -1035,6 +1037,7 @@ snapshots["DOType wizards defines a sDOWizard to edit an existing SDO looks like
   defaultaction="close"
   heading="[sdo.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 48px)"
 >
   <nav>
     <mwc-icon-button icon="more_vert">
@@ -1246,6 +1249,7 @@ snapshots["DOType wizards defines a sDOWizard to create a new SDO element looks
   defaultaction="close"
   heading="[sdo.wizard.title.add]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/integration/editors/templates/__snapshots__/enumtype-wizarding.test.snap.js b/test/integration/editors/templates/__snapshots__/enumtype-wizarding.test.snap.js
@@ -6,6 +6,7 @@ snapshots["EnumType wizards defines a createEnumTypeWizard looks like the latest
   defaultaction="close"
   heading="[enum.wizard.title.add]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-select
@@ -1370,6 +1371,7 @@ snapshots["EnumType wizards defines an eNumTypeEditWizard looks like the latest
   defaultaction="close"
   heading="[enum.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 48px)"
 >
   <nav>
     <mwc-icon-button icon="more_vert">
@@ -1529,6 +1531,7 @@ snapshots["EnumType wizards defines a eNumValWizard to edit an existing EnumVal
   defaultaction="close"
   heading="[enum-val.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 48px)"
 >
   <nav>
     <mwc-icon-button icon="more_vert">
@@ -1602,6 +1605,7 @@ snapshots["EnumType wizards defines a eNumValWizard to create a new EnumVal elem
   defaultaction="close"
   heading="[enum-val.wizard.title.add]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/integration/editors/templates/__snapshots__/lnodetype-wizard.test.snap.js b/test/integration/editors/templates/__snapshots__/lnodetype-wizard.test.snap.js
@@ -6,6 +6,7 @@ snapshots["LNodeType wizards defines a lNodeTypeHelperWizard looks like the late
   defaultaction="close"
   heading="[lnodetype.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 48px)"
 >
   <nav>
     <mwc-icon-button icon="more_vert">
@@ -167,6 +168,7 @@ snapshots["LNodeType wizards defines a createLNodeTypeWizard looks like the late
   defaultaction="close"
   heading="[lnodetype.wizard.title.add]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-select
@@ -4353,6 +4355,7 @@ snapshots["LNodeType wizards defines a createLNodeTypeWizard opens a createLNode
   defaultaction="close"
   heading="[lnodetype.wizard.title.select]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-select
@@ -4687,6 +4690,7 @@ snapshots["LNodeType wizards defines a dOWizard to create a new DO element looks
   defaultaction="close"
   heading="[do.wizard.title.add]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/integration/wizards/__snapshots__/bda-wizarding-editing.test.snap.js b/test/integration/wizards/__snapshots__/bda-wizarding-editing.test.snap.js
@@ -6,6 +6,7 @@ snapshots["BDA wizarding editing integration defines a editBDaWizard to edit an
   defaultaction="close"
   heading="[bda.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 48px)"
 >
   <nav>
     <mwc-icon-button icon="more_vert">
@@ -633,6 +634,7 @@ snapshots["BDA wizarding editing integration defines a createBDaWizard to create
   defaultaction="close"
   heading="[bda.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/integration/wizards/__snapshots__/da-wizarding-editing.test.snap.js b/test/integration/wizards/__snapshots__/da-wizarding-editing.test.snap.js
@@ -6,6 +6,7 @@ snapshots["DA wizarding editing integration defines a editDaWizard to edit an ex
   defaultaction="close"
   heading="[da.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 48px)"
 >
   <nav>
     <mwc-icon-button icon="more_vert">
@@ -822,6 +823,7 @@ snapshots["DA wizarding editing integration defines a createDaWizard to create a
   defaultaction="close"
   heading="[da.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/integration/zeroline/__snapshots__/bay-editor-wizarding.test.snap.js b/test/integration/zeroline/__snapshots__/bay-editor-wizarding.test.snap.js
@@ -6,6 +6,7 @@ snapshots["bay-editor wizarding integration looks like the latest snapshot"] =
   defaultaction="close"
   heading="[bay.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/integration/zeroline/__snapshots__/conducting-equipment-editor-wizarding.test.snap.js b/test/integration/zeroline/__snapshots__/conducting-equipment-editor-wizarding.test.snap.js
@@ -6,6 +6,7 @@ snapshots["conducting-equipment-editor wizarding integration looks like the late
   defaultaction="close"
   heading="[conductingequipment.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-select

diff --git a/test/integration/zeroline/__snapshots__/substation-editor-wizarding.test.snap.js b/test/integration/zeroline/__snapshots__/substation-editor-wizarding.test.snap.js
@@ -6,6 +6,7 @@ snapshots["substation-editor wizarding integration looks like the latest snapsho
   defaultaction="close"
   heading="[substation.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/integration/zeroline/__snapshots__/voltage-level-editor-wizarding.test.snap.js b/test/integration/zeroline/__snapshots__/voltage-level-editor-wizarding.test.snap.js
@@ -6,6 +6,7 @@ snapshots["voltage-level-editor wizarding integration looks like the latest snap
   defaultaction="close"
   heading="[voltagelevel.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/unit/__snapshots__/wizard-dialog.test.snap.js b/test/unit/__snapshots__/wizard-dialog.test.snap.js
@@ -6,6 +6,7 @@ snapshots["wizard-dialog with user defined menu actions set looks like its snaps
   defaultaction="close"
   heading="Page 1"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 48px)"
 >
   <nav>
     <mwc-icon-button icon="more_vert">

diff --git a/test/unit/editors/ied/__snapshots__/da-wizard.test.snap.js b/test/unit/editors/ied/__snapshots__/da-wizard.test.snap.js
@@ -6,6 +6,7 @@ snapshots["with no ancestors looks like the latest snapshot"] =
   defaultaction="close"
   heading="[iededitor.wizard.daTitle]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-textarea
@@ -141,6 +142,7 @@ snapshots["with a DA element looks like the latest snapshot"] =
   defaultaction="close"
   heading="[iededitor.wizard.daTitle]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-textarea
@@ -276,6 +278,7 @@ snapshots["with a BDA element looks like the latest snapshot"] =
   defaultaction="close"
   heading="[iededitor.wizard.daTitle]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-textarea
@@ -411,6 +414,7 @@ snapshots["with a DA element and DAI Element looks like the latest snapshot"] =
   defaultaction="close"
   heading="[iededitor.wizard.daTitle]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-textarea

diff --git a/test/unit/editors/ied/__snapshots__/do-wizard.test.snap.js b/test/unit/editors/ied/__snapshots__/do-wizard.test.snap.js
@@ -6,6 +6,7 @@ snapshots["with no ancestors looks like the latest snapshot"] =
   defaultaction="close"
   heading="[iededitor.wizard.doTitle]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-textarea
@@ -108,6 +109,7 @@ snapshots["with a DO element looks like the latest snapshot"] =
   defaultaction="close"
   heading="[iededitor.wizard.doTitle]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-textarea
@@ -210,6 +212,7 @@ snapshots["with a DO element and DOI Element looks like the latest snapshot"] =
   defaultaction="close"
   heading="[iededitor.wizard.doTitle]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-textarea

diff --git a/test/unit/editors/singlelinediagram/wizards/__snapshots__/bay.test.snap.js b/test/unit/editors/singlelinediagram/wizards/__snapshots__/bay.test.snap.js
@@ -6,6 +6,7 @@ snapshots["Wizards for SCL element Bay (X/Y) looks like the latest snapshot"] =
   defaultaction="close"
   heading="[bay.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/unit/editors/singlelinediagram/wizards/__snapshots__/conductingequipment.test.snap.js b/test/unit/editors/singlelinediagram/wizards/__snapshots__/conductingequipment.test.snap.js
@@ -6,6 +6,7 @@ snapshots["Wizards for SCL element Conducting Equipment (X/Y) looks like the lat
   defaultaction="close"
   heading="[conductingequipment.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-select

diff --git a/test/unit/editors/singlelinediagram/wizards/__snapshots__/powertransformer.test.snap.js b/test/unit/editors/singlelinediagram/wizards/__snapshots__/powertransformer.test.snap.js
@@ -6,6 +6,7 @@ snapshots["Wizards for SCL element Power Transformer (X/Y) looks like the latest
   defaultaction="close"
   heading="[powertransformer.wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/unit/menu/__snapshots__/UpdateDescriptionSEL.test.snap.js b/test/unit/menu/__snapshots__/UpdateDescriptionSEL.test.snap.js
@@ -6,6 +6,7 @@ snapshots["Update method for desc attributes in SEL IEDs working on SCL files co
   defaultaction="close"
   heading="Add desc"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <filtered-list multi="">
@@ -146,6 +147,7 @@ snapshots["Update method for desc attributes in SEL IEDs working on SCL files co
   defaultaction="close"
   heading="Add desc"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <filtered-list multi="">

diff --git a/test/unit/menu/__snapshots__/UpdateDescritionABB.test.snap.js b/test/unit/menu/__snapshots__/UpdateDescritionABB.test.snap.js
@@ -6,6 +6,7 @@ snapshots["Update method for desc attributes in ABB IEDs working on SCL files wi
   defaultaction="close"
   heading="[wizard.title.add]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <filtered-list multi="">
@@ -34,6 +35,7 @@ snapshots["Update method for desc attributes in ABB IEDs working on SCL files co
   defaultaction="close"
   heading="[wizard.title.add]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <filtered-list multi="">

diff --git a/test/unit/wizards/__snapshots__/abstractda.test.snap.js b/test/unit/wizards/__snapshots__/abstractda.test.snap.js
@@ -6,6 +6,7 @@ snapshots["abstractda wizards renderWizard looks like the latest snapshot"] =
   defaultaction="close"
   heading="title"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <wizard-textfield

diff --git a/test/unit/wizards/__snapshots__/address.test.snap.js b/test/unit/wizards/__snapshots__/address.test.snap.js
@@ -6,6 +6,7 @@ snapshots["address renderGseSmvAddress looks like the latest snapshot"] =
   defaultaction="close"
   heading="title"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-formfield label="[connectedap.wizard.addschemainsttype]">

diff --git a/test/unit/wizards/__snapshots__/clientln.test.snap.js b/test/unit/wizards/__snapshots__/clientln.test.snap.js
@@ -6,6 +6,7 @@ snapshots["clientln wizards createClientLnWizard looks like the latest snapshot"
   defaultaction="close"
   heading="[commmap.connectToIED]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <div
@@ -341,6 +342,7 @@ snapshots["clientln wizards selectClientLnWizard looks like the latest snapshot"
   defaultaction="close"
   heading="IED2>>CBSW> XSWI 2>ReportCb - IED1"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <filtered-list multi="">

diff --git a/test/unit/wizards/__snapshots__/commmap.test.snap.js b/test/unit/wizards/__snapshots__/commmap.test.snap.js
@@ -6,6 +6,7 @@ snapshots["communication mapping wizard looks like the latest snapshot"] =
   defaultaction="close"
   heading="[commmap.title]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <filtered-list>

diff --git a/test/unit/wizards/__snapshots__/connectedap-pattern.test.snap.js b/test/unit/wizards/__snapshots__/connectedap-pattern.test.snap.js
@@ -6,6 +6,7 @@ snapshots["Edit wizard for SCL element ConnectedAP include an edit wizard that f
   defaultaction="close"
   heading="[wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-formfield label="[connectedap.wizard.addschemainsttype]">
@@ -133,6 +134,7 @@ snapshots["Edit wizard for SCL element ConnectedAP include an edit wizard that f
   defaultaction="close"
   heading="[wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-formfield label="[connectedap.wizard.addschemainsttype]">
@@ -308,6 +310,7 @@ snapshots["Edit wizard for SCL element ConnectedAP include an edit wizard that f
   defaultaction="close"
   heading="[wizard.title.edit]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <mwc-formfield label="[connectedap.wizard.addschemainsttype]">

diff --git a/test/unit/wizards/__snapshots__/connectedap.test.snap.js b/test/unit/wizards/__snapshots__/connectedap.test.snap.js
@@ -6,6 +6,7 @@ snapshots["Wizards for SCL element ConnectedAP include a create wizard that look
   defaultaction="close"
   heading="[wizard.title.add]"
   open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
 >
   <div id="wizard-content">
     <filtered-list