Skip to content

Commit

Permalink
style(): update dialog and drawer breakpoint (#1121)
Browse files Browse the repository at this point in the history 
* style(): update dialog and drawer breakpoint

* remove log entries
  • Loading branch information
@sodenn
sodenn authored Sep 1, 2024
1 parent eb7fbc8 commit e41986e
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 51 deletions.
15 changes: 5 additions & 10 deletions src/components/FloatingTextFormatToolbarPlugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,12 229,12 @@ function TextFormatFloatingToolbar({
return (
<div
ref={popupCharStylesEditorRef}
className="absolute left-0 top-0 z-[9999] flex gap-1 rounded-lg border bg-background p-1 align-middle opacity-0 transition-opacity will-change-transform"
className="absolute left-0 top-0 z-[100] flex gap-1 rounded-lg border bg-popover p-1 align-middle text-popover-foreground opacity-0 shadow-md transition-opacity will-change-transform"
>
{editor.isEditable() && (
<>
<Button
onMouseDown={(e) => e.preventDefault()}
onPointerDown={(e) => e.preventDefault()}
onClick={() => {
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
}}
Expand All @@ -245,7 245,7 @@ function TextFormatFloatingToolbar({
<BoldIcon className="h-4 w-4" />
</Button>
<Button
onMouseDown={(e) => e.preventDefault()}
onPointerDown={(e) => e.preventDefault()}
onClick={() => {
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
}}
Expand All @@ -256,7 256,7 @@ function TextFormatFloatingToolbar({
<ItalicIcon className="h-4 w-4" />
</Button>
<Button
onMouseDown={(e) => e.preventDefault()}
onPointerDown={(e) => e.preventDefault()}
onClick={() => {
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
}}
Expand All @@ -267,7 267,7 @@ function TextFormatFloatingToolbar({
<StrikethroughIcon className="h-4 w-4" />
</Button>
<Button
onMouseDown={(e) => e.preventDefault()}
onPointerDown={(e) => e.preventDefault()}
onClick={() => {
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
}}
Expand Down Expand Up @@ -309,7 309,6 @@ function useFloatingTextFormatToolbar(
rootElement === null ||
!rootElement.contains(nativeSelection.anchorNode))
) {
console.log("setIsText 1");
setIsText(false);
return;
}
Expand All @@ -330,16 329,13 @@ function useFloatingTextFormatToolbar(
!$isCodeHighlightNode(selection.anchor.getNode()) &&
selection.getTextContent() !== ""
) {
console.log("setIsText 2");
setIsText($isTextNode(node) || $isParagraphNode(node));
} else {
console.log("setIsText 3");
setIsText(false);
}

const rawTextContent = selection.getTextContent().replace(/\n/g, "");
if (!selection.isCollapsed() && rawTextContent === "") {
console.log("setIsText 4");
setIsText(false);
return;
}
Expand All @@ -360,7 356,6 @@ function useFloatingTextFormatToolbar(
}),
editor.registerRootListener(() => {
if (editor.getRootElement() === null) {
console.log("setIsText 5");
setIsText(false);
}
}),
Expand Down
18 changes: 9 additions & 9 deletions src/components/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 27,16 @@ interface LayoutSidebarProps extends HTMLAttributes<HTMLDivElement> {

function usePersistentSidebar() {
const { isBreakpointActive } = useBreakpoint();
return isBreakpointActive("xl");
return isBreakpointActive("lg");
}

export function LayoutHeader({ open, children }: HeaderContainerProps) {
return (
<div
className={clsx(
"flex-shrink-0 flex-grow-0 basis-auto xl:transition-all",
open && `xl:ml-[320px] xl:duration-225 xl:ease-out`,
!open && "xl:duration-195 xl:ease-in",
"flex-shrink-0 flex-grow-0 basis-auto lg:transition-all",
open && `lg:ml-[320px] lg:duration-200 lg:ease-out`,
!open && "lg:duration-195 lg:ease-in",
)}
>
{children}
Expand Down Expand Up @@ -88,13 88,13 @@ export function LayoutSidebar({
aria-hidden={open ? "false" : "true"}
data-hotkeys-keep-enabled={persistent ? "true" : "m"}
className={cn(
"fixed bottom-0 left-0 top-0 hidden w-[320px] border-r bg-background transition-all duration-225 ease-out xl:block",
"fixed bottom-0 left-0 top-0 hidden w-[320px] border-r bg-background transition-all duration-200 ease-out lg:block",
open && "translate-x-0",
!open && "-translate-x-320",
className,
)}
>
<div className={cn("h-full", hidden && "hidden xl:hidden")}>
<div className={cn("h-full", hidden && "hidden lg:hidden")}>
{children}
</div>
</div>
Expand Down Expand Up @@ -134,9 134,9 @@ export function LayoutContent(props: ScrollAreaProps) {
data-testid="page"
id="scroll-container"
className={clsx(
"flex-auto overflow-y-auto xl:flex-grow",
sideSheetOpen && `xl:ml-[320px] xl:duration-225 xl:ease-out`,
!sideSheetOpen && "xl:ml-0 xl:duration-195 xl:ease-in",
"flex-auto overflow-y-auto lg:flex-grow",
sideSheetOpen && `lg:ml-[320px] lg:duration-200 lg:ease-out`,
!sideSheetOpen && "lg:ml-0 lg:duration-195 lg:ease-in",
)}
{...props}
/>
Expand Down
19 changes: 5 additions & 14 deletions src/components/SideSheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 12,13 @@ import { useTranslation } from "react-i18next";
export function SideSheet() {
const { t } = useTranslation();
const { open: sideSheetOpen, closeSideSheet } = useSideSheetStore();
const { taskLists, activeTaskList, ...rest } = useTask();
const { taskLists, activeTaskList } = useTask();

const { priorities, projects, contexts, tags } = activeTaskList
? activeTaskList
: rest;
const taskCount = activeTaskList
? activeTaskList.items.length
: taskLists.flatMap((list) => list.items).length;

const completedTasksCount = activeTaskList
? activeTaskList.items.filter((task) => task.completed).length
: taskLists.flatMap((list) => list.items).filter((t) => t.completed).length;

const hideFilter =
completedTasksCount === 0 &&
Object.keys(priorities).length === 0 &&
Object.keys(projects).length === 0 &&
Object.keys(contexts).length === 0 &&
Object.keys(tags).length === 0;
const hideFilter = taskCount === 0;

const [tab, setTab] = useState<string>(hideFilter ? "settings" : "filter");

Expand Down
55 changes: 37 additions & 18 deletions src/components/ui/responsive-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 32,11 @@ interface ResponsiveDialogProps {
disablePreventScroll?: boolean;
}

function useDialog() {
const { isBreakpointActive } = useBreakpoint();
return isBreakpointActive("md");
}

export function ResponsiveDialog({
children,
onOpen,
Expand All @@ -41,7 46,7 @@ export function ResponsiveDialog({
...props
}: PropsWithChildren<ResponsiveDialogProps>) {
const [open, setOpen] = useState(!!props.open);
const { isBreakpointActive } = useBreakpoint();
const dialog = useDialog();

const handleOpen = useCallback(() => {
setOpen(true);
Expand Down Expand Up @@ -73,7 78,7 @@ export function ResponsiveDialog({
}
}, [open, handleOpen, handleClose, props.open]);

if (isBreakpointActive("lg")) {
if (dialog) {
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
{children}
Expand All @@ -94,18 99,22 @@ export function ResponsiveDialog({
}

export function ResponsiveDialogTrigger({ children }: PropsWithChildren) {
const { isBreakpointActive } = useBreakpoint();
if (isBreakpointActive("lg")) {
const dialog = useDialog();

if (dialog) {
return <DialogTrigger asChild>{children}</DialogTrigger>;
}

return <DrawerTrigger asChild>{children}</DrawerTrigger>;
}

export function ResponsiveDialogHeader({ children }: PropsWithChildren) {
const { isBreakpointActive } = useBreakpoint();
if (isBreakpointActive("lg")) {
const dialog = useDialog();

if (dialog) {
return <DialogHeader className="px-6">{children}</DialogHeader>;
}

return (
<DrawerHeader className="text-left">
<SafeArea left right>
Expand All @@ -116,10 125,12 @@ export function ResponsiveDialogHeader({ children }: PropsWithChildren) {
}

export function ResponsiveDialogTitle({ children }: PropsWithChildren) {
const { isBreakpointActive } = useBreakpoint();
if (isBreakpointActive("lg")) {
const dialog = useDialog();

if (dialog) {
return <DialogTitle>{children}</DialogTitle>;
}

return <DrawerTitle>{children}</DrawerTitle>;
}

Expand All @@ -132,10 143,12 @@ export function ResponsiveDialogHiddenTitle({ children }: PropsWithChildren) {
}

export function ResponsiveDialogDescription({ children }: PropsWithChildren) {
const { isBreakpointActive } = useBreakpoint();
if (isBreakpointActive("lg")) {
const dialog = useDialog();

if (dialog) {
return <DialogDescription>{children}</DialogDescription>;
}

return <DrawerDescription>{children}</DrawerDescription>;
}

Expand All @@ -154,9 167,9 @@ export function ResponsiveDialogContent({
onEscapeKeyDown,
...props
}: PropsWithChildren<Pick<DismissableLayerProps, "onEscapeKeyDown">>) {
const { isBreakpointActive } = useBreakpoint();
const dialog = useDialog();

if (isBreakpointActive("lg")) {
if (dialog) {
return (
<DialogContent
onEscapeKeyDown={onEscapeKeyDown}
Expand All @@ -179,10 192,12 @@ export function ResponsiveDialogContent({
}

export function ResponsiveDialogBody({ children }: PropsWithChildren) {
const { isBreakpointActive } = useBreakpoint();
if (isBreakpointActive("lg")) {
const dialog = useDialog();

if (dialog) {
return <div className="flex-1 overflow-y-auto px-6">{children}</div>;
}

return (
<SafeArea left right>
<div className="px-4">{children}</div>
Expand All @@ -191,10 206,12 @@ export function ResponsiveDialogBody({ children }: PropsWithChildren) {
}

export function ResponsiveDialogFooter({ children }: PropsWithChildren) {
const { isBreakpointActive } = useBreakpoint();
if (isBreakpointActive("lg")) {
const dialog = useDialog();

if (dialog) {
return <DialogFooter className="px-6">{children}</DialogFooter>;
}

return (
<SafeArea left right bottom>
<DrawerFooter className="flex-row justify-end">{children}</DrawerFooter>
Expand All @@ -203,9 220,11 @@ export function ResponsiveDialogFooter({ children }: PropsWithChildren) {
}

export function ResponsiveDialogClose({ children }: PropsWithChildren) {
const { isBreakpointActive } = useBreakpoint();
if (isBreakpointActive("lg")) {
const dialog = useDialog();

if (dialog) {
return <DialogClose asChild>{children}</DialogClose>;
}

return <DrawerClose asChild>{children}</DrawerClose>;
}

0 comments on commit e41986e

Please sign in to comment.