interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: More styling for placeholder

Browse source
This commit is contained in:
sthag 2025-11-02 13:12:04 +01:00
parent a18b42bb2a
commit 50b43cdc2f
3 changed files with 47 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

38
source/code/windows.js
View file

@ -52,42 +52,62 @@ class HippieTaskBar {
if (!this.isDragging) return; if (!this.isDragging) return;
const closestEdge = getClosestEdge(this.placeholder); const closestEdge = getClosestEdge(this.placeholder);
const borderRadius = '16px'; const borderRadius = '4px';
const attributes = { const attributes = {
top: { top: {
className: 'top',
styles: { styles: {
flexDirection: 'row',
borderStyle: '',
borderColor: '',
borderTopStyle: 'solid',
borderTopColor: 'white',
borderTopRightRadius: '', borderTopRightRadius: '',
borderBottomRightRadius: borderRadius, borderBottomRightRadius: borderRadius,
borderBottomLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius,
borderTopLeftRadius: '', borderTopLeftRadius: ''
flexDirection: 'row'
} }
}, },
right: { right: {
className: 'right',
styles: { styles: {
flexDirection: 'column',
borderStyle: '',
borderColor: '',
borderRightStyle: 'solid',
borderRightColor: 'white',
borderTopRightRadius: '', borderTopRightRadius: '',
borderBottomRightRadius: '', borderBottomRightRadius: '',
borderBottomLeftRadius: borderRadius, borderBottomLeftRadius: borderRadius,
borderTopLeftRadius: borderRadius, borderTopLeftRadius: borderRadius
flexDirection: 'column'
} }
}, },
bottom: { bottom: {
className: 'bottom',
styles: { styles: {
flexDirection: 'row',
borderStyle: '',
borderColor: '',
borderBottomStyle: 'solid',
borderBottomColor: 'white',
borderTopRightRadius: borderRadius, borderTopRightRadius: borderRadius,
borderBottomRightRadius: '', borderBottomRightRadius: '',
borderBottomLeftRadius: '', borderBottomLeftRadius: '',
borderTopLeftRadius: borderRadius, borderTopLeftRadius: borderRadius
flexDirection: 'row'
} }
}, },
left: { left: {
className: 'left',
styles: { styles: {
flexDirection: 'column',
borderStyle: '',
borderColor: '',
borderLeftStyle: 'solid',
borderLeftColor: 'white',
borderTopRightRadius: borderRadius, borderTopRightRadius: borderRadius,
borderBottomRightRadius: borderRadius, borderBottomRightRadius: borderRadius,
borderBottomLeftRadius: '', borderBottomLeftRadius: '',
borderTopLeftRadius: '', borderTopLeftRadius: ''
flexDirection: 'column'
} }
} }
}; };

2
source/screens/demo/examples/ui/windows.liquid
View file

@ -43,7 +43,7 @@ tags:
<div class="box"></div> <div class="box"></div>
<div class="box_brd"></div> <div class="box_brd"></div>
<div> <div>
<div>task bar</div> <span>task bar</span>
<div class="box_brd"></div> <div class="box_brd"></div>
</div> </div>
</div> </div>

18
source/style/modules/ui/_windows_module.scss
View file

@ -118,10 +118,25 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
display: none; display: none;
z-index: map.get(hippie.$z-indexes, "toast"); z-index: map.get(hippie.$z-indexes, "toast");
position: fixed; position: fixed;
border: 2px dashed black; border: 1px dashed black;
border-radius: 2px;
background-color: rgba(0, 0, 0, .4); background-color: rgba(0, 0, 0, .4);
padding: 16px; padding: 16px;
&.top,
&.bottom {
span {
writing-mode: unset;
}
}
&.right,
&.left {
span {
writing-mode: vertical-rl;
}
}
* { * {
pointer-events: none; pointer-events: none;
} }
@ -129,6 +144,7 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
& > div { & > div {
@extend %flex-bar; @extend %flex-bar;
flex-direction: inherit; flex-direction: inherit;
flex-wrap: nowrap;
} }
.box, .box,