main.go

@@ -90,12 +90,7 @@ func main() {
 				ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", persPropsApp.Render())
 			})
 		}
-		finderAppRoute := app.Group("finder")
+
-		{
-			finderAppRoute.GET("render", func(ctx *gin.Context) {
-				ctx.HTML(http.StatusOK, "finder/app.tmpl", finderApp.Render())
-			})
-		}
 	}
 	router.GET("/test", func(ctx *gin.Context) {
 		ctx.HTML(200, "kek/kek.tmpl", gin.H{})

resources/base.css

@@ -8,12 +8,7 @@
     src:url("./virtue.ttf")
 }
 
-.NoClick {
+
-    pointer-events: none;
- }
-.Click {
-    pointer-events: all;
-}
 *{
     font-family: Verdana, Geneva, sans-serif;
     font-size: 11px;
@@ -64,7 +59,8 @@ body{
     gap:4px;
 }
 
-/* .WindowFrameTopBar{
+.WindowFrameTopBar{
+    /* background-color: aqua; */
     width: 100%;
     height: 13px;
 
@@ -74,7 +70,7 @@ body{
     justify-content: space-between;
     gap: 5px;
     padding: 0px;
-} */
+}
 
 
 

resources/sys/apps/finder/app.js

@@ -1,39 +1,40 @@
+
+
 class Finder{
     appId = "finder"
     /**
     * @param {HTMLElement} appElem
     */
     constructor(appElem){
-        this.appElem = appElem
+        this.appElem = appElem        
     }
 
-    /**
+    Init(){
-    * @param {string} path
-    */
-    NewWindow(path){
         console.log("Init")
-        fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func. Or Not?
+        fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func
         .then((response) => response.text())
         .then((html) => {
-            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 500, 400 )
+            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Finder", 600, 500) 
-
-           
             
             newWindow.innerHTML = html
-            console.log(newWindow.children[1].children[0])
-            let fileView = new FileView("/kek", newWindow.children[1].children[0])
-            let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])
 
             let closeButton = newWindow.children[0].children[0]
+
             closeButton.addEventListener('click', function (params) {
                 WebDesktopEnvironment.CloseWindow(newWindow)
             })
         })
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);
-        })
+        });
-
-
-
     }
+
+    CloseWindow(id){
+        console.log(id+"Close")
+    }
+    
 }
+
+function reply_click(){
+    console.log("QQQQQQQQQQQQQQQQQQQ")
+}

resources/sys/wde/file-view.js

@@ -1,42 +0,0 @@
-class FileView{
-    path = ""
-    /**
-    * @param {string} path
-    * @param {HTMLElement} fileViewElem
-    */
-    constructor(path, fileViewElem){
-        this.path = path
-
-        this.openFolder(path, fileViewElem)
-
-        // let scrollDiv = fileViewElem.children[1]
-        // console.log(scrollDiv)
-        // let scrollBar = new WdeScrollBar(fileViewElem.children[1].children[0], fileViewElem.children[0])
-
-        fileViewElem.addEventListener('click', (event) => {
-            this.click(event)
-        })
-    }
-    
-    /**
-    * @param {event} event
-    */
-    click(){
-        console.log(event.target)
-    }
-
-    /** Get html of folder by path
-    * @param {string} path
-    * @param {HTMLElement} parentElem
-    */
-    openFolder(path, parentElem){
-        console.log(`${window.location.origin}/system/wde/widgets/file-tile-view?path=${path}`)
-        fetch(`${window.location.origin}/system/wde/widgets/file-tile-view?path=${path}`) //TODO Move to wde func. Or Not?
-        .then((response) => response.text())
-        .then((html) => {
-            parentElem.innerHTML = html
-        }).catch((error) => {
-            WebDesktopEnvironment.Alert(error);
-        })
-    }
-}

resources/sys/wde/wde-scrollbar.js

@@ -1,12 +1,10 @@
 class WdeScrollBar{
     /**
-    * @param {HTMLElement} scrollBarContainer
+    * @param {HTMLElement} handler
     * @param {HTMLElement} content
     */
-    constructor(scrollBarContainer, content){
+    constructor(handler, content){
         let nonNativeScroll = false
-        console.log(scrollBarContainer)
-        let handler = scrollBarContainer.children[0]
     
         handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px'
     

resources/wde.js

@@ -12,8 +12,8 @@ class WebDesktopEnvironment{
         .then((response) => response.text())
         .then((html) => {
             WebDesktopEnvironment.SetBasicWindow(html)
-            // let app = this.loadApp("personal-properties")
+            let app = this.loadApp("personal-properties")
-            let finder = this.loadApp("finder")
+            // let finder = this.loadApp("finder")
         })
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);
@@ -36,17 +36,8 @@ class WebDesktopEnvironment{
         script.setAttribute("async", "false")
         appElem.appendChild(script)
         script.addEventListener("load", function () {
-             newApp
+            let newApp = new PersonalProperties(appElem)
-            switch (appId) {
+            newApp.Init()
-                case "finder":
-                    let newApp = new Finder(appElem)
-                    newApp.NewWindow()
-                    break;
-            
-                default:
-                    break;
-            }
-                  
         }, false)
     }
 
@@ -166,3 +157,4 @@ class WindowsCompositor{
         element.style.top = (posY - element.children[0].clientHeight*0.5) + "px";
     }
 }
+

resources/wdeUI.css

@@ -4,7 +4,6 @@
     flex-direction: column;
     align-items: flex-start;
     padding: 4px;
-    padding-top: 2px;
     padding-right: 6px;
     gap: 4px;
 
@@ -19,6 +18,24 @@
     order: 1;
     align-self: stretch;
     flex-grow: 1;
+    /* width: 100%;
+    
+
+    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;
+    
+    gap:4px;
+
+    overflow: hidden; */
 }
 
 .ContentBorder {
@@ -47,8 +64,6 @@
     width: 11px;
     height: 11px;
     padding: 0%;
-    position: relative;
-    top: 1px;
 
     background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
     border: 1px solid #222222;
@@ -74,7 +89,6 @@
     gap: 5px;
     padding: 0px;
 
-
     /* Inside auto layout */
     flex: none;
     order: 0;
@@ -85,7 +99,6 @@
 .WindowFrameTopBar .WindowFrameTitle{
     position: relative;
     top:1px;
-    /* font-size: 13px; */
 
     pointer-events: none;
     white-space: nowrap;
@@ -106,12 +119,30 @@
 .WindowDragArea{
     pointer-events: none;
     width: 100%;
-    height: 11px;
+    height: 100%;
     background: linear-gradient(transparent 0%,white 0%, white 50%, transparent 50%);
     background-size: 2px 2px;
     filter: drop-shadow(1px 1px 0px #777777);
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 .scroller {
     overflow-y: scroll;
     scrollbar-color: #0A4C95 #C2D2E4;
@@ -179,50 +210,4 @@
 
     /* TODO white pixels in rows start */
     filter: drop-shadow(1px 1px 0px #333399);
-}
-
-
-.FileTileView{
-    width: 100%;
-    height: auto;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 50px;
-    row-gap: 20px;
-    padding: 15px;
-    flex-wrap: wrap;
-    align-content: flex-start;
-
-    overflow: scroll;
-    /* overflow-x: hidden; */
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-}
-
-.FileTileView::-webkit-scrollbar { /* WebKit */
-    width: 0;
-    height: 0;
-}
-
-.FileTile{
-    width: 50px; 
-    height: 50px; 
-    /* Auto layout */
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 2px;
-    padding: 0px;
-    flex-wrap: nowrap;
-}
-
-.FileTileIcon{
-    width: 32px; 
-    height: 32px; 
-    background-image: url("sys/wde/icons/folder.png");
 }

routewde/wde.go

@@ -2,7 +2,6 @@ package routewde
 
 import (
 	"net/http"
-	"personalwebsite/webfilesystem"
 
 	"github.com/gin-gonic/gin"
 )
@@ -11,16 +10,4 @@ func Route(route *gin.RouterGroup) {
 	route.GET("/getbasicwindow", func(ctx *gin.Context) {
 		ctx.HTML(http.StatusOK, "basic-window.html", nil)
 	})
-
-	widgets := route.Group("widgets")
-	{
-		widgets.GET("/file-tile-view", func(ctx *gin.Context) {
-			fs := webfilesystem.WebFileSystem{}
-			list := fs.List()
-			ctx.HTML(http.StatusOK, "wde-widgets/file-tile-view.tmpl", gin.H{
-				"Name":  "Greg Brzezinski",
-				"Files": list,
-			})
-		})
-	}
 }

templates/about-me/app.tmpl

@@ -1,20 +0,0 @@
-{{ define "about-me/app.tmpl" }}
-
-   <div class="StandartWindowFrame">
-        <div>
-            <div class="StandartWindowFrameTopBar">
-                <button id="closeWindowButton" class="StandartWindowFrameTopBarButton" title="Close Window"></button>
-                <div id="Drag" class="WindowDragArea"></div>
-                <div class="StandartWindowFrameTitle">
-                    About me
-                </div>
-                <div id="Drag" class="WindowDragArea"></div>
-            </div>
-            <div class="ContentBorder">
-                <div class="ScrollContent">
-                    TEST CONTENT
-                </div>
-                {{template "wde-widgets/scrollbar.tmpl" .}}
-        </div>
-   </div>
-{{ end }}

templates/base/index.tmpl

@@ -7,7 +7,6 @@
         <link rel="stylesheet" href="/res/sys/wde/simple-scrollbar.css">
         <link rel="stylesheet" href="/res/sys/personal-properties/personal-properies.css">
         <script src="/res/sys/wde/wde-scrollbar.js"></script>
-        <script src="/res/sys/wde/file-view.js"></script>
         <script src="res/wde.js"></script>
         <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
         <!-- <script src="res/decorat.js"></script> -->

templates/finder/app.tmpl

@@ -1,18 +1,5 @@
 {{ define "finder/app.tmpl" }}
-    <div id="TestWindowHeader" class="WindowFrameTopBar">
+    Test Finder
-        <button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
-        <div id="Drag" class="WindowDragArea"></div>
-        <div class="WindowFrameTitle">
-            Files
-        </div>
-        <div id="Drag" class="WindowDragArea"></div>
-    </div>
-    <div class="ContentBorder">
-        <div class="FileTileView">
-
-        </div>
-        {{template "wde-widgets/scrollbar.tmpl" .}}
-    </div>
 {{ end }}
 
 				

templates/personal-properties/app.tmpl

@@ -49,8 +49,65 @@
 						{{ end }}
 				</div>
 			</div>
-			{{template "wde-widgets/scrollbar.tmpl" .}}
+			<div class="ScrollbarPlace">
+				<div class="ScrollBarScrollElement">
+					<div class="ScrollBarScrollElementDrag">	
+					</div>
+				</div>
+			</div>
+
+			<!-- <div class="TestContent" style="width: 100%; height: auto; background-color: aquamarine;">AAAAAAAAAAAAAA</div>
+				<div id="ContentFrame " class="ContentFrame">
+					<div class="Personal-properties-bio">
+						<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" alt="My Photo" style="width: 48px;height: 48px;">
+						<div class="Personal-properties-textbio">
+							<div>{{ .Name }}</div>
+							<div>{{ .BasicBio }}</div>
+						</div>
+					</div> 
+					<div id="Test content" style="width: 100%; height: 1000px; background-color: aqua;">
+
+					</div>
+					 {{ range $propIsland := .allprops }}
+						<div id="prop" class="Personal-properties-prop">
+							<div class="Personal-properties-prop-title">
+								{{$propIsland.Header}}:
+							</div>
+							<div class="Personal-properties-prop-content">
+								{{range $prop := $propIsland.Props}}
+								<div class="Personal-properties-prop-row">
+									<div class="Personal-properties-prop-key">
+										{{$prop.Key}}:
+										{{ range $value := $prop.KeyComments }}
+										<div class="Personal-properties-prop-key-comments">    
+											{{ $value }} 
+										</div>
+										{{ end }}
+									</div>
+									<div class="Personal-properties-prop-values">
+										{{ range $value := $prop.Values }}
+										<div class="Personal-properties-prop-value">    
+											{{ $value }} 
+										</div>
+										{{ end }}
+									</div>
+								</div>
+							{{ end }}
+							</div>
+						</div>  
+
+					
+					{{ end }}
+				</div>
+				<div class="ScrollbarPlace">
+					<div class="ScrollBarScrollElement">
+						<div class="ScrollBarScrollElementDrag">	
+						</div>
+					</div>
+				</div> -->
 		</div>
+    <!-- </div> -->
+	
 {{ end }}
 
 				

templates/wde-widgets/file-tile-view.tmpl

@@ -1,8 +0,0 @@
-{{ define "wde-widgets/file-tile-view.tmpl" }}
-        {{ range $fileTile := .Files }}
-            <div class="FileTile">
-                <div class="FileTileIcon NoClick"></div>
-                <div class="FileTileTitle NoClick">{{ $fileTile.FileName }}</div>
-            </div>  
-        {{ end }}
-{{ end }}

templates/wde-widgets/file-tile.tmpl

@@ -1,6 +0,0 @@
-{{ define "wde-widgets/file-tile.tmpl" }}
-    <div class="FileTile">
-        <div class="FileTileIcon"></div>
-        <div class="FileTileTitle">{{ .Name }}</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 }}

webfilesystem/webfilesystem.go

@@ -1,17 +0,0 @@
-package webfilesystem
-
-type WebFileSystem struct {
-	folders []*Folder
-}
-
-func (fs *WebFileSystem) List() []*File {
-	return []*File{{"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}, {"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}, {"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}, {"Kek.kek"}, {"lel.lol"}, {"pretty.blog"}, {"ofiget.html"}}
-}
-
-type Folder struct {
-	files []*File
-}
-
-type File struct {
-	FileName string
-}