From 41bd2a43b8b4ecea0ac405a5385de23c6e560dc4 Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Sat, 22 Jul 2023 03:48:45 +0300 Subject: [PATCH] finder rework --- front/src/apps/finder/finder-window.js | 26 ++++---- front/src/apps/finder/finder.less | 24 +++---- front/src/desktop.less | 11 +++- .../src/apps/wde/widgets/basic-widgets.less | 16 ++--- front/src/theme.less | 10 ++- front/src/wde/application.js | 1 - front/src/wde/decorat/desktop-decorat.js | 5 +- front/src/wde/effects.less | 44 +++++++++++++ front/src/wde/legacy-ui.less | 36 +++++----- front/src/wde/primitives.less | 12 +++- front/src/wde/wde-desktop.js | 5 +- front/src/wde/widgets/file-view/file-view.js | 2 +- .../src/wde/widgets/file-view/file-view.less | 3 + .../wde/{ => widgets}/scrollbar/scrollbar.js | 4 +- .../scrollbar/scrollbar.less} | 42 ++++++------ .../src/wde/widgets/title-bar/title-bar.less | 66 +++++++++++++++++++ front/src/wde/window-frame.less | 50 ++++++++++++++ templates/finder/admin-app.html | 32 +++++++++ templates/finder/admin-app.tmpl | 32 --------- templates/finder/{app.tmpl => app.html} | 5 +- templates/wde-widgets/scrollbar.html | 8 +++ templates/wde-widgets/scrollbar.tmpl | 8 --- 22 files changed, 314 insertions(+), 128 deletions(-) create mode 100644 front/src/wde/effects.less rename front/src/wde/{ => widgets}/scrollbar/scrollbar.js (93%) rename front/src/wde/{scrollbar/wde-scrollbar.css => widgets/scrollbar/scrollbar.less} (79%) create mode 100644 front/src/wde/widgets/title-bar/title-bar.less create mode 100644 front/src/wde/window-frame.less create mode 100644 templates/finder/admin-app.html delete mode 100644 templates/finder/admin-app.tmpl rename templates/finder/{app.tmpl => app.html} (88%) create mode 100644 templates/wde-widgets/scrollbar.html delete mode 100644 templates/wde-widgets/scrollbar.tmpl diff --git a/front/src/apps/finder/finder-window.js b/front/src/apps/finder/finder-window.js index 45bc541..f7c6952 100644 --- a/front/src/apps/finder/finder-window.js +++ b/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', () => { - this.#wde.Decorat.CloseWindow(newWindow) - }) + // newWindow.querySelector("#closeWindowButton").addEventListener('click', () => { + // this.#wde.Decorat.CloseWindow(newWindow) + // }) - newWindow.querySelector("#RootButton").addEventListener('click', () =>{ - this.RenderDir('/') - }) + // newWindow.querySelector("#RootButton").addEventListener('click', () =>{ + // this.RenderDir('/') + // }) - newWindow.querySelector("#HomeButton").addEventListener('click', () =>{ - this.RenderDir('/home/user') - }) + // newWindow.querySelector("#HomeButton").addEventListener('click', () =>{ + // 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]) diff --git a/front/src/apps/finder/finder.less b/front/src/apps/finder/finder.less index 1ef1488..7b89691 100644 --- a/front/src/apps/finder/finder.less +++ b/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; - border-bottom: 1px solid #555555; - background-color: #EEEEEE; + min-height: 20px; + border-bottom: @eff-border-grey; } -.Focused .FinderContent .ToolBar{ +.window-frame.Focused .tool-bar{ border-bottom: 1px solid #000000; - background-color: #DDDDDD; + box-shadow: @eff-box-shadow-convex; } - - -.FinderContent .FinderFileView{ +.finder-content > .file-view-container{ width: 100%; height: 100%; - background-color: #FFFFFF; + // background-color: #FFFFFF; /* Auto layout */ display: flex; diff --git a/front/src/desktop.less b/front/src/desktop.less index a89a29c..1cb3b29 100644 --- a/front/src/desktop.less +++ b/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 */ diff --git a/front/src/src/apps/wde/widgets/basic-widgets.less b/front/src/src/apps/wde/widgets/basic-widgets.less index a38f7cd..e754ca7 100644 --- a/front/src/src/apps/wde/widgets/basic-widgets.less +++ b/front/src/src/apps/wde/widgets/basic-widgets.less @@ -1,12 +1,12 @@ -.ContentBorder { /*TODO Delete, deprecated*/ - width: 100%; - height: 100%; - /* background-color: #DDDDDD; - border: 1px solid #000000; */ +// .ContentBorder { /*TODO Delete, deprecated*/ +// width: 100%; +// height: 100%; +// /* background-color: #DDDDDD; +// border: 1px solid #000000; */ - overflow: hidden; - overflow-x: hidden; -} +// overflow: hidden; +// overflow-x: hidden; +// } .ContextMenu { position: absolute; diff --git a/front/src/theme.less b/front/src/theme.less index f598188..92ba542 100644 --- a/front/src/theme.less +++ b/front/src/theme.less @@ -1,2 +1,10 @@ @col-ceil: #9999CC; -@col-argent: #C0C0C0; \ No newline at end of file +@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; \ No newline at end of file diff --git a/front/src/wde/application.js b/front/src/wde/application.js index 9ad088c..3579e35 100644 --- a/front/src/wde/application.js +++ b/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} */ diff --git a/front/src/wde/decorat/desktop-decorat.js b/front/src/wde/decorat/desktop-decorat.js index 01b2e73..13c2cb2 100644 --- a/front/src/wde/decorat/desktop-decorat.js +++ b/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" diff --git a/front/src/wde/effects.less b/front/src/wde/effects.less new file mode 100644 index 0000000..0d02b5c --- /dev/null +++ b/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; \ No newline at end of file diff --git a/front/src/wde/legacy-ui.less b/front/src/wde/legacy-ui.less index 5c13eb5..654f865 100644 --- a/front/src/wde/legacy-ui.less +++ b/front/src/wde/legacy-ui.less @@ -1,25 +1,25 @@ -.WindowFrame { - /* Auto layout */ - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 4px; - padding-top: 2px; - padding-right: 6px; - gap: 4px; +// .WindowFrame { +// /* Auto layout */ +// display: flex; +// flex-direction: column; +// align-items: flex-start; +// padding: 4px; +// padding-top: 2px; +// padding-right: 6px; +// gap: 4px; - position: absolute; +// position: absolute; - background: #DDDDDD; - border: 1px solid #555555; +// background: #DDDDDD; +// border: 1px solid #555555; - /* Inside auto layout */ - flex: none; - order: 1; - align-self: stretch; - flex-grow: 1; -} +// /* Inside auto layout */ +// flex: none; +// order: 1; +// align-self: stretch; +// flex-grow: 1; +// } /* TODO Add shadows to windows */ .WindowFrame.Focused{ diff --git a/front/src/wde/primitives.less b/front/src/wde/primitives.less index e4901ed..6ae9b84 100644 --- a/front/src/wde/primitives.less +++ b/front/src/wde/primitives.less @@ -1,3 +1,11 @@ -.WdePrimitives.AdjectiveElement { - border: 1px solid #555555; +.WdePrimitives { + + .adjective{ + border: 1px solid #555555; + } + + .black-border{ + border: 1px solid #000000; + } + } \ No newline at end of file diff --git a/front/src/wde/wde-desktop.js b/front/src/wde/wde-desktop.js index cfaf958..0c14c3f 100644 --- a/front/src/wde/wde-desktop.js +++ b/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") diff --git a/front/src/wde/widgets/file-view/file-view.js b/front/src/wde/widgets/file-view/file-view.js index 100a36a..222a419 100644 --- a/front/src/wde/widgets/file-view/file-view.js +++ b/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 diff --git a/front/src/wde/widgets/file-view/file-view.less b/front/src/wde/widgets/file-view/file-view.less index 1956f68..0b9072b 100644 --- a/front/src/wde/widgets/file-view/file-view.less +++ b/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 */ diff --git a/front/src/wde/scrollbar/scrollbar.js b/front/src/wde/widgets/scrollbar/scrollbar.js similarity index 93% rename from front/src/wde/scrollbar/scrollbar.js rename to front/src/wde/widgets/scrollbar/scrollbar.js index 64969f1..a57542e 100644 --- a/front/src/wde/scrollbar/scrollbar.js +++ b/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' diff --git a/front/src/wde/scrollbar/wde-scrollbar.css b/front/src/wde/widgets/scrollbar/scrollbar.less similarity index 79% rename from front/src/wde/scrollbar/wde-scrollbar.css rename to front/src/wde/widgets/scrollbar/scrollbar.less index e256900..8cfad91 100644 --- a/front/src/wde/scrollbar/wde-scrollbar.css +++ b/front/src/wde/widgets/scrollbar/scrollbar.less @@ -1,22 +1,22 @@ -.scroller { - overflow-y: scroll; - scrollbar-color: #0A4C95 #C2D2E4; - border-radius: 0px; - } +// .scroller { +// overflow-y: scroll; +// scrollbar-color: #0A4C95 #C2D2E4; +// border-radius: 0px; +// } -.scroll_content { - position: relative; - width: 400px; - height: 414px; - top: -17px; - padding: 20px 10px 20px 10px; - overflow-y: auto; -} +// .scroll-content { +// position: relative; +// width: 400px; +// height: 414px; +// top: -17px; +// padding: 20px 10px 20px 10px; +// 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{ - border-left: 1px solid #000000; +.Focused .active .scrollbar-place{ + 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; diff --git a/front/src/wde/widgets/title-bar/title-bar.less b/front/src/wde/widgets/title-bar/title-bar.less new file mode 100644 index 0000000..f8b90d0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/front/src/wde/window-frame.less b/front/src/wde/window-frame.less new file mode 100644 index 0000000..85e4df6 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/templates/finder/admin-app.html b/templates/finder/admin-app.html new file mode 100644 index 0000000..a536368 --- /dev/null +++ b/templates/finder/admin-app.html @@ -0,0 +1,32 @@ +{{ define "finder/admin-app.tmpl" }} +
+ + +
+
+ Admin Finder +
+
+ +
+
+
+ +
+ +
+
+
+ +
+ {{template "wde-widgets/scrollbar.tmpl" .}} +
+
+
+{{ end }} + + diff --git a/templates/finder/admin-app.tmpl b/templates/finder/admin-app.tmpl deleted file mode 100644 index f724d2f..0000000 --- a/templates/finder/admin-app.tmpl +++ /dev/null @@ -1,32 +0,0 @@ -{{ define "finder/admin-app.tmpl" }} -
- - -
-
- Admin Finder -
-
- -
-
-
- -
- - - - -
You Favorite Movie
-
-
-
- -
- {{template "wde-widgets/scrollbar.tmpl" .}} -
-
-
-{{ end }} - - diff --git a/templates/finder/app.tmpl b/templates/finder/app.html similarity index 88% rename from templates/finder/app.tmpl rename to templates/finder/app.html index e6d3cc0..d081a5c 100644 --- a/templates/finder/app.tmpl +++ b/templates/finder/app.html @@ -10,8 +10,7 @@
-
- +
{{ end }} diff --git a/templates/wde-widgets/scrollbar.html b/templates/wde-widgets/scrollbar.html new file mode 100644 index 0000000..d6682ac --- /dev/null +++ b/templates/wde-widgets/scrollbar.html @@ -0,0 +1,8 @@ +{{ define "wde-widgets/scrollbar.tmpl" }} +
+
+
+
+
+
+{{ end }} \ No newline at end of file diff --git a/templates/wde-widgets/scrollbar.tmpl b/templates/wde-widgets/scrollbar.tmpl deleted file mode 100644 index 4dc0cde..0000000 --- a/templates/wde-widgets/scrollbar.tmpl +++ /dev/null @@ -1,8 +0,0 @@ -{{ define "wde-widgets/scrollbar.tmpl" }} -
-
-
-
-
-
-{{ end }} \ No newline at end of file