#se-menu button size changed

src/editor/components/seMenu.js

@@ -12,9 +12,12 @@ template.innerHTML = `
   elix-menu-button::part(menu) {
     background-color: #eee !important;
   }
+  elix-menu-button::part(popup-toggle) {
+    padding: 0.40em 1.75em !important;
+  }
   </style>
   
-  <elix-menu-button id="sampleMenuButton" aria-label="Sample Menu">
+  <elix-menu-button id="MenuButton" aria-label="Main Menu">
     <slot></slot>
   </elix-menu-button>
   
@@ -32,15 +35,55 @@ export class SeMenu extends HTMLElement {
     this._shadowRoot = this.attachShadow({mode: 'open'});
     this._shadowRoot.appendChild(template.content.cloneNode(true));
     this.$menu = this._shadowRoot.querySelector('elix-menu-button');
-    console.log(this.$menu);
+    this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot;
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['label'];
   }
 
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+    case 'label':
+      this.$label.prepend(newValue);
+      break;
+    default:
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get label () {
+    return this.getAttribute('label');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set label (value) {
+    this.setAttribute('label', value);
+  }
   /**
    * @function connectedCallback
    * @returns {void}
    */
   connectedCallback () {
-    console.log("connectedCallback");
     this.$menu.addEventListener('openedchange', (e) => {
       e.preventDefault();
       const selectedItem = e?.detail?.closeResult;

src/editor/index.html

@@ -74,15 +74,24 @@
         <div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
         </div>
       </div>
-
-      <div id="main_button">
+      <se-menu id="main_button" label="SVG-Edit">
+        <!-- File-like buttons: New, Save, Source -->
+        <se-menu-item id="tool_clear" label="New Image" shortcut="N"></se-menu-item>
+        <se-menu-item id="tool_open" label="Open SVG"></se-menu-item>
+        <se-menu-item id="tool_import" label="Import Image"></se-menu-item>
+        <se-menu-item id="tool_save" label="Save Image" shortcut="S"></se-menu-item>
+        <se-menu-item id="tool_export" label="Export"></se-menu-item>
+        <se-menu-item id="tool_docprops" label="Document Properties" shortcut="D"></se-menu-item>
+        <se-menu-item id="tool_editor_prefs" label="Editor Preferences"></se-menu-item>
+        <se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page"></se-menu-item>
+      </se-menu>
+      <!-- <div id="main_button">
         <div id="main_icon" class="tool_button" title="Main Menu">
           <span>SVG-Edit</span>
           <div id="logo"></div>
           <div class="dropdown"></div>
         </div>
         <div id="main_menu">
-          <!-- File-like buttons: New, Save, Source -->
           <ul>
             <li id="tool_clear">
               <div></div>
@@ -123,18 +132,9 @@
               </a>
             </li>
           </ul>
-        </div> <!-- main_menu -->
-      </div> <!-- main_button -->
-      <se-menu id="mainmenu1">
-        <se-menu-item id="tool_clear" label="New Image" shortcut="N"></se-menu-item>
-        <se-menu-item id="tool_open" label="Open SVG"></se-menu-item>
-        <se-menu-item id="tool_import" label="Import Image"></se-menu-item>
-        <se-menu-item id="tool_save" label="Save Image" shortcut="S"></se-menu-item>
-        <se-menu-item id="tool_export" label="Export"></se-menu-item>
-        <se-menu-item id="tool_docprops" label="Document Properties" shortcut="D"></se-menu-item>
-        <se-menu-item id="tool_editor_prefs" label="Editor Preferences"></se-menu-item>
-        <se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page"></se-menu-item>
-      </se-menu>
+        </div> 
+      </div> -->
+
       <div id="tools_top">
         <div id="editor_panel">
           <div class="tool_sep"></div>

src/editor/svgedit.css

@@ -281,13 +281,6 @@ hr {
   z-index: 5;
 }
 
-#mainmenu1 {
-  position: absolute;
-  top: 4px;
-  left: 355px;
-  z-index: 5;
-}
-
 #main_icon {
   position: relative;
   top: -2px;