#issue-fix alert dialog overwrite style
parent
72022f12e3
commit
9297fd84b1
|
@ -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);
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in New Issue