From 9297fd84b1e2a6d09c5a3e0035f0d3259640cb47 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Wed, 6 Jan 2021 20:00:02 +0530
Subject: [PATCH] #issue-fix alert dialog overwrite style

---
 src/editor/dialogs/SePlainAlertDialog.js | 77 ++++++++++++++++++++++++
 src/editor/dialogs/seAlertDialog.js      |  5 +-
 src/editor/dialogs/seConfirmDialog.js    |  5 +-
 src/editor/dialogs/sePromptDialog.js     |  5 +-
 src/editor/dialogs/seSelectDialog.js     |  5 +-
 src/editor/svgedit.js                    |  6 +-
 6 files changed, 88 insertions(+), 15 deletions(-)
 create mode 100644 src/editor/dialogs/SePlainAlertDialog.js

diff --git a/src/editor/dialogs/SePlainAlertDialog.js b/src/editor/dialogs/SePlainAlertDialog.js
new file mode 100644
index 00000000..6deb1261
--- /dev/null
+++ b/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);
diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js
index ef95c6df..8d83e2f8 100644
--- a/src/editor/dialogs/seAlertDialog.js
+++ b/src/editor/dialogs/seAlertDialog.js
@@ -1,8 +1,7 @@
-// eslint-disable-next-line node/no-unpublished-import
-import AlertDialog from 'elix/define/AlertDialog.js';
+import SePlainAlertDialog from './SePlainAlertDialog.js';
 
-const dialog = new AlertDialog();
 const seAlert = (text) => {
+  const dialog = new SePlainAlertDialog();
   dialog.textContent = text;
   dialog.choices = ['Ok'];
   dialog.open();
diff --git a/src/editor/dialogs/seConfirmDialog.js b/src/editor/dialogs/seConfirmDialog.js
index 66aa5cd0..eee1c0c1 100644
--- a/src/editor/dialogs/seConfirmDialog.js
+++ b/src/editor/dialogs/seConfirmDialog.js
@@ -1,8 +1,7 @@
-// eslint-disable-next-line node/no-unpublished-import
-import AlertDialog from 'elix/define/AlertDialog.js';
+import SePlainAlertDialog from './SePlainAlertDialog.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();
diff --git a/src/editor/dialogs/sePromptDialog.js b/src/editor/dialogs/sePromptDialog.js
index 10fdf802..b7e3a098 100644
--- a/src/editor/dialogs/sePromptDialog.js
+++ b/src/editor/dialogs/sePromptDialog.js
@@ -1,5 +1,4 @@
-// eslint-disable-next-line node/no-unpublished-import
-import AlertDialog from 'elix/define/AlertDialog.js';
+import SePlainAlertDialog from './SePlainAlertDialog.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
diff --git a/src/editor/dialogs/seSelectDialog.js b/src/editor/dialogs/seSelectDialog.js
index a02caf03..27f754bf 100644
--- a/src/editor/dialogs/seSelectDialog.js
+++ b/src/editor/dialogs/seSelectDialog.js
@@ -1,8 +1,7 @@
-// eslint-disable-next-line node/no-unpublished-import
-import AlertDialog from 'elix/define/AlertDialog.js';
+import SePlainAlertDialog from './SePlainAlertDialog.js';
 
-const dialog = new AlertDialog();
 const seSelect = async (text, choices) => {
+  const dialog = new SePlainAlertDialog();
   dialog.textContent = text;
   dialog.choices = choices;
   dialog.open();
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index f63ef3bc..cd3e980a 100644
--- a/src/editor/svgedit.js
+++ b/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);
-      if (!ok) {
+      const ok = await seConfirm(this.uiStrings.notification.QerrorsRevertToSource);
+      if (ok === false || ok === 'Cancel') {
         return;
       }
       saveChanges();