blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-22 01:12:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature(Dashboard Transitions): uses Vue's built-in Transition component to add transitions to the widget config elements

Browse Source
This commit is contained in:
SimonGschnell
2024-11-29 13:23:51 +01:00
parent 278e5d8abd
commit 1336860ecd
5 changed files with 75 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Drop/Grid.js
+25 -23
View File
@@ -356,29 +356,31 @@ export default {
@drop="dragEnd"
@mousemove="updateCursor"
@mouseleave="mouseLeave">
<grid-item
v-for="item in (mode == 0 && active? placedItems_withPlaceholders : placedItems)"
:key="item.id"
:item="item"
@start-move="startMove"
@start-resize="startResize"
@end-drag="dragCancel"
@drop-drag="dragEnd"
class="position-absolute"
:active="active"
:style="{
top: 'calc(' + item.y + ' * var(--fhc-dg-row-height))',
left: 'calc(' + item.x + ' * var(--fhc-dg-col-width))',
width: 'calc(' + item.w + ' * var(--fhc-dg-col-width))',
height: 'calc(' + item.h + ' * var(--fhc-dg-row-height))',
paddingTop: 'var(--fhc-dg-item-padding-top)',
paddingLeft: 'var(--fhc-dg-item-padding-horizontal)',
paddingRight: 'var(--fhc-dg-item-padding-horizontal)'
}">
<template v-slot="item">
<slot v-bind="item.data" v-bind="item" :x="item.x" :y="item.y" ></slot>
</template>
</grid-item>
<TransitionGroup tag="div">
<grid-item
v-for="item in (mode == 0 && active? placedItems_withPlaceholders : placedItems)"
:key="item.id"
:item="item"
@start-move="startMove"
@start-resize="startResize"
@end-drag="dragCancel"
@drop-drag="dragEnd"
class="position-absolute"
:active="active"
:style="{
top: 'calc(' + item.y + ' * var(--fhc-dg-row-height))',
left: 'calc(' + item.x + ' * var(--fhc-dg-col-width))',
width: 'calc(' + item.w + ' * var(--fhc-dg-col-width))',
height: 'calc(' + item.h + ' * var(--fhc-dg-row-height))',
paddingTop: 'var(--fhc-dg-item-padding-top)',
paddingLeft: 'var(--fhc-dg-item-padding-horizontal)',
paddingRight: 'var(--fhc-dg-item-padding-horizontal)'
}">
<template v-slot="item">
<slot v-bind="item.data" v-bind="item" :x="item.x" :y="item.y" ></slot>
</template>
</grid-item>
</TransitionGroup>
</div>`
}