diff --git a/resources/base.css b/resources/base.css index ec8adc4..b7ac7a0 100644 --- a/resources/base.css +++ b/resources/base.css @@ -33,17 +33,7 @@ body{ #WindowsLayer { width: 100%; height: 100%; - position: absolute; -} - - -.Application{ - position: absolute; - /* background-color: antiquewhite; */ - stroke: #000000; - stroke-width: 1px; - stroke-linecap: butt; - stroke-dasharray: 0; + position: fixed; } .Frame{ @@ -81,10 +71,21 @@ body{ white-space: nowrap } +.VisualFrame{ + width: 100%; + height: 100%; + overflow: scroll; + overflow-x: hidden; + + background: #DDDDDD; + border: 1px solid #000000; + box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF, -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25), inset 1px 1px 0px #FFFFFF; +} .ContentFrame{ box-sizing: border-box; - + position: relative; + padding: 10px; /* Auto layout */ display: flex; flex-direction: column; @@ -92,12 +93,10 @@ body{ padding: 12px; gap:16px; - width: 100%; - height: 100%; + width: auto; + height: auto; - background: #DDDDDD; - border: 1px solid #000000; - box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF, -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25), inset 1px 1px 0px #FFFFFF; + /* Inside auto layout */ @@ -105,6 +104,8 @@ body{ order: 0; align-self: stretch; flex-grow: 1; + + /* overflow: scroll; */ } .Personal-properties-bio{ @@ -141,30 +142,28 @@ body{ height: auto; border: 1px solid #888888; box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF; + padding-bottom: 10px; /* Auto layout */ - display: flex; + /* display: flex; flex-direction: column; align-items: center; padding: 0px; - gap:1px; + gap:1px; */ } -.Personal-properties-prop-header{ +.Personal-properties-prop-title{ font-family: "Virtue"; letter-spacing: 0.35px; - /* width: 50px; */ position:relative; display: inline-block; max-width: 100%; background-color: #DDDDDD; - /* left: 12px; */ - right: 39%; + left: 12px; top: -9px; - margin-left: 2px; } .Personal-properties-prop-content{ @@ -200,6 +199,16 @@ body{ /* font-weight: bold; */ } + +.Personal-properties-prop-key-comments{ + /* color: rgb(129, 129, 129); TODO*/ + color: #646464; + font-size: 9px; + font-style: italic; + text-align: end; + white-space:normal; + /* filter: drop-shadow(-.5px -.5px 0px #616161); */ +} .Personal-properties-prop-values{ width: 55%; display: flex; diff --git a/resources/personal-properties/personal-properties.js b/resources/personal-properties/personal-properties.js index ae0891a..4f86d82 100644 --- a/resources/personal-properties/personal-properties.js +++ b/resources/personal-properties/personal-properties.js @@ -17,7 +17,7 @@ class PersonalProperties{ fetch("http://localhost:8080/application/personal-properties/render") //TODO Move to wde func .then((response) => response.text()) .then((html) => { - let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId) + let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 350, 750) //TODO Get ~70% of user screen height newWindow.innerHTML = html @@ -25,8 +25,10 @@ class PersonalProperties{ // console.log("keeek") // } - let closeButton = newWindow.children[0].children[0].children[0].children[0] - // closeButton.onclick = this.CloseWindow("test") + // console.log(newWindow.children[0].children[0]) + let closeButton = newWindow.children[0].children[0] + // console.log(closeButton) + // // closeButton.onclick = this.CloseWindow("test") closeButton.addEventListener('click', function (params) { WebDesktopEnvironment.CloseWindow(newWindow) }) diff --git a/resources/wde.js b/resources/wde.js index 926280f..5489367 100644 --- a/resources/wde.js +++ b/resources/wde.js @@ -42,16 +42,17 @@ class WebDesktopEnvironment{ /** * @param {string} appId * @param {string} windowName + * @param {number} width + * @param {number} height * @returns {HTMLElement} */ - static CreateNewWindow(appId, windowName) { + static CreateNewWindow(appId, windowName, width, height) { let appElem = document.getElementById(`application-${appId}`) - - let newWindow = document.createElement("window") - newWindow.style.display = "inline" //TODO Make multi-window support + let newWindow = document.createElement("div") + newWindow.setAttribute("class", "StandartApplicationWindow") newWindow.style.position = "absolute" - newWindow.style.width = "350px" - newWindow.styleheight = "350px" + newWindow.style.width = width.toString() + "px" + newWindow.style.height = height.toString() + "px" return appElem.appendChild(newWindow) } @@ -137,8 +138,8 @@ class WindowsCompositor{ switch (true) { case event.target.className == "WindowFrameTopBar": - this.movingElement = event.target.parentElement.parentElement.parentElement - console.log(this.movingElement) + this.movingElement = event.target.parentElement + // console.log(this.movingElement) break; default: break; @@ -150,9 +151,10 @@ class WindowsCompositor{ * @param {number} posX * @param {number} posY */ - dragElement(element, posX, posY) { - element.style.left = posX + "px"; - element.style.top = posY + "px"; + dragElement(element, posX, posY) { //TODO + console.log() + element.style.left = (posX - element.clientWidth*0.5)+ "px"; + element.style.top = (posY - element.children[0].clientHeight*0.5) + "px"; } } diff --git a/resources/wdeUI.css b/resources/wdeUI.css index 81732a1..f9f8fe1 100644 --- a/resources/wdeUI.css +++ b/resources/wdeUI.css @@ -1,3 +1,24 @@ +.StandartApplicationWindow{ + width: 100%; + min-height: 200px; + + background-color: #CCCCCC; + + border: 1px solid #000000; + box-shadow: 1px 1px 0px #000, + inset -1px -1px 0px rgba(0, 0, 0, 0.27), + inset 1px 1px 0px #FFFFFF; + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 4px; + /* padding-bottom: 50px; */ + gap:4px; + + overflow: hidden; +} + .WindowFrameTopBarButton{ width: 11px; height: 11px; @@ -9,7 +30,7 @@ -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25), inset 1px 1px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px rgba(0, 0, 0, 0.27); - + /* Inside auto layout */ flex: none; order: 0; @@ -17,13 +38,9 @@ } .WindowFrameTopBar{ - - /* background-color: aqua; */ width: 100%; height: 13px; - - display: flex; flex-direction: row; align-items: center; diff --git a/templates/base/index.tmpl b/templates/base/index.tmpl index e67ee1d..d8c90a9 100644 --- a/templates/base/index.tmpl +++ b/templates/base/index.tmpl @@ -1,5 +1,6 @@ +