Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: hide tooltip for phone #21

Merged
merged 4 commits into from
Feb 25, 2024
Merged

feat: hide tooltip for phone #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ab92a51
feat: hide tooltip for phone
Pettor Feb 25, 2024
fc0993d
chore: temporary remove husky scripts
Pettor Feb 25, 2024
d82204e
chore: add husky scripts back
Pettor Feb 25, 2024
7e562ee
feat: use hook for dropzone component
Pettor Feb 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file modified .husky/commit-msg
100644 → 100755
View file
Open in desktop
Empty file.
Empty file modified .husky/pre-push
100644 → 100755
View file
Open in desktop
Empty file.
17 changes: 2 additions & 15 deletions src/components/library/dropzone/Dropzone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,14 @@
import type { ReactElement } from "react";
import { DocumentArrowUpIcon } from "@heroicons/react/24/solid";
import clsx from "clsx";
import { useDropzone } from "react-dropzone";
import { useDropzone } from "./UseDropzone";

export interface DropzoneProps {
onDrop: (acceptedFiles: File[]) => void;
}

export function Dropzone({ onDrop }: DropzoneProps): ReactElement {
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
onDrop,
multiple: false,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
},
});

function getBackgroundClass(): string {
if (isDragAccept) return "bg-success dark:text-black";
if (isDragReject) return "bg-error dark:text-black";
if (isDragActive) return "bg-base-300";
return "bg-base-200";
}
const { getRootProps, getInputProps, getBackgroundClass } = useDropzone(onDrop);

return (
<div className="m-2 flex w-full max-w-screen-sm items-center justify-center md:min-w-96">
Expand Down
34 changes: 34 additions & 0 deletions src/components/library/dropzone/UseDropzone.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { useDropzone as useReactDropzone } from "react-dropzone";

export function useDropzone(onDrop: (acceptedFiles: File[]) => void): {
getRootProps: (props?: Record<string, unknown>) => Record<string, unknown>;
getInputProps: (props?: Record<string, unknown>) => Record<string, unknown>;
isDragActive: boolean;
isDragAccept: boolean;
isDragReject: boolean;
getBackgroundClass: () => string;
} {
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useReactDropzone({
onDrop,
multiple: false,
accept: {
"image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
},
});

function getBackgroundClass(): string {
if (isDragAccept) return "bg-success dark:text-black";
if (isDragReject) return "bg-error dark:text-black";
if (isDragActive) return "bg-base-300";
return "bg-base-200";
}

return {
getRootProps,
getInputProps,
isDragActive,
isDragAccept,
isDragReject,
getBackgroundClass,
};
}
12 changes: 6 additions & 6 deletions src/components/library/editor/toolbar/ToolbarTools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,37 +18,37 @@ export function ToolbarTools(): ReactElement {
return (
<div className="absolute max-md:bottom-0 max-md:left-0 md:top-0 z-10 mr-2 flex w-full justify-center p-4 md:mr-0">
<div className="glass gap-1 md:gap-2 navbar h-10 min-h-0 w-auto rounded-box border border-neutral bg-base-300 bg-opacity-80 shadow-xl md:h-12 dark:bg-opacity-80 dark:bg-none">
<div className="tooltip tooltip-bottom" data-tip={lock ? undefined : "Lock image to center"}>
<div className="md:tooltip md:tooltip-bottom" data-tip={lock ? undefined : "Lock image to center"}>
<button className={clsx("btn btn-square btn-ghost swap btn-sm", lock && "btn-active")} onClick={swapLock}>
<input type="checkbox" checked={lock} onChange={swapLock} />
<LockClosedIcon className="swap-on h-6 w-6" />
<LockOpenIcon className="swap-off h-6 w-6" />
</button>
</div>
<div className="divider divider-horizontal w-0 mx-0" />
<div className="tooltip tooltip-bottom mt-1" data-tip={showFitScreen ? "Actual size" : "Fit to window"}>
<div className="md:tooltip md:tooltip-bottom mt-1" data-tip={showFitScreen ? "Actual size" : "Fit to window"}>
<button className="btn btn-square btn-ghost swap btn-sm" onClick={adjustZoom}>
{showFitScreen ? <FullscreenIcon /> : <FitViewIcon />}
</button>
</div>
<div className="divider divider-horizontal w-0 mx-0" />
<div className="flex gap-1">
<div className="tooltip tooltip-bottom mt-1" data-tip="Rotate 90° left">
<div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Rotate 90° left">
<button className="btn btn-square btn-ghost swap btn-sm" onClick={() => rotate("rotate-left")}>
<RotateCcwIcon />
</button>
</div>
<div className="tooltip tooltip-bottom mt-1" data-tip="Rotate 90° right">
<div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Rotate 90° right">
<button className="btn btn-square btn-ghost swap btn-sm" onClick={() => rotate("rotate-right")}>
<RotateCwIcon />
</button>
</div>
<div className="tooltip tooltip-bottom mt-1" data-tip="Flip vertical">
<div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Flip vertical">
<button className="btn btn-square btn-ghost swap btn-sm" onClick={() => flip("flip-vertical")}>
<FlipVerticalIcon />
</button>
</div>
<div className="tooltip tooltip-bottom mt-1" data-tip="Flip horizontal">
<div className="md:tooltip md:tooltip-bottom mt-1" data-tip="Flip horizontal">
<button className="btn btn-square btn-ghost swap btn-sm" onClick={() => flip("flip-horizontal")}>
<FlipHorizontalIcon />
</button>
Expand Down
12 changes: 6 additions & 6 deletions src/components/library/editor/toolbar/ToolbarZoom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ export function ToolbarZoom(): ReactElement {

return (
<div className="absolute max-md:top-0 max-md:right-0 md:bottom-0 md:left-0 z-10 flex justify-center p-4">
<div className="glass navbar h-10 min-h-0 w-auto gap-4 rounded-box border border-neutral-content bg-base-100 bg-opacity-60 shadow-xl md:h-12 dark:bg-neutral dark:bg-opacity-80 dark:bg-none">
<button className="btn btn-square btn-ghost btn-sm" onClick={zoomIn}>
<div className="glass navbar h-10 min-h-0 w-auto gap-1 md:gap-4 rounded-box border border-neutral-content bg-base-100 bg-opacity-60 shadow-xl md:h-12 dark:bg-neutral dark:bg-opacity-80 dark:bg-none">
<button className="btn btn-square btn-ghost btn-xs md:btn-sm" onClick={zoomIn}>
<PlusIcon />
</button>
<div className="tooltip tooltip-top" data-tip="Reset zoom">
<button className="w-10" onClick={resetZoom}>
<h6>{zoom}%</h6>
<div className="md:tooltip md:tooltip-top" data-tip="Reset zoom">
<button className="w-8 md:w-10" onClick={resetZoom}>
<span className="text-sm">{zoom}%</span>
</button>
</div>
<button className="btn btn-square btn-ghost btn-sm" onClick={zoomOut}>
<button className="btn btn-square btn-ghost btn-xs md:btn-sm" onClick={zoomOut}>
<MinusIcon />
</button>
</div>
Expand Down
Loading