From c7e3c192ad9cdd982e1b23556c3e2454d1049bb6 Mon Sep 17 00:00:00 2001 From: Eugen Ciur Date: Fri, 6 Sep 2024 09:05:45 +0200 Subject: [PATCH] move sizes slice into featuers/ui/uiSlice --- ui2/src/app/App.tsx | 2 +- ui2/src/app/store.ts | 2 - .../components/Breadcrumbs/Breadcrumbs.tsx | 2 +- .../SearchResults/ActionButtons.tsx | 2 +- .../SearchResults/SearchResults.tsx | 2 +- ui2/src/components/Viewer/ActionButtons.tsx | 2 +- ui2/src/components/Viewer/Viewer.tsx | 2 +- .../features/nodes/components/Commander.tsx | 2 +- .../FolderNodeActions/FolderNodeActions.tsx | 2 +- ui2/src/features/ui/uiSlice.ts | 135 ++++++++++++++++- ui2/src/slices/sizes.ts | 140 ------------------ 11 files changed, 140 insertions(+), 153 deletions(-) delete mode 100644 ui2/src/slices/sizes.ts diff --git a/ui2/src/app/App.tsx b/ui2/src/app/App.tsx index 0b74bc85d..3ad43539a 100644 --- a/ui2/src/app/App.tsx +++ b/ui2/src/app/App.tsx @@ -13,7 +13,7 @@ import { selectCurrentUserStatus, selectCurrentUser } from "@/slices/currentUser" -import {updateOutlet} from "@/slices/sizes" +import {updateOutlet} from "@/features/ui/uiSlice" import "./App.css" import {selectNavBarWidth} from "@/features/ui/uiSlice" diff --git a/ui2/src/app/store.ts b/ui2/src/app/store.ts index 3914aeb9e..3a31117be 100644 --- a/ui2/src/app/store.ts +++ b/ui2/src/app/store.ts @@ -9,7 +9,6 @@ import usersReducer from "@/features/users/usersSlice" import nodesReducer from "@/features/nodes/nodesSlice" import uiReducer from "@/features/ui/uiSlice" import {uploaderReducer} from "@/slices/uploader" -import sizesSliceReducer from "@/slices/sizes" import dragndropReducer from "@/slices/dragndrop" export const store = configureStore({ @@ -21,7 +20,6 @@ export const store = configureStore({ groups: groupsReducer, users: usersReducer, uploader: uploaderReducer, - sizes: sizesSliceReducer, dragndrop: dragndropReducer, nodes: nodesReducer, ui: uiReducer, diff --git a/ui2/src/components/Breadcrumbs/Breadcrumbs.tsx b/ui2/src/components/Breadcrumbs/Breadcrumbs.tsx index 3bd89f116..0f23d7d32 100644 --- a/ui2/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/ui2/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -18,7 +18,7 @@ import { selectPanelNodesStatus, selectCurrentFolderID } from "@/slices/dualPanel/dualPanel" -import {updateBreadcrumb} from "@/slices/sizes" +import {updateBreadcrumb} from "@/features/ui/uiSlice" import type {PanelMode, NType, UserDetails} from "@/types" diff --git a/ui2/src/components/SearchResults/ActionButtons.tsx b/ui2/src/components/SearchResults/ActionButtons.tsx index f32e9fa55..ad7d5cf0d 100644 --- a/ui2/src/components/SearchResults/ActionButtons.tsx +++ b/ui2/src/components/SearchResults/ActionButtons.tsx @@ -3,7 +3,7 @@ import {Group} from "@mantine/core" import {useViewportSize} from "@mantine/hooks" import {useDispatch} from "react-redux" import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel" -import {updateSearchActionPanel} from "@/slices/sizes" +import {updateSearchActionPanel} from "@/features/ui/uiSlice" import GoBackButton from "./GoBackButton" import OpenInOtherPanelCheckbox from "./OpenInOtherPanelCheckbox" diff --git a/ui2/src/components/SearchResults/SearchResults.tsx b/ui2/src/components/SearchResults/SearchResults.tsx index 9c69c5eff..9113327ad 100644 --- a/ui2/src/components/SearchResults/SearchResults.tsx +++ b/ui2/src/components/SearchResults/SearchResults.tsx @@ -18,7 +18,7 @@ import { } from "@/slices/dualPanel/dualPanel" import ActionButtons from "./ActionButtons" import SearchResultItems from "./SearchResultItems" -import {selectSearchContentHeight} from "@/slices/sizes" +import {selectSearchContentHeight} from "@/features/ui/uiSlice" import {NType, PanelMode} from "@/types" import classes from "./SearchResults.module.css" diff --git a/ui2/src/components/Viewer/ActionButtons.tsx b/ui2/src/components/Viewer/ActionButtons.tsx index 44661583d..bbfd4d77e 100644 --- a/ui2/src/components/Viewer/ActionButtons.tsx +++ b/ui2/src/components/Viewer/ActionButtons.tsx @@ -3,7 +3,7 @@ import {Group} from "@mantine/core" import {useViewportSize} from "@mantine/hooks" import {useDispatch, useSelector} from "react-redux" import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel" -import {updateActionPanel} from "@/slices/sizes" +import {updateActionPanel} from "@/features/ui/uiSlice" import PanelContext from "@/contexts/PanelContext" import EditTitleButton from "./EditTitleButton" diff --git a/ui2/src/components/Viewer/Viewer.tsx b/ui2/src/components/Viewer/Viewer.tsx index bf780fe60..0c7e68f45 100644 --- a/ui2/src/components/Viewer/Viewer.tsx +++ b/ui2/src/components/Viewer/Viewer.tsx @@ -12,7 +12,7 @@ import type {RootState} from "@/app/types" import type {PanelMode, NType} from "@/types" import Breadcrumbs from "@/components/Breadcrumbs" import PanelContext from "@/contexts/PanelContext" -import {selectContentHeight} from "@/slices/sizes" +import {selectContentHeight} from "@/features/ui/uiSlice" import ActionButtons from "./ActionButtons" import ThumbnailsToggle from "./ThumbnailsToggle" import Pages from "./Pages" diff --git a/ui2/src/features/nodes/components/Commander.tsx b/ui2/src/features/nodes/components/Commander.tsx index 7a343ee9e..7a535dd6e 100644 --- a/ui2/src/features/nodes/components/Commander.tsx +++ b/ui2/src/features/nodes/components/Commander.tsx @@ -20,7 +20,7 @@ import Breadcrumbs from "@/components/Breadcrumbs" import Pagination from "@/components/Pagination" import PanelContext from "@/contexts/PanelContext" import drop_files from "@/components/modals/DropFiles" -import {selectContentHeight} from "@/slices/sizes" +import {selectContentHeight} from "@/features/ui/uiSlice" import classes from "./Commander.module.scss" import {useGetPaginatedNodesQuery} from "@/features/nodes/apiSlice" diff --git a/ui2/src/features/nodes/components/FolderNodeActions/FolderNodeActions.tsx b/ui2/src/features/nodes/components/FolderNodeActions/FolderNodeActions.tsx index d12dcce03..b0ce6c773 100644 --- a/ui2/src/features/nodes/components/FolderNodeActions/FolderNodeActions.tsx +++ b/ui2/src/features/nodes/components/FolderNodeActions/FolderNodeActions.tsx @@ -3,7 +3,7 @@ import {Group} from "@mantine/core" import {useViewportSize} from "@mantine/hooks" import {useSelector, useDispatch} from "react-redux" import {selectSelectedNodeIds} from "@/slices/dualPanel/dualPanel" -import {updateActionPanel} from "@/slices/sizes" +import {updateActionPanel} from "@/features/ui/uiSlice" import type {RootState} from "@/app/types" import type {PanelMode} from "@/types" diff --git a/ui2/src/features/ui/uiSlice.ts b/ui2/src/features/ui/uiSlice.ts index 6a140dda5..275dbb7e6 100644 --- a/ui2/src/features/ui/uiSlice.ts +++ b/ui2/src/features/ui/uiSlice.ts @@ -1,7 +1,7 @@ import Cookies from "js-cookie" import {createSlice, PayloadAction} from "@reduxjs/toolkit" import type {RootState} from "@/app/types" -import type {BooleanString} from "@/types" +import type {BooleanString, PanelMode} from "@/types" import type {FolderType, FileItemType, FileItemStatus, NodeType} from "@/types" @@ -10,6 +10,13 @@ const FULL_WIDTH = 160 const NAVBAR_COLLAPSED_COOKIE = "navbar_collapsed" const NAVBAR_WIDTH_COOKIE = "navbar_width" +const SMALL_BOTTOM_MARGIN = 13 /* pixles */ + +type DualArg = { + mode: PanelMode + value: number +} + type UpdateFileStatusArg = { item: { source: NodeType | null @@ -30,9 +37,28 @@ interface UploaderState { files: Array } +interface SearchPanelSizes { + actionPanelHeight: number +} + +// i.e Commander's panel, viewer's panel +interface PanelSizes { + actionPanelHeight: number + breadcrumbHeight: number +} + +interface SizesState { + outletTopMarginAndPadding: number + windowInnerHeight: number + main: PanelSizes + secondary?: PanelSizes + search?: SearchPanelSizes +} + interface UIState { uploader: UploaderState navbar: NavBarState + sizes: SizesState } const initialState: UIState = { @@ -43,6 +69,14 @@ const initialState: UIState = { navbar: { collapsed: initial_collapse_value(), width: initial_width_value() + }, + sizes: { + outletTopMarginAndPadding: 0, + windowInnerHeight: window.innerHeight, + main: { + actionPanelHeight: 0, + breadcrumbHeight: 0 + } } } @@ -100,11 +134,71 @@ const uiSlice = createSlice({ Cookies.set(NAVBAR_COLLAPSED_COOKIE, "true") Cookies.set(NAVBAR_WIDTH_COOKIE, `${COLLAPSED_WIDTH}`) } + }, + updateOutlet(state, action: PayloadAction) { + state.sizes.windowInnerHeight = window.innerHeight + state.sizes.outletTopMarginAndPadding = action.payload + }, + updateActionPanel(state, action: PayloadAction) { + const {value, mode} = action.payload + + state.sizes.windowInnerHeight = window.innerHeight + if (mode == "main") { + // main panel + state.sizes.main.actionPanelHeight = value + } else if (mode == "secondary") { + // secondary panel + if (state.sizes.secondary) { + state.sizes.secondary.actionPanelHeight = value + } else { + state.sizes.secondary = { + breadcrumbHeight: 0, + actionPanelHeight: value + } + } + } + }, + updateBreadcrumb(state, action: PayloadAction) { + const {value, mode} = action.payload + + state.sizes.windowInnerHeight = window.innerHeight + if (mode == "main") { + // main panel + state.sizes.main.breadcrumbHeight = value + } else if (mode == "secondary") { + // secondary panel + if (state.sizes.secondary) { + state.sizes.secondary.breadcrumbHeight = value + } else { + state.sizes.secondary = { + breadcrumbHeight: value, + actionPanelHeight: 0 + } + } + } + }, + updateSearchActionPanel(state, action: PayloadAction) { + state.sizes.windowInnerHeight = window.innerHeight + if (state.sizes.search) { + state.sizes.search.actionPanelHeight = action.payload + } else { + state.sizes.search = { + actionPanelHeight: action.payload + } + } } } }) -export const {openUploader, closeUploader, updateFileItem, toggleNavBar} = - uiSlice.actions +export const { + openUploader, + closeUploader, + updateFileItem, + toggleNavBar, + updateOutlet, + updateActionPanel, + updateSearchActionPanel, + updateBreadcrumb +} = uiSlice.actions export default uiSlice.reducer export const selectOpened = (state: RootState): boolean => state.uploader.opened @@ -116,6 +210,41 @@ export const selectNavBarCollapsed = (state: RootState) => state.ui.navbar.collapsed export const selectNavBarWidth = (state: RootState) => state.ui.navbar.width +export const selectContentHeight = (state: RootState, mode: PanelMode) => { + let height: number = state.ui.sizes.windowInnerHeight + + height -= state.ui.sizes.outletTopMarginAndPadding + + if (mode == "main") { + height -= state.ui.sizes.main.actionPanelHeight + height -= state.ui.sizes.main.breadcrumbHeight + } else if (mode == "secondary") { + if (state.ui.sizes.secondary) { + height -= state.ui.sizes.secondary.actionPanelHeight + height -= state.ui.sizes.secondary.breadcrumbHeight + } + } + + /* Let there be a small margin at the bottom of the viewport */ + height -= SMALL_BOTTOM_MARGIN + return height +} + +export const selectSearchContentHeight = (state: RootState) => { + let height: number = state.ui.sizes.windowInnerHeight + + height -= state.ui.sizes.outletTopMarginAndPadding + + if (state.ui.sizes.search) { + height -= state.ui.sizes.search.actionPanelHeight + } + + /* Let there be a small margin at the bottom of the viewport */ + height -= SMALL_BOTTOM_MARGIN + + return height +} + /* Load initial collapse state value from cookie */ function initial_collapse_value(): boolean { const collapsed = Cookies.get(NAVBAR_COLLAPSED_COOKIE) as BooleanString diff --git a/ui2/src/slices/sizes.ts b/ui2/src/slices/sizes.ts deleted file mode 100644 index 9be704bea..000000000 --- a/ui2/src/slices/sizes.ts +++ /dev/null @@ -1,140 +0,0 @@ -import {PanelMode} from "@/types" -import {createSlice, PayloadAction} from "@reduxjs/toolkit" -import {RootState} from "@/app/types" - -const SMALL_BOTTOM_MARGIN = 13 /* pixles */ - -type SearchPanelSizes = { - actionPanelHeight: number -} - -// i.e Commander's panel, viewer's panel -type PanelSizes = { - actionPanelHeight: number - breadcrumbHeight: number -} - -type Sizes = { - outletTopMarginAndPadding: number - windowInnerHeight: number - main: PanelSizes - secondary?: PanelSizes - search?: SearchPanelSizes -} - -type DualArg = { - mode: PanelMode - value: number -} - -const initialState: Sizes = { - outletTopMarginAndPadding: 0, - windowInnerHeight: window.innerHeight, - main: { - actionPanelHeight: 0, - breadcrumbHeight: 0 - } -} - -const sizesSlice = createSlice({ - name: "sizes", - initialState, - reducers: { - updateOutlet(state, action: PayloadAction) { - state.windowInnerHeight = window.innerHeight - state.outletTopMarginAndPadding = action.payload - }, - updateActionPanel(state, action: PayloadAction) { - const {value, mode} = action.payload - - state.windowInnerHeight = window.innerHeight - if (mode == "main") { - // main panel - state.main.actionPanelHeight = value - } else if (mode == "secondary") { - // secondary panel - if (state.secondary) { - state.secondary.actionPanelHeight = value - } else { - state.secondary = { - breadcrumbHeight: 0, - actionPanelHeight: value - } - } - } - }, - updateBreadcrumb(state, action: PayloadAction) { - const {value, mode} = action.payload - - state.windowInnerHeight = window.innerHeight - if (mode == "main") { - // main panel - state.main.breadcrumbHeight = value - } else if (mode == "secondary") { - // secondary panel - if (state.secondary) { - state.secondary.breadcrumbHeight = value - } else { - state.secondary = { - breadcrumbHeight: value, - actionPanelHeight: 0 - } - } - } - }, - updateSearchActionPanel(state, action: PayloadAction) { - state.windowInnerHeight = window.innerHeight - if (state.search) { - state.search.actionPanelHeight = action.payload - } else { - state.search = { - actionPanelHeight: action.payload - } - } - } - } -}) - -export default sizesSlice.reducer - -export const { - updateOutlet, - updateActionPanel, - updateSearchActionPanel, - updateBreadcrumb -} = sizesSlice.actions - -export const selectContentHeight = (state: RootState, mode: PanelMode) => { - let height: number = state.sizes.windowInnerHeight - - height -= state.sizes.outletTopMarginAndPadding - - if (mode == "main") { - height -= state.sizes.main.actionPanelHeight - height -= state.sizes.main.breadcrumbHeight - } else if (mode == "secondary") { - if (state.sizes.secondary) { - height -= state.sizes.secondary.actionPanelHeight - height -= state.sizes.secondary.breadcrumbHeight - } - } - - /* Let there be a small margin at the bottom of the viewport */ - height -= SMALL_BOTTOM_MARGIN - return height -} - -export const selectSearchContentHeight = (state: RootState) => { - let height: number = state.sizes.windowInnerHeight - - height -= state.sizes.outletTopMarginAndPadding - - if (state.sizes.search) { - height -= state.sizes.search.actionPanelHeight - } - - /* Let there be a small margin at the bottom of the viewport */ - height -= SMALL_BOTTOM_MARGIN - - return height -}