finder rework

front/src/apps/finder/finder-window.js

@@ -10,7 +10,7 @@ export default class FinderWindow{
     /** @type {Finder} */
     #finder
     /**
-     * @deprecated
+     * @deprecated move to this.#finder.WDE()
      * @type {AbstractWebDesktopEnvironment} 
      */
     #wde
@@ -31,7 +31,7 @@ export default class FinderWindow{
      * @returns 
      */
     async Init(finder, args, runContext){
-        console.log(args)
+        // console.log(args)
         this.#finder = finder
         if (runContext.isMobile){
             console.log("Mobile Finder!")
@@ -88,7 +88,7 @@ export default class FinderWindow{
         let newWindow = this.#wde.Decorat.CreateNewWindow(this.#appId, 500, 350 )
         newWindow.innerHTML = html
         
-        // console.log(this.#wde)
+        console.log(newWindow.querySelector(".FileTileView"))
         
         this.fileView = new this.#wde.FileView(
             newWindow.querySelector(".FileTileView"),
@@ -98,19 +98,19 @@ export default class FinderWindow{
             () => { this.ReRenderDir() },
             this.#wde)
             
-            newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
+            // newWindow.querySelector("#closeWindowButton").addEventListener('click', () => {
-                this.#wde.Decorat.CloseWindow(newWindow)
+            //     this.#wde.Decorat.CloseWindow(newWindow)
-            })
+            // })
             
-            newWindow.querySelector("#RootButton").addEventListener('click', () =>{
+            // newWindow.querySelector("#RootButton").addEventListener('click', () =>{
-                this.RenderDir('/')
+            //     this.RenderDir('/')
-            })
+            // })
             
-            newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
+            // newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
-                this.RenderDir('/home/user')
+            //     this.RenderDir('/home/user')
-            })
+            // })
             
-            let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
+            // let scrollBar = new this.#wde.ScrollBar(newWindow.querySelector(".scrollbar-place"), newWindow.querySelector(".FileTileView"))
             
             this.windowElem = newWindow
             this.RenderDir(args[0])

front/src/apps/finder/finder.less

@@ -1,34 +1,34 @@
-.FinderContent {
+@import "../../theme.less";
+@import "../../wde/effects.less";
+
+.finder-content {
     width: 100%;
     height: 100%;
 
     /* Auto layout */
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: start;
     align-items: flex-start;
     padding: 0px;
 }
 
-.FinderContent .ToolBar{
+.finder-content > .tool-bar{
     width: 100%;
-    height: 20px;
+    min-height: 20px;
-    border-bottom: 1px solid #555555;
+    border-bottom: @eff-border-grey;
-    background-color: #EEEEEE;
 }
 
-.Focused .FinderContent .ToolBar{
+.window-frame.Focused .tool-bar{
     border-bottom: 1px solid #000000;
-    background-color: #DDDDDD;
+    box-shadow: @eff-box-shadow-convex;
 }
 
-
+.finder-content > .file-view-container{
-
-.FinderContent .FinderFileView{
     width: 100%;
     height: 100%;
 
-    background-color: #FFFFFF;
+    // background-color: #FFFFFF;
 
     /* Auto layout */
     display: flex;

front/src/desktop.less

@@ -1,8 +1,11 @@
 @import "./wde/primitives.less";
 @import "./wde/widgets/file-view/file-view.less";
-@import "./wde/legacy-ui.less";
+@import "./wde/widgets/scrollbar/scrollbar.less";
+// @import "./wde/legacy-ui.less";
 @import "./wde/widgets/basic-widgets.less";
 @import "./theme.less";
+@import "./wde/window-frame.less";
+@import "./wde/widgets/title-bar/title-bar.less";
 
 // @font-face{
 //     font-family: "Virtue";
@@ -26,6 +29,8 @@
 .Click {
     pointer-events: all;
 }
+.DragArea
+
 *{
     font-family: Verdana, Geneva, sans-serif;
     font-size: 11px;
@@ -39,12 +44,14 @@
 }
 
 body{
-    zoom: var(--zoom);
+    // zoom: var(--zoom);
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0px;
 
+    font-size: 11px;
+
     /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */

front/src/src/apps/wde/widgets/basic-widgets.less

@@ -1,12 +1,12 @@
-.ContentBorder { /*TODO Delete, deprecated*/
+// .ContentBorder { /*TODO Delete, deprecated*/
-    width: 100%;
+//     width: 100%;
-    height: 100%;
+//     height: 100%;
-    /* background-color: #DDDDDD;
+//     /* background-color: #DDDDDD;
-    border: 1px solid #000000; */
+//     border: 1px solid #000000; */
     
-    overflow: hidden;
+//     overflow: hidden;
-    overflow-x: hidden;
+//     overflow-x: hidden;
-}
+// }
 
 .ContextMenu {
     position: absolute;

front/src/theme.less

@@ -1,2 +1,10 @@
 @col-ceil: #9999CC;
 @col-argent: #C0C0C0;
+@col-chinese-silver: #CCCCCC;
+@col-gainsboro: #DDDDDD;
+@col-davys-grey: #555555;
+@col-grey: #808080;
+@col-bright-grey: #EEEEEE;
+@col-black: #000000;
+@col-white: #FFFFFF;
+@col-raisin-black: #222222;

front/src/wde/application.js

@@ -17,7 +17,6 @@ export default class WDEApplication{
         // console.log(wde)
         this.AppId = AppId //TODO: Validate
         this.AppManifest = manifest
-        console.log("SUKA", this.AppId, AppId)
     }
 
     /** @returns {AbstractWebDesktopEnvironment} */

front/src/wde/decorat/desktop-decorat.js

@@ -6,7 +6,7 @@ export default class DesktopDecorat{
         this.#windowsLayer = document.body.querySelector('#windows-layer') //TODO Validate if null
 
         let startDrag = (event) => {
-            let window = event.target.closest('.WindowFrame')
+            let window = event.target.closest('.window-frame')
             this.bringWindowToFront(window)
             if (event.target.classList.contains("DragArea")){
                 let xPosInit = event.offsetX
@@ -56,7 +56,8 @@ export default class DesktopDecorat{
         let newWindow = document.createElement("div")
         newWindow.setAttribute('appid', appId)
 
-        newWindow.setAttribute("class", "WindowFrame ConvexElement")
+        // newWindow.setAttribute("class", "WindowFrame ConvexElement")
+        newWindow.setAttribute("class", "window-frame")
         newWindow.setAttribute("windowId", this.#makeid(4)) //TODO:
 
         newWindow.style.width = width.toString() + "px"

front/src/wde/effects.less

@@ -0,0 +1,44 @@
+.adjective{
+    border: 1px solid #555555;
+}
+
+.convex{
+    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;
+}
+
+.border{
+    .grey{
+        border: 1px solid @col-davys-grey;
+    }
+    .black{
+        border: 1px solid @col-black;
+    }
+    
+}
+
+.shadow{ //FIXME: shadow must be 2px offset from windows borders
+    .grey{
+        box-shadow: 1px 1px 0px @col-davys-grey;
+    }
+    .black{
+        box-shadow: 1px 1px 0px @col-black;
+    }
+}
+
+
+
+.rows-fill-shadowed{
+    background: linear-gradient(transparent 0%, white 0%, white 50%, transparent 50%);
+    background-size: 2px 2px;
+    filter: drop-shadow(1px 1px 0px #777777);
+}
+@eff-border-black: 1px solid @col-black;
+@eff-border-grey: 1px solid @col-davys-grey;
+
+@eff-box-shadow-grey: 1px 1px 0px @col-davys-grey;
+@eff-box-shadow-black: 1px 1px 0px @col-black;
+
+@eff-box-shadow-convex: inset -1px -1px 0px rgba(0, 0, 0, 0.27),inset 1px 1px 0px @col-white;
+@eff-box-shadow-adjective: -1px -1px 0px rgba(0, 0, 0, 0.25), 1px 1px 0px #FFFFFF;

front/src/wde/legacy-ui.less

@@ -1,25 +1,25 @@
-.WindowFrame {
+// .WindowFrame {
-    /* Auto layout */
+//     /* Auto layout */
-    display: flex;
+//     display: flex;
-    flex-direction: column;
+//     flex-direction: column;
-    align-items: flex-start;
+//     align-items: flex-start;
-    padding: 4px;
+//     padding: 4px;
-    padding-top: 2px;
+//     padding-top: 2px;
-    padding-right: 6px;
+//     padding-right: 6px;
-    gap: 4px;
+//     gap: 4px;
 
-    position: absolute;
+//     position: absolute;
 
-    background: #DDDDDD;
+//     background: #DDDDDD;
-    border: 1px solid #555555;
+//     border: 1px solid #555555;
     
 
-    /* Inside auto layout */
+//     /* Inside auto layout */
-    flex: none;
+//     flex: none;
-    order: 1;
+//     order: 1;
-    align-self: stretch;
+//     align-self: stretch;
-    flex-grow: 1;
+//     flex-grow: 1;
-}
+// }
 
 /* TODO Add shadows to windows */
 .WindowFrame.Focused{

front/src/wde/primitives.less

@@ -1,3 +1,11 @@
-.WdePrimitives.AdjectiveElement {
+.WdePrimitives {
+
+    .adjective{
         border: 1px solid #555555;
     }
+
+    .black-border{
+        border: 1px solid #000000;
+    }
+    
+}

front/src/wde/wde-desktop.js

@@ -1,5 +1,5 @@
 import DesktopDecorat from "./decorat/desktop-decorat.js";
-import WDEScrollBar from "./scrollbar/scrollbar.js";
+import WDEScrollBar from "./widgets/scrollbar/scrollbar.js";
 import WebFS from "../web-fs/web-fs.js";
 import WDEApplication from "./application.js";
 import WDEFileView from "./widgets/file-view/file-view.js";
@@ -35,7 +35,8 @@ export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment
     }
 
     async loadWDE(){
-        await this.Open("/Applications/Finder.app", ["/","--desktop", "desktop-layer"])
+        // await this.Open("/Applications/Finder.app", ["/","--desktop", "desktop-layer"])
+        await this.Open("/Applications/Finder.app", ["/", "desktop-layer"])
         return
         
         let autoStart = document.body.querySelector("wde-autostart")

front/src/wde/widgets/file-view/file-view.js

@@ -19,7 +19,7 @@ export default class WDEFileView{
         this.parentElem = fileViewElem
 
         fileViewElem.addEventListener('click', (event) => {
-            if (event.target.classList[0] == 'FileTileView')
+            if (event.target.classList[0] == 'file-view')
             {   
                 this.DeselectAll()
                 return

front/src/wde/widgets/file-view/file-view.less

@@ -1,7 +1,10 @@
+@import "../../../theme.less";
 .FileTileView{
     width: 100%;
     height: 100%;
 
+    background-color: @col-white;
+
     
     
     /* FIXME Bug, on desktop mode top ~10 pixel are not active, like margin:10px */

front/src/wde/widgets/scrollbar/scrollbar.js

@@ -5,10 +5,10 @@ export default class WdeScrollBar{
     */
     constructor(scrollBarContainer, content){
         let nonNativeScroll = false
-        // console.log(scrollBarContainer, content)
+        console.log(scrollBarContainer, content)
         // let handler = scrollBarContainer.children[0]
         //TODO On scroll move focus on window?
-        let handler = scrollBarContainer.querySelector(".ScrollBarScrollElement") //TODO Refactor classes
+        let handler = scrollBarContainer.querySelector(".scroll-element") //TODO Refactor classes
         // console.log(handler)
     
         handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'

front/src/wde/widgets/scrollbar/scrollbar.less

@@ -1,22 +1,22 @@
-.scroller {
+// .scroller {
-    overflow-y: scroll;
+//     overflow-y: scroll;
-    scrollbar-color: #0A4C95 #C2D2E4;
+//     scrollbar-color: #0A4C95 #C2D2E4;
-    border-radius: 0px;
+//     border-radius: 0px;
-  }
+//   }
 
-.scroll_content {
+// .scroll-content {
-    position: relative;
+//     position: relative;
-    width: 400px;
+//     width: 400px;
-    height: 414px;
+//     height: 414px;
-    top: -17px;
+//     top: -17px;
-    padding: 20px 10px 20px 10px;
+//     padding: 20px 10px 20px 10px;
-    overflow-y: auto;
+//     overflow-y: auto;
-}
+// }
 
-.ScrollbarPlace{
+.scrollbar-place{
     overflow: hidden;
 
-    border-left: 1px solid #555555;
+    border-left: @eff-border-grey;
     width: 14px;
     height: 100%;
 
@@ -25,7 +25,7 @@
     width: 14px;
     height: 100%;
 
-    background-color: #EEEEEE;
+    // background-color: #EEEEEE;
     
     
     /* Inside auto layout */
@@ -35,8 +35,8 @@
     flex-grow: 1;
 }
 
-.Focused .ScrollbarPlace{
+.Focused .active .scrollbar-place{
-    border-left: 1px solid #000000;
+    border-left: @eff-border-black;
     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),
@@ -44,7 +44,7 @@
                 inset 2px 2px 0px rgba(0, 0, 0, 0.19);
 }
 
-.ScrollBarScrollElement{
+.scroll-element{
     position: relative;
     visibility: hidden;
     width: 14px;
@@ -69,11 +69,11 @@
     padding: 0px;
 }
 
-.Focused .ScrollBarScrollElement{
+.Focused .active .scroll-element{
     visibility: visible;
 }
 
-.ScrollBarScrollElementDrag{
+.drag-element{
     pointer-events: none;
     /* background-color: #0A4C95; */
     width: 7px;

front/src/wde/widgets/title-bar/title-bar.less

@@ -0,0 +1,66 @@
+@import "../../effects.less";
+@import "../../../theme.less";
+
+.title-bar{
+    width: 100%;
+    height: 13px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding: 0px;
+
+
+    /* Inside auto layout */
+    flex: none;
+    order: 0;
+    align-self: stretch;
+    flex-grow: 0;
+}
+
+.title-bar .lable{
+    position: relative;
+    top: 1px;
+    /* font-size: 13px; */
+    color: @col-grey;
+    pointer-events: none;
+    white-space: nowrap;
+
+    font-family: "Virtue";
+    letter-spacing: 0.35px;
+}
+
+.window-frame.Focused .title-bar .visual-drag-area{
+    &:extend(.rows-fill-shadowed);
+    pointer-events: none;
+    width: 100%;
+    height: 11px;
+}
+
+
+
+.title-bar .button{
+    width: 11px;
+    height: 11px;
+    padding: 0%;
+    position: relative;
+    top: 1px;
+    visibility: hidden;
+    
+    background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
+    border: 1px solid @col-raisin-black;
+    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;
+}
+
+.Focused .title-bar .button{
+    visibility:visible;
+}

front/src/wde/window-frame.less

@@ -0,0 +1,50 @@
+@import "../theme.less";
+@import "./effects.less";
+
+.window-frame{      
+    position: absolute;
+
+    border: @eff-border-grey;
+    box-shadow: @eff-box-shadow-grey;
+    position: absolute;
+    background-color: @col-gainsboro;
+    
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 4px;
+    padding-top: 2px;
+    padding-right: 6px;
+    gap: 4px;
+
+    /* Inside auto layout */
+    flex: none;
+    order: 1;
+    align-self: stretch;
+    flex-grow: 1;
+}
+
+
+.window-frame.Focused{
+    background-color: @col-chinese-silver;
+    border: @eff-border-black;
+    box-shadow: @eff-box-shadow-grey, @eff-box-shadow-convex;
+}
+
+
+.content-border{
+    border: @eff-border-grey;
+    width: 100%;
+    height: 100%;
+    background-color: @col-bright-grey;
+    
+    overflow: hidden;
+    overflow-x: hidden;
+}
+
+.Focused .content-border{
+    background-color: @col-gainsboro;
+    border: @eff-border-black;
+    box-shadow: @eff-box-shadow-adjective;
+}

templates/finder/admin-app.html

@@ -0,0 +1,32 @@
+{{ define "finder/admin-app.tmpl" }}
+    <div class="title-bar DragArea">
+        <button id="closeWindowButton" class="button" title="Close Window"></button>
+        
+            <div id="Drag" class="visual-drag-area"></div>
+            <div class="lable">
+                Admin Finder
+            </div>
+            <div id="Drag" class="visual-drag-area"></div>
+        
+    </div>
+    <div id="ContentBorder" class="content-border AdjectiveElement">
+        <div class="finder-content">
+         
+            <div class="tool-bar">
+                <!-- <button id="BackButton">Back</button>
+                <button id="UpButton">Up</button>
+                <button id="RootButton">/</button>
+                <button id="HomeButton">Home</button>
+                <div class="AddressBar" contentEditable="true">You Favorite Movie</div> -->
+            </div>
+            <div class="file-view-container">
+                <div class="FileTileView">
+
+                </div>
+                {{template "wde-widgets/scrollbar.tmpl" .}}
+            </div>
+        </div>
+    </div>
+{{ end }}
+
+				

templates/finder/admin-app.tmpl

@@ -1,32 +0,0 @@
-{{ 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
-            </div>
-            <div id="Drag" class="VisualDragArea"></div>
-        
-    </div>
-    <div id="ContentBorder" class="ContentBorder AdjectiveElement">
-        <div class="FinderContent">
-            <!-- TODO Fix ConvexElement  -->
-            <div class="ToolBar ConvexElement">
-                <button id="BackButton">Back</button>
-                <button id="UpButton">Up</button>
-                <button id="RootButton">/</button>
-                <button id="HomeButton">Home</button>
-                <div class="AddressBar" contentEditable="true">You Favorite Movie</div>
-            </div>
-            <div class="FinderFileView">
-                <div class="FileTileView">
-
-                </div>
-                {{template "wde-widgets/scrollbar.tmpl" .}}
-            </div>
-        </div>
-    </div>
-{{ end }}
-
-				

templates/finder/app.html

@@ -10,8 +10,7 @@
         
     </div>
     <div id="ContentBorder" class="ContentBorder AdjectiveElement">
-        <div class="FinderContent">
+        <!-- <div class="FinderContent">
-            <!-- TODO Fix ConvexElement  -->
             <div class="ToolBar ConvexElement">
                Folder info
             </div>
@@ -20,7 +19,7 @@
                 </div>
                 {{template "wde-widgets/scrollbar.tmpl" .}}
             </div>
-        </div>
+        </div> -->
     </div>
 {{ end }}
 

templates/wde-widgets/scrollbar.html

@@ -0,0 +1,8 @@
+{{ define "wde-widgets/scrollbar.tmpl" }}
+    <div class="scrollbar-place">
+        <div class="scroll-element">
+            <div class="drag-element">	
+            </div>
+        </div>
+    </div>
+{{ end }}

templates/wde-widgets/scrollbar.tmpl

@@ -1,8 +0,0 @@
-{{ define "wde-widgets/scrollbar.tmpl" }}
-    <div class="ScrollbarPlace">
-        <div class="ScrollBarScrollElement">
-            <div class="ScrollBarScrollElementDrag">	
-            </div>
-        </div>
-    </div>
-{{ end }}