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

Create focus mode for windows

Browse Source
This commit is contained in:
cyber-dream 2023-05-04 05:00:09 +03:00
parent 6bc3b0d79b
commit 8b7dac3c60
7 changed files with 104 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
resources/sys/finder/finder.css
View File

@ -13,9 +13,17 @@
.FinderContent .ToolBar{
width: 100%;
height: 20px;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #555555;
background-color: #EEEEEE;
}
.Focused .FinderContent .ToolBar{
border-bottom: 1px solid #000000;
background-color: #DDDDDD;
}
.FinderContent .FinderFileView{
width: 100%;
height: 100%;

4
resources/sys/wde/basic-widgets.css
View File

@ -1,4 +1,4 @@
.ContentBorder { /*TODO Delete */
.ContentBorder { /*TODO Delete, deprecated*/
width: 100%;
height: 100%;
/* background-color: #DDDDDD;
@ -13,6 +13,8 @@
width: auto;
height: auto;
background-color: #DDDDDD;
border: 1px solid #000000;
}

34
resources/sys/wde/wde-scrollbar.css
View File

@ -16,7 +16,7 @@
.ScrollbarPlace{
overflow: hidden;
border-left: 1px solid #000000;
border-left: 1px solid #555555;
width: 14px;
height: 100%;
@ -25,9 +25,9 @@
width: 14px;
height: 100%;
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), inset 1px 1px 0px rgba(0, 0, 0, 0.14), inset 2px 2px 0px rgba(0, 0, 0, 0.19);
background-color: #EEEEEE;
/* Inside auto layout */
flex: none;
order: 0;
@ -35,16 +35,32 @@
flex-grow: 1;
}
.Focused .ScrollbarPlace{
border-left: 1px solid #000000;
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),
inset 1px 1px 0px rgba(0, 0, 0, 0.14),
inset 2px 2px 0px rgba(0, 0, 0, 0.19);
}
.ScrollBarScrollElement{
position: relative;
visibility: hidden;
width: 14px;
height: 31px;
background: #9999FF;
box-shadow: 0px -1px 0px #000000, 0px 1px 0px #000000, 0px 2px 0px rgba(0, 0, 0, 0.13), 0px 3px 0px rgba(0, 0, 0, 0.19), inset 0px 1px 0px rgba(255, 255, 255, 0.5), inset 1px 0px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px rgba(102, 102, 204, 0.91);
box-shadow: 0px -1px 0px #000000,
0px 1px 0px #000000,
0px 2px 0px rgba(0, 0, 0, 0.13),
0px 3px 0px rgba(0, 0, 0, 0.19),
inset 0px 1px 0px rgba(255, 255, 255, 0.5),
inset 1px 0px 0px rgba(255, 255, 255, 0.5),
inset -1px -1px 0px rgba(102, 102, 204, 0.91);
/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
@ -53,6 +69,10 @@
padding: 0px;
}
.Focused .ScrollBarScrollElement{
visibility: visible;
}
.ScrollBarScrollElementDrag{
pointer-events: none;
/* background-color: #0A4C95; */

40
resources/wde.js
View File

@ -150,6 +150,7 @@ class WebDesktopEnvironment{
newWindow.style.height = height.toString() + "px"
document.body.querySelector('#windows-layer').appendChild(newWindow)
WindowsCompositor.bringWindowToFront(newWindow)
return newWindow
}
}
@ -249,26 +250,22 @@ class WindowsCompositor{
let startDrag = function(event) {
let window = event.target.closest('.WindowFrame')
WindowsCompositor.bringWindowToFront(window)
let targetClasses = event.target.className.split(' ')
if (targetClasses[targetClasses.length - 1] != 'DragArea'){
return
if (event.target.classList.contains("DragArea")){
let xPosInit = event.offsetX
let yPosInit = event.offsetY
let dragWindow = function(event){
window.style.left = `${event.clientX - xPosInit}px`
window.style.top = `${event.clientY - yPosInit}px`
}
let stopDrag = function(){
removeEventListener('mousemove', dragWindow)
removeEventListener('mouseup', stopDrag)
}
addEventListener('mousemove', dragWindow)
addEventListener('mouseup', stopDrag)
}
let xPosInit = event.offsetX
let yPosInit = event.offsetY
let dragWindow = function(event){
window.style.left = `${event.clientX - xPosInit}px`
window.style.top = `${event.clientY - yPosInit}px`
}
let stopDrag = function(){
removeEventListener('mousemove', dragWindow)
removeEventListener('mouseup', stopDrag)
}
addEventListener('mousemove', dragWindow)
addEventListener('mouseup', stopDrag)
}
WindowsCompositor.windowsLayer.addEventListener('mousedown', startDrag)
}
}
@ -277,8 +274,11 @@ class WindowsCompositor{
* @param {HTMLElement} window
*/
static bringWindowToFront(window){ //FIXME
if (window != WindowsCompositor.windowsLayer.lastChild ){
WindowsCompositor.windowsLayer.insertBefore(WindowsCompositor.windowsLayer.lastChild, window)
if (!window.classList.contains("Focused")){
let previousWindow = WindowsCompositor.windowsLayer.lastChild
previousWindow.classList.remove("Focused")
window.classList.add("Focused")
WindowsCompositor.windowsLayer.insertBefore(WindowsCompositor.windowsLayer.lastChild, window)
}
}

41
resources/wdeUI.css
View File

@ -10,7 +10,9 @@
position: absolute;
border: 1px solid #000000;
background: #DDDDDD;
border: 1px solid #555555;
/* Inside auto layout */
flex: none;
@ -19,19 +21,31 @@
flex-grow: 1;
}
/* TODO Add shadows to windows */
.WindowFrame.Focused{
border: 1px solid #000000;
background-color: #CCCCCC;
}
.WindowFrameShadow {
box-shadow: 2px 2px 0px #555555;
}
.Focused .WindowFrameShadow {
box-shadow: 2px 2px 0px #000000;
}
.ConvexElement {
background: #CCCCCC;
.Focused .ConvexElement {
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;
}
.AdjectiveElement {
border: 1px solid #555555;
}
.Focused .AdjectiveElement {
border: 1px solid #000000;
box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25),
1px 1px 0px #FFFFFF;
@ -55,7 +69,7 @@
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
justify-content: center;
gap: 5px;
padding: 0px;
@ -67,12 +81,11 @@
flex-grow: 0;
}
.WindowFrame .TitleBar .Lable {
position: relative;
top: 1px;
/* font-size: 13px; */
color:#777777;
pointer-events: none;
white-space: nowrap;
@ -80,6 +93,10 @@
letter-spacing: 0.35px;
}
.WindowFrame.Focused .TitleBar .Lable {
color:#000000;
}
.WindowFrame .TitleBar .Button {
width: 11px;
@ -87,20 +104,24 @@
padding: 0%;
position: relative;
top: 1px;
visibility: hidden;
background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
border: 1px solid #222222;
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;
}
.WindowFrame.Focused .TitleBar .Button {
visibility: visible;
}
.WindowFrame .TitleBar .Button:active {
background-color: rgba(0, 0, 0, 0.4);
/* Green */
@ -108,7 +129,7 @@
-0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25);
}
.WindowFrame .TitleBar .VisualDragArea {
.Focused .VisualDragArea {
pointer-events: none;
width: 100%;
height: 11px;

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

@ -1,11 +1,13 @@
{{ 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 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">

10
templates/finder/app.tmpl
View File

@ -1,11 +1,13 @@
{{ define "finder/app.tmpl" }}
<div class="TitleBar DragArea">
<button id="closeWindowButton" class="Button" title="Close Window"></button>
<div id="Drag" class="VisualDragArea"></div>
<div class="Lable">
Files
<div class="TitleBarTest">
<div id="Drag" class="VisualDragArea"></div>
<div class="Lable">
Files
</div>
<div id="Drag" class="VisualDragArea"></div>
</div>
<div id="Drag" class="VisualDragArea"></div>
</div>
<div class="ToolBar">
<button id="BackButton">Back</button>