diff --git a/resources/sys/finder/finder.css b/resources/sys/finder/finder.css index e8e40bf..1ef1488 100644 --- a/resources/sys/finder/finder.css +++ b/resources/sys/finder/finder.css @@ -13,9 +13,17 @@ .FinderContent .ToolBar{ width: 100%; height: 20px; - - border-bottom: 1px solid #000000; + border-bottom: 1px solid #555555; + background-color: #EEEEEE; } + +.Focused .FinderContent .ToolBar{ + border-bottom: 1px solid #000000; + background-color: #DDDDDD; +} + + + .FinderContent .FinderFileView{ width: 100%; height: 100%; diff --git a/resources/sys/wde/basic-widgets.css b/resources/sys/wde/basic-widgets.css index 9fe177d..a38f7cd 100644 --- a/resources/sys/wde/basic-widgets.css +++ b/resources/sys/wde/basic-widgets.css @@ -1,4 +1,4 @@ -.ContentBorder { /*TODO Delete */ +.ContentBorder { /*TODO Delete, deprecated*/ width: 100%; height: 100%; /* background-color: #DDDDDD; @@ -13,6 +13,8 @@ width: auto; height: auto; + background-color: #DDDDDD; + border: 1px solid #000000; } diff --git a/resources/sys/wde/wde-scrollbar.css b/resources/sys/wde/wde-scrollbar.css index 3ede80c..24eb662 100644 --- a/resources/sys/wde/wde-scrollbar.css +++ b/resources/sys/wde/wde-scrollbar.css @@ -16,7 +16,7 @@ .ScrollbarPlace{ overflow: hidden; - border-left: 1px solid #000000; + border-left: 1px solid #555555; width: 14px; height: 100%; @@ -25,9 +25,9 @@ width: 14px; height: 100%; - background-color: #AAAAAA; - box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.29), inset -2px 0px 0px rgba(255, 255, 255, 0.19), inset 1px 1px 0px rgba(0, 0, 0, 0.14), inset 2px 2px 0px rgba(0, 0, 0, 0.19); - + background-color: #EEEEEE; + + /* Inside auto layout */ flex: none; order: 0; @@ -35,16 +35,32 @@ flex-grow: 1; } +.Focused .ScrollbarPlace{ + border-left: 1px solid #000000; + background-color: #AAAAAA; + box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.29), + inset -2px 0px 0px rgba(255, 255, 255, 0.19), + inset 1px 1px 0px rgba(0, 0, 0, 0.14), + inset 2px 2px 0px rgba(0, 0, 0, 0.19); +} .ScrollBarScrollElement{ position: relative; - + visibility: hidden; width: 14px; height: 31px; + background: #9999FF; - box-shadow: 0px -1px 0px #000000, 0px 1px 0px #000000, 0px 2px 0px rgba(0, 0, 0, 0.13), 0px 3px 0px rgba(0, 0, 0, 0.19), inset 0px 1px 0px rgba(255, 255, 255, 0.5), inset 1px 0px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px rgba(102, 102, 204, 0.91); - + box-shadow: 0px -1px 0px #000000, + 0px 1px 0px #000000, + 0px 2px 0px rgba(0, 0, 0, 0.13), + 0px 3px 0px rgba(0, 0, 0, 0.19), + inset 0px 1px 0px rgba(255, 255, 255, 0.5), + inset 1px 0px 0px rgba(255, 255, 255, 0.5), + inset -1px -1px 0px rgba(102, 102, 204, 0.91); + + /* Auto layout */ display: flex; flex-direction: row; align-items: center; @@ -53,6 +69,10 @@ padding: 0px; } +.Focused .ScrollBarScrollElement{ + visibility: visible; +} + .ScrollBarScrollElementDrag{ pointer-events: none; /* background-color: #0A4C95; */ diff --git a/resources/wde.js b/resources/wde.js index 4a9017c..e1819a5 100644 --- a/resources/wde.js +++ b/resources/wde.js @@ -150,6 +150,7 @@ class WebDesktopEnvironment{ newWindow.style.height = height.toString() + "px" document.body.querySelector('#windows-layer').appendChild(newWindow) + WindowsCompositor.bringWindowToFront(newWindow) return newWindow } } @@ -249,26 +250,22 @@ class WindowsCompositor{ let startDrag = function(event) { let window = event.target.closest('.WindowFrame') WindowsCompositor.bringWindowToFront(window) - let targetClasses = event.target.className.split(' ') - if (targetClasses[targetClasses.length - 1] != 'DragArea'){ - return + if (event.target.classList.contains("DragArea")){ + let xPosInit = event.offsetX + let yPosInit = event.offsetY + let dragWindow = function(event){ + window.style.left = `${event.clientX - xPosInit}px` + window.style.top = `${event.clientY - yPosInit}px` + } + let stopDrag = function(){ + removeEventListener('mousemove', dragWindow) + removeEventListener('mouseup', stopDrag) + } + + addEventListener('mousemove', dragWindow) + addEventListener('mouseup', stopDrag) } - - let xPosInit = event.offsetX - let yPosInit = event.offsetY - let dragWindow = function(event){ - window.style.left = `${event.clientX - xPosInit}px` - window.style.top = `${event.clientY - yPosInit}px` - } - let stopDrag = function(){ - removeEventListener('mousemove', dragWindow) - removeEventListener('mouseup', stopDrag) - } - - addEventListener('mousemove', dragWindow) - addEventListener('mouseup', stopDrag) } - WindowsCompositor.windowsLayer.addEventListener('mousedown', startDrag) } } @@ -277,8 +274,11 @@ class WindowsCompositor{ * @param {HTMLElement} window */ static bringWindowToFront(window){ //FIXME - if (window != WindowsCompositor.windowsLayer.lastChild ){ - WindowsCompositor.windowsLayer.insertBefore(WindowsCompositor.windowsLayer.lastChild, window) + if (!window.classList.contains("Focused")){ + let previousWindow = WindowsCompositor.windowsLayer.lastChild + previousWindow.classList.remove("Focused") + window.classList.add("Focused") + WindowsCompositor.windowsLayer.insertBefore(WindowsCompositor.windowsLayer.lastChild, window) } } diff --git a/resources/wdeUI.css b/resources/wdeUI.css index 8cf3e99..2bcf1a6 100644 --- a/resources/wdeUI.css +++ b/resources/wdeUI.css @@ -10,7 +10,9 @@ position: absolute; - border: 1px solid #000000; + background: #DDDDDD; + border: 1px solid #555555; + /* Inside auto layout */ flex: none; @@ -19,19 +21,31 @@ flex-grow: 1; } +/* TODO Add shadows to windows */ +.WindowFrame.Focused{ + border: 1px solid #000000; + background-color: #CCCCCC; +} + .WindowFrameShadow { + box-shadow: 2px 2px 0px #555555; +} + +.Focused .WindowFrameShadow { box-shadow: 2px 2px 0px #000000; } -.ConvexElement { - background: #CCCCCC; - +.Focused .ConvexElement { box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25), inset -1px -1px 0px rgba(0, 0, 0, 0.27), inset 1px 1px 0px #FFFFFF; } .AdjectiveElement { + border: 1px solid #555555; +} + +.Focused .AdjectiveElement { border: 1px solid #000000; box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25), 1px 1px 0px #FFFFFF; @@ -55,7 +69,7 @@ display: flex; flex-direction: row; align-items: center; - justify-content: space-between; + justify-content: center; gap: 5px; padding: 0px; @@ -67,12 +81,11 @@ flex-grow: 0; } - .WindowFrame .TitleBar .Lable { position: relative; top: 1px; /* font-size: 13px; */ - + color:#777777; pointer-events: none; white-space: nowrap; @@ -80,6 +93,10 @@ letter-spacing: 0.35px; } +.WindowFrame.Focused .TitleBar .Lable { + color:#000000; +} + .WindowFrame .TitleBar .Button { width: 11px; @@ -87,20 +104,24 @@ padding: 0%; position: relative; top: 1px; - + visibility: hidden; + background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%); border: 1px solid #222222; 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 rgba(255, 255, 255, 0.5), inset -1px -1px 0px rgba(0, 0, 0, 0.27); - /* Inside auto layout */ flex: none; order: 0; flex-grow: 0; } +.WindowFrame.Focused .TitleBar .Button { + visibility: visible; +} + .WindowFrame .TitleBar .Button:active { background-color: rgba(0, 0, 0, 0.4); /* Green */ @@ -108,7 +129,7 @@ -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25); } -.WindowFrame .TitleBar .VisualDragArea { +.Focused .VisualDragArea { pointer-events: none; width: 100%; height: 11px; diff --git a/templates/finder/admin-app.tmpl b/templates/finder/admin-app.tmpl index c9a949c..1ca2bc2 100644 --- a/templates/finder/admin-app.tmpl +++ b/templates/finder/admin-app.tmpl @@ -1,11 +1,13 @@ {{ define "finder/admin-app.tmpl" }}
-
-
- ADMIN FINDER -
-
+ +
+
+ Admin Finder +
+
+
diff --git a/templates/finder/app.tmpl b/templates/finder/app.tmpl index 8f01bba..3d4107b 100644 --- a/templates/finder/app.tmpl +++ b/templates/finder/app.tmpl @@ -1,11 +1,13 @@ {{ define "finder/app.tmpl" }}
-
-
- Files +
+
+
+ Files +
+
-