From 3ba90c87c6b48fbd6e50037aefd104a9f00d7e1b Mon Sep 17 00:00:00 2001 From: Manuel Ruwe Date: Mon, 2 Jan 2023 15:45:51 +0100 Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=92=84=20Adjust=20GridStack=20sizes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Meier Lukas --- .../Wrappers/gridstack/init-gridstack.ts | 2 +- .../Wrappers/gridstack/use-gridstack.ts | 2 +- src/styles/global.scss | 32 +++++++++---------- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts index 31a6e4a52..b4255acc9 100644 --- a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts @@ -19,7 +19,7 @@ export const initializeGridstack = ( ) => { if (!wrapperRef.current) return; // calculates the currently available count of columns - const columnCount = areaType === 'sidebar' ? 4 : Math.floor(wrapperRef.current.offsetWidth / 64); + const columnCount = areaType === 'sidebar' ? 4 : 12; const minRow = areaType !== 'sidebar' ? 1 : Math.floor(wrapperRef.current.offsetHeight / 64); // initialize gridstack const newGrid = gridRef; diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts index fa2255c40..1a3f514ca 100644 --- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts @@ -78,7 +78,7 @@ export const useGridstack = ( // change column count depending on the width and the gridRef useEffect(() => { if (areaType === 'sidebar') return; - gridRef.current?.column(Math.floor(width / 64), 'moveScale'); + gridRef.current?.column(12); }, [gridRef, width]); const onChange = isEditMode diff --git a/src/styles/global.scss b/src/styles/global.scss index 5ba3fcedf..0a5a5db71 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -13,15 +13,24 @@ } @for $i from 1 to 13 { - .grid-stack>.grid-stack-item[gs-w="#{$i}"] { width: $i * 64px } - .grid-stack>.grid-stack-item[gs-min-w="#{$i}"] { min-width: $i * 64px } - .grid-stack>.grid-stack-item[gs-max-w="#{$i}"] { max-width: $i * 64px } + .grid-stack>.grid-stack-item[gs-w="#{$i}"] { width: ($i / 12) * 100 + "%" } + .grid-stack>.grid-stack-item[gs-min-w="#{$i}"] { min-width: ($i / 12) * 100 + "%" } + .grid-stack>.grid-stack-item[gs-max-w="#{$i}"] { max-width: ($i / 12) * 100 + "%" } } @for $i from 1 to 13 { - .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: $i * 64px; } - .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: $i * 64px; } - .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: $i * 64px; } + .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: ($i / 12) * 100 + "%" } + .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: ($i / 12) * 100 + "%" } + .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: ($i / 12) * 100 + "%" } +} + +@for $i from 1 to 96 { + .grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: ($i / 12) * 100 + "%" } +} + + +@for $i from 1 to 96 { + .grid-stack>.grid-stack-item[gs-y="#{$i}"] { top: ($i / 12) * 100 + "%" } } .grid-stack>.grid-stack-item>.grid-stack-item-content, @@ -35,16 +44,7 @@ } .grid-stack>.grid-stack-item { - min-width: 64px; -} - -@for $i from 1 to 96 { - .grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: $i * 64px } -} - - -@for $i from 1 to 96 { - .grid-stack>.grid-stack-item[gs-y="#{$i}"] { top: $i * 64px } + min-width: (1/12)+'%'; } .grid-stack > .grid-stack-item > .grid-stack-item-content { From ade1534005c2965b14a66575fa348e59559adaee Mon Sep 17 00:00:00 2001 From: Manuel Ruwe Date: Mon, 2 Jan 2023 18:25:13 +0100 Subject: [PATCH 2/9] =?UTF-8?q?=F0=9F=92=84=20Adjust=20grid=20stack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/configs/default.json | 414 +++++++++--------- .../Dashboard/Tiles/TileWrapper.tsx | 4 + .../Wrappers/gridstack/init-gridstack.ts | 3 +- .../Wrappers/gridstack/use-gridstack.ts | 48 +- src/styles/global.scss | 28 +- 5 files changed, 281 insertions(+), 216 deletions(-) diff --git a/data/configs/default.json b/data/configs/default.json index 36d29064f..2a5cd2b09 100644 --- a/data/configs/default.json +++ b/data/configs/default.json @@ -17,195 +17,6 @@ } ], "apps": [ - { - "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990", - "name": "Donate", - "url": "https://ko-fi.com/ajnart", - "behaviour": { - "onClickUrl": "https://ko-fi.com/ajnart", - "externalUrl": "https://ko-fi.com/ajnart", - "isOpeningNewTab": true - }, - "network": { - "enabledStatusChecker": false, - "okStatus": [ - 200 - ] - }, - "appearance": { - "iconUrl": "https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png" - }, - "integration": { - "type": null, - "properties": [] - }, - "area": { - "type": "wrapper", - "properties": { - "id": "default" - } - }, - "shape": { - "location": { - "x": 0, - "y": 0 - }, - "size": { - "width": 3, - "height": 3 - } - } - }, - { - "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a330", - "name": "Contribute", - "url": "https://github.com/ajnart/homarr", - "behaviour": { - "onClickUrl": "https://github.com/ajnart/homarr", - "externalUrl": "https://github.com/ajnart/homarr", - "isOpeningNewTab": true - }, - "network": { - "enabledStatusChecker": false, - "okStatus": [ - 200 - ] - }, - "appearance": { - "iconUrl": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/github.png" - }, - "integration": { - "type": null, - "properties": [] - }, - "area": { - "type": "wrapper", - "properties": { - "id": "default" - } - }, - "shape": { - "location": { - "x": 0, - "y": 3 - }, - "size": { - "width": 3, - "height": 3 - } - } - }, - { - "id": "5df743d9-5cb1-457c-85d2-64ff86855652", - "name": "Your app", - "url": "https://homarr.dev", - "appearance": { - "iconUrl": "/imgs/logo/logo.png" - }, - "network": { - "enabledStatusChecker": false, - "okStatus": [] - }, - "behaviour": { - "isOpeningNewTab": true, - "externalUrl": "https://homarr.dev" - }, - "area": { - "type": "wrapper", - "properties": { - "id": "default" - } - }, - "shape": { - "location": { - "x": 15, - "y": 5 - }, - "size": { - "width": 5, - "height": 4 - } - }, - "integration": { - "type": null, - "properties": [] - } - }, - { - "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a", - "name": "Documentation", - "url": "https://homarr.dev", - "behaviour": { - "onClickUrl": "https://homarr.dev", - "externalUrl": "https://homarr.dev", - "isOpeningNewTab": true - }, - "network": { - "enabledStatusChecker": false, - "okStatus": [ - 200 - ] - }, - "appearance": { - "iconUrl": "/imgs/logo/logo.png" - }, - "integration": { - "type": null, - "properties": [] - }, - "area": { - "type": "wrapper", - "properties": { - "id": "default" - } - }, - "shape": { - "location": { - "x": 3, - "y": 3 - }, - "size": { - "width": 3, - "height": 3 - } - } - }, - { - "id": "e41a11f5-9c6e-41bc-ac0e-4c4c47582faa", - "name": "Your app", - "url": "https://homarr.dev", - "appearance": { - "iconUrl": "/imgs/logo/logo.png" - }, - "network": { - "enabledStatusChecker": false, - "okStatus": [] - }, - "behaviour": { - "isOpeningNewTab": true, - "externalUrl": "" - }, - "area": { - "type": "wrapper", - "properties": { - "id": "default" - } - }, - "shape": { - "location": { - "x": 0, - "y": 6 - }, - "size": { - "width": 2, - "height": 2 - } - }, - "integration": { - "type": null, - "properties": [] - } - }, { "id": "76217a87-7151-42d0-b0cf-1b72aef63f83", "name": "Small app", @@ -229,8 +40,8 @@ }, "shape": { "location": { - "x": 17, - "y": 0 + "x": 0, + "y": 2 }, "size": { "width": 2, @@ -265,29 +76,43 @@ "properties": [] }, "area": { - "type": "wrapper", + "type": "category", "properties": { - "id": "default" + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f" } }, "shape": { "location": { - "x": 3, - "y": 0 + "x": 0, + "y": 4 }, "size": { - "width": 3, + "width": 4, "height": 3 } } - } - ], - "widgets": [ + }, { - "id": "weather", - "properties": { - "displayInFahrenheit": false, - "location": "Paris" + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990", + "name": "Donate", + "url": "https://ko-fi.com/ajnart", + "behaviour": { + "onClickUrl": "https://ko-fi.com/ajnart", + "externalUrl": "https://ko-fi.com/ajnart", + "isOpeningNewTab": true + }, + "network": { + "enabledStatusChecker": false, + "okStatus": [ + 200 + ] + }, + "appearance": { + "iconUrl": "https://uploads-ssl.webflow.com/5c14e387dab576fe667689cf/61e1116779fc0a9bd5bdbcc7_Frame%206.png" + }, + "integration": { + "type": null, + "properties": [] }, "area": { "type": "category", @@ -297,15 +122,167 @@ }, "shape": { "location": { - "x": 6, - "y": 0 + "x": 2, + "y": 2 + }, + "size": { + "width": 2, + "height": 2 + } + } + }, + { + "id": "e41a11f5-9c6e-41bc-ac0e-4c4c47582faa", + "name": "Your app", + "url": "https://homarr.dev", + "appearance": { + "iconUrl": "/imgs/logo/logo.png" + }, + "network": { + "enabledStatusChecker": false, + "okStatus": [] + }, + "behaviour": { + "isOpeningNewTab": true, + "externalUrl": "" + }, + "area": { + "type": "wrapper", + "properties": { + "id": "default" + } + }, + "shape": { + "location": { + "x": 8, + "y": 12 }, "size": { "width": 4, "height": 2 } + }, + "integration": { + "type": null, + "properties": [] } }, + { + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a330", + "name": "Contribute", + "url": "https://github.com/ajnart/homarr", + "behaviour": { + "onClickUrl": "https://github.com/ajnart/homarr", + "externalUrl": "https://github.com/ajnart/homarr", + "isOpeningNewTab": true + }, + "network": { + "enabledStatusChecker": false, + "okStatus": [ + 200 + ] + }, + "appearance": { + "iconUrl": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/github.png" + }, + "integration": { + "type": null, + "properties": [] + }, + "area": { + "type": "category", + "properties": { + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f" + } + }, + "shape": { + "location": { + "x": 4, + "y": 2 + }, + "size": { + "width": 2, + "height": 2 + } + } + }, + { + "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a", + "name": "Documentation", + "url": "https://homarr.dev", + "behaviour": { + "onClickUrl": "https://homarr.dev", + "externalUrl": "https://homarr.dev", + "isOpeningNewTab": true + }, + "network": { + "enabledStatusChecker": false, + "okStatus": [ + 200 + ] + }, + "appearance": { + "iconUrl": "/imgs/logo/logo.png" + }, + "integration": { + "type": null, + "properties": [] + }, + "area": { + "type": "wrapper", + "properties": { + "id": "default" + } + }, + "shape": { + "location": { + "x": 8, + "y": 9 + }, + "size": { + "width": 4, + "height": 3 + } + } + }, + { + "id": "5df743d9-5cb1-457c-85d2-64ff86855652", + "name": "Your app", + "url": "https://homarr.dev", + "appearance": { + "iconUrl": "/imgs/logo/logo.png" + }, + "network": { + "enabledStatusChecker": false, + "okStatus": [] + }, + "behaviour": { + "isOpeningNewTab": true, + "externalUrl": "https://homarr.dev" + }, + "area": { + "type": "wrapper", + "properties": { + "id": "default" + } + }, + "shape": { + "location": { + "x": 0, + "y": 7 + }, + "size": { + "width": 6, + "height": 4 + } + }, + "integration": { + "type": null, + "properties": [] + } + } + ], + "widgets": [ { "id": "date", "properties": { @@ -317,6 +294,29 @@ "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f" } }, + "shape": { + "location": { + "x": 0, + "y": 0 + }, + "size": { + "width": 6, + "height": 2 + } + } + }, + { + "id": "weather", + "properties": { + "displayInFahrenheit": false, + "location": "Paris" + }, + "area": { + "type": "wrapper", + "properties": { + "id": "default" + } + }, "shape": { "location": { "x": 0, @@ -341,8 +341,8 @@ }, "shape": { "location": { - "x": 15, - "y": 0 + "x": 0, + "y": 2 }, "size": { "width": 5, diff --git a/src/components/Dashboard/Tiles/TileWrapper.tsx b/src/components/Dashboard/Tiles/TileWrapper.tsx index dfa3a62dc..f6469a2a4 100644 --- a/src/components/Dashboard/Tiles/TileWrapper.tsx +++ b/src/components/Dashboard/Tiles/TileWrapper.tsx @@ -35,9 +35,13 @@ export const GridstackTileWrapper = ({ data-type={type} data-id={id} gs-x={x} + data-gridstack-x={x} gs-y={y} + data-gridstack-y={y} gs-w={width} + data-gridstack-w={width} gs-h={height} + data-gridstack-h={height} gs-min-w={minWidth} gs-min-h={minHeight} gs-max-w={maxWidth} diff --git a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts index b4255acc9..8d1bcd0a3 100644 --- a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts @@ -12,6 +12,7 @@ export const initializeGridstack = ( items: AppType[], widgets: IWidget[], isEditMode: boolean, + isLargerThanSm: boolean, events: { onChange: (changedNode: GridStackNode) => void; onAdd: (addedNode: GridStackNode) => void; @@ -19,7 +20,7 @@ export const initializeGridstack = ( ) => { if (!wrapperRef.current) return; // calculates the currently available count of columns - const columnCount = areaType === 'sidebar' ? 4 : 12; + const columnCount = areaType === 'sidebar' ? 4 : isLargerThanSm || typeof isLargerThanSm === 'undefined' ? 12 : 6; const minRow = areaType !== 'sidebar' ? 1 : Math.floor(wrapperRef.current.offsetHeight / 64); // initialize gridstack const newGrid = gridRef; diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts index 1a3f514ca..12bafdfa1 100644 --- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts @@ -11,11 +11,13 @@ import { import { useConfigContext } from '../../../../config/provider'; import { useConfigStore } from '../../../../config/store'; import { useResize } from '../../../../hooks/use-resize'; +import { useScreenLargerThan } from '../../../../hooks/useScreenLargerThan'; import { AppType } from '../../../../types/app'; import { AreaType } from '../../../../types/area'; import { IWidget } from '../../../../widgets/widgets'; import { useEditModeStore } from '../../Views/useEditModeStore'; import { initializeGridstack } from './init-gridstack'; +import { ShapeType } from '../../../../types/shape'; interface UseGristackReturnType { apps: AppType[]; @@ -31,6 +33,7 @@ export const useGridstack = ( areaType: 'wrapper' | 'category' | 'sidebar', areaId: string ): UseGristackReturnType => { + const isLargerThanSm = useScreenLargerThan('sm'); const isEditMode = useEditModeStore((x) => x.enabled); const { config, configVersion, name: configName } = useConfigContext(); const updateConfig = useConfigStore((x) => x.updateConfig); @@ -78,8 +81,48 @@ export const useGridstack = ( // change column count depending on the width and the gridRef useEffect(() => { if (areaType === 'sidebar') return; - gridRef.current?.column(12); - }, [gridRef, width]); + gridRef.current?.column(isLargerThanSm || typeof isLargerThanSm === 'undefined' ? 12 : 6, (column, prevColumn, newNodes, nodes) => { + let nextRow = 0; + let available = 6; + + if (column === prevColumn) { + newNodes.concat(nodes); + return; + } + + nodes.reverse().forEach(node => { + const width = parseInt(node.el!.getAttribute('data-gridstack-w')!, 10); + const height = parseInt(node.el!.getAttribute('data-gridstack-h')!, 10); + const x = parseInt(node.el!.getAttribute('data-gridstack-x')!, 10); + const y = parseInt(node.el!.getAttribute('data-gridstack-y')!, 10); + + if (column === 6) { + node.x = available >= width ? 6 - available : 0; + node.y = nextRow; + + if (width > 6) { + node.w = 6; + nextRow += 2; + available = 6; + } else if (available >= width) { + available -= width; + if (available === 0) { + nextRow += 2; + available = 6; + } + } else if (available < width) { + node.y = node.y! + 2; + available = 6 - width; + nextRow += 2; + } + } else { + node.x = y % 2 === 1 ? x + 6 : x; + node.y = Math.floor(y / 2); + } + newNodes.push(node); + }); + }); + }, [isLargerThanSm]); const onChange = isEditMode ? (changedNode: GridStackNode) => { @@ -236,6 +279,7 @@ export const useGridstack = ( items, widgets ?? [], isEditMode, + isLargerThanSm, { onChange, onAdd, diff --git a/src/styles/global.scss b/src/styles/global.scss index 0a5a5db71..4db17a0a3 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -18,19 +18,19 @@ .grid-stack>.grid-stack-item[gs-max-w="#{$i}"] { max-width: ($i / 12) * 100 + "%" } } -@for $i from 1 to 13 { - .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: ($i / 12) * 100 + "%" } - .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: ($i / 12) * 100 + "%" } - .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: ($i / 12) * 100 + "%" } +@for $i from 1 to 96 { + .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: $i * 64 + "px" } + .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: $i * 64 + "px" } + .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: $i * 64 + "px" } } -@for $i from 1 to 96 { +@for $i from 1 to 13 { .grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: ($i / 12) * 100 + "%" } } @for $i from 1 to 96 { - .grid-stack>.grid-stack-item[gs-y="#{$i}"] { top: ($i / 12) * 100 + "%" } + .grid-stack>.grid-stack-item[gs-y="#{$i}"] { top: $i * 64 + "px" } } .grid-stack>.grid-stack-item>.grid-stack-item-content, @@ -54,3 +54,19 @@ .grid-stack.grid-stack-animate { transition: none; } + +@media screen and (max-width: 768px) { + @for $i from 1 to 7 { + .grid-stack>.grid-stack-item[gs-w="#{$i}"] { width: percentage(($i / 6)) !important } + .grid-stack>.grid-stack-item[gs-min-w="#{$i}"] { min-width: percentage(($i / 6)) !important } + .grid-stack>.grid-stack-item[gs-max-w="#{$i}"] { max-width: percentage(($i / 6)) !important } + } + + @for $i from 1 to 7 { + .grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: percentage(($i / 6)) } + } + + .grid-stack>.grid-stack-item { + min-width: percentage(1/6) !important; + } +} \ No newline at end of file From 908d0f9f09b559257d4af1554431ab121ab371a1 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 3 Jan 2023 19:49:25 +0900 Subject: [PATCH 3/9] Fix compilation errors --- .../Wrappers/gridstack/use-gridstack.ts | 71 ++++++++++--------- .../Actions/ToggleEditMode/ToggleEditMode.tsx | 2 +- src/components/layout/header/Header.tsx | 1 - src/components/layout/header/SettingsMenu.tsx | 2 +- src/pages/login.tsx | 2 +- 5 files changed, 40 insertions(+), 38 deletions(-) diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts index 12bafdfa1..b6e7fbf64 100644 --- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts @@ -17,7 +17,6 @@ import { AreaType } from '../../../../types/area'; import { IWidget } from '../../../../widgets/widgets'; import { useEditModeStore } from '../../Views/useEditModeStore'; import { initializeGridstack } from './init-gridstack'; -import { ShapeType } from '../../../../types/shape'; interface UseGristackReturnType { apps: AppType[]; @@ -81,47 +80,51 @@ export const useGridstack = ( // change column count depending on the width and the gridRef useEffect(() => { if (areaType === 'sidebar') return; - gridRef.current?.column(isLargerThanSm || typeof isLargerThanSm === 'undefined' ? 12 : 6, (column, prevColumn, newNodes, nodes) => { - let nextRow = 0; - let available = 6; + gridRef.current?.column( + isLargerThanSm || typeof isLargerThanSm === 'undefined' ? 12 : 6, + (column, prevColumn, newNodes, nodes) => { + let nextRow = 0; + let available = 6; - if (column === prevColumn) { - newNodes.concat(nodes); - return; - } + if (column === prevColumn) { + newNodes.concat(nodes); + return; + } - nodes.reverse().forEach(node => { - const width = parseInt(node.el!.getAttribute('data-gridstack-w')!, 10); - const height = parseInt(node.el!.getAttribute('data-gridstack-h')!, 10); - const x = parseInt(node.el!.getAttribute('data-gridstack-x')!, 10); - const y = parseInt(node.el!.getAttribute('data-gridstack-y')!, 10); + nodes.reverse().forEach((node) => { + const newnode = node; + const width = parseInt(newnode.el!.getAttribute('data-gridstack-w')!, 10); + const height = parseInt(newnode.el!.getAttribute('data-gridstack-h')!, 10); + const x = parseInt(newnode.el!.getAttribute('data-gridstack-x')!, 10); + const y = parseInt(newnode.el!.getAttribute('data-gridstack-y')!, 10); - if (column === 6) { - node.x = available >= width ? 6 - available : 0; - node.y = nextRow; + if (column === 6) { + newnode.x = available >= width ? 6 - available : 0; + newnode.y = nextRow; - if (width > 6) { - node.w = 6; - nextRow += 2; - available = 6; - } else if (available >= width) { - available -= width; - if (available === 0) { + if (width > 6) { + newnode.w = 6; nextRow += 2; available = 6; + } else if (available >= width) { + available -= width; + if (available === 0) { + nextRow += 2; + available = 6; + } + } else if (available < width) { + newnode.y = newnode.y! + 2; + available = 6 - width; + nextRow += 2; } - } else if (available < width) { - node.y = node.y! + 2; - available = 6 - width; - nextRow += 2; + } else { + newnode.x = y % 2 === 1 ? x + 6 : x; + newnode.y = Math.floor(y / 2); } - } else { - node.x = y % 2 === 1 ? x + 6 : x; - node.y = Math.floor(y / 2); - } - newNodes.push(node); - }); - }); + newNodes.push(newnode); + }); + } + ); }, [isLargerThanSm]); const onChange = isEditMode diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx index 39d5f78a2..aed97282c 100644 --- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx +++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx @@ -1,6 +1,6 @@ import axios from 'axios'; import Consola from 'consola'; -import { ActionIcon, Button, Group, Paper, Popover, Space, Text } from '@mantine/core'; +import { ActionIcon, Button, Group, Popover, Text } from '@mantine/core'; import { IconEditCircle, IconEditCircleOff, IconX } from '@tabler/icons'; import { getCookie } from 'cookies-next'; import { Trans, useTranslation } from 'next-i18next'; diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index 9bc6a83f2..21f0cd648 100644 --- a/src/components/layout/header/Header.tsx +++ b/src/components/layout/header/Header.tsx @@ -4,7 +4,6 @@ import { CURRENT_VERSION, REPO_URL } from '../../../../data/constants'; import { useConfigContext } from '../../../config/provider'; import { Logo } from '../Logo'; import { useCardStyles } from '../useCardStyles'; -import { AddElementAction } from './Actions/AddElementAction/AddElementAction'; import DockerMenuButton from './Actions/Docker/DockerModule'; import { ToggleEditModeAction } from './Actions/ToggleEditMode/ToggleEditMode'; import { Search } from './Search'; diff --git a/src/components/layout/header/SettingsMenu.tsx b/src/components/layout/header/SettingsMenu.tsx index 301da2e91..8452b73f7 100644 --- a/src/components/layout/header/SettingsMenu.tsx +++ b/src/components/layout/header/SettingsMenu.tsx @@ -1,4 +1,4 @@ -import { ActionIcon, Badge, Menu, Tooltip } from '@mantine/core'; +import { ActionIcon, Badge, Menu } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons'; import { useTranslation } from 'next-i18next'; diff --git a/src/pages/login.tsx b/src/pages/login.tsx index cdaf72600..7587bbde0 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { PasswordInput, Paper, Title, Text, Container, Group, Button } from '@mantine/core'; +import { PasswordInput, Paper, Title, Text, Container, Button } from '@mantine/core'; import { setCookie } from 'cookies-next'; import { showNotification, updateNotification } from '@mantine/notifications'; import axios from 'axios'; From 4f948021dd154b697272fb1d7dcd1197d8a1a808 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 3 Jan 2023 20:15:07 +0900 Subject: [PATCH 4/9] Weather widget styling --- src/widgets/weather/WeatherIcon.tsx | 2 +- src/widgets/weather/WeatherTile.tsx | 59 +++++++++++++---------------- 2 files changed, 28 insertions(+), 33 deletions(-) diff --git a/src/widgets/weather/WeatherIcon.tsx b/src/widgets/weather/WeatherIcon.tsx index aa8ef02cb..2a845b48e 100644 --- a/src/widgets/weather/WeatherIcon.tsx +++ b/src/widgets/weather/WeatherIcon.tsx @@ -30,7 +30,7 @@ export const WeatherIcon = ({ code }: WeatherIconProps) => { return ( - + ); diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx index 118e1a584..677d4bd6c 100644 --- a/src/widgets/weather/WeatherTile.tsx +++ b/src/widgets/weather/WeatherTile.tsx @@ -19,7 +19,7 @@ const definition = defineWidget({ }, }, gridstack: { - minWidth: 4, + minWidth: 2, minHeight: 2, maxWidth: 12, maxHeight: 12, @@ -61,39 +61,34 @@ function WeatherTile({ widget }: WeatherTileProps) { // TODO: add widgetWrapper that is generic and uses the definition return ( -
- + + - - - {getPerferedUnit( - weather!.current_weather.temperature, - widget.properties.displayInFahrenheit - )} - - -
- - {getPerferedUnit( - weather!.daily.temperature_2m_max[0], - widget.properties.displayInFahrenheit - )} - - -
-
- - {getPerferedUnit( - weather!.daily.temperature_2m_min[0], - widget.properties.displayInFahrenheit - )} - - -
- - + + {getPerferedUnit( + weather!.current_weather.temperature, + widget.properties.displayInFahrenheit + )} + -
+ + + {getPerferedUnit( + weather!.daily.temperature_2m_max[0], + widget.properties.displayInFahrenheit + )} + + {getPerferedUnit( + weather!.daily.temperature_2m_min[0], + widget.properties.displayInFahrenheit + )} + + ); } From a809262647286d5cd134ab6ab565c3c5eb872659 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 3 Jan 2023 20:26:59 +0900 Subject: [PATCH 5/9] Date widget styling --- src/widgets/date/DateTile.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/widgets/date/DateTile.tsx b/src/widgets/date/DateTile.tsx index 42fc3725a..653f813c5 100644 --- a/src/widgets/date/DateTile.tsx +++ b/src/widgets/date/DateTile.tsx @@ -16,7 +16,7 @@ const definition = defineWidget({ }, }, gridstack: { - minWidth: 4, + minWidth: 2, minHeight: 2, maxWidth: 12, maxHeight: 12, @@ -35,12 +35,10 @@ function DateTile({ widget }: DateTileProps) { const formatString = widget.properties.display24HourFormat ? 'HH:mm' : 'h:mm A'; return ( -
- - {dayjs(date).format(formatString)} - {dayjs(date).format('dddd, MMMM D')} - -
+ + {dayjs(date).format(formatString)} + {dayjs(date).format('dddd, MMMM D')} + ); } From 780b4d5f813aa8608edb93200bacbf008b8379a0 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 3 Jan 2023 22:30:13 +0900 Subject: [PATCH 6/9] Integration component styling --- .../Components/InputElements/IntegrationSelector.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx index 41bf862cd..e5a64d992 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx @@ -100,10 +100,11 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => { placeholder={t('integration.type.placeholder')} itemComponent={SelectItemComponent} data={data} - maxDropdownHeight={400} + maxDropdownHeight={150} + dropdownPosition="bottom" clearable variant="default" - mb="md" + searchable icon={ form.values.integration?.type && ( Date: Tue, 3 Jan 2023 22:30:52 +0900 Subject: [PATCH 7/9] Calendar widget styling --- src/widgets/calendar/CalendarTile.tsx | 64 ++++++++++++++------------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx index 22c6cd480..f5ab105c1 100644 --- a/src/widgets/calendar/CalendarTile.tsx +++ b/src/widgets/calendar/CalendarTile.tsx @@ -1,4 +1,4 @@ -import { Center, createStyles, MantineThemeColors, useMantineTheme } from '@mantine/core'; +import { createStyles, Group, MantineThemeColors, useMantineTheme } from '@mantine/core'; import { Calendar } from '@mantine/dates'; import { IconCalendarTime } from '@tabler/icons'; import { useQuery } from '@tanstack/react-query'; @@ -21,7 +21,7 @@ const definition = defineWidget({ }, }, gridstack: { - minWidth: 4, + minWidth: 3, minHeight: 5, maxWidth: 12, maxHeight: 12, @@ -55,35 +55,37 @@ function CalendarTile({ widget }: CalendarTileProps) { }); return ( - {}} - firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'} - dayStyle={(date) => ({ - margin: 1, - backgroundColor: isToday(date) - ? colorScheme === 'dark' - ? colors.dark[5] - : colors.gray[0] - : undefined, - })} - styles={{ - calendarHeader: { - marginRight: 40, - marginLeft: 40, - }, - }} - allowLevelChange={false} - dayClassName={(_, modifiers) => cx({ [classes.weekend]: modifiers.weekend })} - renderDay={(date) => ( - - )} - /> + + {}} + firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'} + dayStyle={(date) => ({ + margin: 1, + backgroundColor: isToday(date) + ? colorScheme === 'dark' + ? colors.dark[5] + : colors.gray[0] + : undefined, + })} + styles={{ + calendarHeader: { + marginRight: 40, + marginLeft: 40, + }, + }} + allowLevelChange={false} + dayClassName={(_, modifiers) => cx({ [classes.weekend]: modifiers.weekend })} + renderDay={(date) => ( + + )} + /> + ); } From 90b6f23d3ec365f5f0766ece626263334dcf37d6 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 3 Jan 2023 22:31:37 +0900 Subject: [PATCH 8/9] App wrapper styling --- src/components/Dashboard/Tiles/HomarrCardWrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx b/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx index 07f9eee69..8958667fc 100644 --- a/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx +++ b/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx @@ -22,7 +22,7 @@ export const HomarrCardWrapper = ({ ...props }: HomarrCardWrapperProps) => { withBorder style={{ cursor: isEditMode ? 'move' : 'default' }} radius="lg" - shadow="md" + shadow="sm" /> ); }; From c963760717d6015cc9d407665596fd6e7eb746b7 Mon Sep 17 00:00:00 2001 From: ajnart Date: Tue, 3 Jan 2023 22:32:00 +0900 Subject: [PATCH 9/9] Main app tile styling and animations --- .../Dashboard/Tiles/Apps/AppTile.tsx | 71 +++++++++---------- 1 file changed, 32 insertions(+), 39 deletions(-) diff --git a/src/components/Dashboard/Tiles/Apps/AppTile.tsx b/src/components/Dashboard/Tiles/Apps/AppTile.tsx index 1e9f94d32..0bd65decf 100644 --- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx +++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx @@ -23,39 +23,40 @@ export const AppTile = ({ className, app }: AppTileProps) => { classes: { card: cardClass }, } = useCardStyles(false); - const inner = ( - <> - - {app.name} - -
- {/* eslint-disable-next-line @next/next/no-img-element */} - -
- - ); + function Inner() { + return ( + <> + + {app.name} + +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + +
+ + ); + } return ( - {!app.url || isEditMode ? ( - {inner} + ) : ( { component={NextLink} href={app.behaviour.externalUrl.length > 0 ? app.behaviour.externalUrl : app.url} target={app.behaviour.isOpeningNewTab ? '_blank' : '_self'} - className={cx(classes.button, classes.link)} + className={cx(classes.button)} > - {inner} + )} @@ -76,14 +77,14 @@ export const AppTile = ({ className, app }: AppTileProps) => { const useStyles = createStyles((theme, _params, getRef) => ({ image: { ref: getRef('image'), - maxHeight: '80%', - maxWidth: '80%', - transition: 'transform 100ms ease-in-out', + maxHeight: '90%', + maxWidth: '90%', }, appName: { ref: getRef('appName'), }, button: { + paddingBottom: 10, height: '100%', width: '100%', display: 'flex', @@ -91,20 +92,12 @@ const useStyles = createStyles((theme, _params, getRef) => ({ alignItems: 'center', gap: 4, }, - link: { - [`&:hover .${getRef('image')}`]: { - // TODO: add styles for image when hovering card - }, - [`&:hover .${getRef('appName')}`]: { - // TODO: add styles for app name when hovering card - }, - }, })); export const appTileDefinition = { component: AppTile, - minWidth: 2, + minWidth: 1, + minHeight: 1, maxWidth: 12, - minHeight: 2, maxHeight: 12, };