cyber-dream/personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finder rework

Browse Source
This commit is contained in:
cyber-dream 2023-07-22 03:48:45 +03:00
parent bd0f77b1b6
commit 41bd2a43b8
22 changed files with 314 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
front/src/apps/finder/finder-window.js
View File

@ -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])

24
front/src/apps/finder/finder.less
View File

@ -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;

11
front/src/desktop.less
View File

@ -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 */

16
front/src/src/apps/wde/widgets/basic-widgets.less
View File

@ -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;

10
front/src/theme.less
View File

@ -1,2 +1,10 @@
@col-ceil: #9999CC;
@col-argent: #C0C0C0;
@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;

1
front/src/wde/application.js
View File

@ -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} */

5
front/src/wde/decorat/desktop-decorat.js
View File

@ -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"

44
front/src/wde/effects.less Normal file
View File

@ -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;

36
front/src/wde/legacy-ui.less
View File

@ -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{

12
front/src/wde/primitives.less
View File

@ -1,3 +1,11 @@
.WdePrimitives.AdjectiveElement {
border: 1px solid #555555;
.WdePrimitives {
.adjective{
border: 1px solid #555555;
}
.black-border{
border: 1px solid #000000;
}
}

5
front/src/wde/wde-desktop.js
View File

@ -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")

2
front/src/wde/widgets/file-view/file-view.js
View File

@ -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

3
front/src/wde/widgets/file-view/file-view.less
View File

@ -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 */

4
front/src/wde/scrollbar/scrollbar.js → front/src/wde/widgets/scrollbar/scrollbar.js
View File

@ -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'

42
front/src/wde/scrollbar/wde-scrollbar.css → front/src/wde/widgets/scrollbar/scrollbar.less
View File

@ -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;

66
front/src/wde/widgets/title-bar/title-bar.less Normal file
View File

@ -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;
}

50
front/src/wde/window-frame.less Normal file
View File

@ -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;
}

32
templates/finder/admin-app.html Normal file
View File

@ -0,0 +1,32 @@
{{ 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>
<div id="ContentBorder" class="content-border AdjectiveElement">
<div class="finder-content">
<div class="tool-bar">
<!-- <button id="BackButton">Back</button>
<button id="UpButton">Up</button>
<button id="RootButton">/</button>
<button id="HomeButton">Home</button>
<div class="AddressBar" contentEditable="true">You Favorite Movie</div> -->
</div>
<div class="file-view-container">
<div class="FileTileView">
</div>
{{template "wde-widgets/scrollbar.tmpl" .}}
</div>
</div>
</div>
{{ end }}

32
templates/finder/admin-app.tmpl
View File

@ -1,32 +0,0 @@
{{ define "finder/admin-app.tmpl" }}
<div class="TitleBar DragArea">
<button id="closeWindowButton" class="Button" title="Close Window"></button>
<div id="Drag" class="VisualDragArea"></div>
<div class="Lable">
Admin Finder
</div>
<div id="Drag" class="VisualDragArea"></div>
</div>
<div id="ContentBorder" class="ContentBorder AdjectiveElement">
<div class="FinderContent">
<!-- TODO Fix ConvexElement -->
<div class="ToolBar ConvexElement">
<button id="BackButton">Back</button>
<button id="UpButton">Up</button>
<button id="RootButton">/</button>
<button id="HomeButton">Home</button>
<div class="AddressBar" contentEditable="true">You Favorite Movie</div>
</div>
<div class="FinderFileView">
<div class="FileTileView">
</div>
{{template "wde-widgets/scrollbar.tmpl" .}}
</div>
</div>
</div>
{{ end }}

5
templates/finder/app.tmpl → templates/finder/app.html
View File

@ -10,8 +10,7 @@
</div>
<div id="ContentBorder" class="ContentBorder AdjectiveElement">
<div class="FinderContent">
<!-- TODO Fix ConvexElement -->
<!-- <div class="FinderContent">
<div class="ToolBar ConvexElement">
Folder info
</div>
@ -20,7 +19,7 @@
</div>
{{template "wde-widgets/scrollbar.tmpl" .}}
</div>
</div>
</div> -->
</div>
{{ end }}

8
templates/wde-widgets/scrollbar.html Normal file
View File

@ -0,0 +1,8 @@
{{ define "wde-widgets/scrollbar.tmpl" }}
<div class="scrollbar-place">
<div class="scroll-element">
<div class="drag-element">
</div>
</div>
</div>
{{ end }}

8
templates/wde-widgets/scrollbar.tmpl
View File

@ -1,8 +0,0 @@
{{ define "wde-widgets/scrollbar.tmpl" }}
<div class="ScrollbarPlace">
<div class="ScrollBarScrollElement">
<div class="ScrollBarScrollElementDrag">
</div>
</div>
</div>
{{ end }}