Merge pull request #32 from OptimistikSAS/issue-fix

Issue fix

src/editor/components/seMenu.js

@@ -17,6 +17,10 @@ template.innerHTML = `
   :host ::slotted([current]){
     background-color: #F4E284 !important;
   }
+  :host ::slotted(*){
+    padding: 0.25em 1.25em 0.25em 0.25em !important;
+    margin: 2px;
+  }
   </style>
   
   <elix-menu-button id="MenuButton" aria-label="Main Menu">
@@ -107,7 +111,7 @@ export class SeMenu extends HTMLElement {
    * @function connectedCallback
    * @returns {void}
    */
-  connectedCallback () {
+  /* connectedCallback () {
     this.$menu.addEventListener('openedchange', (e) => {
       e.preventDefault();
       const selectedItem = e?.detail?.closeResult;
@@ -115,7 +119,7 @@ export class SeMenu extends HTMLElement {
         document.getElementById(selectedItem.id).click();
       }
     });
-  }
+  } */
 }
 
 // Register

src/editor/components/seMenuItem.js

@@ -7,9 +7,9 @@ template.innerHTML = `
   <style>
   </style>  
   <elix-menu-item>
-    <div style="display:inline-block;">
+    <div style="display:flex; align-items: center;">
       <img src="./images/logo.svg" alt="icon" style="display:none;" /> 
-      <span></span>
+      <span style="margin-left: 3px;"></span>
     </div>
   </elix-menu-item>  
 `;
@@ -29,7 +29,7 @@ export class SeMenuItem extends HTMLElement {
     this.$label = this._shadowRoot.querySelector('span');
     this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
     this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark');
-    this.$svg.setAttribute('style', 'width:1px;height:1px;');
+    this.$svg.setAttribute('style', 'display: none;');
   }
   /**
    * @function observedAttributes

src/editor/dialogs/seConfirmDialog.js

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

src/editor/extensions/ext-opensave/ext-opensave.js

@@ -54,7 +54,7 @@ export default {
       },
       async open () {
         const ok = await this.openPrep();
-        if (!ok) { return; }
+        if (ok === 'Cancel') { return; }
         this.svgCanvas.clear();
         const input = document.createElement('input');
         input.type = 'file';

src/editor/svgedit.css

@@ -1014,3 +1014,10 @@ ul li.current {
   background: #B0B0B0;
   border: 1px solid #000;
 }
+elix-alert-dialog::part(frame) {
+  background: #CCC;
+  width: 300px;
+  border: 1px outset #777;
+  font-size: 0.8em;
+  font-family: Verdana,Helvetica,sans-serif;
+}

src/editor/svgedit.js

@@ -1071,10 +1071,10 @@ class Editor extends EditorStartup {
    * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
    * @returns {void}
    */
-  clickClear () {
+  async clickClear () {
     const [x, y] = this.configObj.curConfig.dimensions;
-    const ok = seConfirm(this.uiStrings.notification.QwantToClear);
-    if (!ok) {
+    const ok = await seConfirm(this.uiStrings.notification.QwantToClear);
+    if (ok === 'Cancel') {
       return;
     }
     this.leftPanelHandlers.clickSelect();
@@ -1398,12 +1398,12 @@ class Editor extends EditorStartup {
    * @returns {boolean|Promise<boolean>} Resolves to boolean indicating `true` if there were no changes
    *  and `false` after the user confirms.
    */
-  openPrep () {
+  async openPrep () {
     $('#main_menu').hide();
     if (this.svgCanvas.undoMgr.getUndoStackSize() === 0) {
       return true;
     }
-    return seConfirm(this.uiStrings.notification.QwantToOpen);
+    return await seConfirm(this.uiStrings.notification.QwantToOpen);
   }
 
   /**