Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 15:35:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Implemented different layout sizes

Browse Source
This commit is contained in:
Meierschlumpf
2023-01-06 22:46:07 +01:00
parent 26bcb2fc34
commit 9608452bed
16 changed files with 564 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx
View File

@@ -4,6 +4,7 @@ import { useConfigContext } from '../../../../config/provider';
import { useConfigStore } from '../../../../config/store';
import widgets from '../../../../widgets';
import { WidgetChangePositionModalInnerProps } from '../../Tiles/Widgets/WidgetsMenu';
import { useGridstackStore } from '../../Wrappers/gridstack/store';
import { ChangePositionModal } from './ChangePositionModal';
export const ChangeWidgetPositionModal = ({
@@ -13,6 +14,7 @@ export const ChangeWidgetPositionModal = ({
}: ContextModalProps<WidgetChangePositionModalInnerProps>) => {
const { name: configName } = useConfigContext();
const updateConfig = useConfigStore((x) => x.updateConfig);
const shapeSize = useGridstackStore(x => x.currentShapeSize);
const handleSubmit = (x: number, y: number, width: number, height: number) => {
if (!configName) {
@@ -23,7 +25,7 @@ export const ChangeWidgetPositionModal = ({
configName,
(prev) => {
const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
currentWidget!.shape = {
currentWidget!.shape[shapeSize] = {
location: {
x,
y,
@@ -57,10 +59,10 @@ export const ChangeWidgetPositionModal = ({
onCancel={handleCancel}
heightData={heightData}
widthData={widthData}
initialX={innerProps.widget.shape.location.x}
initialY={innerProps.widget.shape.location.y}
initialWidth={innerProps.widget.shape.size.width}
initialHeight={innerProps.widget.shape.size.height}
initialX={innerProps.widget.shape[shapeSize].location.x}
initialY={innerProps.widget.shape[shapeSize].location.y}
initialWidth={innerProps.widget.shape[shapeSize].size.width}
initialHeight={innerProps.widget.shape[shapeSize].size.height}
/>
);
};

34
src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
View File

@@ -46,13 +46,35 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
},
},
shape: {
location: {
x: 0,
y: 0,
sm: {
location: {
x: 0,
y: 0,
},
size: {
width: widget.gridstack.minWidth,
height: widget.gridstack.minHeight,
},
},
size: {
width: widget.gridstack.minWidth,
height: widget.gridstack.minHeight,
md: {
location: {
x: 0,
y: 0,
},
size: {
width: widget.gridstack.minWidth,
height: widget.gridstack.minHeight,
},
},
lg: {
location: {
x: 0,
y: 0,
},
size: {
width: widget.gridstack.minWidth,
height: widget.gridstack.minHeight,
},
},
},
},