more work

icons and title-bar as widget
Merge branch 'webpack' of http://192.168.88.228:9101/cyber-dream/personal-website into webpack
2023-07-23 06:12:17 +03:00 · 2023-07-23 02:55:08 +03:00 · 2023-07-23 01:01:03 +03:00 · 2023-07-23 01:00:51 +03:00
41 changed files with 433 additions and 163 deletions
--- a/apps/BlogWriter/blogwriter.go
+++ b/apps/BlogWriter/blogwriter.go
@ -1,14 +1,17 @@
 package blogwriter

 import (
+	"personalwebsite/apps"
 	"personalwebsite/webfilesystem"

 	"github.com/gin-gonic/gin"
 )

 type BlogWriterApplication struct {
-	fs    *webfilesystem.WebFileSystem
-	appID string
+	fs       *webfilesystem.WebFileSystem
+	appID    string
+	path     string
+	manifest apps.ApplicationManifest
 }

 func NewBlogWriterApp(webfs *webfilesystem.WebFileSystem) *BlogWriterApplication {
@ -17,11 +20,17 @@ func NewBlogWriterApp(webfs *webfilesystem.WebFileSystem) *BlogWriterApplication
 		appID: "BlogWriter",
 	}
 }
-
+func (bw *BlogWriterApplication) GetManifest() apps.ApplicationManifest {
+	return bw.manifest
+}
 func (bw *BlogWriterApplication) GetAppID() string {
 	return bw.appID
 }

+func (bw *BlogWriterApplication) GetPath() string {
+	return bw.path
+}
+
 func (bw *BlogWriterApplication) PublicRoutes(routes *gin.RouterGroup) {}
 func (bw *BlogWriterApplication) PrivateRoutes(routes *gin.RouterGroup) {

--- a/apps/aboutme/personalprops.go
+++ b/apps/aboutme/personalprops.go
@ -5,9 +5,11 @@ import (
 	"html/template"
 	"net/http"
 	"path"
+	"personalwebsite/apps"
 	"personalwebsite/apps/appCtx"
 	"personalwebsite/errormessage"
 	"personalwebsite/libs"
+	"personalwebsite/wde"
 	"personalwebsite/webfilesystem"

 	"github.com/gin-gonic/gin"
@ -15,19 +17,38 @@ 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?
+	path           string
+	manifest       apps.ApplicationManifest
 }

 func NewAboutMeApp(webFs *webfilesystem.WebFileSystem) *AboutMeApp {
+	manifest := apps.ApplicationManifest{}
+	_, err := webFs.Read(path.Join("/Applications/AboutMe.app", ".appmanifest"), &manifest)
+	if err != nil {
+		panic(err)
+	}
 	newApp := AboutMeApp{
 		fs:    webFs,
 		appID: "AboutMe",
+		path:  "/Applications/AboutMe.app",
+		titleBarConfig: wde.TitleBarConfig{
+			Lable:       "About Me",
+			CloseButton: true,
+		},
+		manifest: manifest,
 	}
 	return &newApp
 }
-
+func (p *AboutMeApp) GetPath() string {
+	return p.path
+}
+func (p *AboutMeApp) GetManifest() apps.ApplicationManifest {
+	return p.manifest
+}
 func (p *AboutMeApp) PublicRoutes(route *gin.RouterGroup) {
 	route.POST("render", func(ctx *gin.Context) {
 		filePath := ctx.Query("path")
@ -253,9 +274,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
 }

--- a/apps/blogviewer/blogviewer.go
+++ b/apps/blogviewer/blogviewer.go
@ -4,6 +4,7 @@ import (
 	"errors"
 	"net/http"
 	"path"
+	"personalwebsite/apps"
 	"personalwebsite/apps/appCtx"
 	"personalwebsite/errormessage"
 	"personalwebsite/libs"
@ -14,9 +15,11 @@ import (
 )

 type BlogViewerApplication struct {
-	fs    *webfilesystem.WebFileSystem
-	appID string
-	mLib  libs.MarkdownLib
+	fs       *webfilesystem.WebFileSystem
+	appID    string
+	mLib     libs.MarkdownLib
+	path     string
+	manifest apps.ApplicationManifest
 }

 func NewBlogViewerApp(webFs *webfilesystem.WebFileSystem) *BlogViewerApplication {
@ -26,10 +29,18 @@ func NewBlogViewerApp(webFs *webfilesystem.WebFileSystem) *BlogViewerApplication
 		mLib:  libs.MarkdownLib{},
 	}
 }
+func (b *BlogViewerApplication) GetManifest() apps.ApplicationManifest {
+	return b.manifest
+}

 func (b *BlogViewerApplication) GetAppID() string {
 	return b.appID
 }
+
+func (b *BlogViewerApplication) GetPath() string {
+	return b.path
+}
+
 func (b *BlogViewerApplication) PrivateRoutes(route *gin.RouterGroup) {
 	b.PublicRoutes(route)

--- a/apps/finder/finder.go
+++ b/apps/finder/finder.go
@ -1,6 +1,8 @@
 package finder

 import (
+	"path"
+	"personalwebsite/apps"
 	"personalwebsite/apps/appCtx"
 	"personalwebsite/wde"
 	"personalwebsite/webfilesystem"
@ -9,24 +11,46 @@ import (
 )

 type FinderApplication struct {
-	fs    *webfilesystem.WebFileSystem
-	appID string
+	fs             *webfilesystem.WebFileSystem
+	appID          string
+	titleBarConfig wde.TitleBarConfig
+	path           string
+	manifest       apps.ApplicationManifest
 	// manifest apps.ApplicationManifest
 }

 func NewFinderApplication(webFs *webfilesystem.WebFileSystem) *FinderApplication {
+	manifest := apps.ApplicationManifest{}
+	_, err := webFs.Read(path.Join("/Applications/Finder.app", ".appmanifest"), &manifest)
+	if err != nil {
+		panic(err)
+	}
 	return &FinderApplication{
 		fs:    webFs,
+		path:  "/Applications/Finder.app",
 		appID: "Finder",
+		titleBarConfig: wde.TitleBarConfig{
+			Lable:       "Finder",
+			CloseButton: true,
+		},
+		manifest: manifest,
 	}
 }
-
+func (f *FinderApplication) GetManifest() apps.ApplicationManifest {
+	return f.manifest
+}
 func (f *FinderApplication) GetAppID() string {
 	return f.appID
 }

+func (f *FinderApplication) GetPath() string {
+	return f.path
+}
+
 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 {
--- a/apps/finder/routes.go
+++ b/apps/finder/routes.go
@ -5,6 +5,7 @@ import (
 	"personalwebsite/apps/appCtx"
 	"personalwebsite/errormessage"

+	mobile "github.com/floresj/go-contrib-mobile"
 	"github.com/gin-gonic/gin"
 )

@ -18,7 +19,15 @@ func (f *FinderApplication) PublicRoutes(routes *gin.RouterGroup) {
 			})
 			return
 		}
-		ctx.HTML(http.StatusOK, "finder/app.tmpl", f.Render(appCtx))
+		d := mobile.GetDevice(ctx)
+		switch {
+		case d.Mobile():
+			ctx.HTML(http.StatusOK, "templates/finder/mobile-app.tmpl", gin.H{
+				// "autostart": autostart,
+			})
+		default:
+			ctx.HTML(http.StatusOK, "finder/app.tmpl", f.Render(appCtx))
+		}
 	})

 	//Obsolete
@ -68,7 +77,13 @@ func (f *FinderApplication) PrivateRoutes(routes *gin.RouterGroup) {
 			})
 			return
 		}
-		ctx.HTML(http.StatusOK, "finder/admin-app.tmpl", f.Render(appCtx))
+		d := mobile.GetDevice(ctx)
+		switch {
+		case d.Mobile():
+			ctx.HTML(http.StatusOK, "finder/mobile-app.tmpl", f.Render(appCtx))
+		default:
+			ctx.HTML(http.StatusOK, "finder/admin-app.tmpl", f.Render(appCtx))
+		}
 	})

 	routes.GET("renderMobileDesktop", func(ctx *gin.Context) {
--- a/apps/img-viewer/imgviewer.go
+++ b/apps/img-viewer/imgviewer.go
@ -2,14 +2,17 @@ package imgviewer

 import (
 	"net/http"
+	"personalwebsite/apps"
 	"personalwebsite/webfilesystem"

 	"github.com/gin-gonic/gin"
 )

 type ImgViewerApp struct {
-	fs    *webfilesystem.WebFileSystem
-	appID string
+	fs       *webfilesystem.WebFileSystem
+	appID    string
+	path     string
+	manifest apps.ApplicationManifest
 }

 func NewImgViewerApp(webFs *webfilesystem.WebFileSystem) *ImgViewerApp {
@ -22,6 +25,9 @@ func NewImgViewerApp(webFs *webfilesystem.WebFileSystem) *ImgViewerApp {
 func (p *ImgViewerApp) PrivateRoutes(route *gin.RouterGroup) {
 	p.PublicRoutes(route)
 }
+func (i *ImgViewerApp) GetManifest() apps.ApplicationManifest {
+	return i.manifest
+}
 func (p *ImgViewerApp) PublicRoutes(route *gin.RouterGroup) {
 	route.GET("render", func(ctx *gin.Context) {
 		isMobileParam := ctx.Query("isMobile")
@ -44,6 +50,10 @@ func (p *ImgViewerApp) PublicRoutes(route *gin.RouterGroup) {
 	})
 }

+func (p *ImgViewerApp) GetPath() string {
+	return p.path
+}
+
 func (p *ImgViewerApp) GetAppID() string {
 	return p.appID
 }
--- a/apps/sunboard/sunboard.go
+++ b/apps/sunboard/sunboard.go
@ -2,7 +2,9 @@ package sunboard

 import (
 	"net/http"
+	"path"
 	"personalwebsite/apps"
+	"personalwebsite/wde"
 	"personalwebsite/webfilesystem"

 	"github.com/gin-gonic/gin"
@ -10,15 +12,26 @@ import (

 type SunboardApp struct {
 	fs         *webfilesystem.WebFileSystem
+	wde        *wde.WDE
 	appID      string
 	appStorage *apps.ApplicationsStorage
+	path       string
+	manifest   apps.ApplicationManifest
 }

-func NewSunboardApp(webFs *webfilesystem.WebFileSystem, appStorage *apps.ApplicationsStorage) *SunboardApp {
+func NewSunboardApp(webFs *webfilesystem.WebFileSystem, wde *wde.WDE, appStorage *apps.ApplicationsStorage) *SunboardApp {
+	manifest := apps.ApplicationManifest{}
+	_, err := webFs.Read(path.Join("/Applications/Sunboard.app", ".appmanifest"), &manifest)
+	if err != nil {
+		panic(err)
+	}
 	newApp := SunboardApp{
 		fs:         webFs,
+		wde:        wde,
 		appID:      "Sunboard",
 		appStorage: appStorage,
+		path:       "/Applications/Sunboard.app",
+		manifest:   manifest,
 	}
 	return &newApp
 }
@ -30,21 +43,32 @@ func (a *SunboardApp) GetAppID() string {
 func (a *SunboardApp) PublicRoutes(route *gin.RouterGroup) {
 }

-func (a *SunboardApp) PrivateRoutes(router *gin.RouterGroup) {
+func (a *SunboardApp) GetPath() string {
+	return a.path
+}
+func (a *SunboardApp) GetManifest() apps.ApplicationManifest {
+	return a.manifest
+}

+func (a *SunboardApp) PrivateRoutes(router *gin.RouterGroup) {
 	router.POST("render", func(ctx *gin.Context) {
 		appIcons := []appIcon{}
 		for _, app := range a.appStorage.Apps {
-			if app.GetAppID() == "Sunboard" {
+			if app.GetAppID() == "Sunboard" { //FIXME
 				continue
 			}

+			if app.GetManifest().Iconpath == "" {
+				continue
+			}
+			println(app.GetAppID() + " : " + app.GetPath())
+			// iconPath := path.Join(, "icon.icn")
 			appIcons = append(appIcons, appIcon{
 				Type:  "Icon",
-				Icon:  "",
+				Icon:  "/system/libs/img/icon/get?path=" + app.GetManifest().Iconpath + "&size=32",
 				Lable: app.GetAppID(),
 				AppId: app.GetAppID(),
-				Path:  "/Applications/" + app.GetAppID() + ".app", //FIXME
+				Path:  app.GetPath(),
 			})
 		}
 		ctx.HTML(http.StatusOK, "sunboard/sunboard.html", gin.H{
--- a/apps/websiteapp.go
+++ b/apps/websiteapp.go
@ -15,15 +15,17 @@ type WebDEApplication interface {
 	GetAppID() string
 	PublicRoutes(*gin.RouterGroup)
 	PrivateRoutes(*gin.RouterGroup)
-	// GetManifest() ApplicationManifest //TODO: Delete
+	GetPath() string
+	GetManifest() ApplicationManifest
 	// GEtHtml()
 	// GetId() string
 }

 type ApplicationManifest struct {
-	AppId string   `bson:"appid" json:"appId"`
-	Js    []string `bson:"js" json:"js"`
-	Css   []string `bson:"css" json:"css"`
+	AppId    string   `bson:"appid" json:"appId"`
+	Js       []string `bson:"js" json:"js"`
+	Css      []string `bson:"css" json:"css"`
+	Iconpath string   `bson:"iconpath" json:"iconpath"`
 }

 func NewApplicationsStorage(apps map[string]WebDEApplication, webfs *webfilesystem.WebFileSystem) *ApplicationsStorage {
--- a/front/src/apps/about-me/about-me.less
+++ b/front/src/apps/about-me/about-me.less
@ -1,27 +1,5 @@
-/* TODO Move this to body? */
-/*.ScrollContent {
-    width: 100%;
-    height: 100%;
-    overflow: scroll;
-    overflow-x: hidden;
-    /* Firefox */
-    /* scrollbar-width: none;  */
-    /* Internet Explorer 10+ */
-    /* -ms-overflow-style: none;   */
+@import "../../theme.less";

-    /* Auto layout */
-    /*display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-}*/
-
-/* WebKit */
-/* .ScrollContent::-webkit-scrollbar { 
-    width: 0;
-    height: 0;
-} */
 .PersPropsContent{
    width: 100%;
    height: 100%;
@ -101,10 +79,9 @@
    gap:1px;
 }

-.ShortBio .Name{
-    font-family: "Virtue";
-    /* FIXME */
-    letter-spacing: 0.35px; 
+.ShortBio > .Text > .Name{
+    &:extend(.large-system-font);
+    // background-color: aqua;
 }

 .PropertiesList .Links {
@ -115,12 +92,28 @@
    height: auto;
    width: auto;

+    // background-color: aqua;
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    justify-content: center;
+    padding: 0px;
+    // gap:4px;
+}
+.Links > a{
    /* Auto layout */
    display: flex;
    flex-direction: row;
-    align-items: left;
+    align-items: end;
+    justify-content: center;
    padding: 0px;
-    gap:4px;
+    gap: 2px;
+}
+.Links > a > .link-lable{
+    // background-color: aqua;
+    // line-height: 60px;
+    // display:table
 }

 .PropertiesList .Links .Link {
@ -145,9 +138,8 @@
 }

 .Island .Title {
-    font-family: "Virtue";
-    /* FIXME */
-    letter-spacing: 0.35px; 
+    //FIXME
+    &:extend(.large-system-font);
    position:relative;
    display: inline-block;
    max-width: 100%;
@ -156,10 +148,6 @@
    top: -9px;
 }

-.Focused .Island .Title{
-    background-color: #CCCCCC;
-}
-
 .Island .Content{
    width: 100%;
    /* top: 0px; */
@ -183,9 +171,10 @@
 }
 .Island .Key{
    position: relative;
-    font-family: "Virtue";
-    font-size: 11px;
-    letter-spacing: 0.35px;
+    &:extend(.large-system-font);
+    // font-family: "Virtue";
+    // font-size: 11px;
+    // letter-spacing: 0.35px;
    text-align: end;
    width: 34%;
    white-space: nowrap;
--- a/front/src/apps/finder/finder-window.js
+++ b/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;
        }
    }
--- a/front/src/desktop.less
+++ b/front/src/desktop.less
@ -1,42 +1,27 @@
@import "./wde/primitives.less";
@import "./wde/widgets/file-view/file-view.less";
@import "./wde/widgets/scrollbar/scrollbar.less";
+@import "./wde/widgets/button/button.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";
-//     src:url("/res/dev-fs/fonts/virtue.ttf");
-// }
-
-/* @font-face{
-    font-family: "Virtue";
-    src:url("/res/dev-fs/fonts/virtue.ttf")
-} */
-
-/* @media screen and (max-device-width: 2048px) and (max-device-height: 2048px) {
-    html {
-      zoom: 3
-    }
-  } */
-
 .NoClick {
    pointer-events: none;
 }
 .Click {
    pointer-events: all;
 }
-.DragArea
+// .DragArea

-*{
-    font-family: Verdana, Geneva, sans-serif;
-    font-size: 11px;
-    font-style: normal;
-    font-weight:initial;
-}
+// *{
+//     font-family: Verdana, Geneva, sans-serif;
+//     font-size: 11px;
+//     font-style: normal;
+//     font-weight:initial;
+// }

 *::-webkit-scrollbar { /* WebKit */
    width: 0;
@ -44,6 +29,7 @@
 }

 body{
+    &:extend(.views-font);
    // zoom: var(--zoom);
    position: absolute;
    width: 100%;
@ -52,6 +38,9 @@ body{

    font-size: 11px;

+    // font-family: "Geneva";
+    src:url("./fonts/Geneva.woff2");
+
    /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
--- a/front/src/fonts/Charcoal.woff2
+++ b/front/src/fonts/Charcoal.woff2
--- a/front/src/fonts/Geneva.woff2
+++ b/front/src/fonts/Geneva.woff2
--- a/front/src/mobile.less
+++ b/front/src/mobile.less
@ -1,12 +1,24 @@
@import "./wde/sunboard/sunboard-mobile.less";
+@import "./theme.less";
+@import "./wde/effects.less";
+@import "./wde/widgets/button/button.less";
+
+@font-face{
+    font-family: "Geneva";
+    src:url("./fonts/Geneva.woff2");
+} 

 body{
-    zoom: 2;
+    &:extend(.views-font);
+    // zoom: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px;

+
+    font-size: 12px;
+
    /* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
@ -17,6 +29,7 @@ body{
                                  supported by Chrome, Edge, Opera and Firefox */
    touch-action: manipulation;

+    background-color: @col-argent;
    // /* Auto layout */
    // display: flex;
    // flex-direction: column;
@ -24,11 +37,11 @@ body{
    // justify-content: flex-start;
    // margin: 32px;

-    background-image:
-    linear-gradient(45deg,  @col-argent 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%,  @col-argent 75%),
-    linear-gradient(45deg, transparent 75%,  @col-argent 75%),
-    linear-gradient(45deg,  @col-argent 25%, #777777 25%);    
+    // background-image:
+    // linear-gradient(45deg,  @col-argent 25%, transparent 25%),
+    // linear-gradient(45deg, transparent 75%,  @col-argent 75%),
+    // linear-gradient(45deg, transparent 75%,  @col-argent 75%),
+    // linear-gradient(45deg,  @col-argent 25%, #777777 25%);    

  background-size:10px 10px;       

@ -39,11 +52,12 @@ body{
    position: absolute;
    // background-color: aqua;
    inset: 16px;
-    bottom: 128px;
+    bottom: 100px;
    
-    border-radius: 15px;
-    border: 1px solid #000;
-    background: #99C;
+    border-radius: 5px;
+    border: @eff-border-black;
+    box-shadow: @eff-box-shadow-black;
+    background: @col-gainsboro;
    overflow: hidden;
 }

@ -70,3 +84,27 @@ body{
    height: 100%;
    // position: absolute;
 }
+
+.wde-mobile-button{
+    &:extend(.wde-button);
+    &:active{
+        &:extend(.wde-button:active);
+    }
+    height: 35px;
+    width: 95px;
+    /* Auto layout */
+    display: flex;
+    // padding: 10px;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding-right: 5px;
+    // gap: 53px;
+    // align-self: stretch;
+}
+
+.wde-mobile-button > .icon{
+    
+    // width: 8rem;
+    // height: 8rem;
+}
--- a/front/src/theme.less
+++ b/front/src/theme.less
@ -1,10 +1,39 @@
@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-davys-grey: #555555;
+@col-granite-gray: #666666;
+@col-grey: #808080;
+
@col-black: #000000;
@col-white: #FFFFFF;
@col-raisin-black: #222222;
+
+
+
+@font-face{
+    font-family: "Geneva";
+    src:url("./fonts/Geneva.woff2");
+}
+
+@font-face {
+    font-family: "Charcoal";
+    src: url('./fonts/Charcoal.woff2');
+}
+
+.large-system-font{
+    font-family: "Charcoal";
+    // font-weight: bold;
+    letter-spacing: 0.35px;
+    font-size: 12px;
+}
+.small-system-font{
+    font-family: "Geneva";
+}
+.views-font{
+    font-family: "Geneva";
+}
--- a/front/src/wde/effects.less
+++ b/front/src/wde/effects.less
@ -41,4 +41,5 @@
@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-convex-inverted: inset 1px 1px 0px rgba(0, 0, 0, 0.27),inset -1px -1px 0px @col-grey;
@eff-box-shadow-adjective: -1px -1px 0px rgba(0, 0, 0, 0.25), 1px 1px 0px #FFFFFF;
--- a/front/src/wde/sunboard/sunboard-mobile.less
+++ b/front/src/wde/sunboard/sunboard-mobile.less
@ -15,7 +15,7 @@
 #icons{
    width: 100%;
    height: 100%;
-    background-color: @col-ceil;
+    // background-color: @col-ceil;
 }

 // #down-bar{
@ -28,31 +28,32 @@
 .apps-list{
    /* Auto layout */
    display: flex;
-    padding: 64px 32px;
+    padding: 64px 16px;
    align-items: flex-start;
    align-content: flex-start;
-    gap: 103px 18px;
+    gap: 64px 0px;
    flex: 1 0 0;
    align-self: stretch;
    flex-wrap: wrap;
 }

 .app-icon{
+    // background-color: rgba(0, 255, 255, 0.133);
    width: 100px;
-    height: 100px;
+    // height: 100px;

     /* Auto layout */
    display: flex;
-    padding: 4px 8px;
+    // padding: 4px 8px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
 }

 .app-icon .icon{
-    width: 64px;
-    height: 64px;
-    background-color: beige;
+    width: 32px;
+    height: 32px;
+    // background-color: beige;
 }

 .app-icon .lable{
--- a/front/src/wde/wde-mobile.js
+++ b/front/src/wde/wde-mobile.js
@ -18,6 +18,8 @@ export default class MobileWebDesktopEnvironment extends AbstractWebDesktopEnvir
        this.#sunBoard = new MobileSunboard(this)
        // this.loadWDE()

+        document.addEventListener("touchstart", function(){}, true);//For working :active in css
+        
    }

    loadWDE(){
--- a/front/src/wde/wde.js
+++ b/front/src/wde/wde.js
@ -33,7 +33,7 @@ export default class AbstractWebDesktopEnvironment{
    * @returns {Object | undefined} //FIXME
    */
    async _FetchAppManifest(path){
-        // console.log(location)
+        console.log(path)
        // console.log(this.GetApiAddress())
        const params = new URLSearchParams({path: path, mode: "json"})
        const response = await fetch(`/system/loadApp?` + params)
--- a/front/src/wde/widgets/button/button.less
+++ b/front/src/wde/widgets/button/button.less
@ -0,0 +1,27 @@
+@import "../../effects.less";
+@import "../../../theme.less";
+
+.wde-button{
+    &:active{
+        background-color: @col-granite-gray;
+        box-shadow: @eff-box-shadow-convex-inverted;
+        // background-color: red;
+    }
+    background-color: @col-gainsboro;
+    box-shadow: @eff-box-shadow-convex;
+    border: @eff-border-black;
+    border-radius: 3px;
+
+
+    height: 20px;
+    width: auto;
+
+}
+
+// .wde-button:active{
+//     background-color: red;
+// }
+
+// .wde-button:hover{
+//     background-color: pink;
+// }
--- a/front/src/wde/widgets/title-bar/title-bar.less
+++ b/front/src/wde/widgets/title-bar/title-bar.less
@ -28,8 +28,14 @@
    pointer-events: none;
    white-space: nowrap;

-    font-family: "Virtue";
-    letter-spacing: 0.35px;
+    &:extend(.large-system-font);
+    
+    // font-family: "Virtue";
+    // letter-spacing: 0.35px;
+}
+
+.window-frame.Focused .title-bar .lable{
+    color: @col-black;
 }

 .window-frame.Focused .title-bar .visual-drag-area{
@ -39,9 +45,14 @@
    height: 11px;
 }

+.title-bar > .icon{
+    // background-color: aqua;
+    width: 16px;
+    height: 16px;
+}


-.title-bar .button{
+.title-bar > .button{
    width: 11px;
    height: 11px;
    padding: 0%;
@ -49,6 +60,13 @@
    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 +79,10 @@
    flex-grow: 0;
 }

-.Focused .title-bar .button{
+.window-frame.Focused .title-bar > .button{
    visibility:visible;   
 }
+
+// .window-frame.Focused .title-bar > .button:active{
+//     background-color: aqua;
+// }
--- a/icons/genericApp/color/16.png
+++ b/icons/genericApp/color/16.png
--- a/icons/genericApp/color/32.png
+++ b/icons/genericApp/color/32.png
--- a/icons/genericDocument/color/16.png
+++ b/icons/genericDocument/color/16.png
--- a/icons/genericDocument/color/32.png
+++ b/icons/genericDocument/color/32.png
--- a/icons/genericFolder/color/16.png
+++ b/icons/genericFolder/color/16.png
--- a/icons/genericFolder/color/32.png
+++ b/icons/genericFolder/color/32.png
--- a/icons/github/color/favicon.ico
+++ b/icons/github/color/favicon.ico
--- a/icons/github/color/github.png
+++ b/icons/github/color/github.png
--- a/icons/hand/color/8.png
+++ b/icons/hand/color/8.png
--- a/icons/twitter/color/favicon.ico
+++ b/icons/twitter/color/favicon.ico
--- a/icons/twitter/color/twitter.png
+++ b/icons/twitter/color/twitter.png
--- a/main.go
+++ b/main.go
@ -73,7 +73,7 @@ func main() {
 	imgViewerApp := imgviewer.NewImgViewerApp(webfs)
 	blogViewerApp := blogviewer.NewBlogViewerApp(webfs)
 	blogWriterApp := blogwriter.NewBlogWriterApp(webfs)
-	sunBoardApp := sunboard.NewSunboardApp(webfs, appsStorage)
+	sunBoardApp := sunboard.NewSunboardApp(webfs, webde, appsStorage)

 	appsStorage.Apps["personal-properties"] = persPropsApp
 	appsStorage.Apps["finder"] = finderApp
--- a/templates/base/mobile-desktop.html
+++ b/templates/base/mobile-desktop.html
@ -17,10 +17,10 @@
        </div> -->
        <div id="mobile-app-views"></div>
        <div id="controls-bar">
-            <div id="back" class="app-icon Click" >
-                <img class="icon NoClick" src="">
+            <button id="back" class="wde-mobile-button Click" >
+                <img class="icon NoClick" src="/system/libs/img/get?path=/Icons/Hand.icn/color/8.png">
                <div class="lable NoClick">Back</div>
-            </div>  
+            </button>  
            <!-- <div class="app-icon Click" >
                <img class="icon NoClick" src="">
                <div class="lable NoClick">Test</div>
--- a/templates/finder/admin-app.html
+++ b/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">
         
--- a/templates/personal-properties/app.html
+++ b/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">
@ -12,7 +7,8 @@
 					<div class="Links">
 						{{ range $link := .Links }}
 							<a href="{{$link.Url}}" target="_blank">
-								<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" alt="{{$link.Text}}">
+								<div class="link-lable">{{$link.Text}}</div>
+								<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" >
 							</a>
 						{{ end }}
 					</div>
--- a/templates/personal-properties/mobile-app.html
+++ b/templates/personal-properties/mobile-app.html
@ -6,7 +6,8 @@
 				<div class="Links">
 					{{ range $link := .Links }}
 						<a href="{{$link.Url}}" target="_blank">
-							<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" alt="{{$link.Text}}">
+							<div class="link-lable">{{$link.Text}}</div>
+							<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" >
 						</a>
 					{{ end }}
 				</div>
--- a/templates/wde-widgets/window-title-bar.html
+++ b/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 }}
--- a/wde/titlebar.go
+++ b/wde/titlebar.go
@ -0,0 +1,6 @@
+package wde
+
+type TitleBarConfig struct {
+	Lable       string
+	CloseButton bool
+}
--- a/wde/wde.go
+++ b/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
 	}
 }
--- a/webfilesystem/webfilesystem.go
+++ b/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:"-"`
Author	SHA1	Message	Date
cyber-dream	3b5b00f5b0	more work	2023-07-23 06:12:17 +03:00
cyber-dream	b79b65868c	icons and title-bar as widget	2023-07-23 02:55:08 +03:00
cyber-dream	766b7ac4bf	Merge branch 'webpack' of http://192.168.88.228:9101/cyber-dream/personal-website into webpack	2023-07-23 01:01:03 +03:00
cyber-dream	d1c5e8ea15	mobile finder	2023-07-23 01:00:51 +03:00