diff --git a/packages/core/src/util/color.utils.ts b/packages/core/src/util/color.utils.ts index 2715b694..c840cf4a 100644 --- a/packages/core/src/util/color.utils.ts +++ b/packages/core/src/util/color.utils.ts @@ -7,3 +7,7 @@ export const brighten = (color: string, amount?: number) => { export const darken = (color: string, amount?: number) => { return tinycolor(color).darken(amount).toString(); }; + +export const isDark = (color: string) => { + return tinycolor(color).isDark(); +}; diff --git a/packages/web/src/common/constants/web.constants.ts b/packages/web/src/common/constants/web.constants.ts index 317dfc4b..cc69a2e1 100644 --- a/packages/web/src/common/constants/web.constants.ts +++ b/packages/web/src/common/constants/web.constants.ts @@ -12,7 +12,7 @@ export const ID_GRID_EVENTS_ALLDAY = "allDayEvents"; export const ID_GRID_EVENTS_TIMED = "timedEvents"; export const ID_GRID_MAIN = "mainGrid"; export const ID_MAIN = "mainSection"; -export const ID_SIDEBAR = "sidebar"; +export const ID_DATEPICKER_SIDEBAR = "sidebarDatePicker"; export const ID_SOMEDAY_DRAFT = "somedayDraft"; export const ID_SOMEDAY_EVENTS = "ID_SOMEDAY_EVENTS"; export const ID_SOMEDAY_EVENT_FORM = "Someday Event Form"; 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..1c7c633c 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,10 +469,11 @@ export const getWidthInPixels = ( }; export const getX = (e: MouseEvent | number, isSidebarOpen: boolean) => { - const xOffset = isSidebarOpen ? SIDEBAR_OPEN_WIDTH : SIDEBAR_CLOSED_WIDTH; + const x = typeof e === "number" ? e : e.clientX; - const origX = typeof e === "number" ? e : e.clientX; - const x = origX - xOffset; + if (isSidebarOpen) { + return x - SIDEBAR_OPEN_WIDTH; + } return x; }; diff --git a/packages/web/src/components/DatePicker/DatePicker.tsx b/packages/web/src/components/DatePicker/DatePicker.tsx index 99e8bff5..427d653d 100644 --- a/packages/web/src/components/DatePicker/DatePicker.tsx +++ b/packages/web/src/components/DatePicker/DatePicker.tsx @@ -8,6 +8,7 @@ import { AlignItems, JustifyContent } from "@web/components/Flex/styled"; import { Flex } from "@web/components/Flex"; import { Input } from "@web/components/Input"; import { theme } from "@web/common/styles/theme"; +import { isDark } from "@core/util/color.utils"; import { ChangeDayButtonsStyledFlex, @@ -19,10 +20,11 @@ import { export interface Props extends ReactDatePickerProps { animationOnToggle?: boolean; - bgColor: string; + bgColor?: string; + inputColor?: string; isOpen?: boolean; onInputBlur?: (e: React.FocusEvent) => void; - view: "widget" | "picker"; + view: "sidebar" | "grid"; withTodayButton?: boolean; } @@ -35,6 +37,7 @@ export const DatePicker: React.FC = ({ autoFocus: _autoFocus = false, bgColor, calendarClassName, + inputColor, isOpen = true, onSelect = () => null, onInputBlur, @@ -45,6 +48,12 @@ export const DatePicker: React.FC = ({ ...props }) => { const datepickerRef = useRef(null); + const headerColor = + view === "sidebar" + ? theme.color.text.light + : isDark(bgColor) + ? theme.color.text.lighter + : theme.color.text.dark; useEffect(() => { if (_autoFocus) { @@ -64,11 +73,12 @@ export const DatePicker: React.FC = ({ calendarContainer={(containerProps) => ( )} - customInput={} + customInput={} dateFormat={"M-d-yyyy"} formatWeekDay={(day) => day[0]} open={isOpen} @@ -105,7 +115,7 @@ export const DatePicker: React.FC = ({ justifyContent={JustifyContent.LEFT} > - + {selectedMonth} @@ -116,7 +126,7 @@ export const DatePicker: React.FC = ({ {"<"} @@ -124,7 +134,7 @@ export const DatePicker: React.FC = ({ {">"} diff --git a/packages/web/src/components/DatePicker/styled.ts b/packages/web/src/components/DatePicker/styled.ts index b379d720..bb235eaa 100644 --- a/packages/web/src/components/DatePicker/styled.ts +++ b/packages/web/src/components/DatePicker/styled.ts @@ -1,4 +1,5 @@ import styled from "styled-components"; +import { brighten, compliment, darken, isDark } from "@core/util/color.utils"; import { Flex } from "@web/components/Flex"; import { Text } from "@web/components/Text"; import { SIDEBAR_MONTH_HEIGHT } from "@web/views/Calendar/layout.constants"; @@ -28,11 +29,21 @@ export const MonthContainerStyled = styled(Flex)` width: 97px; `; -export const StyledDatePicker = styled.div<{ - view: "widget" | "picker"; +interface Props { + bgColor: string; + isDark?: boolean; selectedColor: string; -}>` - background-color: ${({ theme }) => theme.color.bg.primary}; + view: "grid" | "sidebar"; +} + +export const StyledDatePicker = styled.div.attrs((props) => ({ + bgColor: props.bgColor, + isDark: isDark(props.bgColor), + selectedColor: props.selectedColor, + view: props.view, +}))` + background-color: ${({ bgColor, view }) => + view === "sidebar" ? "transparent" : bgColor}; border: none; border-radius: 2px; box-shadow: 0px 4px 4px ${({ theme }) => theme.color.shadow.default}; @@ -64,8 +75,8 @@ export const StyledDatePicker = styled.div<{ width: 100%; &:hover { - ${({ view }) => - view === "widget" && + ${({ view, theme }) => + view === "sidebar" && `background-color: ${theme.color.fg.primaryDark}`}; } } @@ -79,7 +90,8 @@ export const StyledDatePicker = styled.div<{ &__day-name { opacity: 0.8; - color: ${theme.color.text.light}; + color: ${({ theme, isDark }) => + isDark ? theme.color.text.light : theme.color.text.dark}; font-size: 11px; margin: 0; } @@ -87,7 +99,8 @@ export const StyledDatePicker = styled.div<{ &__day { border: none !important; border-radius: 50% !important; - color: ${theme.color.text.lighter}; + color: ${({ theme, isDark }) => + isDark ? theme.color.text.lighter : theme.color.text.dark}; margin: 0; &:hover { @@ -103,12 +116,16 @@ export const StyledDatePicker = styled.div<{ } &--selected { - color: ${theme.color.text.dark}; background-color: ${({ selectedColor }) => selectedColor}; } &--today { - color: ${({ selectedColor }) => selectedColor}; + color: ${({ view }) => + view === "sidebar" ? theme.color.text.accent : theme.color.text.dark}; + text-decoration: underline; + text-decoration-color: ${({ view }) => + view === "sidebar" ? theme.color.text.accent : theme.color.text.dark}; + text-underline-offset: 3px; } &--keyboard-selected { @@ -116,22 +133,26 @@ export const StyledDatePicker = styled.div<{ } &--outside-month { - color: ${theme.color.text.darkPlaceholder}; + color: ${({ theme, isDark }) => + isDark + ? darken(theme.color.text.light) + : brighten(theme.color.text.dark)}; + opacity: 0.8; } } - } - &.calendar { - height: 0; - width: 414px; - overflow: hidden; + &.calendar { + height: 0; + width: 414px; + overflow: hidden; - &--open { - height: ${SIDEBAR_MONTH_HEIGHT}px; - } + &--open { + height: ${SIDEBAR_MONTH_HEIGHT}px; + } - &--animation { - transition: 0.3s; + &--animation { + transition: 0.3s; + } } } `; diff --git a/packages/web/src/components/Icons/ArrowLineLeft.tsx b/packages/web/src/components/Icons/ArrowLineLeft.tsx deleted file mode 100644 index a59766c3..00000000 --- a/packages/web/src/components/Icons/ArrowLineLeft.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import styled from "styled-components"; -import { ArrowLineLeft } from "@phosphor-icons/react"; -import { ZIndex } from "@web/common/constants/web.constants"; - -export const ArrowLineLeftIcon = styled(ArrowLineLeft)` - cursor: pointer; - color: ${({ theme }) => theme.color.text.lightInactive}; - position: absolute; - right: 7px; - bottom: 8px; - transition: filter 0.2s ease; - z-index: ${ZIndex.LAYER_1}; - - &:hover { - filter: brightness(130%); - } -`; diff --git a/packages/web/src/components/Icons/ArrowLineRight.tsx b/packages/web/src/components/Icons/ArrowLineRight.tsx deleted file mode 100644 index 67ef75a5..00000000 --- a/packages/web/src/components/Icons/ArrowLineRight.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import styled from "styled-components"; -import { ArrowLineRight } from "@phosphor-icons/react"; -import { ZIndex } from "@web/common/constants/web.constants"; - -export const ArrowLineRightIcon = styled(ArrowLineRight)` - cursor: pointer; - color: ${({ theme }) => theme.color.text.lightInactive}; - position: absolute; - right: 7px; - bottom: 8px; - transition: filter 0.2s ease; - z-index: ${ZIndex.LAYER_1}; - - &:hover { - filter: brightness(130%); - } -`; diff --git a/packages/web/src/components/Icons/Calendar.tsx b/packages/web/src/components/Icons/Calendar.tsx new file mode 100644 index 00000000..5faa8791 --- /dev/null +++ b/packages/web/src/components/Icons/Calendar.tsx @@ -0,0 +1,8 @@ +import styled from "styled-components"; +import { CalendarDots } from "@phosphor-icons/react"; + +import { iconStyles } from "./styled"; + +export const CalendarIcon = styled(CalendarDots)` + ${iconStyles} +`; diff --git a/packages/web/src/components/Icons/Command.tsx b/packages/web/src/components/Icons/Command.tsx index 8cfd2daf..a25521e1 100644 --- a/packages/web/src/components/Icons/Command.tsx +++ b/packages/web/src/components/Icons/Command.tsx @@ -1,11 +1,8 @@ import styled from "styled-components"; import { Command } from "@phosphor-icons/react"; -export const StyledCommandIcon = styled(Command)` - color: ${({ theme }) => theme.color.text.lighter}; - transition: filter 0.2s ease; +import { iconStyles } from "./styled"; - &:hover { - filter: brightness(130%); - } +export const CommandIcon = styled(Command)` + ${iconStyles} `; diff --git a/packages/web/src/components/Icons/Delete.tsx b/packages/web/src/components/Icons/Delete.tsx index f660d559..c6f3db08 100644 --- a/packages/web/src/components/Icons/Delete.tsx +++ b/packages/web/src/components/Icons/Delete.tsx @@ -1,6 +1,14 @@ import React from "react"; +import styled from "styled-components"; +import { Trash } from "@phosphor-icons/react"; -import { TrashIcon } from "./Trash"; +export const TrashIcon = styled(Trash)` + transition: filter 0.2s ease; + &:hover { + cursor: pointer; + filter: brightness(50%); + } +`; interface Props { onDelete: () => void; diff --git a/packages/web/src/components/Icons/MetaKey.tsx b/packages/web/src/components/Icons/MetaKey.tsx deleted file mode 100644 index 23a0048f..00000000 --- a/packages/web/src/components/Icons/MetaKey.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; -import { useAppDispatch, useAppSelector } from "@web/store/store.hooks"; -import { settingsSlice } from "@web/ducks/settings/slices/settings.slice"; -import { selectIsCmdPaletteOpen } from "@web/ducks/settings/selectors/settings.selectors"; - -import { TooltipWrapper } from "../Tooltip/TooltipWrapper"; -import { StyledCommandIcon } from "./Command"; - -export const MetaKeyIcon = () => { - const dispatch = useAppDispatch(); - - const isCmdPaletteOpen = useAppSelector(selectIsCmdPaletteOpen); - - return ( - { - if (isCmdPaletteOpen) { - dispatch(settingsSlice.actions.closeCmdPalette()); - } else { - dispatch(settingsSlice.actions.openCmdPalette()); - } - }} - > - - - ); -}; diff --git a/packages/web/src/components/Icons/Sidebar.tsx b/packages/web/src/components/Icons/Sidebar.tsx new file mode 100644 index 00000000..3da1dde7 --- /dev/null +++ b/packages/web/src/components/Icons/Sidebar.tsx @@ -0,0 +1,8 @@ +import styled from "styled-components"; +import { Sidebar } from "@phosphor-icons/react"; + +import { iconStyles } from "./styled"; + +export const SidebarIcon = styled(Sidebar)` + ${iconStyles} +`; diff --git a/packages/web/src/components/Icons/Todo.tsx b/packages/web/src/components/Icons/Todo.tsx new file mode 100644 index 00000000..a36b63d0 --- /dev/null +++ b/packages/web/src/components/Icons/Todo.tsx @@ -0,0 +1,8 @@ +import styled from "styled-components"; +import { CheckCircle } from "@phosphor-icons/react"; + +import { iconStyles } from "./styled"; + +export const TodoIcon = styled(CheckCircle)` + ${iconStyles} +`; diff --git a/packages/web/src/components/Icons/Trash.tsx b/packages/web/src/components/Icons/Trash.tsx deleted file mode 100644 index 79937390..00000000 --- a/packages/web/src/components/Icons/Trash.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import styled from "styled-components"; -import { Trash } from "@phosphor-icons/react"; - -export const TrashIcon = styled(Trash)` - transition: filter 0.2s ease; - &:hover { - cursor: pointer; - filter: brightness(50%); - } -`; diff --git a/packages/web/src/components/Icons/icon.types.ts b/packages/web/src/components/Icons/icon.types.ts new file mode 100644 index 00000000..3ce8a680 --- /dev/null +++ b/packages/web/src/components/Icons/icon.types.ts @@ -0,0 +1,5 @@ +import { IconProps as PhosphorIconProps } from "@phosphor-icons/react"; + +export interface IconProps extends PhosphorIconProps { + ref?: React.Ref; +} diff --git a/packages/web/src/components/Icons/styled.ts b/packages/web/src/components/Icons/styled.ts new file mode 100644 index 00000000..397817ac --- /dev/null +++ b/packages/web/src/components/Icons/styled.ts @@ -0,0 +1,16 @@ +import { css } from "styled-components"; +import { IconProps } from "@phosphor-icons/react"; + +interface Props extends IconProps { + isFocused: boolean; +} + +export const iconStyles = css` + color: ${({ theme, isFocused }) => + isFocused ? theme.color.text.light : theme.color.text.lightInactive}; + transition: filter 0.2s ease; + + &:hover { + filter: brightness(130%); + } +`; diff --git a/packages/web/src/ducks/events/sagas/event.sagas.ts b/packages/web/src/ducks/events/sagas/event.sagas.ts index 23e28d2d..be33bd0e 100644 --- a/packages/web/src/ducks/events/sagas/event.sagas.ts +++ b/packages/web/src/ducks/events/sagas/event.sagas.ts @@ -36,7 +36,7 @@ import { Entities_Event, } from "../event.types"; import { getSomedayEventsSlice } from "../slices/someday.slice"; -import { Action_Someday_Reorder } from "../types/someday.slice.types"; +import { Action_Someday_Reorder } from "../slices/someday.slice.types"; function* convertSomedayEvent({ payload }: Action_ConvertSomedayEvent) { try { diff --git a/packages/web/src/ducks/events/selectors/view.selectors.ts b/packages/web/src/ducks/events/selectors/view.selectors.ts index f0946ac9..e18f2f74 100644 --- a/packages/web/src/ducks/events/selectors/view.selectors.ts +++ b/packages/web/src/ducks/events/selectors/view.selectors.ts @@ -1,3 +1,6 @@ import { RootState } from "@web/store"; export const selectDatesInView = (state: RootState) => state.view.dates; +export const selectIsSidebarOpen = (state: RootState) => + state.view.sidebar.isOpen; +export const selectSidebarTab = (state: RootState) => state.view.sidebar.tab; diff --git a/packages/web/src/ducks/events/slices/draft.slice.ts b/packages/web/src/ducks/events/slices/draft.slice.ts index 40cdb7a1..8ab6ebd1 100644 --- a/packages/web/src/ducks/events/slices/draft.slice.ts +++ b/packages/web/src/ducks/events/slices/draft.slice.ts @@ -6,7 +6,7 @@ import { Action_DraftEvent, Action_Draft_Resize, Action_Draft_Swap, -} from "../types/draft.slice.types"; +} from "./draft.slice.types"; interface State_DraftEvent { status: Status_DraftEvent | null; diff --git a/packages/web/src/ducks/events/types/draft.slice.types.ts b/packages/web/src/ducks/events/slices/draft.slice.types.ts similarity index 100% rename from packages/web/src/ducks/events/types/draft.slice.types.ts rename to packages/web/src/ducks/events/slices/draft.slice.types.ts diff --git a/packages/web/src/ducks/events/types/someday.slice.types.ts b/packages/web/src/ducks/events/slices/someday.slice.types.ts similarity index 100% rename from packages/web/src/ducks/events/types/someday.slice.types.ts rename to packages/web/src/ducks/events/slices/someday.slice.types.ts diff --git a/packages/web/src/ducks/events/slices/view.slice.ts b/packages/web/src/ducks/events/slices/view.slice.ts index 9e67fd53..dc5cf46c 100644 --- a/packages/web/src/ducks/events/slices/view.slice.ts +++ b/packages/web/src/ducks/events/slices/view.slice.ts @@ -7,6 +7,18 @@ interface State_View { start: string; end: string; }; + sidebar: { + tab: "monthWidget" | "tasks"; + isOpen: boolean; + }; +} + +interface Action_DatesChange extends Action { + payload: State_View["dates"]; +} + +interface Action_SidebarViewChange extends Action { + payload: State_View["sidebar"]["tab"]; } const initialState: State_View = { @@ -14,22 +26,22 @@ const initialState: State_View = { start: dayjs().format(), end: dayjs().endOf("week").format(), }, + sidebar: { tab: "tasks", isOpen: true }, }; -export interface Action_DatesChange extends Action { - payload: { - start: string; - end: string; - }; -} - export const viewSlice = createSlice({ name: "view", initialState, reducers: { + toggleSidebar: (state) => { + state.sidebar.isOpen = !state.sidebar.isOpen; + }, updateDates: (state, action: Action_DatesChange) => { state.dates = action.payload; }, + updateSidebarTab: (state, action: Action_SidebarViewChange) => { + state.sidebar.tab = action.payload; + }, }, }); diff --git a/packages/web/src/ducks/settings/selectors/settings.selectors.ts b/packages/web/src/ducks/settings/selectors/settings.selectors.ts index 04f2e737..0124f4c5 100644 --- a/packages/web/src/ducks/settings/selectors/settings.selectors.ts +++ b/packages/web/src/ducks/settings/selectors/settings.selectors.ts @@ -2,6 +2,3 @@ import { RootState } from "@web/store"; export const selectIsCmdPaletteOpen = (state: RootState) => state.settings.isCmdPaletteOpen; - -export const selectIsRightSidebarOpen = (state: RootState) => - state.settings.isRightSidebarOpen; diff --git a/packages/web/src/ducks/settings/slices/settings.slice.ts b/packages/web/src/ducks/settings/slices/settings.slice.ts index 484190c9..3b989b53 100644 --- a/packages/web/src/ducks/settings/slices/settings.slice.ts +++ b/packages/web/src/ducks/settings/slices/settings.slice.ts @@ -2,12 +2,10 @@ import { createSlice } from "@reduxjs/toolkit"; interface State_Settings { isCmdPaletteOpen: boolean; - isRightSidebarOpen: boolean; } const initialState: State_Settings = { isCmdPaletteOpen: false, - isRightSidebarOpen: false, }; export const settingsSlice = createSlice({ @@ -23,8 +21,5 @@ export const settingsSlice = createSlice({ toggleCmdPalette: (state) => { state.isCmdPaletteOpen = !state.isCmdPaletteOpen; }, - toggleRightSidebar: (state) => { - state.isRightSidebarOpen = !state.isRightSidebarOpen; - }, }, }); diff --git a/packages/web/src/views/Calendar/Calendar.tsx b/packages/web/src/views/Calendar/Calendar.tsx index 055c2d71..e52bfbf6 100644 --- a/packages/web/src/views/Calendar/Calendar.tsx +++ b/packages/web/src/views/Calendar/Calendar.tsx @@ -1,6 +1,8 @@ import React from "react"; import { FlexDirections } from "@web/components/Flex/styled"; import { ID_MAIN } from "@web/common/constants/web.constants"; +import { useAppSelector } from "@web/store/store.hooks"; +import { selectIsSidebarOpen } from "@web/ducks/events/selectors/view.selectors"; import { Grid } from "./components/Grid/"; import { useScroll } from "./hooks/grid/useScroll"; @@ -10,25 +12,26 @@ import { Header } from "./components/Header"; import { RootProps } from "./calendarView.types"; import { Styled, StyledCalendar } from "./styled"; import { useGridLayout } from "./hooks/grid/useGridLayout"; -import { usePreferences } from "./hooks/usePreferences"; import { useDateCalcs } from "./hooks/grid/useDateCalcs"; import { useShortcuts } from "./hooks/shortcuts/useShortcuts"; import { useRefresh } from "./hooks/useRefresh"; -import { LeftSidebar } from "./components/LeftSidebar"; -import { RightSidebar } from "./components/RightSidebar"; +import { Sidebar } from "./components/Sidebar"; import { Draft } from "./components/Event/Draft"; import { Dedication } from "./components/Dedication"; import { CmdPalette } from "../CmdPalette"; export const CalendarView = () => { - const prefs = usePreferences(); + const isSidebarOpen = useAppSelector(selectIsSidebarOpen); const { today } = useToday(); useRefresh(); const weekProps = useWeek(today); - const { gridRefs, measurements } = useGridLayout(weekProps.component.week); + const { gridRefs, measurements } = useGridLayout( + isSidebarOpen, + weekProps.component.week + ); const scrollUtil = useScroll(gridRefs.gridScrollRef); @@ -36,7 +39,6 @@ export const CalendarView = () => { const isCurrentWeek = weekProps.component.isCurrentWeek; const util = weekProps.util; - const toggleSidebar = prefs.toggleSidebar; const shortcutProps = { today, @@ -46,7 +48,6 @@ export const CalendarView = () => { endOfView: weekProps.component.endOfView, util, scrollUtil, - toggleSidebar, }; useShortcuts(shortcutProps); @@ -62,18 +63,18 @@ export const CalendarView = () => { - - + {isSidebarOpen && ( + + )}
{ - - ); }; diff --git a/packages/web/src/views/Calendar/components/Dedication/Dedication.tsx b/packages/web/src/views/Calendar/components/Dedication/Dedication.tsx index cd943f07..97f2945e 100644 --- a/packages/web/src/views/Calendar/components/Dedication/Dedication.tsx +++ b/packages/web/src/views/Calendar/components/Dedication/Dedication.tsx @@ -18,15 +18,9 @@ import { export const Dedication = () => { const [isOpen, setIsOpen] = useState(false); - useHotkeys( - "ctrl+shift+0", - () => { - setIsOpen(!isOpen); - }, - { - keydown: true, - } - ); + useHotkeys("ctrl+shift+0", () => { + setIsOpen(!isOpen); + }); const close = () => { setIsOpen(false); @@ -59,10 +53,12 @@ export const Dedication = () => { "I have such amazing friends and family and I wish I could slow down time just a little bit so I can take all these relationships in as much as possible. Time is the biggest enemy we all face." + + -Derek's Facebook post from 12.24.2013 + - -Derek's Facebook post from 12.24.2013 ); diff --git a/packages/web/src/views/Calendar/components/Dedication/styled.ts b/packages/web/src/views/Calendar/components/Dedication/styled.ts index b39337b1..0c3a4888 100644 --- a/packages/web/src/views/Calendar/components/Dedication/styled.ts +++ b/packages/web/src/views/Calendar/components/Dedication/styled.ts @@ -19,10 +19,9 @@ export const modalStyles = { }; export const StyledCaption = styled.div` - color: transparent; font-size: 0.8rem; - margin-left: 70px; - padding-bottom: 30px; + margin-left: 50px; + padding-top: 30px; `; export const StyledDedicationModal = styled.div``; @@ -46,6 +45,5 @@ export const StyledDerekPic = styled.img` export const StyledDerekQuote = styled.blockquote` font-size: 1.5rem; font-style: italic; - font-weight: bold; margin-right: 20px; `; diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx index c99da75e..07a31b9a 100644 --- a/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx +++ b/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx @@ -5,7 +5,7 @@ import { getWidthBuffer } from "@web/common/utils/grid.util"; import { Flex } from "@web/components/Flex"; import { AlignItems, FlexWrap } from "@web/components/Flex/styled"; import { Text } from "@web/components/Text"; -import { SOMEDAY_EVENT_HEIGHT } from "@web/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled"; +import { SOMEDAY_EVENT_HEIGHT } from "@web/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/styled"; import { EVENT_ALLDAY_HEIGHT } from "@web/views/Calendar/layout.constants"; import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout"; import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; diff --git a/packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayRow.tsx b/packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayRow.tsx index fedaed8b..d58e11f7 100644 --- a/packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayRow.tsx +++ b/packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayRow.tsx @@ -17,8 +17,8 @@ import { getDefaultEvent } from "@web/common/utils/event.util"; import { selectRowCount } from "@web/ducks/events/selectors/event.selectors"; import { isEventFormOpen } from "@web/common/utils"; -import { StyledAllDayColumns, StyledGridCol } from "../Columns/styled"; -import { StyledAllDayRow } from "./styled"; +import { StyledGridCol } from "../Columns/styled"; +import { StyledAllDayColumns, StyledAllDayRow } from "./styled"; import { AllDayEvents } from "./AllDayEvents"; interface Props { diff --git a/packages/web/src/views/Calendar/components/Grid/AllDayRow/styled.ts b/packages/web/src/views/Calendar/components/Grid/AllDayRow/styled.ts index 8bc5a97b..5b44dbdb 100644 --- a/packages/web/src/views/Calendar/components/Grid/AllDayRow/styled.ts +++ b/packages/web/src/views/Calendar/components/Grid/AllDayRow/styled.ts @@ -8,6 +8,8 @@ import { } from "@web/views/Calendar/layout.constants"; import { GRID_TIME_STEP } from "@web/views/Calendar/layout.constants"; +import { Columns } from "../Columns/styled"; + const gridHeight = `100% - (${GRID_Y_START}px + ${GRID_PADDING_BOTTOM}px)`; const gridRowHeight = `(${gridHeight}) / 11`; const interval = 60 / GRID_TIME_STEP; @@ -15,6 +17,9 @@ const allDayRowHeight = `${gridRowHeight} / ${interval}`; const gridWidth = `100% - ${SCROLLBAR_WIDTH}px`; +export const StyledAllDayColumns = styled(Columns)` + height: 100%; +`; export const StyledAllDayRow = styled(Flex)<{ rowsCount: number }>` border-bottom: ${({ theme }) => `2px solid ${theme.color.gridLine.primary}`}; height: ${({ rowsCount }) => diff --git a/packages/web/src/views/Calendar/components/Grid/Columns/Columns.tsx b/packages/web/src/views/Calendar/components/Grid/Columns/MainGridColumns.tsx similarity index 97% rename from packages/web/src/views/Calendar/components/Grid/Columns/Columns.tsx rename to packages/web/src/views/Calendar/components/Grid/Columns/MainGridColumns.tsx index be6e4bc9..9b20242b 100644 --- a/packages/web/src/views/Calendar/components/Grid/Columns/Columns.tsx +++ b/packages/web/src/views/Calendar/components/Grid/Columns/MainGridColumns.tsx @@ -14,7 +14,7 @@ interface Props { weekDays: Dayjs[]; } -export const Columns: FC = ({ +export const MainGridColumns: FC = ({ isCurrentWeek, today, week, diff --git a/packages/web/src/views/Calendar/components/Grid/Columns/index.ts b/packages/web/src/views/Calendar/components/Grid/Columns/index.ts deleted file mode 100644 index 1efbd66a..00000000 --- a/packages/web/src/views/Calendar/components/Grid/Columns/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { Columns } from "./Columns"; -export { Columns }; diff --git a/packages/web/src/views/Calendar/components/Grid/Columns/styled.ts b/packages/web/src/views/Calendar/components/Grid/Columns/styled.ts index cf2861f1..ba42f4e4 100644 --- a/packages/web/src/views/Calendar/components/Grid/Columns/styled.ts +++ b/packages/web/src/views/Calendar/components/Grid/Columns/styled.ts @@ -12,10 +12,6 @@ export const Columns = styled(Flex)` left: ${GRID_MARGIN_LEFT}px; `; -export const StyledAllDayColumns = styled(Columns)` - height: 100%; -`; - export const StyledGridCol = styled.div<{ color: string }>` border-left: ${({ theme }) => `${DIVIDER_GRID}px solid ${theme.color.gridLine.primary}`}; diff --git a/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/GridRows.tsx b/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/GridRows.tsx deleted file mode 100644 index 81405fa0..00000000 --- a/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/GridRows.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import { getHourLabels } from "@web/common/utils/web.date.util"; - -import { StyledGridRows, StyledGridRow } from "./styled"; - -export const GridRows = () => { - return ( - - {getHourLabels().map((dayTime, index) => ( - - ))} - - ); -}; diff --git a/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/index.ts b/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/index.ts deleted file mode 100644 index 53c9f8a2..00000000 --- a/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { GridRows } from "./GridRows"; -export { GridRows }; diff --git a/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/styled.ts b/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/styled.ts deleted file mode 100644 index f2d54a01..00000000 --- a/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/styled.ts +++ /dev/null @@ -1,24 +0,0 @@ -import styled from "styled-components"; -import { Flex } from "@web/components/Flex"; -import { GRID_MARGIN_LEFT } from "@web/views/Calendar/layout.constants"; -import { DIVIDER_GRID } from "@web/views/Calendar/layout.constants"; - -export const StyledGridRow = styled(Flex)` - height: calc(100% / 11); - border-bottom: ${({ theme }) => - `${DIVIDER_GRID}px solid ${theme.color.gridLine.primary}`}; - width: 100%; - position: relative; - - & > span { - position: absolute; - bottom: -5px; - left: -${GRID_MARGIN_LEFT}px; - } -`; -export const StyledGridRows = styled.div` - position: absolute; - width: 100%; - height: 100%; - left: 35px; -`; diff --git a/packages/web/src/views/Calendar/components/Grid/MainGrid/MainGrid.tsx b/packages/web/src/views/Calendar/components/Grid/MainGrid/MainGrid.tsx index 656d46d0..be53f726 100644 --- a/packages/web/src/views/Calendar/components/Grid/MainGrid/MainGrid.tsx +++ b/packages/web/src/views/Calendar/components/Grid/MainGrid/MainGrid.tsx @@ -14,11 +14,15 @@ import { getDefaultEvent } from "@web/common/utils/event.util"; import { getX } from "@web/common/utils/grid.util"; import { draftSlice } from "@web/ducks/events/slices/draft.slice"; import { isEventFormOpen } from "@web/common/utils"; +import { getHourLabels } from "@web/common/utils/web.date.util"; -import { Columns } from "../Columns"; -import { GridRows } from "./GridRows"; -import { StyledMainGrid } from "./styled"; +import { + StyledGridRow, + StyledGridWithTimeLabels, + StyledMainGrid, +} from "./styled"; import { MainGridEvents } from "./MainGridEvents"; +import { MainGridColumns } from "../Columns/MainGridColumns"; interface Props { dateCalcs: DateCalcs; @@ -66,19 +70,22 @@ export const MainGrid: FC = ({ }; return ( - - + - + + {getHourLabels().map((dayTime, index) => ( + + ))} + diff --git a/packages/web/src/views/Calendar/components/Grid/MainGrid/styled.ts b/packages/web/src/views/Calendar/components/Grid/MainGrid/styled.ts index 71fcd56a..b0179790 100644 --- a/packages/web/src/views/Calendar/components/Grid/MainGrid/styled.ts +++ b/packages/web/src/views/Calendar/components/Grid/MainGrid/styled.ts @@ -4,7 +4,29 @@ import { GRID_PADDING_BOTTOM, SCROLLBAR_WIDTH, } from "@web/views/Calendar/layout.constants"; +import { Flex } from "@web/components/Flex"; +import { GRID_MARGIN_LEFT } from "@web/views/Calendar/layout.constants"; +import { DIVIDER_GRID } from "@web/views/Calendar/layout.constants"; +export const StyledGridRow = styled(Flex)` + height: calc(100% / 11); + border-bottom: ${({ theme }) => + `${DIVIDER_GRID}px solid ${theme.color.gridLine.primary}`}; + width: 100%; + position: relative; + + & > span { + position: absolute; + bottom: -5px; + left: -${GRID_MARGIN_LEFT}px; + } +`; +export const StyledGridWithTimeLabels = styled.div` + position: absolute; + width: 100%; + height: 100%; + left: 35px; +`; export const StyledMainGrid = styled.div` flex: 1; margin-bottom: ${GRID_PADDING_BOTTOM}px; diff --git a/packages/web/src/views/Calendar/components/Header/Header.tsx b/packages/web/src/views/Calendar/components/Header/Header.tsx index 120227f1..214fbbcc 100644 --- a/packages/web/src/views/Calendar/components/Header/Header.tsx +++ b/packages/web/src/views/Calendar/components/Header/Header.tsx @@ -8,16 +8,16 @@ import { TodayButton } from "@web/views/Calendar/components/TodayButton"; import { RootProps } from "@web/views/Calendar/calendarView.types"; import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; import { draftSlice } from "@web/ducks/events/slices/draft.slice"; -import { settingsSlice } from "@web/ducks/settings/slices/settings.slice"; -import { selectIsRightSidebarOpen } from "@web/ducks/settings/selectors/settings.selectors"; import { Util_Scroll } from "@web/views/Calendar/hooks/grid/useScroll"; import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper"; -import { StyledListIcon } from "@web/components/Icons/List"; import { isEventFormOpen } from "@web/common/utils"; +import { SidebarIcon } from "@web/components/Icons/Sidebar"; +import { selectIsSidebarOpen } from "@web/ducks/events/selectors/view.selectors"; +import { viewSlice } from "@web/ducks/events/slices/view.slice"; import { StyledHeaderRow, - StyledNavigationButtons, + StyledNavigationGroup, ArrowNavigationButton, StyledLeftGroup, StyledRightGroup, @@ -42,8 +42,8 @@ export const Header: FC = ({ const dispatch = useAppDispatch(); const { scrollToNow } = scrollUtil; - const isRightSidebarOpen = useAppSelector(selectIsRightSidebarOpen); const { startOfView } = weekProps.component; + const isSidebarOpen = useAppSelector(selectIsSidebarOpen); const onSectionClick = () => { if (isEventFormOpen()) { @@ -62,19 +62,28 @@ export const Header: FC = ({ return ( <> + dispatch(viewSlice.actions.toggleSidebar())} + shortcut="[" + > + + {startOfView.format("MMMM")} - {startOfView.format("YY")} + {startOfView.format("YYYY")} + - + + = ({ - - - - - { - dispatch(settingsSlice.actions.toggleRightSidebar()); - }} - shortcut="]" - > - - + diff --git a/packages/web/src/views/Calendar/components/Header/styled.ts b/packages/web/src/views/Calendar/components/Header/styled.ts index 254d2b86..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%; `; @@ -51,15 +50,13 @@ export const StyledNavigationArrows = styled(Flex)` padding-left: 20px; `; -export const StyledNavigationButtons = styled(Flex)` +export const StyledNavigationGroup = styled(Flex)` + align-items: baseline; justify-content: space-between; - margin-right: 50px; - padding-left: 20px; + 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 e186a099..00000000 --- a/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React, { FC } from "react"; -import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; -import { Preferences } from "@web/views/Calendar/hooks/usePreferences"; -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 { - StyledLeftSidebar, - getSidebarToggleIcon, - StyledSidebarOverflow, -} from "./styled"; -import { SomedaySection } from "./SomedaySection"; -import { SidebarIconRow } from "./SidebarIconRow"; - -interface Props { - dateCalcs: DateCalcs; - prefs: Preferences; - measurements: Measurements_Grid; - weekProps: WeekProps; -} - -export const LeftSidebar: FC> = ( - props: Props -) => { - const { prefs } = props; - const weekStart = props.weekProps.component.startOfView; - const weekEnd = props.weekProps.component.endOfView; - - const ToggleSidebarIcon = getSidebarToggleIcon(props.prefs.isLeftSidebarOpen); - - return ( - - - - prefs.toggleSidebar("left")} - shortcut="[" - > - - - - - - - - ); -}; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx deleted file mode 100644 index 461ac012..00000000 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import { MetaKeyIcon } from "@web/components/Icons/MetaKey"; - -import { StyledIconRow } from "../styled"; - -export const SidebarIconRow = () => { - return ( - - - - ); -}; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/index.ts b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/index.ts deleted file mode 100644 index 21bbb633..00000000 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { SomedaySection } from "./SomedaySection"; -export { SomedaySection }; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts deleted file mode 100644 index da96e14e..00000000 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts +++ /dev/null @@ -1,44 +0,0 @@ -import styled from "styled-components"; -import { Flex } from "@web/components/Flex"; -import { Text } from "@web/components/Text"; - -export interface Props { - flex?: number; -} - -export const Styled = styled.div` - color: ${({ theme }) => theme.color.panel.text}; - flex: ${({ flex }) => flex}; - margin-bottom: 5px; - width: 100%; -`; - -export const StyledAddEventButton = styled(Text)` - cursor: pointer; - margin-right: 30px; - &:hover { - filter: brightness(160%); - transition: filter 0.35s ease-out; - } -`; - -export const StyledSidebarHeader = styled(Flex)` - margin: 10px 5px 20px 20px; -`; - -export const StyledSidebarTopHeader = styled(StyledSidebarHeader)` - padding-top: 25px; -`; - -export const StyledHeaderTitle = styled(Text)` - margin: 0 10px; -`; - -export const StyledPaginationFlex = styled(Flex)` - width: 40px; -`; - -export const StyledEventsList = styled.div` - padding: 20px; - height: calc(100% - 67px); -`; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/index.ts b/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/index.ts deleted file mode 100644 index ff98f4ef..00000000 --- a/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ToggleableMonthWidget } from "./ToggleableMonthWidget"; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/index.ts b/packages/web/src/views/Calendar/components/LeftSidebar/index.ts deleted file mode 100644 index 75ccb75d..00000000 --- a/packages/web/src/views/Calendar/components/LeftSidebar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { LeftSidebar } from "./LeftSidebar"; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts b/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts deleted file mode 100644 index 77e36d08..00000000 --- a/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts +++ /dev/null @@ -1,79 +0,0 @@ -import styled from "styled-components"; -import { Flex } from "@web/components/Flex"; -import { - SIDEBAR_CLOSED_WIDTH, - 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"; - -export const getSidebarToggleIcon = (isToggled: boolean) => { - if (isToggled) { - return ArrowLineLeftIcon; - } else { - return ArrowLineRightIcon; - } -}; - -export const StyledSidebarList = styled.div` - height: 400px; - overflow: auto; - padding-bottom: 20px; - padding-left: 20px; - - ::-webkit-scrollbar { - width: 8px; - } - ::-webkit-scrollbar-thumb { - background-color: ${({ theme }) => theme.color.panel.scrollbar}; - border-radius: 3px; - - &:hover { - background-color: ${({ theme }) => theme.color.panel.scrollbarActive}; - } - } -`; - -export const StyledLeftSidebar = styled(Flex)` - background: ${({ theme }) => theme.color.panel.bg}; - flex-direction: ${FlexDirections.COLUMN}; - height: 100%; - overflow: hidden; - position: relative; - transition: 0.4s; - width: ${({ isToggled }) => - isToggled ? SIDEBAR_OPEN_WIDTH : SIDEBAR_CLOSED_WIDTH}px; -`; - -export const StyledIconRow = styled.div` - bottom: 0; - border-top: 1px solid ${({ theme }) => theme.color.border.primary}; - height: 40px; - padding: 9px 20px; - 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 StyledSomedaySection = styled(Flex)` - overflow: hidden; - padding-top: 26px; -`; - -export const StyledBottomSectionFlex = styled(Flex)` - padding: 34px 38px 25px 14px; -`; diff --git a/packages/web/src/views/Calendar/components/RightSidebar/RightSidebar.tsx b/packages/web/src/views/Calendar/components/RightSidebar/RightSidebar.tsx deleted file mode 100644 index ff144f40..00000000 --- a/packages/web/src/views/Calendar/components/RightSidebar/RightSidebar.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { FC } from "react"; -import { useAppSelector } from "@web/store/store.hooks"; -import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; -import { selectIsRightSidebarOpen } from "@web/ducks/settings/selectors/settings.selectors"; -import { Divider } from "@web/components/Divider"; - -import { StyledRightSidebar } from "./styled"; -import { ToggleableMonthWidget } from "../LeftSidebar/ToggleableMonthWidget"; - -interface Props { - weekProps: WeekProps; -} - -export const RightSidebar: FC = (props) => { - const isRightSidebarOpen = useAppSelector(selectIsRightSidebarOpen); - - if (!isRightSidebarOpen) return null; - - const handleCheckboxChange = (e) => { - alert("can't touch this"); - }; - - return ( - - -
- -

Calendars

- - - -

Thanks for trying Compass 💙

-
- - ); -}; diff --git a/packages/web/src/views/Calendar/components/RightSidebar/index.ts b/packages/web/src/views/Calendar/components/RightSidebar/index.ts deleted file mode 100644 index aa7a479a..00000000 --- a/packages/web/src/views/Calendar/components/RightSidebar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { RightSidebar } from "./RightSidebar"; diff --git a/packages/web/src/views/Calendar/components/RightSidebar/styled.ts b/packages/web/src/views/Calendar/components/RightSidebar/styled.ts deleted file mode 100644 index ad1b7424..00000000 --- a/packages/web/src/views/Calendar/components/RightSidebar/styled.ts +++ /dev/null @@ -1,18 +0,0 @@ -import styled from "styled-components"; -import { Flex } from "@web/components/Flex"; -import { ZIndex } from "@web/common/constants/web.constants"; - -export const StyledRightSidebar = styled(Flex)` - background: ${({ theme }) => theme.color.bg.primary}; - bottom: 0; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); - color: ${({ theme }) => theme.color.text.light}; - display: flex; - flex-direction: column; - height: calc(100% - 82px); - justify-content: space-between; - padding: 10px; - position: fixed; - right: 0; - z-index: ${ZIndex.MAX}; -`; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/ToggleableMonthWidget.tsx b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/MonthPicker/SidebarMonthPicker.tsx similarity index 70% rename from packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/ToggleableMonthWidget.tsx rename to packages/web/src/views/Calendar/components/Sidebar/MonthTab/MonthPicker/SidebarMonthPicker.tsx index 1a6f2a80..66cdffcc 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/ToggleableMonthWidget.tsx +++ b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/MonthPicker/SidebarMonthPicker.tsx @@ -1,22 +1,22 @@ -import React, { useEffect, useState } from "react"; +import React, { FC, useEffect, useState } from "react"; import dayjs from "dayjs"; import weekPlugin from "dayjs/plugin/weekOfYear"; import { DatePicker } from "@web/components/DatePicker"; import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; -import { theme } from "@web/common/styles/theme"; +import { ID_DATEPICKER_SIDEBAR } from "@web/common/constants/web.constants"; -import { Styled } from "./styled"; +import { MonthPickerContainer } from "./../styled"; dayjs.extend(weekPlugin); -export interface Props { +interface Props { isCurrentWeek: boolean; monthsShown?: number; setStartOfView: WeekProps["state"]["setStartOfView"]; weekStart: WeekProps["component"]["startOfView"]; } -export const ToggleableMonthWidget: React.FC = ({ +export const SidebarMonthPicker: FC = ({ isCurrentWeek, monthsShown, setStartOfView, @@ -30,11 +30,10 @@ export const ToggleableMonthWidget: React.FC = ({ }, [isCurrentWeek]); return ( - + = ({ }} selected={selectedDate} shouldCloseOnSelect={false} - view="widget" + view="sidebar" withTodayButton={true} /> - + ); }; diff --git a/packages/web/src/views/Calendar/components/Sidebar/MonthTab/MonthTab.tsx b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/MonthTab.tsx new file mode 100644 index 00000000..d3862228 --- /dev/null +++ b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/MonthTab.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; + +import { SidebarMonthPicker } from "./MonthPicker/SidebarMonthPicker"; +import { SubCalendarList } from "./SubCalendarList/SubCalendarList"; +import { SidebarContent } from "../SomedayTab/styled"; + +export interface Props { + isCurrentWeek: boolean; + monthsShown?: number; + setStartOfView: WeekProps["state"]["setStartOfView"]; + weekStart: WeekProps["component"]["startOfView"]; +} + +export const MonthTab: React.FC = ({ + isCurrentWeek, + monthsShown, + setStartOfView, + weekStart, +}) => { + return ( + + + + + ); +}; diff --git a/packages/web/src/views/Calendar/components/Sidebar/MonthTab/SubCalendarList/SubCalendarList.tsx b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/SubCalendarList/SubCalendarList.tsx new file mode 100644 index 00000000..b9060db2 --- /dev/null +++ b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/SubCalendarList/SubCalendarList.tsx @@ -0,0 +1,40 @@ +import React, { FC } from "react"; +import { theme } from "@web/common/styles/theme"; +import { Divider } from "@web/components/Divider"; +import { Text } from "@web/components/Text"; + +import { + CalendarListContainer, + CalendarLabel, + CalendarList, +} from "../../styled"; + +export const SubCalendarList: FC = () => { + return ( + <> + + + + Calendars + + + + + + primary + + + + + + ); +}; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/styled.ts b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/styled.ts similarity index 60% rename from packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/styled.ts rename to packages/web/src/views/Calendar/components/Sidebar/MonthTab/styled.ts index 82d5157c..e025e88d 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/styled.ts +++ b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/styled.ts @@ -1,10 +1,11 @@ import styled from "styled-components"; import { Text } from "@web/components/Text"; +import { ID_DATEPICKER_SIDEBAR } from "@web/common/constants/web.constants"; -export const Styled = styled.div` +export const MonthPickerContainer = styled.div` position: relative; - & .sidebarDatePicker { + & .${ID_DATEPICKER_SIDEBAR} { width: 100%; box-shadow: none; } @@ -13,5 +14,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/Sidebar/Sidebar.tsx b/packages/web/src/views/Calendar/components/Sidebar/Sidebar.tsx new file mode 100644 index 00000000..492d68a7 --- /dev/null +++ b/packages/web/src/views/Calendar/components/Sidebar/Sidebar.tsx @@ -0,0 +1,59 @@ +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 { useAppSelector } from "@web/store/store.hooks"; +import { selectSidebarTab } from "@web/ducks/events/selectors/view.selectors"; + +import { SidebarContainer, SidebarTabContainer } from "./styled"; +import { SomedayTab } from "./SomedayTab/SomedayTab"; +import { SidebarIconRow } from "./SidebarIconRow"; +import { MonthTab } from "./MonthTab/MonthTab"; +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" && ( + + )} + + + + ); +}; diff --git a/packages/web/src/views/Calendar/components/Sidebar/SidebarIconRow/SidebarIconRow.tsx b/packages/web/src/views/Calendar/components/Sidebar/SidebarIconRow/SidebarIconRow.tsx new file mode 100644 index 00000000..61fa4066 --- /dev/null +++ b/packages/web/src/views/Calendar/components/Sidebar/SidebarIconRow/SidebarIconRow.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import { CommandIcon } from "@web/components/Icons/Command"; +import { CalendarIcon } from "@web/components/Icons/Calendar"; +import { TodoIcon } from "@web/components/Icons/Todo"; +import { useAppDispatch, useAppSelector } from "@web/store/store.hooks"; +import { selectSidebarTab } from "@web/ducks/events/selectors/view.selectors"; +import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper"; +import { selectIsCmdPaletteOpen } from "@web/ducks/settings/selectors/settings.selectors"; +import { settingsSlice } from "@web/ducks/settings/slices/settings.slice"; +import { viewSlice } from "@web/ducks/events/slices/view.slice"; + +import { IconRow, LeftIconGroup } from "../styled"; + +export const SidebarIconRow = () => { + const dispatch = useAppDispatch(); + const tab = useAppSelector(selectSidebarTab); + + const isCmdPaletteOpen = useAppSelector(selectIsCmdPaletteOpen); + + const toggleCmdPalette = () => { + if (isCmdPaletteOpen) { + dispatch(settingsSlice.actions.closeCmdPalette()); + } else { + dispatch(settingsSlice.actions.openCmdPalette()); + } + }; + + return ( + + + + + + dispatch(viewSlice.actions.updateSidebarTab("tasks"))} + > + + + + dispatch(viewSlice.actions.updateSidebarTab("monthWidget")) + } + > + + + + + ); +}; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/index.ts b/packages/web/src/views/Calendar/components/Sidebar/SidebarIconRow/index.ts similarity index 100% rename from packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/index.ts rename to packages/web/src/views/Calendar/components/Sidebar/SidebarIconRow/index.ts diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/MonthSection/MonthSection.tsx similarity index 59% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/MonthSection/MonthSection.tsx index bbc701bf..058947a2 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx +++ b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/MonthSection/MonthSection.tsx @@ -1,21 +1,20 @@ 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"; import { WeekProps } from "@web/views/Calendar/hooks/useWeek"; 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 { SidebarHeader, SidebarSection } from "../styled"; import { SomedayEvents } from "../SomedayEvents"; interface Props { dateCalcs: DateCalcs; measurements: Measurements_Grid; - somedayProps: SomedayEventsProps; + somedayProps: SidebarProps; viewStart: WeekProps["component"]["startOfView"]; } @@ -28,36 +27,23 @@ export const MonthSection: FC = ({ const monthLabel = getMonthListLabel(viewStart); return ( - <> - + {monthLabel} -
e.stopPropagation()}> - - somedayProps.util.onSectionClick(Categories_Event.SOMEDAY_MONTH) - } - shortcut="M" - > -
- + -
- -
- + - + ); }; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/index.ts b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/MonthSection/index.ts similarity index 100% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/index.ts rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/MonthSection/index.ts diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvent.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvent.tsx similarity index 100% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvent.tsx rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvent.tsx diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventRectangle.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEventRectangle.tsx similarity index 100% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventRectangle.tsx rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEventRectangle.tsx diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvents.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvents.tsx similarity index 71% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvents.tsx rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvents.tsx index 71348ce5..1769ddb4 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvents.tsx +++ b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEvents.tsx @@ -8,18 +8,20 @@ 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 { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper"; 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 +29,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 +60,7 @@ export const SomedayEvents: FC = ({ /> )} - util.onSectionClick(category)}> +
= ({ util={util} />
- + {!isDraftingNew && ( + sidebarProps.util.onPlaceholderClick(category)} + shortcut={category === Categories_Event.SOMEDAY_MONTH ? "M" : "W"} + > + + + + + + )} + ); }; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventsColumn.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEventsColumn.tsx similarity index 93% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventsColumn.tsx rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/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/Sidebar/SomedayTab/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/Sidebar/SomedayTab/SomedayEvents/Wrappers/DraggableSomedayEvent.tsx similarity index 92% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/Wrappers/DraggableSomedayEvent.tsx rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/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/Sidebar/SomedayTab/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/Sidebar/SomedayTab/SomedayEvents/Wrappers/DraggableSomedayEvents.tsx similarity index 89% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/Wrappers/DraggableSomedayEvents.tsx rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/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/Sidebar/SomedayTab/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/index.ts b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/index.ts similarity index 100% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/index.ts rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/index.ts diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/styled.ts similarity index 95% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/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/Sidebar/SomedayTab/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/Sidebar/SomedayTab/SomedayTab.tsx similarity index 84% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayTab.tsx index 3160d583..d31908b6 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx +++ b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/SomedayTab.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 { 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 = ({ +export const SomedayTab: 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,13 +38,12 @@ export const SomedaySection: FC = ({ ); return ( - + {isProcessing && } - @@ -64,6 +61,6 @@ export const SomedaySection: FC = ({ somedayProps={sidebarProps} viewStart={viewStart} /> - + ); }; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/WeekSection.tsx similarity index 57% rename from packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx rename to packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/WeekSection.tsx index afe5c2aa..dc2b63c5 100644 --- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx +++ b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/WeekSection/WeekSection.tsx @@ -2,19 +2,18 @@ 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 { SidebarSection, SidebarHeader } from "../styled"; interface Props { dateCalcs: DateCalcs; measurements: Measurements_Grid; - somedayProps: SomedayEventsProps; + sidebarProps: SidebarProps; viewStart: WeekProps["component"]["startOfView"]; weekLabel: string; } @@ -22,42 +21,28 @@ interface Props { export const WeekSection: FC = ({ dateCalcs, measurements, - somedayProps, + sidebarProps, viewStart, weekLabel, }) => { return ( - <> - + {weekLabel} - -
e.stopPropagation()}> - - somedayProps.util.onSectionClick(Categories_Event.SOMEDAY_WEEK) - } - shortcut="W" - > -
- + -
- -
- + - + ); }; diff --git a/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/styled.ts b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/styled.ts new file mode 100644 index 00000000..9010bebd --- /dev/null +++ b/packages/web/src/views/Calendar/components/Sidebar/SomedayTab/styled.ts @@ -0,0 +1,45 @@ +import styled from "styled-components"; +import { Flex } from "@web/components/Flex"; +import { Text } from "@web/components/Text"; + +export const SidebarContainer = styled.div` + flex: 1; +`; + +export const SidebarContent = styled.div` + flex: 1; + display: flex; + flex-direction: column; + gap: 16px; + overflow-y: auto; +`; + +export const AddEventButton = styled(Text)` + cursor: pointer; + margin-right: 30px; + &:hover { + filter: brightness(160%); + transition: filter 0.35s ease-out; + } +`; + +export const AddEventPlaceholder = styled.div` + color: orange; +`; + +export const SidebarHeader = styled(Flex)` + margin: 10px 5px 20px 0px; +`; + +export const SidebarSection = styled(Flex)` + flex-direction: column; +`; + +export const HeaderTitle = styled(Text)` + margin: 0 10px; +`; + +export const EventList = styled.div` + padding: 20px; + height: calc(100% - 67px); +`; diff --git a/packages/web/src/views/Calendar/components/Sidebar/index.ts b/packages/web/src/views/Calendar/components/Sidebar/index.ts new file mode 100644 index 00000000..7ad39439 --- /dev/null +++ b/packages/web/src/views/Calendar/components/Sidebar/index.ts @@ -0,0 +1 @@ +export { Sidebar } from "./Sidebar"; diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/sidebar.types.ts b/packages/web/src/views/Calendar/components/Sidebar/sidebar.types.ts similarity index 85% rename from packages/web/src/views/Calendar/components/LeftSidebar/sidebar.types.ts rename to packages/web/src/views/Calendar/components/Sidebar/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/Sidebar/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/Sidebar/styled.ts b/packages/web/src/views/Calendar/components/Sidebar/styled.ts new file mode 100644 index 00000000..99ff6a45 --- /dev/null +++ b/packages/web/src/views/Calendar/components/Sidebar/styled.ts @@ -0,0 +1,92 @@ +import styled from "styled-components"; +import { Flex } from "@web/components/Flex"; +import { + PAGE_MARGIN_TOP, + SIDEBAR_OPEN_WIDTH, +} from "@web/views/Calendar/layout.constants"; +import { FlexDirections } from "@web/components/Flex/styled"; + +import { SectionProps } from "./sidebar.types"; + +const ICON_ROW_HEIGHT = 40; + +export const CalendarListContainer = styled.div``; + +export const CalendarLabel = styled.label` + align-items: center; + display: flex; +`; + +export const CalendarList = styled.ul` + padding-left: 10px; +`; + +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: 5px 0; + min-height: 32px; + opacity: 0.5; + transition: opacity 0.2s; + + &:hover { + opacity: 1; + } +`; + +export const IconRow = styled(Flex)` + align-items: center; + bottom: 0; + border-top: 1px solid ${({ theme }) => theme.color.border.primary}; + height: ${ICON_ROW_HEIGHT}px; + flex-direction: ${FlexDirections.ROW}; + padding: 0 25px; + position: absolute; + width: 100%; +`; + +export const LeftIconGroup = styled.div` + gap: 20px; + display: 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; + min-width: ${SIDEBAR_OPEN_WIDTH}px; +`; + +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 SidebarList = styled.div` + overflow: auto; + width: 100%; +`; 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..e5320cc4 100644 --- a/packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebarUtil.ts +++ b/packages/web/src/views/Calendar/hooks/draft/sidebar/useSidebarUtil.ts @@ -37,6 +37,7 @@ import { } from "@web/common/utils/web.date.util"; import { selectDatesInView } from "@web/ducks/events/selectors/view.selectors"; import { isEventFormOpen, isSomedayEventFormOpen } from "@web/common/utils"; +import { selectIsDrafting } from "@web/ducks/events/selectors/draft.selectors"; import { DateCalcs } from "../../grid/useDateCalcs"; import { State_Sidebar } from "./useSidebarState"; @@ -49,13 +50,14 @@ export const useSidebarUtil = ( ) => { const dispatch = useAppDispatch(); + const isDraftingOnGrid = useAppSelector(selectIsDrafting); + const isAtWeeklyLimit = useAppSelector(selectIsAtWeeklyLimit); + const isAtMonthlyLimit = useAppSelector(selectIsAtMonthlyLimit); const { start, end } = useAppSelector(selectDatesInView); + const viewStart = dayjs(start); const viewEnd = dayjs(end); - const isAtWeeklyLimit = useAppSelector(selectIsAtWeeklyLimit); - const isAtMonthlyLimit = useAppSelector(selectIsAtMonthlyLimit); - const resetLocalDraftStateIfNeeded = () => { if (!state.isDrafting) return; @@ -194,6 +196,17 @@ export const useSidebarUtil = ( ); }; + const discardIfDrafting = () => { + if (state.isDrafting) { + dispatch(draftSlice.actions.discard()); + close(); + return; + } + if (isDraftingOnGrid) { + dispatch(draftSlice.actions.discard()); + } + }; + const onDragEnd = (result: DropResult) => { const { destination, draggableId, source } = result; @@ -310,7 +323,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 +400,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/hooks/grid/useDateCalcs.ts b/packages/web/src/views/Calendar/hooks/grid/useDateCalcs.ts index 151b18b4..10479ebc 100644 --- a/packages/web/src/views/Calendar/hooks/grid/useDateCalcs.ts +++ b/packages/web/src/views/Calendar/hooks/grid/useDateCalcs.ts @@ -20,12 +20,6 @@ export const useDateCalcs = ( measurements: Measurements_Grid, scrollRef: Ref_Grid ) => { - const _measurements = useRef(measurements); - - useLayoutEffect(() => { - _measurements.current = measurements; - }, [measurements]); - const getDateByX = (x: number, firstDayInView: Dayjs) => { const gridX = x - GRID_X_START; const dayIndex = getDayNumberByX(gridX); @@ -36,8 +30,7 @@ export const useDateCalcs = ( const getDateByXY = (x: number, y: number, firstDayInView: Dayjs) => { const isOverAllDayRow = - y > _measurements.current.allDayRow.top && - y < _measurements.current.mainGrid.top; + y > measurements.allDayRow.top && y < measurements.mainGrid.top; let date = getDateByX(x, firstDayInView); @@ -65,7 +58,7 @@ export const useDateCalcs = ( const getDayNumberByX = (x: number) => { let dayNumber = 0; - _measurements.current.colWidths.reduce((prev, width, index) => { + measurements.colWidths.reduce((prev, width, index) => { if (x >= prev && x < prev + width) { dayNumber = index; } @@ -78,9 +71,9 @@ export const useDateCalcs = ( const getMinuteByY = (y: number) => { const scrollTop = scrollRef.current.scrollTop; - const gridY = y - _measurements.current.mainGrid.top + scrollTop; + const gridY = y - measurements.mainGrid.top + scrollTop; - const decimalMinute = (gridY / _measurements.current.hourHeight) * 60; + const decimalMinute = (gridY / measurements.hourHeight) * 60; const roundedMinute = roundToNearest(decimalMinute, GRID_TIME_STEP); const finalMinute = Math.max(0, roundedMinute); // prevents negative number when clicking all-day row return finalMinute; @@ -90,7 +83,7 @@ export const useDateCalcs = ( const day = dayjs(date); const startTime = ACCEPTED_TIMES.indexOf(day.format(HOURS_AM_FORMAT)) / 4; - return _measurements.current.hourHeight * startTime; + return measurements.hourHeight * startTime; }; return { diff --git a/packages/web/src/views/Calendar/hooks/grid/useGridLayout.ts b/packages/web/src/views/Calendar/hooks/grid/useGridLayout.ts index d39ad6d0..ab2e5d76 100644 --- a/packages/web/src/views/Calendar/hooks/grid/useGridLayout.ts +++ b/packages/web/src/views/Calendar/hooks/grid/useGridLayout.ts @@ -3,13 +3,12 @@ import { ID_ALLDAY_COLUMNS, ID_GRID_ALLDAY_ROW, ID_GRID_MAIN, - ID_SIDEBAR, } from "@web/common/constants/web.constants"; import { getElemById } from "@web/common/utils/grid.util"; export type MeasureableElement = "mainGrid" | "allDayRow"; -export const useGridLayout = (week: number) => { +export const useGridLayout = (isSidebarOpen: boolean, week: number) => { const [allDayMeasurements, setAllDayMeasurements] = useState( null ); @@ -19,8 +18,8 @@ export const useGridLayout = (week: number) => { useEffect(() => { _measureMainGrid(); _measureAllDayRow(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [week]); + _measureColWidths(); + }, [isSidebarOpen, week]); useEffect(() => { const update = () => { @@ -31,18 +30,6 @@ export const useGridLayout = (week: number) => { window.addEventListener("resize", update); return () => window.removeEventListener("resize", update); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [week]); //remove ?? ++ - - useEffect(() => { - // measure upon toggle - const sidebar = getElemById(ID_SIDEBAR); - sidebar.ontransitionend = (e) => { - // exclude hover and other sidebar transitions - if (e.propertyName === "width" && e.target.id === ID_SIDEBAR) { - _measureColWidths(); - } - }; }, []); const allDayRef = useCallback((node: HTMLDivElement) => { @@ -60,7 +47,6 @@ export const useGridLayout = (week: number) => { _measureMainGrid(node); } }, - // eslint-disable-next-line react-hooks/exhaustive-deps [mainMeasurements] ); @@ -86,6 +72,7 @@ export const useGridLayout = (week: number) => { const cols = getElemById(ID_ALLDAY_COLUMNS); const colWidth = cols.clientWidth / daysInView; const colWidths = Array(daysInView).fill(colWidth); + setColWidths(colWidths); }; diff --git a/packages/web/src/views/Calendar/hooks/shortcuts/useShortcuts.ts b/packages/web/src/views/Calendar/hooks/shortcuts/useShortcuts.ts index 4065a5f2..b8d60947 100644 --- a/packages/web/src/views/Calendar/hooks/shortcuts/useShortcuts.ts +++ b/packages/web/src/views/Calendar/hooks/shortcuts/useShortcuts.ts @@ -1,5 +1,6 @@ import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; +import { useHotkeys } from "react-hotkeys-hook"; import { Key } from "ts-keycode-enum"; import { Dayjs } from "dayjs"; import { Categories_Event } from "@core/types/event.types"; @@ -10,14 +11,15 @@ import { import { useAppDispatch, useAppSelector } from "@web/store/store.hooks"; import { isEventFormOpen } from "@web/common/utils"; import { draftSlice } from "@web/ducks/events/slices/draft.slice"; +import { viewSlice } from "@web/ducks/events/slices/view.slice"; import { ROOT_ROUTES } from "@web/common/constants/routes"; import { selectIsAtMonthlyLimit, selectIsAtWeeklyLimit, } from "@web/ducks/events/selectors/someday.selectors"; -import { settingsSlice } from "@web/ducks/settings/slices/settings.slice"; import { getDefaultEvent } from "@web/common/utils/event.util"; import { YEAR_MONTH_FORMAT } from "@core/constants/date.constants"; +import { selectSidebarTab } from "@web/ducks/events/selectors/view.selectors"; import { DateCalcs } from "../grid/useDateCalcs"; import { Util_Scroll } from "../grid/useScroll"; @@ -32,7 +34,6 @@ export interface ShortcutProps { endOfView: Dayjs; util: WeekProps["util"]; scrollUtil: Util_Scroll; - toggleSidebar: (target: "left" | "right") => void; } export const useShortcuts = ({ @@ -43,13 +44,20 @@ export const useShortcuts = ({ endOfView, util, scrollUtil, - toggleSidebar, }: ShortcutProps) => { const dispatch = useAppDispatch(); const navigate = useNavigate(); const isAtMonthlyLimit = useAppSelector(selectIsAtMonthlyLimit); const isAtWeeklyLimit = useAppSelector(selectIsAtWeeklyLimit); + const tab = useAppSelector(selectSidebarTab); + + useHotkeys("shift+1", () => { + dispatch(viewSlice.actions.updateSidebarTab("tasks")); + }); + useHotkeys("shift+2", () => { + dispatch(viewSlice.actions.updateSidebarTab("monthWidget")); + }); useEffect(() => { const _createSomedayDraft = (type: "week" | "month") => { @@ -62,6 +70,10 @@ export const useShortcuts = ({ return; } + if (tab !== "tasks") { + dispatch(viewSlice.actions.updateSidebarTab("tasks")); + } + const eventType = type === "week" ? Categories_Event.SOMEDAY_WEEK @@ -111,9 +123,7 @@ export const useShortcuts = ({ if (e.metaKey) return; const handlersByKey = { - [Key.OpenBracket]: () => toggleSidebar("left"), - [Key.ClosedBracket]: () => - dispatch(settingsSlice.actions.toggleRightSidebar()), + [Key.OpenBracket]: () => dispatch(viewSlice.actions.toggleSidebar()), [Key.C]: () => _createTimedDraft(), [Key.T]: () => { scrollUtil.scrollToNow(); @@ -157,7 +167,6 @@ export const useShortcuts = ({ startOfView, endOfView, scrollUtil, - toggleSidebar, util, ]); }; diff --git a/packages/web/src/views/Calendar/layout.constants.ts b/packages/web/src/views/Calendar/layout.constants.ts index d9b141b5..b500ee26 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; @@ -25,13 +25,12 @@ export const WEEK_DAYS_MARGIN_Y = 22; export const GRID_PADDING_BOTTOM = 20; 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..c360a208 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; + margin: ${PAGE_MARGIN_TOP}px ${PAGE_MARGIN_X}px 0 ${PAGE_MARGIN_X}px; `; diff --git a/packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx b/packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx index 851c0352..5ada3c14 100644 --- a/packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx +++ b/packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx @@ -17,18 +17,20 @@ import { shouldAdjustComplimentTime, } from "@web/common/utils/web.date.util"; import { Option_Time } from "@web/common/types/util.types"; +import { darken } from "@core/util/color.utils"; import { StyledDateFlex, StyledDateTimeFlex, StyledTimeFlex } from "./styled"; dayjs.extend(customParseFormat); export interface Props { + bgColor: string; category: Categories_Event; event: Schema_Event; endTime?: SelectOption; + inputColor?: string; isEndDatePickerOpen: boolean; isStartDatePickerOpen: boolean; - bgColor?: string; selectedEndDate?: Date; selectedStartDate?: Date; setEndTime: (value: SelectOption) => void; @@ -42,11 +44,12 @@ export interface Props { } export const DateTimeSection: FC = ({ - event, + bgColor, category, + event, + inputColor, isEndDatePickerOpen, isStartDatePickerOpen, - bgColor, selectedEndDate, selectedStartDate, setIsStartDatePickerOpen, @@ -282,8 +285,9 @@ export const DateTimeSection: FC = ({ onMouseDown={stopPropagation} > { @@ -307,8 +311,9 @@ export const DateTimeSection: FC = ({ onMouseDown={stopPropagation} > setIsEndDatePickerOpen(true)} diff --git a/packages/web/src/views/Forms/EventForm/EventForm.tsx b/packages/web/src/views/Forms/EventForm/EventForm.tsx index 2456c479..0a738be0 100644 --- a/packages/web/src/views/Forms/EventForm/EventForm.tsx +++ b/packages/web/src/views/Forms/EventForm/EventForm.tsx @@ -17,7 +17,7 @@ import { getTimeOptionByValue, mapToBackend, } from "@web/common/utils/web.date.util"; -import { StyledMigrateArrowInForm } from "@web/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled"; +import { StyledMigrateArrowInForm } from "@web/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/styled"; import { ID_EVENT_FORM } from "@web/common/constants/web.constants"; import { colorByPriority, @@ -289,10 +289,11 @@ export const EventForm: React.FC = ({ />