🐛 Hide wrappers with no tiles inside

This commit is contained in:
Manuel Ruwe
2023-01-11 12:57:45 +01:00
parent 6ea1277e61
commit 4569f53fd0
2 changed files with 9 additions and 1 deletions

View File

@@ -1,4 +1,5 @@
import { WrapperType } from '../../../../types/wrapper'; import { WrapperType } from '../../../../types/wrapper';
import { useEditModeStore } from '../../Views/useEditModeStore';
import { useGridstack } from '../gridstack/use-gridstack'; import { useGridstack } from '../gridstack/use-gridstack';
import { WrapperContent } from '../WrapperContent'; import { WrapperContent } from '../WrapperContent';
@@ -8,10 +9,12 @@ interface DashboardWrapperProps {
export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => { export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => {
const { refs, apps, widgets } = useGridstack('wrapper', wrapper.id); const { refs, apps, widgets } = useGridstack('wrapper', wrapper.id);
const isEditMode = useEditModeStore((x) => x.enabled);
const defaultClasses = 'grid-stack grid-stack-wrapper min-row';
return ( return (
<div <div
className="grid-stack grid-stack-wrapper" className={apps.length > 0 || isEditMode ? defaultClasses : `${defaultClasses} gridstack-empty-wrapper`}
style={{ transitionDuration: '0s' }} style={{ transitionDuration: '0s' }}
data-wrapper={wrapper.id} data-wrapper={wrapper.id}
ref={refs.wrapper} ref={refs.wrapper}

View File

@@ -87,3 +87,8 @@
.grid-stack.grid-stack-animate { .grid-stack.grid-stack-animate {
transition: none; transition: none;
} }
.gridstack-empty-wrapper {
height: 0px;
min-height: 0px !important;
}