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;
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: ''
}
}
};

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

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