diff --git a/packages/web/src/common/styles/theme.ts b/packages/web/src/common/styles/theme.ts index 74782de8..6fde2ed4 100644 --- a/packages/web/src/common/styles/theme.ts +++ b/packages/web/src/common/styles/theme.ts @@ -41,7 +41,7 @@ export const theme: DefaultTheme = { border: { primary: c.gray800, primaryDark: c.gray900, - secondary: c.gray700, + secondary: c.gray100, }, fg: { primary: c.gray100, diff --git a/packages/web/src/common/utils/grid.util.ts b/packages/web/src/common/utils/grid.util.ts index 479cee16..4e124612 100644 --- a/packages/web/src/common/utils/grid.util.ts +++ b/packages/web/src/common/utils/grid.util.ts @@ -16,7 +16,6 @@ import { Category } from "@web/ducks/events/event.types"; import { DIVIDER_GRID, GRID_X_PADDING_TOTAL, - SIDEBAR_CLOSED_WIDTH, SIDEBAR_OPEN_WIDTH, } from "@web/views/Calendar/layout.constants"; import { Schema_GridEvent } from "@web/common/types/web.event.types"; @@ -470,7 +469,7 @@ export const getWidthInPixels = ( }; export const getX = (e: MouseEvent | number, isSidebarOpen: boolean) => { - const xOffset = isSidebarOpen ? SIDEBAR_OPEN_WIDTH : SIDEBAR_CLOSED_WIDTH; + const xOffset = isSidebarOpen ? SIDEBAR_OPEN_WIDTH : 0; const origX = typeof e === "number" ? e : e.clientX; const x = origX - xOffset; diff --git a/packages/web/src/ducks/events/selectors/view.selectors.ts b/packages/web/src/ducks/events/selectors/view.selectors.ts index 984e4974..e18f2f74 100644 --- a/packages/web/src/ducks/events/selectors/view.selectors.ts +++ b/packages/web/src/ducks/events/selectors/view.selectors.ts @@ -3,4 +3,4 @@ import { RootState } from "@web/store"; export const selectDatesInView = (state: RootState) => state.view.dates; export const selectIsSidebarOpen = (state: RootState) => state.view.sidebar.isOpen; -export const selectSidebar = (state: RootState) => state.view.sidebar; +export const selectSidebarTab = (state: RootState) => state.view.sidebar.tab; diff --git a/packages/web/src/views/Calendar/Calendar.tsx b/packages/web/src/views/Calendar/Calendar.tsx index 9b6d96c4..a13fe894 100644 --- a/packages/web/src/views/Calendar/Calendar.tsx +++ b/packages/web/src/views/Calendar/Calendar.tsx @@ -15,7 +15,7 @@ import { useGridLayout } from "./hooks/grid/useGridLayout"; import { useDateCalcs } from "./hooks/grid/useDateCalcs"; import { useShortcuts } from "./hooks/shortcuts/useShortcuts"; import { useRefresh } from "./hooks/useRefresh"; -import { LeftSidebar } from "./components/LeftSidebar"; +import { Sidebar } from "./components/LeftSidebar"; import { Draft } from "./components/Event/Draft"; import { Dedication } from "./components/Dedication"; import { CmdPalette } from "../CmdPalette"; @@ -65,12 +65,13 @@ export const CalendarView = () => { weekProps={weekProps} /> - - + {isSidebarOpen && ( + + )}
= ({ alignItems={AlignItems.BASELINE} onClick={onSectionClick} > + {startOfView.format("MMMM")} - {startOfView.format("YY")} + {startOfView.format("YYYY")} diff --git a/packages/web/src/views/Calendar/components/Header/styled.ts b/packages/web/src/views/Calendar/components/Header/styled.ts index a85af6b7..21e508c3 100644 --- a/packages/web/src/views/Calendar/components/Header/styled.ts +++ b/packages/web/src/views/Calendar/components/Header/styled.ts @@ -1,7 +1,7 @@ import styled from "styled-components"; import { EVENT_WIDTH_MINIMUM, - PAGE_X_PADDING, + PAGE_MARGIN_X, } from "@web/views/Calendar/layout.constants"; import { Flex } from "@web/components/Flex"; import { Text } from "@web/components/Text"; @@ -42,7 +42,6 @@ export const StyledHeaderRow = styled(Flex)` color: ${({ theme }) => theme.color.text.light}; font-size: 40px; justify-content: ${JustifyContent.SPACE_BETWEEN}; - margin-left: ${GRID_MARGIN_LEFT}px; height: ${HEADER_HEIGHT}px; width: 100%; `; @@ -57,9 +56,7 @@ export const StyledNavigationGroup = styled(Flex)` margin-right: 20px; `; -export const StyledRightGroup = styled(Flex)` - padding-right: ${PAGE_X_PADDING * 2}px; -`; +export const StyledRightGroup = styled(Flex)``; export const StyledWeekDaysFlex = styled(Flex)` width: calc(100% - ${GRID_MARGIN_LEFT}px); diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx deleted file mode 100644 index 80ed7d32..00000000 --- a/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, { FC } from "react"; -import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; -import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper"; -import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs"; -import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"; -import { Divider } from "@web/components/Divider/Divider"; -import { useAppDispatch, useAppSelector } from "@web/store/store.hooks"; -import { selectSidebar } from "@web/ducks/events/selectors/view.selectors"; -import { viewSlice } from "@web/ducks/events/slices/view.slice"; - -import { - StyledLeftSidebar, - getSidebarToggleIcon, - StyledCollapsedSidebar, -} from "./styled"; -import { SomedaySection } from "./SomedaySection"; -import { SidebarIconRow } from "./SidebarIconRow"; -import { ToggleableMonthWidget } from "./ToggleableMonthWidget/ToggleableMonthWidget"; - -interface Props { - dateCalcs: DateCalcs; - measurements: Measurements_Grid; - weekProps: WeekProps; -} - -export const LeftSidebar: FC> = ( - props: Props -) => { - const weekStart = props.weekProps.component.startOfView; - const weekEnd = props.weekProps.component.endOfView; - - const dispatch = useAppDispatch(); - const { isOpen, tab } = useAppSelector(selectSidebar); - const ToggleSidebarIcon = getSidebarToggleIcon(isOpen); - - return ( - - dispatch(viewSlice.actions.toggleSidebar())} - shortcut="[" - > - - - - - - {tab === "tasks" && ( - - )} - {tab === "monthWidget" && ( - <> - -
- -

Calendars

- -
- - )} - - - ); -}; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/Sidebar.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/Sidebar.tsx new file mode 100644 index 00000000..07622cf6 --- /dev/null +++ b/packages/web/src/views/Calendar/components/LeftSidebar/Sidebar.tsx @@ -0,0 +1,90 @@ +import React, { FC } from "react"; +import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; +import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs"; +import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"; +import { Divider } from "@web/components/Divider/Divider"; +import { useAppSelector } from "@web/store/store.hooks"; +import { selectSidebarTab } from "@web/ducks/events/selectors/view.selectors"; +import { Text } from "@web/components/Text"; +import { theme } from "@web/common/styles/theme"; + +import { + SidebarContainer, + CalendarLabel, + CalendarListContainer, + SidebarTabContainer, +} from "./styled"; +import { SomedaySection } from "./SomedaySection"; +import { SidebarIconRow } from "./SidebarIconRow"; +import { ToggleableMonthWidget } from "./ToggleableMonthWidget/ToggleableMonthWidget"; +import { useSidebar } from "../../hooks/draft/sidebar/useSidebar"; + +interface Props { + dateCalcs: DateCalcs; + measurements: Measurements_Grid; + weekProps: WeekProps; +} + +export const Sidebar: FC> = ({ + dateCalcs, + measurements, + weekProps, +}: Props) => { + const weekStart = weekProps.component.startOfView; + const weekEnd = weekProps.component.endOfView; + + const tab = useAppSelector(selectSidebarTab); + const sidebarProps = useSidebar(measurements, dateCalcs); + + return ( + + + {tab === "tasks" && ( + + )} + {tab === "monthWidget" && ( + <> + + + + + Calendars + + + + + primary + + + + + )} + + + + ); +}; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx index 71ef8a50..3967586b 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx +++ b/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx @@ -3,16 +3,16 @@ import { MetaKeyIcon } from "@web/components/Icons/MetaKey"; import { CalendarIcon } from "@web/components/Icons/Calendar"; import { TodoIcon } from "@web/components/Icons/Todo"; -import { StyledIconRow, StyledLeftIconGroup } from "../styled"; +import { IconRow, LeftIconGroup } from "../styled"; export const SidebarIconRow = () => { return ( - - + + - - + + ); }; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx index bbc701bf..ffaefc06 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx +++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; import { Categories_Event } from "@core/types/event.types"; -import { SomedayEventsProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; +import { SidebarProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs"; import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"; import { Text } from "@web/components/Text"; @@ -9,13 +9,13 @@ import { AlignItems, JustifyContent } from "@web/components/Flex/styled"; import { getMonthListLabel } from "@web/common/utils/event.util"; import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper"; -import { StyledAddEventButton, StyledSidebarHeader } from "../styled"; +import { AddEventButton, SidebarHeader, SidebarSection } from "../styled"; import { SomedayEvents } from "../SomedayEvents"; interface Props { dateCalcs: DateCalcs; measurements: Measurements_Grid; - somedayProps: SomedayEventsProps; + somedayProps: SidebarProps; viewStart: WeekProps["component"]["startOfView"]; } @@ -28,8 +28,8 @@ export const MonthSection: FC = ({ const monthLabel = getMonthListLabel(viewStart); return ( - <> - + @@ -40,24 +40,26 @@ export const MonthSection: FC = ({ - somedayProps.util.onSectionClick(Categories_Event.SOMEDAY_MONTH) + somedayProps.util.onPlaceholderClick( + Categories_Event.SOMEDAY_MONTH + ) } shortcut="M" >
- + + +
- + - + ); }; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvents.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvents.tsx index 71348ce5..0164695c 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvents.tsx +++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvents.tsx @@ -8,18 +8,19 @@ import { SIDEBAR_OPEN_WIDTH, } from "@web/views/Calendar/layout.constants"; import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"; -import { SomedayEventsProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; +import { SidebarProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; import { GridEventPreview } from "@web/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview"; +import { Text } from "@web/components/Text"; import { SomedayEventsColumn } from "./SomedayEventsColumn"; -import { StyledSidebarList } from "../../styled"; +import { EventPlaceholder, SidebarList } from "../../styled"; interface Props { category: Categories_Event; dateCalcs: DateCalcs; measurements: Measurements_Grid; - somedayProps: SomedayEventsProps; + sidebarProps: SidebarProps; viewStart: WeekProps["component"]["startOfView"]; } @@ -27,10 +28,10 @@ export const SomedayEvents: FC = ({ category, dateCalcs, measurements, - somedayProps, + sidebarProps, viewStart, }) => { - const { state, util } = somedayProps; + const { state, util } = sidebarProps; const gridX = state.mouseCoords.x - (SIDEBAR_OPEN_WIDTH + GRID_X_START); const dayIndex = dateCalcs.getDayNumberByX(gridX); @@ -58,7 +59,7 @@ export const SomedayEvents: FC = ({ /> )} - util.onSectionClick(category)}> +
= ({ util={util} />
- + {!isDraftingNew && ( + { + console.log("clickedplacehodler"); + util.onPlaceholderClick(category); + }} + > + + + + )} + ); }; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventsColumn.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventsColumn.tsx index 79094f89..9e4a0ea4 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventsColumn.tsx +++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventsColumn.tsx @@ -3,7 +3,7 @@ import { Droppable } from "@hello-pangea/dnd"; import { Categories_Event, Schema_Event } from "@core/types/event.types"; import { ID_SOMEDAY_DRAFT } from "@web/common/constants/web.constants"; import { Schema_GridEvent } from "@web/common/types/web.event.types"; -import { SomedayEventsProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; +import { SidebarProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; import { DraggableSomedayEvent } from "./Wrappers/DraggableSomedayEvent"; import { DraggableSomedayEvents } from "./Wrappers/DraggableSomedayEvents"; @@ -17,7 +17,7 @@ export interface Props { events: Schema_Event[]; isDraftingNew: boolean; isOverGrid: boolean; - util: SomedayEventsProps["util"]; + util: SidebarProps["util"]; } export const SomedayEventsColumn: FC = ({ diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/Wrappers/DraggableSomedayEvent.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/Wrappers/DraggableSomedayEvent.tsx index 9e11284c..bea15d76 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/Wrappers/DraggableSomedayEvent.tsx +++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/Wrappers/DraggableSomedayEvent.tsx @@ -1,7 +1,7 @@ import React, { FC } from "react"; import { Draggable } from "@hello-pangea/dnd"; import { Categories_Event, Schema_Event } from "@core/types/event.types"; -import { SomedayEventsProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; +import { SidebarProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; import { ID_SOMEDAY_DRAFT } from "@web/common/constants/web.constants"; import { SomedayEvent } from "../SomedayEvent"; @@ -13,7 +13,7 @@ export interface Props { index: number; isDrafting: boolean; isOverGrid: boolean; - util: SomedayEventsProps["util"]; + util: SidebarProps["util"]; } export const DraggableSomedayEvent: FC = ({ diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/Wrappers/DraggableSomedayEvents.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/Wrappers/DraggableSomedayEvents.tsx index edf46dc7..4d48f2bd 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/Wrappers/DraggableSomedayEvents.tsx +++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/Wrappers/DraggableSomedayEvents.tsx @@ -2,7 +2,7 @@ import React, { FC, memo } from "react"; import { Categories_Event, Schema_Event } from "@core/types/event.types"; import { ID_SOMEDAY_DRAFT } from "@web/common/constants/web.constants"; import { Schema_GridEvent } from "@web/common/types/web.event.types"; -import { SomedayEventsProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; +import { SidebarProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; import { DraggableSomedayEvent } from "./DraggableSomedayEvent"; @@ -11,7 +11,7 @@ export const DraggableSomedayEvents: FC<{ events: Schema_Event[]; draft: Schema_GridEvent; isOverGrid: boolean; - util: SomedayEventsProps["util"]; + util: SidebarProps["util"]; }> = memo(({ category, draft, events, isOverGrid, util }) => { return ( <> diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts index f0eb2e58..5e4a9f2d 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts +++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts @@ -6,6 +6,7 @@ import { colorByPriority, hoverColorByPriority, } from "@web/common/styles/theme.util"; +import { SIDEBAR_OPEN_WIDTH } from "@web/views/Calendar/layout.constants"; export interface Props extends DroppableProvided { priority: Priorities; @@ -62,6 +63,7 @@ export const StyledNewSomedayEvent = styled.div` return colorByPriority[priority]; }}; + border-radius: 2px; color: ${({ theme }) => theme.color.text.dark}; height: ${SOMEDAY_EVENT_HEIGHT}px; @@ -76,7 +78,7 @@ export const StyledNewSomedayEvent = styled.div` }}; padding: 5px; transition: background-color 0.2s, box-shadow 0.2s; - width: 298px; + width: calc(${SIDEBAR_OPEN_WIDTH}-5) px; &:hover { background: ${({ priority }) => hoverColorByPriority[priority]}; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx index 3160d583..33b4cbcb 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx +++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx @@ -7,32 +7,30 @@ import { useAppSelector } from "@web/store/store.hooks"; import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs"; import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"; import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; -import { useSidebar } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; import { theme } from "@web/common/styles/theme"; +import { SidebarProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; import { WeekSection } from "./WeekSection/WeekSection"; import { MonthSection } from "./MonthSection"; -import { Styled } from "./styled"; +import { SidebarContainer, SidebarContent } from "./styled"; interface Props { dateCalcs: DateCalcs; - flex?: number; measurements: Measurements_Grid; + sidebarProps: SidebarProps; viewStart: WeekProps["component"]["startOfView"]; viewEnd: WeekProps["component"]["endOfView"]; } export const SomedaySection: FC = ({ dateCalcs, - flex, measurements, + sidebarProps, viewEnd, viewStart, }) => { const isProcessing = useAppSelector(selectIsGetSomedayEventsProcessing); - const sidebarProps = useSidebar(measurements, dateCalcs); - const somedayRef = useRef(); const weekLabel = useMemo( () => getWeekRangeLabel(viewStart, viewEnd), @@ -40,30 +38,32 @@ export const SomedaySection: FC = ({ ); return ( - + {isProcessing && } - + + - + - - + + + ); }; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx index afe5c2aa..4687940e 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx +++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx @@ -2,19 +2,19 @@ import React, { FC } from "react"; import { Categories_Event } from "@core/types/event.types"; import { Text } from "@web/components/Text"; import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs"; -import { SomedayEventsProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; +import { SidebarProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar"; import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"; import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; import { AlignItems, JustifyContent } from "@web/components/Flex/styled"; import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper"; import { SomedayEvents } from "../SomedayEvents"; -import { StyledSidebarTopHeader, StyledAddEventButton } from "../styled"; +import { AddEventButton, SidebarSection, SidebarHeader } from "../styled"; interface Props { dateCalcs: DateCalcs; measurements: Measurements_Grid; - somedayProps: SomedayEventsProps; + sidebarProps: SidebarProps; viewStart: WeekProps["component"]["startOfView"]; weekLabel: string; } @@ -22,13 +22,13 @@ interface Props { export const WeekSection: FC = ({ dateCalcs, measurements, - somedayProps, + sidebarProps, viewStart, weekLabel, }) => { return ( - <> - + @@ -40,24 +40,26 @@ export const WeekSection: FC = ({ - somedayProps.util.onSectionClick(Categories_Event.SOMEDAY_WEEK) + sidebarProps.util.onPlaceholderClick( + Categories_Event.SOMEDAY_WEEK + ) } shortcut="W" >
- + + +
- + - + ); }; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts index da96e14e..9010bebd 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts +++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts @@ -2,18 +2,19 @@ import styled from "styled-components"; import { Flex } from "@web/components/Flex"; import { Text } from "@web/components/Text"; -export interface Props { - flex?: number; -} +export const SidebarContainer = styled.div` + flex: 1; +`; -export const Styled = styled.div` - color: ${({ theme }) => theme.color.panel.text}; - flex: ${({ flex }) => flex}; - margin-bottom: 5px; - width: 100%; +export const SidebarContent = styled.div` + flex: 1; + display: flex; + flex-direction: column; + gap: 16px; + overflow-y: auto; `; -export const StyledAddEventButton = styled(Text)` +export const AddEventButton = styled(Text)` cursor: pointer; margin-right: 30px; &:hover { @@ -22,23 +23,23 @@ export const StyledAddEventButton = styled(Text)` } `; -export const StyledSidebarHeader = styled(Flex)` - margin: 10px 5px 20px 20px; +export const AddEventPlaceholder = styled.div` + color: orange; `; -export const StyledSidebarTopHeader = styled(StyledSidebarHeader)` - padding-top: 25px; +export const SidebarHeader = styled(Flex)` + margin: 10px 5px 20px 0px; `; -export const StyledHeaderTitle = styled(Text)` - margin: 0 10px; +export const SidebarSection = styled(Flex)` + flex-direction: column; `; -export const StyledPaginationFlex = styled(Flex)` - width: 40px; +export const HeaderTitle = styled(Text)` + margin: 0 10px; `; -export const StyledEventsList = styled.div` +export const EventList = styled.div` padding: 20px; height: calc(100% - 67px); `; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/styled.ts b/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/styled.ts index 82d5157c..da1a621c 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/styled.ts +++ b/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/styled.ts @@ -13,5 +13,4 @@ export const Styled = styled.div` export const StyledMonthName = styled(Text)` display: block; padding-top: 18px; - margin-left: 50px; `; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/index.ts b/packages/web/src/views/Calendar/components/LeftSidebar/index.ts index 75ccb75d..7ad39439 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/index.ts +++ b/packages/web/src/views/Calendar/components/LeftSidebar/index.ts @@ -1 +1 @@ -export { LeftSidebar } from "./LeftSidebar"; +export { Sidebar } from "./Sidebar"; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/sidebar.types.ts b/packages/web/src/views/Calendar/components/LeftSidebar/sidebar.types.ts index a8d4bb29..fc6a76c8 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/sidebar.types.ts +++ b/packages/web/src/views/Calendar/components/LeftSidebar/sidebar.types.ts @@ -7,9 +7,7 @@ export interface PriorityFilter { [Priorities.WORK]?: boolean; [Priorities.SELF]?: boolean; } -export interface SidebarProps { - isToggled: boolean; -} + export interface SectionProps { height?: string; } diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts b/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts index 57b40a70..d97cf427 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts +++ b/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts @@ -1,15 +1,16 @@ import styled from "styled-components"; import { Flex } from "@web/components/Flex"; import { - SIDEBAR_CLOSED_WIDTH, + PAGE_MARGIN_TOP, SIDEBAR_OPEN_WIDTH, } from "@web/views/Calendar/layout.constants"; -import { ZIndex } from "@web/common/constants/web.constants"; import { FlexDirections } from "@web/components/Flex/styled"; import { ArrowLineLeftIcon } from "@web/components/Icons/ArrowLineLeft"; import { ArrowLineRightIcon } from "@web/components/Icons/ArrowLineRight"; -import { SidebarProps, SectionProps } from "./sidebar.types"; +import { SectionProps } from "./sidebar.types"; + +const ICON_ROW_HEIGHT = 40; export const getSidebarToggleIcon = (isToggled: boolean) => { if (isToggled) { @@ -19,67 +20,84 @@ export const getSidebarToggleIcon = (isToggled: boolean) => { } }; -export const StyledSidebarList = styled.div` - height: 400px; - overflow: auto; - padding-bottom: 20px; - padding-left: 20px; +export const CalendarListContainer = styled.div``; - ::-webkit-scrollbar { - width: 8px; - } - ::-webkit-scrollbar-thumb { - background-color: ${({ theme }) => theme.color.panel.scrollbar}; - border-radius: 3px; +export const CalendarLabel = styled.label` + display: flex; + align-items: "center"; +`; - &:hover { - background-color: ${({ theme }) => theme.color.panel.scrollbarActive}; - } +export const EventPlaceholder = styled.div` + align-items: center; + border: 1px dashed ${({ theme }) => theme.color.border.secondary}; + cursor: pointer; + border-radius: 4px; + display: flex; + justify-content: center; + margin: 10px 0; + min-height: 32px; + opacity: 0.5; + transition: opacity 0.2s; + + &:hover { + opacity: 1; } `; -export const StyledLeftIconGroup = styled.div` +export const LeftIconGroup = styled.div` gap: 20px; display: flex; `; -export const StyledLeftSidebar = styled(Flex)` +export const SidebarContainer = styled(Flex)` background: ${({ theme }) => theme.color.panel.bg}; + color: ${({ theme }) => theme.color.panel.text}; flex-direction: ${FlexDirections.COLUMN}; height: 100%; + padding-top: ${PAGE_MARGIN_TOP}px; overflow: hidden; position: relative; transition: 0.4s; - width: ${({ isToggled }) => - isToggled ? SIDEBAR_OPEN_WIDTH : SIDEBAR_CLOSED_WIDTH}px; + width: ${SIDEBAR_OPEN_WIDTH}px; `; -export const StyledIconRow = styled(Flex)` +export const IconRow = styled(Flex)` + align-items: center; bottom: 0; border-top: 1px solid ${({ theme }) => theme.color.border.primary}; - height: 40px; + height: ${ICON_ROW_HEIGHT}px; flex-direction: ${FlexDirections.ROW}; - padding: 9px 44px 9px 20px; + padding: 0 25px; position: absolute; width: 100%; `; -export const StyledSidebarOverflow = styled.div` - position: absolute; - background: ${({ isToggled, theme }) => - isToggled ? theme.color.panel.bg : theme.color.bg.primary}; - width: ${({ isToggled }) => (isToggled ? 0 : "100%")}; - height: 100%; - right: 0; - transition: 0.4s; - z-index: ${ZIndex.LAYER_1}; +export const SidebarTabContainer = styled.div` + height: calc(100% - ${ICON_ROW_HEIGHT}px); + overflow: auto; + padding: 0 25px; + width: 100%; + + ::-webkit-scrollbar { + width: 8px; + } + ::-webkit-scrollbar-thumb { + background-color: transparent; + border-radius: 3px; + } + &:hover { + ::-webkit-scrollbar-thumb { + background-color: ${({ theme }) => theme.color.panel.scrollbar}; + } + } `; -export const StyledSomedaySection = styled(Flex)` - overflow: hidden; - padding-top: 26px; +export const SidebarList = styled.div` + overflow: auto; + width: 100%; `; -export const StyledBottomSectionFlex = styled(Flex)` - padding: 34px 38px 25px 14px; +export const SomedaySection = styled(Flex)` + overflow: hidden; + padding-top: 26px; `; diff --git a/packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebar.ts b/packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebar.ts index d0bf60a8..415d37ea 100644 --- a/packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebar.ts +++ b/packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebar.ts @@ -38,4 +38,4 @@ export const useSidebar = ( }; }; -export type SomedayEventsProps = ReturnType; +export type SidebarProps = ReturnType; diff --git a/packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebarUtil.ts b/packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebarUtil.ts index cf7c1bcb..3790df1b 100644 --- a/packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebarUtil.ts +++ b/packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebarUtil.ts @@ -1,4 +1,4 @@ -import { useCallback } from "react"; +import { MouseEventHandler, useCallback } from "react"; import dayjs from "dayjs"; import { SOMEDAY_MONTH_LIMIT_MSG, @@ -194,6 +194,13 @@ export const useSidebarUtil = ( ); }; + const discardIfDrafting = () => { + if (state.isDrafting) { + dispatch(draftSlice.actions.discard()); + close(); + } + }; + const onDragEnd = (result: DropResult) => { const { destination, draggableId, source } = result; @@ -310,7 +317,7 @@ export const useSidebarUtil = ( close(); }; - const onSectionClick = (section: Categories_Event) => { + const onPlaceholderClick = (section: Categories_Event) => { if (state.isDrafting) { dispatch(draftSlice.actions.discard()); close(); @@ -387,14 +394,15 @@ export const useSidebarUtil = ( return { close, - resetLocalDraftStateIfNeeded, createDefaultSomeday, + discardIfDrafting, onDraft, onDragEnd, onDragStart, onMigrate, - onSectionClick, + onPlaceholderClick, onSubmit, + resetLocalDraftStateIfNeeded, setDraft, }; }; diff --git a/packages/web/src/views/Calendar/layout.constants.ts b/packages/web/src/views/Calendar/layout.constants.ts index d9b141b5..f284926f 100644 --- a/packages/web/src/views/Calendar/layout.constants.ts +++ b/packages/web/src/views/Calendar/layout.constants.ts @@ -14,8 +14,8 @@ export const FLEX_TMRW = 18.6; export const FLEX_EQUAL = 14.285714285714286; // 100 / 7 export const HEADER_HEIGHT = 40; -export const PAGE_TOP_PADDING = 35; -export const PAGE_X_PADDING = 25; +export const PAGE_MARGIN_TOP = 35; +export const PAGE_MARGIN_X = 25; export const SCROLLBAR_WIDTH = 8; @@ -23,15 +23,15 @@ export const WEEK_DAYS_HEIGHT = 26; export const WEEK_DAYS_MARGIN_Y = 22; export const GRID_PADDING_BOTTOM = 20; +//TODO remove this export const GRID_MARGIN_LEFT = 50; export const GRID_TIME_STEP = 15; -export const GRID_X_START = PAGE_X_PADDING + GRID_MARGIN_LEFT; +export const GRID_X_START = PAGE_MARGIN_X + GRID_MARGIN_LEFT; export const GRID_Y_START = - PAGE_TOP_PADDING + HEADER_HEIGHT + WEEK_DAYS_HEIGHT + WEEK_DAYS_MARGIN_Y; + PAGE_MARGIN_TOP + HEADER_HEIGHT + WEEK_DAYS_HEIGHT + WEEK_DAYS_MARGIN_Y; export const GRID_X_PADDING_TOTAL = - PAGE_X_PADDING * 2 + GRID_MARGIN_LEFT + SCROLLBAR_WIDTH; + PAGE_MARGIN_X * 2 + GRID_MARGIN_LEFT + SCROLLBAR_WIDTH; -export const SIDEBAR_CLOSED_WIDTH = 44; export const SIDEBAR_MONTH_HEIGHT = 275; export const SIDEBAR_OPEN_WIDTH = 350; export const SIDEBAR_X_START = SIDEBAR_OPEN_WIDTH + GRID_X_START; diff --git a/packages/web/src/views/Calendar/styled.ts b/packages/web/src/views/Calendar/styled.ts index 7e1592d0..8f888a96 100644 --- a/packages/web/src/views/Calendar/styled.ts +++ b/packages/web/src/views/Calendar/styled.ts @@ -1,7 +1,7 @@ import styled from "styled-components"; import { Flex } from "@web/components/Flex"; -import { PAGE_TOP_PADDING, PAGE_X_PADDING } from "./layout.constants"; +import { PAGE_MARGIN_TOP, PAGE_MARGIN_X } from "./layout.constants"; export const Styled = styled(Flex)` height: 100vh; @@ -13,5 +13,5 @@ export const StyledCalendar = styled(Flex)` background: ${({ theme }) => theme.color.bg.primary}; flex-grow: 1; height: 100%; - padding: ${PAGE_TOP_PADDING}px ${PAGE_X_PADDING}px 0 ${PAGE_X_PADDING}px; + padding: ${PAGE_MARGIN_TOP}px ${PAGE_MARGIN_X}px 0 ${PAGE_MARGIN_X}px; `;