Create focus mode for windows

resources/sys/finder/finder.css

@@ -13,9 +13,17 @@
 .FinderContent .ToolBar{
     width: 100%;
     height: 20px;
-
+    border-bottom: 1px solid #555555;
-    border-bottom: 1px solid #000000;
+    background-color: #EEEEEE;
 }
+
+.Focused .FinderContent .ToolBar{
+    border-bottom: 1px solid #000000;
+    background-color: #DDDDDD;
+}
+
+
+
 .FinderContent .FinderFileView{
     width: 100%;
     height: 100%;

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;
 }
 

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,8 +25,8 @@
     width: 14px;
     height: 100%;
 
-    background-color: #AAAAAA;
+    background-color: #EEEEEE;
-    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);
+    
     
     /* Inside auto layout */
     flex: none;
@@ -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; */

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,11 +250,7 @@ class WindowsCompositor{
             let startDrag = function(event) {
                 let window = event.target.closest('.WindowFrame')
                 WindowsCompositor.bringWindowToFront(window)
-                let targetClasses = event.target.className.split(' ')
+                if (event.target.classList.contains("DragArea")){
-                if (targetClasses[targetClasses.length - 1] != 'DragArea'){
-                    return
-                }
-                
                     let xPosInit = event.offsetX
                     let yPosInit = event.offsetY
                     let dragWindow = function(event){
@@ -268,7 +265,7 @@ class WindowsCompositor{
                     addEventListener('mousemove', dragWindow)
                     addEventListener('mouseup', stopDrag)
                 }
-
+            }
             WindowsCompositor.windowsLayer.addEventListener('mousedown', startDrag)
         }
     }
@@ -277,7 +274,10 @@ class WindowsCompositor{
      * @param {HTMLElement} window
     */
     static bringWindowToFront(window){ //FIXME
-        if (window != WindowsCompositor.windowsLayer.lastChild ){
+        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)
         }
     }

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 {
+.Focused .ConvexElement {
-    background: #CCCCCC;
-    
     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,6 +104,7 @@
     padding: 0%;
     position: relative;
     top: 1px;
+    visibility: hidden;
     
     background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
     border: 1px solid #222222;
@@ -94,13 +112,16 @@
         -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;

templates/finder/admin-app.tmpl

@@ -1,11 +1,13 @@
 {{ define "finder/admin-app.tmpl" }}
     <div class="TitleBar DragArea">
         <button id="closeWindowButton" class="Button" title="Close Window"></button>
+        
             <div id="Drag" class="VisualDragArea"></div>
             <div class="Lable">
-            ADMIN FINDER
+                Admin Finder
             </div>
             <div id="Drag" class="VisualDragArea"></div>
+        
     </div>
     <div id="ContentBorder" class="ContentBorder AdjectiveElement">
         <div class="FinderContent">

templates/finder/app.tmpl

@@ -1,12 +1,14 @@
 {{ define "finder/app.tmpl" }}
     <div class="TitleBar DragArea">
         <button id="closeWindowButton" class="Button" title="Close Window"></button>
+        <div class="TitleBarTest">
             <div id="Drag" class="VisualDragArea"></div>
             <div class="Lable">
                 Files
             </div>
             <div id="Drag" class="VisualDragArea"></div>
         </div>
+    </div>
     <div class="ToolBar">
         <button id="BackButton">Back</button>
         <button id="HomeButton">Home</button>