diff --git a/css/iui.css b/css/iui.css index 48ffae9..5f9b74c 100644 --- a/css/iui.css +++ b/css/iui.css @@ -48,8 +48,13 @@ --background-visible-background: rgba(0, 0, 0, 0.6); --window-caption-color: #444; --window-tools-close-background: linear-gradient(to bottom, #f1796b, #d66255); - --window-tools-close-border: 1px solid #f1786b; + --window-tools-close-border: 1px solid #d6d6d6; --window-tools-close-background-hover: #f03242; + + --window-tools-config-background: linear-gradient(to bottom, #9de1e8, #55b1d6); + --window-tools-config-border: 1px solid #d6d6d6; + --window-tools-config-background-hover:rgb(0, 135, 208); + --dialog-loading-background: rgb(167, 227, 252); --dialog-loading-content-border: 10px solid #fff; --dialog-loading-content-border-top: 10px solid #ffe3e3; @@ -529,9 +534,11 @@ html[dir='rtl'] .window-tools, html[dir='rtl'] .dialog-tools { } .window-tools, .dialog-tools { - position: absolute; - top: 5px; - right: 5px; + flex: 1; + flex-flow: row-reverse; + display: flex; + margin: auto 0; + padding: 0 3px; } .window-icon, .dialog-icon { @@ -565,27 +572,47 @@ html[dir='rtl'] .window-tools, html[dir='rtl'] .dialog-tools { background: wheat; } - .window-subtitle:empty, .dialog-subtitle:empty { - display: none; - } - -.window-tools-close, .dialog-tools-close { - float: left; - height: 16px; - line-height: 16px; - padding: 0 5px; - border: var(--window-tools-close-border); - border-radius: 5px; - background: var(--window-tools-close-background); - white-space: nowrap; +.window-subtitle:empty, .dialog-subtitle:empty { + display: none; } - .window-tools-close:hover, .dialog-tools-close:hover { - background: var(--window-tools-close-background-hover); - } +.window-tools-close, .dialog-tools-close, .window-tools-config, .dialog-tools-config { + height: 20px; + padding: 0 5px; + border-radius: 5px; + white-space: nowrap; + +} + +.window-tools-config, .dialog-tools-config{ + background: var(--window-tools-config-background); + border: var(--window-tools-config-border); +} + +.window-tools-close, .dialog-tools-close{ + background: var(--window-tools-close-background); + border: var(--window-tools-close-border); +} + +.window-tools-config:hover, .dialog-tools-config:hover { + background: var(--window-tools-config-background-hover); +} + +.window-tools-close:hover, .dialog-tools-close:hover { + background: var(--window-tools-close-background-hover); +} + +.dialog-tools-close:before, .window-tools-close:before { + content: "x"; +} + +.dialog-tools-config:before, .window-tools-config:before { + content: "⚙"; + font-size: 18px; + padding-top: 2px; +} .window-tools-max, .dialog-tools-max { - float: left; width: 1.4em; line-height: 1.4em; text-align: center; @@ -1232,9 +1259,8 @@ html[dir='rtl'] .table-row[data-level='3'] .table-tree { } -.dialog-tools-close:before, .window-tools-close:before { - content: "x"; -} + + @media only screen and (max-width: 500px) { .dialog { diff --git a/src/Data/Repeat.js b/src/Data/Repeat.js index c957132..aebaf7b 100644 --- a/src/Data/Repeat.js +++ b/src/Data/Repeat.js @@ -143,14 +143,12 @@ export default IUI.module(class Repeat extends IUIElement value = []; - //debugger; - await super.setData(value, radix); for (let i = 0; i < value.length; i++) { let el = this._repeatNode.cloneNode(true); - + el.setAttribute(":data", `d[${i}]`); this.list.push(el); try { @@ -171,6 +169,7 @@ export default IUI.module(class Repeat extends IUIElement await IUI.created(el, true); + /* if (el instanceof IUIElement){ // @TODO should check if the element depends on parent or not if (el.dataMap != null) { @@ -194,9 +193,11 @@ export default IUI.module(class Repeat extends IUIElement // data is now the radix await IUI.render(el, el.data, false, value[i]); } + */ } + await super.setData(value, radix); // @TODO: check if this works for event names starting with ":" diff --git a/src/UI/Grid.js b/src/UI/Grid.js index dd5f2e6..154afa9 100644 --- a/src/UI/Grid.js +++ b/src/UI/Grid.js @@ -16,11 +16,18 @@ export default IUI.module(class Grid extends IUIElement { this.windows = []; } - create() { + async create() { for (var i = 0; i < this.children.length; i++) this.add(this.children[i]); } + async updated(){ + if (this.hasAttribute("dynamic")){ + for (var i = 0; i < this.children.length; i++) + this.add(this.children[i]); + } + } + setGridLayout(style) { this.style.grid = style; diff --git a/src/UI/Window.js b/src/UI/Window.js index 1cd2127..85e5657 100644 --- a/src/UI/Window.js +++ b/src/UI/Window.js @@ -8,6 +8,7 @@ export default IUI.module(class IUIWindow extends IUIElement { this._register("resize"); this._register("move"); this._register("close"); + this._register("config"); this._uid = "d:" + Math.random().toString(36).substring(2); @@ -15,6 +16,30 @@ export default IUI.module(class IUIWindow extends IUIElement { static moduleName = "window"; + get closeable(){ + return this.hasAttribute("closeable"); + } + + set closeable(value){ + if (!value) + this.removeAttribute("closeable"); + else + this.setAttribute("closeable", true); + } + + + get configurable(){ + return this.hasAttribute("configurable"); + } + + set configurable(value){ + if (!value) + this.removeAttribute("configurable"); + else + this.setAttribute("configurable", true); + } + + async create() { await super.create(); @@ -73,14 +98,27 @@ export default IUI.module(class IUIWindow extends IUIElement { this._header.appendChild(this._subtitle); this._header.appendChild(this._tools); + if (this.configurable) { + this._config = document.createElement("div"); + this._config.className = this.cssClass + "-tools-config button"; + this._config.addEventListener("click", function () { + self._emit("config"); + }); + this._tools.appendChild(this._config); + } + if (this.closeable) { this._close = document.createElement("div"); this._close.className = this.cssClass + "-tools-close button"; this._close.addEventListener("click", function () { self._emit("close"); }); + this._tools.appendChild(this._close); } + + + //this.addEventListener("mousedown", function (e) { // self.setFocus(true); //});