icons and title-bar as widget

apps/aboutme/personalprops.go

@@ -8,6 +8,7 @@ import (
 	"personalwebsite/apps/appCtx"
 	"personalwebsite/errormessage"
 	"personalwebsite/libs"
+	"personalwebsite/wde"
 	"personalwebsite/webfilesystem"
 
 	"github.com/gin-gonic/gin"
@@ -15,15 +16,20 @@ import (
 )
 
 type AboutMeApp struct {
-	fs    *webfilesystem.WebFileSystem
-	appID string
-	mLib  libs.MarkdownLib
+	fs             *webfilesystem.WebFileSystem
+	appID          string
+	mLib           libs.MarkdownLib
+	titleBarConfig wde.TitleBarConfig //TODO to app manifest?
 }
 
 func NewAboutMeApp(webFs *webfilesystem.WebFileSystem) *AboutMeApp {
 	newApp := AboutMeApp{
 		fs:    webFs,
 		appID: "AboutMe",
+		titleBarConfig: wde.TitleBarConfig{
+			Lable:       "About Me",
+			CloseButton: true,
+		},
 	}
 	return &newApp
 }
@@ -253,9 +259,10 @@ func (p *AboutMeApp) Render(appCtx appCtx.AppContext, filePath string) (gin.H, e
 	}
 
 	return gin.H{
-		"HeaderProps": propsData.Header,
-		"Links":       absoluteLinks,
-		"Islands":     renderedIslands,
+		"TitleBarConfig": p.titleBarConfig,
+		"HeaderProps":    propsData.Header,
+		"Links":          absoluteLinks,
+		"Islands":        renderedIslands,
 	}, nil
 }
 

apps/finder/finder.go

@@ -9,8 +9,9 @@ import (
 )
 
 type FinderApplication struct {
-	fs    *webfilesystem.WebFileSystem
-	appID string
+	fs             *webfilesystem.WebFileSystem
+	appID          string
+	titleBarConfig wde.TitleBarConfig
 	// manifest apps.ApplicationManifest
 }
 
@@ -18,6 +19,10 @@ func NewFinderApplication(webFs *webfilesystem.WebFileSystem) *FinderApplication
 	return &FinderApplication{
 		fs:    webFs,
 		appID: "Finder",
+		titleBarConfig: wde.TitleBarConfig{
+			Lable:       "Finder",
+			CloseButton: true,
+		},
 	}
 }
 
@@ -26,7 +31,9 @@ func (f *FinderApplication) GetAppID() string {
 }
 
 func (f *FinderApplication) Render(appCtx appCtx.AppContext) gin.H {
-	return gin.H{}
+	return gin.H{
+		"TitleBarConfig": f.titleBarConfig,
+	}
 }
 
 func (f *FinderApplication) RenderPublicContextMenu(context string, filePath string, data string) gin.H {

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

@@ -87,8 +87,9 @@ export default class FinderWindow{
         
         let newWindow = this.#wde.Decorat.CreateNewWindow(this.#appId, 500, 350 )
         newWindow.innerHTML = html
+        newWindow.querySelector(".title-bar").querySelector(".icon").setAttribute("src","/system/libs/img/icon/get?path=/Icons/GenericFolder.icn&size=16")
         
-        console.log(newWindow.querySelector(".FileTileView"))
+        // console.log(newWindow.querySelector(".FileTileView"))
         
         this.fileView = new this.#wde.FileView(
             newWindow.querySelector(".FileTileView"),
@@ -190,7 +191,7 @@ export default class FinderWindow{
         if (event.dataTransfer.getData("dropType") == "move"){
             const sourcePath= event.dataTransfer.getData("filePath")
             const targetPath = this.curPath + "/" + event.dataTransfer.getData("fileName")
-            const res = await WebFS.MoveFile(sourcePath, targetPath)
+            const res = await this.#finder.WDE().WebFS().MoveFile(sourcePath, targetPath)
             if (res){
                 this.ReRenderDir()
             } else {
@@ -203,7 +204,7 @@ export default class FinderWindow{
                 const file = files[i];
                 console.log("file:" + file.name)
                 
-                const res = await WebFS.UploadFile(file, this.curPath)
+                const res = await this.#finder.WDE().WebFS().UploadFile(file, this.curPath)
                 if (res){
                     this.ReRenderDir()
                 }
@@ -233,6 +234,14 @@ export default class FinderWindow{
         this.OpenFile(this.curPath, event.target.getAttribute("name"), event.target.getAttribute("filetype"))
     }
 
+    /**
+     * 
+     * @param {string} fileName 
+     */
+    getFileExtension(fileName){
+        return fileName.split(".")[fileName.split(".").length - 1] //FIXME
+    }
+
     /**
     * @param {string} filePath
     */
@@ -240,11 +249,12 @@ export default class FinderWindow{
         // console.log(parentPath, fileName, fileType)
         // const splittedPath = filePath.split("/")
         // const fileName = splittedPath[splittedPath.length - 1]
-        const fileExtension = fileName.split(".")[fileName.split(".").length - 1] //FIXME
-
+        
+        const fileExtension = this.getFileExtension(fileName)
+        console.log(fileExtension)
         switch (true) {
             case fileType == "objectlink":
-               this.#wde.Alert("Links not supported yet")
+               this.#finder.WDE().Alert("Links not supported yet")
                 break
             case fileType == "pathlink":
                 let res = await WebFS.ReadPathLink(`${parentPath}/${fileName}`)
@@ -252,22 +262,22 @@ export default class FinderWindow{
                 this.OpenFile(res.parentPath, res.name, res.filetype)
                 break
             case fileExtension == "app":
-                this.#wde.Open(`${parentPath}/${fileName}`, [])
+                this.#finder.WDE().Open(`${parentPath}/${fileName}`, [])
                 break
             case fileExtension == "blog":
-                this.#wde.Open(`/Applications/BlogViewer.app`, [`${parentPath}/${fileName}`])
+                this.#finder.WDE().Open(`/Applications/BlogViewer.app`, [`${parentPath}/${fileName}`])
                 break
             case fileType == "directory":
-                this.#wde.Open(`/Applications/Finder.app`, [`${parentPath}/${fileName}`])
+                this.#finder.WDE().Open(`/Applications/Finder.app`, [`${parentPath}/${fileName}`])
                 break
             case fileExtension == "blog":
-                this.#wde.Open("/Applications/BlogViewer.app", [`${parentPath}/${fileName}`])
+                this.#finder.WDE().Open("/Applications/BlogViewer.app", [`${parentPath}/${fileName}`])
                 break
             case fileExtension == "jpeg" | fileExtension == "png":
-                this.#wde.Open("img-viewer", [`${parentPath}/${fileName}`])
+                this.#finder.WDE().Open("img-viewer", [`${parentPath}/${fileName}`])
                 break;
             default:
-               this.#wde.Alert("Unsupported file type")
+               this.#finder.WDE().Alert("Unsupported file type")
                 break;
         }
     }

front/src/mobile.less

@@ -1,12 +1,14 @@
 @import "./wde/sunboard/sunboard-mobile.less";
 
 body{
-    zoom: 2;
+    // zoom: 2;
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0px;
 
+    font-size: 16px;
+
     /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */

front/src/wde/wde-desktop.js

@@ -36,8 +36,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-layer"])
-        await this.Open("/Applications/AboutMe.app", ["/", "desktop-layer"])
+        await this.Open("/Applications/Finder.app", ["/", "desktop-layer"])
+        // await this.Open("/Applications/AboutMe.app", ["/", "desktop-layer"])
         return
         
         let autoStart = document.body.querySelector("wde-autostart")

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

@@ -32,6 +32,10 @@
     letter-spacing: 0.35px;
 }
 
+.window-frame.Focused .title-bar .lable{
+    color: @col-black;
+}
+
 .window-frame.Focused .title-bar .visual-drag-area{
     &:extend(.rows-fill-shadowed);
     pointer-events: none;
@@ -39,16 +43,28 @@
     height: 11px;
 }
 
+.title-bar > .icon{
+    // background-color: aqua;
+    width: 16px;
+    height: 16px;
+}
 
 
-.title-bar .button{
+.title-bar > .button{
     width: 11px;
     height: 11px;
     padding: 0%;
     position: relative;
     top: 1px;
     visibility: hidden;
-    
+
+    &:active{
+        background-color: rgba(0, 0, 0, 0.4);
+        /* Green */
+        box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
+            -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25);
+    }
+
     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,
@@ -61,6 +77,10 @@
     flex-grow: 0;
 }
 
-.Focused .title-bar .button{
-    visibility:visible;
-}
+.window-frame.Focused .title-bar > .button{
+    visibility:visible;   
+}
+
+// .window-frame.Focused .title-bar > .button:active{
+//     background-color: aqua;
+// }

templates/finder/admin-app.html

@@ -1,13 +1,5 @@
 {{ 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>
+    {{template "wde-widgets/window-title-bar.tmpl" .TitleBarConfig}}
     <div id="ContentBorder" class="content-border AdjectiveElement">
         <div class="finder-content">
          

templates/personal-properties/app.html

@@ -1,10 +1,5 @@
 {{ define "personal-properties/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">About me</div>
-		<div id="Drag" class="visual-drag-area"></div>
-	</div>
+	{{template "wde-widgets/window-title-bar.tmpl" .TitleBarConfig}}
 	<div class="content-border">
 		<div class="PersPropsContent">
 			<div class="PropsView">

templates/wde-widgets/window-title-bar.html

@@ -0,0 +1,14 @@
+{{ define "wde-widgets/window-title-bar.tmpl" }}
+    <div class="title-bar DragArea">
+        {{if .CloseButton}}
+            <button id="closeWindowButton" class="button" title="Close Window"></button>
+        {{end}}
+        <div id="Drag" class="visual-drag-area"></div>
+        <!-- TODO:Disable dragging of icon -->
+        <img class="icon"> 
+        <div class="lable">
+            {{.Lable}}
+        </div>
+        <div id="Drag" class="visual-drag-area"></div>
+    </div>
+{{ end }}

wde/titlebar.go

@@ -0,0 +1,6 @@
+package wde
+
+type TitleBarConfig struct {
+	Lable       string
+	CloseButton bool
+}

wde/wde.go

@@ -37,19 +37,23 @@ func (w *WDE) RenderFileTileView(directory string, host string) (gin.H, error) {
 
 func (w *WDE) GetIconPathForFile(fileHeader *webfilesystem.FileHeader, parentDir string, size string) string {
 	if fileHeader.Icon != "" {
-		return "/system/libs/img/icon/get?path=" + fileHeader.Icon
+		return "/system/libs/img/icon/get?path=" + fileHeader.Icon + "&size=" + size
 	}
 
-	switch fileHeader.GetType() {
-	case "directory":
-		return "/system/libs/img/icon/get?path=/Icons2/GenericFolder.icn&size=" + size
-	case "jpeg":
+	extension := fileHeader.GetExtension()
+
+	switch true {
+	case extension == "app":
+		return "/system/libs/img/icon/get?path=/Icons/GenericApp.icn&size=" + size
+	case extension == "jpeg":
 		fallthrough
-	case "png":
+	case extension == "png":
 		fallthrough
-	case "jpg":
-		return "/system/libs/img/icon/get?path=" + path.Join(parentDir, fileHeader.Name) + "&size=" + size
+	case extension == "jpg":
+		return "/system/libs/img/get?path=" + path.Join(parentDir, fileHeader.Name) //+ "&size=" + size
+	case fileHeader.GetType() == "directory":
+		return "/system/libs/img/icon/get?path=/Icons/GenericFolder.icn&size=" + size
 	default:
-		return "/system/libs/img/icon/get?path=/Icons2/GenericFolder.icn&size=" + size
+		return "/system/libs/img/icon/get?path=/Icons/GenericDocument.icn&size=" + size
 	}
 }

webfilesystem/webfilesystem.go

@@ -41,6 +41,11 @@ func (fh *FileHeader) GetType() string {
 	return fh.Type
 }
 
+func (fh *FileHeader) GetExtension() string {
+
+	return strings.Split(fh.Name, ".")[len(strings.Split(fh.Name, "."))-1]
+}
+
 type BinaryFileData struct {
 	MongoId primitive.ObjectID `bson:"_id"  json:"-"`
 	Bin     []byte             `bson:"bin" json:"-"`