#issue-fix alert dialog overwrite style

src/editor/dialogs/SePlainAlertDialog.js

@@ -0,0 +1,77 @@
+/* eslint-disable node/no-unpublished-import */
+import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js';
+// import AlertDialog from 'elix/define/AlertDialog.js';
+import {defaultState, template} from 'elix/src/base/internal.js';
+import {fragmentFrom} from 'elix/src/core/htmlLiterals.js';
+import PlainBorderButton from 'elix/define/BorderButton.js';
+
+/**
+ * AlertDialog component in the Plain reference design system
+ *
+ * @inherits AlertDialog
+ * @mixes PlainModalOverlayMixin
+ * @part {PlainBorderButton} choice-button
+ */
+export default class SePlainAlertDialog extends PlainAlertDialog {
+  /**
+    * @function get
+    * @returns {PlainObject}
+  */
+  get [template] () {
+    const result = super[template];
+    // Replace the default slot with a new default slot and a button container.
+    const defaultSlot = result.content.querySelector('#frameContent');
+    if (defaultSlot) {
+      defaultSlot.replaceWith(fragmentFrom.html`
+        <div id="alertDialogContent">
+          <div id="se-content-alert">
+            <slot></slot>
+          </div>
+          <div id="choiceButtonContainer" part="choice-button-container"></div>
+        </div>
+      `);
+    }
+    console.log(result.content);
+
+    result.content.append(
+      fragmentFrom.html`
+        <style>
+          [part~="frame"] {
+            padding: 1em;
+            background: #CCC;
+            width: 300px;
+            border: 1px outset #777;
+            font-size: 0.8em;
+            font-family: Verdana,Helvetica,sans-serif;
+            border-radius: 5px;
+            -moz-border-radius: 5px;
+            -webkit-border-radius: 5px;
+          }
+
+          [part~="choice-button-container"] {
+            margin-top: 1em;
+            text-align: center;
+          }
+
+          [part~="choice-button"]:not(:first-child) {
+            margin-left: 0.5em;
+          }
+          #se-content-alert{
+            height: 95px;
+            background: #DDD;
+            overflow: auto;
+            text-align: left;
+            border: 1px solid #B0B0B0;
+            padding: 1em;
+            border-radius: 5px;
+            -moz-border-radius: 5px;
+            -webkit-border-radius: 5px;
+          }
+        </style>
+      `
+    );
+    return result;
+  }
+}
+
+customElements.define('se-elix-alert-dialog', SePlainAlertDialog);

src/editor/dialogs/seAlertDialog.js

@@ -1,8 +1,7 @@
-// eslint-disable-next-line node/no-unpublished-import
+import SePlainAlertDialog from './SePlainAlertDialog.js';
-import AlertDialog from 'elix/define/AlertDialog.js';
 
-const dialog = new AlertDialog();
 const seAlert = (text) => {
+  const dialog = new SePlainAlertDialog();
   dialog.textContent = text;
   dialog.choices = ['Ok'];
   dialog.open();

src/editor/dialogs/seConfirmDialog.js

@@ -1,8 +1,7 @@
-// eslint-disable-next-line node/no-unpublished-import
+import SePlainAlertDialog from './SePlainAlertDialog.js';
-import AlertDialog from 'elix/define/AlertDialog.js';
 
 const seConfirm = async (text, choices) => {
-  const dialog = new AlertDialog();
+  const dialog = new SePlainAlertDialog();
   dialog.textContent = text;
   dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices;
   dialog.open();

src/editor/dialogs/sePromptDialog.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line node/no-unpublished-import
+import SePlainAlertDialog from './SePlainAlertDialog.js';
-import AlertDialog from 'elix/define/AlertDialog.js';
 /**
  * @class SePromptDialog
  */
@@ -11,7 +10,7 @@ export class SePromptDialog extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this.dialog = new AlertDialog();
+    this.dialog = new SePlainAlertDialog();
   }
   /**
    * @function observedAttributes

src/editor/dialogs/seSelectDialog.js

@@ -1,8 +1,7 @@
-// eslint-disable-next-line node/no-unpublished-import
+import SePlainAlertDialog from './SePlainAlertDialog.js';
-import AlertDialog from 'elix/define/AlertDialog.js';
 
-const dialog = new AlertDialog();
 const seSelect = async (text, choices) => {
+  const dialog = new SePlainAlertDialog();
   dialog.textContent = text;
   dialog.choices = choices;
   dialog.open();

src/editor/svgedit.js

@@ -1250,7 +1250,7 @@ class Editor extends EditorStartup {
   * @param {Event} e
   * @returns {void} Resolves to `undefined`
   */
-  saveSourceEditor (e) {
+  async saveSourceEditor (e) {
     const $editorDialog = document.getElementById('se-svg-editor-dialog');
     if ($editorDialog.getAttribute('dialog') !== 'open') return;
     const saveChanges = () => {
@@ -1262,8 +1262,8 @@ class Editor extends EditorStartup {
     };
 
     if (!this.svgCanvas.setSvgString(e.detail.value)) {
-      const ok = seConfirm(this.uiStrings.notification.QerrorsRevertToSource);
+      const ok = await seConfirm(this.uiStrings.notification.QerrorsRevertToSource);
-      if (!ok) {
+      if (ok === false || ok === 'Cancel') {
         return;
       }
       saveChanges();