SaveHEADmaster

5 files changed, 32 insertions, 6 deletions

diff --git a/code/api/Pages/_Layout.cshtml b/code/api/Pages/_Layout.cshtml
index 1a69641..c135896 100644
--- a/code/api/Pages/_Layout.cshtml
+++ b/code/api/Pages/_Layout.cshtml
@@ -15,7 +15,8 @@
                 <a href="/home">Home</a>
             </div>
             <div class="right">
-                <profile-modal/>
+                <button id="open-profile-modal">profile</button>
+                <profile-modal trigger-id="open-profile-modal"/>
             </div>
         </nav>
     </header>
diff --git a/code/api/wwwroot/scripts/components/dialog.js b/code/api/wwwroot/scripts/components/dialog.js
new file mode 100644
index 0000000..06fdfea
--- /dev/null
+++ b/code/api/wwwroot/scripts/components/dialog.js
@@ -0,0 +1,8 @@
+class Dialog extends HTMLElement {
+	constructor() {
+		super();
+	}
+}
+
+
+customElements.define("x-dialog", Dialog, {extends: "dialog"});
diff --git a/code/api/wwwroot/scripts/components/index.js b/code/api/wwwroot/scripts/components/index.js
index ffae0e3..95b4084 100644
--- a/code/api/wwwroot/scripts/components/index.js
+++ b/code/api/wwwroot/scripts/components/index.js
@@ -1,4 +1,5 @@
 function load_components() {
+	document.body.appendChild(script_tag("/scripts/components/dialog.js", 1));
     document.body.appendChild(script_tag("/scripts/components/profile-modal.js", 1));
 }
 
@@ -16,4 +17,4 @@ function script_tag(scriptSrc, version) {
     })
 }
 
-document.addEventListener("DOMContentLoaded", load_components)
\ No newline at end of file
+document.addEventListener("DOMContentLoaded", load_components)
diff --git a/code/api/wwwroot/scripts/components/profile-modal.js b/code/api/wwwroot/scripts/components/profile-modal.js
index acc666b..6d7ad27 100644
--- a/code/api/wwwroot/scripts/components/profile-modal.js
+++ b/code/api/wwwroot/scripts/components/profile-modal.js
@@ -1,16 +1,28 @@
 class ProfileModal extends HTMLElement {
+	static observedAttributes = ["target-id"];
+	#attributes = [];
+
 	constructor() {
 		super();
+		this.#attributes.push({name: "target-id", value: this.getAttribute("target-id")});
 		const _session = session.get_sync();
-		const root = create_element("div", {}, [
+		const root = create_element("template", {}, [
 			create_element("h4", {innerText: _session.username, style: {margin: 0}}),
 			create_element("p", {innerText: _session.role}),
 			create_element("button", {innerText: "Log out", classList: ["do-logout"]}),
-			create_element("pre", {innerText: Temporal.Now.instant().toString()})
 		]);
 		this.style.padding = "5px";
 		this.innerHTML = root.innerHTML;
 	}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+	}
 }
 
-customElements.define("profile-modal", ProfileModal);
+customElements.define("profile-modal", ProfileModal, {extends: "dialog"});
+
+class ElementBase extends HTMLElement {
+	constructor() {
+		super();
+	}
+}
diff --git a/code/api/wwwroot/styles/base.css b/code/api/wwwroot/styles/base.css
index 318b601..fd75335 100644
--- a/code/api/wwwroot/styles/base.css
+++ b/code/api/wwwroot/styles/base.css
@@ -365,4 +365,8 @@ form .error {
     border: 1px solid red;
     background: rgba(255, 0, 0, .05);
     color: red;
-}
\ No newline at end of file
+}
+
+[inert] > * {
+    opacity: 0.5;
+}