Merge branch 'feature/WW-25-modals'

src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts

@@ -20,7 +20,7 @@ class BaseLayoutElement extends HTMLElement {
     };
 
     setElement = (newTag: string) => {
-        const _appSlot = `<${newTag}></${newTag}>`;
+        const _appSlot = `<div data-target="base-layout.content"><${newTag}></${newTag}></div>`;
         this._appSlot = _appSlot;
         this.appSlot.innerHTML = _appSlot;
     };

src/components/app-link/AppLinkElement.ts

@@ -51,16 +51,20 @@ class AppLinkElement extends HTMLElement {
 
     render = () => {
         return html`${this.disabled
-            ? html`<span data-target="app-link.main" style="color:grey"
+            ? html`<span
+                  class="btn btn-link btn-disabled"
+                  data-target="app-link.main"
+                  style="color:grey"
                   >${this.title}</span
               >`
             : html`<span
+                  class="btn btn-link btn-disabled"
                   data-target="app-link.main"
                   data-action="click:app-link#goTo"
                   style="text-decoration: underline; cursor: pointer;"
                   >${this.title}</span
               >`}`;
-    }
+    };
 
     update = () => {
         render(this.render(), this);

src/components/app-main/AppMainElement.ts

@@ -77,17 +77,44 @@ class AppMainElement extends HTMLElement {
     };
 
     createModal = (element: string) => {
-        console.log(this.appModal);
         this.closeModal();
-        const _appModal = document.createElement("app-modal");
+
-        _appModal.setAttribute("data-target", "app-main.appModal");
+        const _appModal = this.createAppModal();
-        const _modalElement = document.createElement(element);
+        const _modalContent = this.createModalContent(element);
-        _modalElement.setAttribute("data-target", "app-modal.modalElement");
+        const _modalOverlay = this.createModalOverlay();
-        _appModal.appendChild(_modalElement);
+
+        _modalOverlay.appendChild(_modalContent);
+        _appModal.appendChild(_modalOverlay);
         this.appendChild(_appModal);
     };
 
-    createMainRoot = () => {
+    private createAppModal = () => {
+        const _appModal = document.createElement("app-modal");
+        _appModal.setAttribute("data-target", "app-main.appModal");
+        return _appModal;
+    };
+
+    private createModalContent = (element: string) => {
+        const _modalElement = document.createElement(element);
+        const _divEl = document.createElement("div");
+        _modalElement.setAttribute("data-target", "app-modal.modalElement");
+        _modalElement.setAttribute(
+            "data-action",
+            "click:app-main#preventClosing"
+        );
+        _divEl.setAttribute("data-target", "app-modal.modalContent");
+        _divEl.appendChild(_modalElement);
+        return _divEl;
+    };
+
+    private createModalOverlay = () => {
+        const _divOverlay = document.createElement("div");
+        _divOverlay.setAttribute("data-target", "app-modal.modalOverlay");
+        _divOverlay.setAttribute("data-action", "click:app-main#closeModal");
+        return _divOverlay;
+    };
+
+    private createMainRoot = () => {
         if (this.mainRoot) this.removeChild(this.mainRoot);
         const _mainRoot = document.createElement("app-root");
         _mainRoot.setAttribute("data-target", "app-main.mainRoot");
@@ -95,6 +122,10 @@ class AppMainElement extends HTMLElement {
         return _mainRoot;
     };
 
+    preventClosing = (e: Event) => {
+        e.stopPropagation();
+    };
+
     closeModal = () => {
         if (this.appModal) this.removeChild(this.appModal);
     };

src/components/app-menu/AppMenuElement.ts

@@ -59,6 +59,7 @@ class AppMenuElement extends HTMLElement {
 
     render = () => {
         return html`
+            <div data-target="app-menu.sidebar">
                 <ul>
                     <li>
                         <app-link data-to="/">Home</app-link>
@@ -82,7 +83,9 @@ class AppMenuElement extends HTMLElement {
                     ${this.isAuth && this.totalWallets > 2
                         ? html`
                               <li>
-                              <app-link data-to="/wallet/all">Other</app-link>
+                                  <app-link data-to="/wallet/all"
+                                      >Other</app-link
+                                  >
                               </li>
                           `
                         : null}
@@ -97,11 +100,14 @@ class AppMenuElement extends HTMLElement {
                                   <app-link data-to="/login">Login</app-link>
                               </li>
                               <li>
-                              <app-link data-to="/register">Register</app-link>
+                                  <app-link data-to="/register"
+                                      >Register</app-link
+                                  >
                               </li>
                           `
                         : null}
                 </ul>
+            </div>
         `;
     };
 }