From 667485fce12382c242cee66bebc7441fb7157d15 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 2 Nov 2025 11:32:57 +0100 Subject: [PATCH 1/7] fix: Task bar flex style --- source/style/modules/ui/_windows_module.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss index d633b29..228798a 100644 --- a/source/style/modules/ui/_windows_module.scss +++ b/source/style/modules/ui/_windows_module.scss @@ -8,8 +8,7 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half; display: flex; flex-direction: row; flex-wrap: wrap; - align-items: stretch; - align-content: center; + align-items: center; justify-content: flex-start; gap: hippie.$space_half hippie.$space_basic; } From 0f561d360aa9365b8a5fb69ae73747b65b5da5fe Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 2 Nov 2025 11:39:11 +0100 Subject: [PATCH 2/7] feat: Change task bar placeholder - Add content - Reflect style from task bar --- .../screens/demo/examples/ui/windows.liquid | 9 ++++- source/style/modules/ui/_windows_module.scss | 34 ++++++++++++++++--- 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid index a0603e6..35987a9 100644 --- a/source/screens/demo/examples/ui/windows.liquid +++ b/source/screens/demo/examples/ui/windows.liquid @@ -39,7 +39,14 @@ tags:
-
+
+
+
+
+
task bar
+
+
+
{% endblock %} {%- block script %} diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss index 228798a..8a63ffe 100644 --- a/source/style/modules/ui/_windows_module.scss +++ b/source/style/modules/ui/_windows_module.scss @@ -114,11 +114,35 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half; } #placeholder { + @extend %flex-bar; display: none; - z-index: map.get(hippie.$z-indexes, "content-top"); + z-index: map.get(hippie.$z-indexes, "toast"); position: fixed; - width: 100px; - height: 100px; - border: 2px dashed deeppink; - background-color: hotpink; + border: 2px dashed black; + background-color: rgba(0, 0, 0, .4); + padding: 16px; + + * { + pointer-events: none; + } + + & > div { + @extend %flex-bar; + flex-direction: inherit; + } + + .box, + .box_brd { + width: 16px; + height: 16px; + } + + .box { + background-color: black; + } + + .box_brd { + border: 2px solid black; + background-color: transparent; + } } \ No newline at end of file From aa5d095e649344c95951e504f5eb380a03c95b4f Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 2 Nov 2025 11:40:54 +0100 Subject: [PATCH 3/7] feat: Change placeholder while dragging - Move edge detection to global function - Change placeholder style during mouse move --- source/code/hippie/app.js | 28 +++++++++++++++++++++------- source/code/windows.js | 36 +++++++++++++++++++----------------- 2 files changed, 40 insertions(+), 24 deletions(-) diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 4da28e0..42605fe 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -339,6 +339,27 @@ class DateDisplay { } } +function checkButtonAndTarget(event, element, button = 0) { + return ( + event.button === button && + event.target === element + ); +} + +function getClosestEdge(element) { + const rect = element.getBoundingClientRect(); + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + const distances = { + top: rect.top, + right: windowWidth - rect.right, + bottom: windowHeight - rect.bottom, + left: rect.left + }; + + return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b); +} + // CONCEPTS // NOTE: Benutzt private Zuweisungen @@ -524,10 +545,3 @@ function gigabytes(percent, total, round) { return g; } - -function checkButtonAndTarget(event, element, button = 0) { - return ( - event.button === button && - event.target === element - ); -} \ No newline at end of file diff --git a/source/code/windows.js b/source/code/windows.js index 6ca9f64..71abe7e 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -47,8 +47,8 @@ class HippieTaskBar { this.offsetX = this.placeholder.getBoundingClientRect().width / 2; this.offsetY = this.placeholder.getBoundingClientRect().height / 2; - let x = event.clientX - this.offsetX; - let y = event.clientY - this.offsetY; + const x = event.clientX - this.offsetX; + const y = event.clientY - this.offsetY; this.placeholder.style.left = `${x}px`; this.placeholder.style.top = `${y}px`; @@ -61,13 +61,24 @@ class HippieTaskBar { if (this.isDragging) { if (!this.isDragging) return; - let x = event.clientX - this.offsetX; - let y = event.clientY - this.offsetY; - - console.debug('Position: ', x, y); + const x = event.clientX - this.offsetX; + const y = event.clientY - this.offsetY; + const closestEdge = getClosestEdge(this.placeholder); this.placeholder.style.left = `${x}px`; this.placeholder.style.top = `${y}px`; + + switch (closestEdge) { + case 'right': + case 'left': + this.placeholder.style.flexDirection = 'column'; + break; + case 'top': + case 'bottom': + default: + this.placeholder.style.flexDirection = 'row'; + break; + } } } @@ -85,7 +96,7 @@ class HippieTaskBar { showPlaceholder() { this.element.style.display = 'none'; - this.placeholder.style.display = 'block'; + this.placeholder.style.display = 'flex'; } hidePlaceholder() { @@ -95,16 +106,7 @@ class HippieTaskBar { // TODO: Prüfung auf Ziel auslagern und schon bei Mausbewegung verfügbar machen snapToEdges() { - const rect = this.placeholder.getBoundingClientRect(); - const windowWidth = window.innerWidth; - const windowHeight = window.innerHeight; - const distances = { - top: rect.top, - right: windowWidth - rect.right, - bottom: windowHeight - rect.bottom, - left: rect.left - }; - const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b); + const closestEdge = getClosestEdge(this.placeholder); this.setOptions(closestEdge); this.date.changeFormat(this.options.date, this.options.direction); From 3dc836656a7898c6e3b1d01e5a2e63e494e482ec Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 2 Nov 2025 11:57:04 +0100 Subject: [PATCH 4/7] fix: Placeholder moving away from cursor - Create global centerElementUnderCursor for centering - Change order of actions for mouse move --- source/code/hippie/app.js | 10 ++++++++++ source/code/windows.js | 21 ++++----------------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 42605fe..607cc92 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -360,6 +360,16 @@ function getClosestEdge(element) { return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b); } +function centerElementUnderCursor(event, element) { + const offsetX = element.getBoundingClientRect().width / 2; + const offsetY = element.getBoundingClientRect().height / 2; + const x = event.clientX - offsetX; + const y = event.clientY - offsetY; + + element.style.left = `${x}px`; + element.style.top = `${y}px`; +} + // CONCEPTS // NOTE: Benutzt private Zuweisungen diff --git a/source/code/windows.js b/source/code/windows.js index 71abe7e..5ae07ef 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -3,10 +3,8 @@ class HippieTaskBar { this.element = element; this.placeholder = placeholder; this.date = null; - this.offsetX = 0; - this.offsetY = 0; this.isDragging = false; - this.barSize = '64px'; + this.barSize = ''; // TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden this.options = options || { direction: 0, @@ -41,17 +39,9 @@ class HippieTaskBar { this.isDragging = true; - // TODO: Platzhalter anpassen je nach Ziel this.showPlaceholder(); - this.offsetX = this.placeholder.getBoundingClientRect().width / 2; - this.offsetY = this.placeholder.getBoundingClientRect().height / 2; - - const x = event.clientX - this.offsetX; - const y = event.clientY - this.offsetY; - - this.placeholder.style.left = `${x}px`; - this.placeholder.style.top = `${y}px`; + centerElementUnderCursor(event, this.placeholder); } event.preventDefault(); @@ -61,13 +51,8 @@ class HippieTaskBar { if (this.isDragging) { if (!this.isDragging) return; - const x = event.clientX - this.offsetX; - const y = event.clientY - this.offsetY; const closestEdge = getClosestEdge(this.placeholder); - this.placeholder.style.left = `${x}px`; - this.placeholder.style.top = `${y}px`; - switch (closestEdge) { case 'right': case 'left': @@ -79,6 +64,8 @@ class HippieTaskBar { this.placeholder.style.flexDirection = 'row'; break; } + + centerElementUnderCursor(event, this.placeholder); } } From 53897754e28682c13a93258486aee8838d1d98f2 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 2 Nov 2025 11:57:22 +0100 Subject: [PATCH 5/7] chore: More globals for jshint --- .jshintrc | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/.jshintrc b/.jshintrc index e11b79d..cfc5480 100644 --- a/.jshintrc +++ b/.jshintrc @@ -88,9 +88,16 @@ // Custom globals "globals" : { // additional predefined global variables - "debugOn": true, - "hippie": true, - "viewHover": true, - "basicEase": true + "debugOn": true, + "hippie": true, + "viewHover": true, + "basicEase": true, + "TimeDisplay": true, + "DateDisplay": true, + "checkButtonAndTarget": true, + "getClosestEdge": true, + "centerElementUnderCursor": true, + "setAttributesAccordingToPosition": true, + "HippieTaskBar": true } } From a18b42bb2a02687674976bc1bf3e78c024df3bc4 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 2 Nov 2025 12:22:08 +0100 Subject: [PATCH 6/7] feat: More dynamic styling for placeholder - Create global setAttributesAccordingToPosition - Change style of placeholder to show snap side --- source/code/hippie/app.js | 12 ++++++++ source/code/windows.js | 62 ++++++++++++++++++++++++++------------- 2 files changed, 53 insertions(+), 21 deletions(-) diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 607cc92..ed0f66d 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -370,6 +370,18 @@ function centerElementUnderCursor(event, element) { element.style.top = `${y}px`; } +function setAttributesAccordingToPosition(element, position, attributes) { + element.classList.remove(...Object.values(attributes).map(pos => pos.className)); + Object.keys(attributes[position].styles).forEach(key => { + element.style[key] = ''; + }); + + element.classList.add(attributes[position].className); + Object.entries(attributes[position].styles).forEach(([key, value]) => { + element.style[key] = value; + }); +} + // CONCEPTS // NOTE: Benutzt private Zuweisungen diff --git a/source/code/windows.js b/source/code/windows.js index 5ae07ef..2834619 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -52,19 +52,47 @@ class HippieTaskBar { if (!this.isDragging) return; const closestEdge = getClosestEdge(this.placeholder); + const borderRadius = '16px'; + const attributes = { + top: { + styles: { + borderTopRightRadius: '', + borderBottomRightRadius: borderRadius, + borderBottomLeftRadius: borderRadius, + borderTopLeftRadius: '', + flexDirection: 'row' + } + }, + right: { + styles: { + borderTopRightRadius: '', + borderBottomRightRadius: '', + borderBottomLeftRadius: borderRadius, + borderTopLeftRadius: borderRadius, + flexDirection: 'column' + } + }, + bottom: { + styles: { + borderTopRightRadius: borderRadius, + borderBottomRightRadius: '', + borderBottomLeftRadius: '', + borderTopLeftRadius: borderRadius, + flexDirection: 'row' + } + }, + left: { + styles: { + borderTopRightRadius: borderRadius, + borderBottomRightRadius: borderRadius, + borderBottomLeftRadius: '', + borderTopLeftRadius: '', + flexDirection: 'column' + } + } + }; - switch (closestEdge) { - case 'right': - case 'left': - this.placeholder.style.flexDirection = 'column'; - break; - case 'top': - case 'bottom': - default: - this.placeholder.style.flexDirection = 'row'; - break; - } - + setAttributesAccordingToPosition(this.placeholder, closestEdge, attributes); centerElementUnderCursor(event, this.placeholder); } } @@ -139,15 +167,7 @@ class HippieTaskBar { } }; - this.element.classList.remove(...Object.values(attributes).map(pos => pos.className)); - Object.keys(attributes[position].styles).forEach(key => { - this.element.style[key] = ''; - }); - - this.element.classList.add(attributes[position].className); - Object.entries(attributes[position].styles).forEach(([key, value]) => { - this.element.style[key] = value; - }); + setAttributesAccordingToPosition(this.element, position, attributes); switch (position) { case 'right': From 50b43cdc2f7989cdcc73fc1845b0f8870795e00c Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 2 Nov 2025 13:12:04 +0100 Subject: [PATCH 7/7] feat: More styling for placeholder --- source/code/windows.js | 38 ++++++++++++++----- .../screens/demo/examples/ui/windows.liquid | 2 +- source/style/modules/ui/_windows_module.scss | 18 ++++++++- 3 files changed, 47 insertions(+), 11 deletions(-) diff --git a/source/code/windows.js b/source/code/windows.js index 2834619..c7ab166 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -52,42 +52,62 @@ class HippieTaskBar { if (!this.isDragging) return; const closestEdge = getClosestEdge(this.placeholder); - const borderRadius = '16px'; + const borderRadius = '4px'; const attributes = { top: { + className: 'top', styles: { + flexDirection: 'row', + borderStyle: '', + borderColor: '', + borderTopStyle: 'solid', + borderTopColor: 'white', borderTopRightRadius: '', borderBottomRightRadius: borderRadius, borderBottomLeftRadius: borderRadius, - borderTopLeftRadius: '', - flexDirection: 'row' + borderTopLeftRadius: '' } }, right: { + className: 'right', styles: { + flexDirection: 'column', + borderStyle: '', + borderColor: '', + borderRightStyle: 'solid', + borderRightColor: 'white', borderTopRightRadius: '', borderBottomRightRadius: '', borderBottomLeftRadius: borderRadius, - borderTopLeftRadius: borderRadius, - flexDirection: 'column' + borderTopLeftRadius: borderRadius } }, bottom: { + className: 'bottom', styles: { + flexDirection: 'row', + borderStyle: '', + borderColor: '', + borderBottomStyle: 'solid', + borderBottomColor: 'white', borderTopRightRadius: borderRadius, borderBottomRightRadius: '', borderBottomLeftRadius: '', - borderTopLeftRadius: borderRadius, - flexDirection: 'row' + borderTopLeftRadius: borderRadius } }, left: { + className: 'left', styles: { + flexDirection: 'column', + borderStyle: '', + borderColor: '', + borderLeftStyle: 'solid', + borderLeftColor: 'white', borderTopRightRadius: borderRadius, borderBottomRightRadius: borderRadius, borderBottomLeftRadius: '', - borderTopLeftRadius: '', - flexDirection: 'column' + borderTopLeftRadius: '' } } }; diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid index 35987a9..af1dbeb 100644 --- a/source/screens/demo/examples/ui/windows.liquid +++ b/source/screens/demo/examples/ui/windows.liquid @@ -43,7 +43,7 @@ tags:
-
task bar
+ task bar
diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss index 8a63ffe..98475c4 100644 --- a/source/style/modules/ui/_windows_module.scss +++ b/source/style/modules/ui/_windows_module.scss @@ -118,10 +118,25 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half; display: none; z-index: map.get(hippie.$z-indexes, "toast"); position: fixed; - border: 2px dashed black; + border: 1px dashed black; + border-radius: 2px; background-color: rgba(0, 0, 0, .4); padding: 16px; + &.top, + &.bottom { + span { + writing-mode: unset; + } + } + + &.right, + &.left { + span { + writing-mode: vertical-rl; + } + } + * { pointer-events: none; } @@ -129,6 +144,7 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half; & > div { @extend %flex-bar; flex-direction: inherit; + flex-wrap: nowrap; } .box,