diff --git a/package-lock.json b/package-lock.json
index 70a24d2..45013c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,39 @@
"tslib": "^1.9.3"
}
},
+ "@material/button": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/@material/button/-/button-2.3.0.tgz",
+ "integrity": "sha512-xFyZjm0pmisfSU6OHO3Wk2zZX51N9D0DohmaPoXnZt2unfD8bCwRmlmD7TTUQCLnuBoIaqrYShpcRTGp4K5dMw==",
+ "requires": {
+ "@material/elevation": "^1.1.0",
+ "@material/feature-targeting": "^0.44.1",
+ "@material/ripple": "^2.3.0",
+ "@material/rtl": "^0.42.0",
+ "@material/shape": "^1.1.1",
+ "@material/theme": "^1.1.0",
+ "@material/typography": "^2.3.0"
+ }
+ },
+ "@material/dialog": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-2.3.0.tgz",
+ "integrity": "sha512-T0xEKUW4uY5ZK7S92bdCVjFo9naasTRFNTXccIk+lBkbUlTsCOJMtix+dSJcj8ba8NOZjjq7phfAQqnNKUOhvg==",
+ "requires": {
+ "@material/animation": "^1.0.0",
+ "@material/base": "^1.0.0",
+ "@material/dom": "^1.1.0",
+ "@material/elevation": "^1.1.0",
+ "@material/feature-targeting": "^0.44.1",
+ "@material/ripple": "^2.3.0",
+ "@material/rtl": "^0.42.0",
+ "@material/shape": "^1.1.1",
+ "@material/theme": "^1.1.0",
+ "@material/typography": "^2.3.0",
+ "focus-trap": "^5.0.0",
+ "tslib": "^1.9.3"
+ }
+ },
"@material/dom": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@material/dom/-/dom-1.1.0.tgz",
@@ -89,6 +122,35 @@
"tslib": "^1.9.3"
}
},
+ "@material/menu": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/@material/menu/-/menu-2.3.0.tgz",
+ "integrity": "sha512-XPI6w4x5c9ACwKBdujcTskBlisWlEgrb09Sa+s0vjhqBJVZVAUJT1j0OpG8tArNUqQiFssXBa/JuJIe6sMAK1A==",
+ "requires": {
+ "@material/base": "^1.0.0",
+ "@material/feature-targeting": "^0.44.1",
+ "@material/list": "^2.3.0",
+ "@material/menu-surface": "^2.3.0",
+ "@material/ripple": "^2.3.0",
+ "@material/rtl": "^0.42.0",
+ "tslib": "^1.9.3"
+ }
+ },
+ "@material/menu-surface": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/@material/menu-surface/-/menu-surface-2.3.0.tgz",
+ "integrity": "sha512-jJ1MyeJnEJUO0Z7kNxvqN0xruWbTT2XKHCiApQcJHHkeibWfbWJdhXcx5aO4FMf/TVcy3ADSxDTdvc6AYrBX0g==",
+ "requires": {
+ "@material/animation": "^1.0.0",
+ "@material/base": "^1.0.0",
+ "@material/elevation": "^1.1.0",
+ "@material/feature-targeting": "^0.44.1",
+ "@material/rtl": "^0.42.0",
+ "@material/shape": "^1.1.1",
+ "@material/theme": "^1.1.0",
+ "tslib": "^1.9.3"
+ }
+ },
"@material/ripple": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-2.3.0.tgz",
diff --git a/package.json b/package.json
index f82981a..6ea686b 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,12 @@
"dependencies": {
"@eix/input": "git+https://github.com/eix-js/input.git",
"@eix/utils": "git+https://github.com/eix-js/utils.git",
+ "@material/button": "^2.3.0",
+ "@material/dialog": "^2.3.0",
"@material/drawer": "^2.3.0",
"@material/list": "^2.3.0",
+ "@material/menu": "^2.3.0",
+ "@material/theme": "^1.1.0",
"file-saver": "^2.0.2",
"haunted": "^4.3.0",
"lit-html": "^1.0.0",
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 9acceac..235e6e9 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -1,7 +1,18 @@
@import "./toastr.scss";
@import "./modal.scss";
+
+$mdc-theme-primary: black;
+$mdc-theme-secondary: #feeae6;
+$mdc-theme-on-primary: white;
+$mdc-theme-surface: black;
+$mdc-theme-on-secondary: #442b2d;
+
@import "@material/drawer/mdc-drawer.scss";
-@import "@material/list/mdc-list.scss";
+@import "@material/list/mdc-list";
+@import "@material/dialog/mdc-dialog";
+@import "@material/button/mdc-button";
+@import "@material/menu-surface/mdc-menu-surface";
+@import "@material/menu/mdc-menu";
html, body {
padding: 0;
diff --git a/src/ts/common/modals/modal.ts b/src/ts/common/modals/modal.ts
index 236145a..9c42a97 100644
--- a/src/ts/common/modals/modal.ts
+++ b/src/ts/common/modals/modal.ts
@@ -1,7 +1,7 @@
import { render, html } from "lit-html"
import { confirmModalOptions } from "./interfaces";
import { fromEvent } from "rxjs";
-import MicroModal from "micromodal"
+import { MDCDialog } from '@material/dialog';
let lastId = 0
@@ -14,60 +14,65 @@ export const modal = (options: Partial<confirmModalOptions>) => new Promise((res
}
const parent = document.getElementsByClassName("ModalContainer")[0]
- const finalOptions: confirmModalOptions = { ...defaultOptions, ...options }
+ const { title, content, yes, no }: confirmModalOptions = { ...defaultOptions, ...options }
const id = lastId++
if (!parent)
rej(false)
const template = html`
- <div class="modal micromodal-slide" id="modal-${id}" aria-hidden="true">
- <div class="modal__overlay" tabindex="-1" data-micromodal-close>
- <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
- <header class="modal__header">
- <h2 class="modal__title" id="modal-${id}-title">
- ${finalOptions.title}
- </h2>
- <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
- </header>
- <main class="modal__content" id="modal-${id}-content">
- ${finalOptions.content}
- </main>
- <footer class="modal__footer">
- <button class="modal__btn" id="yes-${id}">${finalOptions.yes}</button>
- <button class="modal__btn modal__btn-primary" id="no-${id}" aria-label="Close this dialog window">
- ${finalOptions.no}
+ <div class="mdc-dialog"
+ id="modal-${id}"
+ role="alertdialog"
+ aria-modal="true"
+ aria-labelledby="${title}"
+ aria-describedby="my-dialog-content">
+ <div class="mdc-dialog__container">
+ <div class="mdc-dialog__surface">
+ <h2 class="mdc-dialog__title" id="${title}">
+ ${title}
+ </h2>
+ <div class="mdc-dialog__content" id="my-dialog-content">
+ ${content}
+ </div>
+ <footer class="mdc-dialog__actions">
+ <button type="button" class="mdc-button mdc-dialog__button" id="no-${id}">
+ <span class="mdc-button__label">${no}</span>
+ </button>
+ <button type="button" class="mdc-button mdc-dialog__button" id="yes-${id}">
+ <span class="mdc-button__label">${yes}</span>
</button>
</footer>
</div>
</div>
- </div>
- </div>
+ <div class="mdc-dialog__scrim"></div>
+ </div>
`
render(template, parent)
- const yes = document.getElementById(`yes-${id}`)
- const no = document.getElementById(`no-${id}`)
+ const dialog = new MDCDialog(document.querySelector(`#modal-${id}`))
+ dialog.open()
+
+ const _yes = document.getElementById(`yes-${id}`)
+ const _no = document.getElementById(`no-${id}`)
const clear = () => {
// render(html``,parent)
- MicroModal.close()
+ dialog.close()
subscriptions.forEach(val => val.unsubscribe())
}
const subscriptions = [
- fromEvent(yes, "click").subscribe(val => {
+ fromEvent(_yes, "click").subscribe(val => {
clear()
res(true)
}),
- fromEvent(no, "click").subscribe(val => {
+ fromEvent(_no, "click").subscribe(val => {
clear()
res(false)
})
]
-
- MicroModal.show(`modal-${id}`)
})
diff --git a/src/ts/main.ts b/src/ts/main.ts
index 6c728d9..69cd7fa 100644
--- a/src/ts/main.ts
+++ b/src/ts/main.ts
@@ -5,17 +5,18 @@ import { Component } from "./common/component";
import { FunctionStore } from "./common/activation/activationStore";
import { ComponentManager } from "./common/componentManager";
import { map } from "rxjs/operators";
+import { MDCMenu } from '@material/menu';
const screen = new Screen()
const manager = new ComponentManager()
-manager.components.push(new Component("and",[200,100],[100,100]))
-manager.components.push(new Component("not",[200,500],[100,100]))
-manager.components.push(new Component("true",[200,500],[100,100]))
-manager.components.push(new Component("false",[200,500],[100,100]))
+manager.components.push(new Component("and", [200, 100], [100, 100]))
+manager.components.push(new Component("not", [200, 500], [100, 100]))
+manager.components.push(new Component("true", [200, 500], [100, 100]))
+manager.components.push(new Component("false", [200, 500], [100, 100]))
manager.update()
-const handleEvent = <T>(e:T,func:(e:T) => any) => {
+const handleEvent = <T>(e: T, func: (e: T) => any) => {
if (manager.barAlpha.value == "0")
func(e)
else if (manager.barAlpha.value == "1"
@@ -25,23 +26,23 @@ const handleEvent = <T>(e:T,func:(e:T) => any) => {
}
render(html`
- <div @mousemove=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) => {
- manager.handleMouseMove(e)
- screen.updateMouse(e)
- })}
- @mousedown=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) =>
- manager.handleMouseDown(e)
- )}
- @mouseup=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) =>
- manager.handleMouseUp(e)
- )}
- @wheel=${(e:MouseEvent) => handleEvent(e,(e:WheelEvent) =>
- screen.handleScroll(e)
- )}>
+ <div @mousemove=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) => {
+ manager.handleMouseMove(e)
+ screen.updateMouse(e)
+})}
+ @mousedown=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) =>
+ manager.handleMouseDown(e)
+)}
+ @mouseup=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) =>
+ manager.handleMouseUp(e)
+)}
+ @wheel=${(e: MouseEvent) => handleEvent(e, (e: WheelEvent) =>
+ screen.handleScroll(e)
+)}>
<div id=${subscribe(manager.barAlpha.pipe(map(val =>
- (val == "1") ? "shown" : ""
- )))}
+ (val == "1") ? "shown" : ""
+)))}
class=createBar>
<div class="topContainer">
<div>
@@ -51,10 +52,10 @@ render(html`
</div>
</div>
</div>
- <svg height=${ subscribe(screen.height) }
- width=${ subscribe(screen.width) }
+ <svg height=${ subscribe(screen.height)}
+ width=${ subscribe(screen.width)}
viewBox=${subscribe(screen.viewBox)}>
- ${ subscribe(manager.svgs) }
+ ${ subscribe(manager.svgs)}
</svg>
</div>
<div class="ModalContainer"></div>
@@ -65,9 +66,12 @@ render(html`
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Something</span>
</a>
- <a class="mdc-list-item" href="#">
+ <a class="mdc-list-item" href="#" id="openSimulation" @click=${() => {
+ menu.open = true
+ // menu.setAbsolutePosition(screen.mousePosition[0], screen.mousePosition[1])
+ }}>
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
- <span class="mdc-list-item__text">something else</span>
+ <span class="mdc-list-item__text">Open simulation</span>
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
@@ -76,6 +80,21 @@ render(html`
</nav>
</div>
</aside>
+
+ <div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary">
+ <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
+ <li class="mdc-list-item" role="menuitem">
+ <span class="mdc-list-item__text">A Menu Item</span>
+ </li>
+ <li class="mdc-list-item" role="menuitem">
+ <span class="mdc-list-item__text">Another Menu Item</span>
+ </li>
+ </ul>
+ </div>
`, document.body)
+const menu = new MDCMenu(document.querySelector('.mdc-menu'));
+menu.hoistMenuToBody()
+menu.setAnchorElement(document.querySelector(`#openSimulation`))
+
manager.update()
\ No newline at end of file