mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

added floating action button props to <Button> and using it in event types on mobile

Browse source
This commit is contained in:
Peer Richelsen 2021-08-23 22:42:24 +02:00
parent 21b3134e1f
commit 5fe4a37908
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/ui/Button.tsx
View file

@ -9,7 +9,7 @@ type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
export type ButtonProps = { export type ButtonProps = {
color?: "primary" | "secondary" | "minimal"; color?: "primary" | "secondary" | "minimal";
size?: "base" | "sm" | "lg"; size?: "base" | "sm" | "lg" | "fab";
loading?: boolean; loading?: boolean;
disabled?: boolean; disabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void; onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
@ -41,11 +41,15 @@ export const Button = function Button(props: ButtonProps) {
disabled, disabled,
className: classNames( className: classNames(
// base styles independent what type of button it is // base styles independent what type of button it is
"inline-flex items-center relative", "inline-flex items-center",
// different styles depending on size // different styles depending on size
size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-sm", size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-sm",
size === "base" && "px-3 py-2 text-sm font-medium rounded-sm", size === "base" && "px-3 py-2 text-sm font-medium rounded-sm",
size === "lg" && "px-4 py-2 text-base font-medium rounded-sm", size === "lg" && "px-4 py-2 text-base font-medium rounded-sm",
// turn button into a floating action button (fab)
size === "fab" ? "fixed" : "relative",
size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
// different styles depending on color // different styles depending on color
color === "primary" && color === "primary" &&
(disabled (disabled

10
pages/event-types/index.tsx
View file

@ -83,9 +83,17 @@ export default function Availability({ user, types }) {
router.push({ pathname: router.pathname, query: newQuery }); router.push({ pathname: router.pathname, query: newQuery });
} }
}}> }}>
<Button className="mt-2" StartIcon={PlusIcon} href={{ query: { ...router.query, new: "1" } }}> <Button
className="mt-2 hidden sm:block"
StartIcon={PlusIcon}
href={{ query: { ...router.query, new: "1" } }}>
New event type New event type
</Button> </Button>
<Button size="fab" className="block sm:hidden" href={{ query: { ...router.query, new: "1" } }}>
<PlusIcon className="w-8 h-8 text-white" />
</Button>
<DialogContent> <DialogContent>
<div className="mb-8"> <div className="mb-8">
<h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title"> <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">