From b79b65868c62321393a13633f9ad9a7770c490ad Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Sun, 23 Jul 2023 02:55:08 +0300 Subject: [PATCH] icons and title-bar as widget --- apps/aboutme/personalprops.go | 19 +++++++---- apps/finder/finder.go | 13 +++++-- front/src/apps/finder/finder-window.js | 34 ++++++++++++------- front/src/mobile.less | 4 ++- front/src/wde/wde-desktop.js | 4 +-- .../src/wde/widgets/title-bar/title-bar.less | 30 +++++++++++++--- icons/genericApp/color/16.png | 3 ++ icons/genericApp/color/32.png | 3 ++ icons/genericDocument/color/16.png | 3 ++ icons/genericDocument/color/32.png | 3 ++ icons/genericFolder/color/16.png | 3 ++ icons/genericFolder/color/32.png | 3 ++ templates/finder/admin-app.html | 10 +----- templates/personal-properties/app.html | 7 +--- templates/wde-widgets/window-title-bar.html | 14 ++++++++ wde/titlebar.go | 6 ++++ wde/wde.go | 22 +++++++----- webfilesystem/webfilesystem.go | 5 +++ 18 files changed, 133 insertions(+), 53 deletions(-) create mode 100644 icons/genericApp/color/16.png create mode 100644 icons/genericApp/color/32.png create mode 100644 icons/genericDocument/color/16.png create mode 100644 icons/genericDocument/color/32.png create mode 100644 icons/genericFolder/color/16.png create mode 100644 icons/genericFolder/color/32.png create mode 100644 templates/wde-widgets/window-title-bar.html create mode 100644 wde/titlebar.go diff --git a/apps/aboutme/personalprops.go b/apps/aboutme/personalprops.go index 54bce08..2905ae3 100644 --- a/apps/aboutme/personalprops.go +++ b/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 } diff --git a/apps/finder/finder.go b/apps/finder/finder.go index 767fd08..3ea01ac 100644 --- a/apps/finder/finder.go +++ b/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 { diff --git a/front/src/apps/finder/finder-window.js b/front/src/apps/finder/finder-window.js index 2afb6aa..d7f3011 100644 --- 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; } } diff --git a/front/src/mobile.less b/front/src/mobile.less index ff5f61a..0a993cc 100644 --- a/front/src/mobile.less +++ b/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 */ diff --git a/front/src/wde/wde-desktop.js b/front/src/wde/wde-desktop.js index 4e1c100..1d845af 100644 --- a/front/src/wde/wde-desktop.js +++ b/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") diff --git a/front/src/wde/widgets/title-bar/title-bar.less b/front/src/wde/widgets/title-bar/title-bar.less index f8b90d0..6c6b84e 100644 --- a/front/src/wde/widgets/title-bar/title-bar.less +++ b/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; -} \ No newline at end of file +.window-frame.Focused .title-bar > .button{ + visibility:visible; +} + +// .window-frame.Focused .title-bar > .button:active{ +// background-color: aqua; +// } diff --git a/icons/genericApp/color/16.png b/icons/genericApp/color/16.png new file mode 100644 index 0000000..2fd9d0a --- /dev/null +++ b/icons/genericApp/color/16.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cbacb4cc556222f43858a52ab4ae489c0e07f8619f9e7deb865cefba1a3a466a +size 654 diff --git a/icons/genericApp/color/32.png b/icons/genericApp/color/32.png new file mode 100644 index 0000000..b0b1d00 --- /dev/null +++ b/icons/genericApp/color/32.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8ae693bb072254c8b58a3a7599ba8c8cd2f5001c82598e1d6897087717034d70 +size 1829 diff --git a/icons/genericDocument/color/16.png b/icons/genericDocument/color/16.png new file mode 100644 index 0000000..cf6d3ab --- /dev/null +++ b/icons/genericDocument/color/16.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:31a33b4d2d4394231334c0a8bfbfca44cbed85929fe9f274436515b594848bc5 +size 652 diff --git a/icons/genericDocument/color/32.png b/icons/genericDocument/color/32.png new file mode 100644 index 0000000..9c40b02 --- /dev/null +++ b/icons/genericDocument/color/32.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cdca3a8b0e583e6b80baaceff16eafc3d77d889a7a03cccd096b7e438ff2dbde +size 1676 diff --git a/icons/genericFolder/color/16.png b/icons/genericFolder/color/16.png new file mode 100644 index 0000000..48c03b8 --- /dev/null +++ b/icons/genericFolder/color/16.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e5372e8f8659b9c1b70def20ffdbc418710eb96503a44992e13246941a589d6e +size 567 diff --git a/icons/genericFolder/color/32.png b/icons/genericFolder/color/32.png new file mode 100644 index 0000000..4e95f49 --- /dev/null +++ b/icons/genericFolder/color/32.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:83a18ca489a0483d157c7d7728f902bfef6ae0305a8a4ed40e72075b7e1b5705 +size 1238 diff --git a/templates/finder/admin-app.html b/templates/finder/admin-app.html index 8e33ddc..a3e0b93 100644 --- a/templates/finder/admin-app.html +++ b/templates/finder/admin-app.html @@ -1,13 +1,5 @@ {{ define "finder/admin-app.tmpl" }} -
- -
-
- Admin Finder -
-
- -
+ {{template "wde-widgets/window-title-bar.tmpl" .TitleBarConfig}}
diff --git a/templates/personal-properties/app.html b/templates/personal-properties/app.html index fab0e87..5c916fb 100644 --- a/templates/personal-properties/app.html +++ b/templates/personal-properties/app.html @@ -1,10 +1,5 @@ {{ define "personal-properties/app.tmpl" }} -
- -
-
About me
-
-
+ {{template "wde-widgets/window-title-bar.tmpl" .TitleBarConfig}}
diff --git a/templates/wde-widgets/window-title-bar.html b/templates/wde-widgets/window-title-bar.html new file mode 100644 index 0000000..999a6ce --- /dev/null +++ b/templates/wde-widgets/window-title-bar.html @@ -0,0 +1,14 @@ +{{ define "wde-widgets/window-title-bar.tmpl" }} +
+ {{if .CloseButton}} + + {{end}} +
+ + +
+ {{.Lable}} +
+
+
+{{ end }} \ No newline at end of file diff --git a/wde/titlebar.go b/wde/titlebar.go new file mode 100644 index 0000000..15e6699 --- /dev/null +++ b/wde/titlebar.go @@ -0,0 +1,6 @@ +package wde + +type TitleBarConfig struct { + Lable string + CloseButton bool +} diff --git a/wde/wde.go b/wde/wde.go index 9f89d33..cd52f51 100644 --- 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 } } diff --git a/webfilesystem/webfilesystem.go b/webfilesystem/webfilesystem.go index 1f4cdf0..32ef992 100644 --- 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:"-"`