#issue-fix alert dialog overwrite style

2021-01-06 20:00:02 +05:30
parent 72022f12e3
commit 9297fd84b1
6 changed files with 88 additions and 15 deletions
--- a/src/editor/dialogs/SePlainAlertDialog.js
+++ 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);