maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into minimum-booking-notice-will-allow-hours-and-days

This commit is contained in:
Om Ray 2022-10-26 12:24:54 -04:00 committed by GitHub
parent 9b3af6dc10 142be70b89
commit ffd49ef3b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web/components/v2/eventtype/AvailabilityTab.tsx
View File

@ -129,37 +129,41 @@ export const AvailabilityTab = () => {
/> />
</div> </div>
<div className="space-y-4 rounded border p-8 py-6 pt-2"> <div className="space-y-4 rounded border p-4 py-6 pt-2 md:p-8">
<ol className="table border-collapse text-sm"> <ol className="table border-collapse text-sm">
{weekdayNames(i18n.language, 1, "long").map((day, index) => { {weekdayNames(i18n.language, 1, "long").map((day, index) => {
const isAvailable = !!filterDays(index).length; const isAvailable = !!filterDays(index).length;
return ( return (
<li key={day} className="my-6 flex border-transparent last:mb-2"> <li key={day} className="my-6 flex border-transparent last:mb-2">
<span className={classNames("w-32 font-medium", !isAvailable && "text-gray-500 opacity-50")}> <span
className={classNames(
"w-20 font-medium sm:w-32",
!isAvailable && "text-gray-500 opacity-50"
)}>
{day} {day}
</span> </span>
{isLoading ? ( {isLoading ? (
<SkeletonText className="block h-5 w-60" /> <SkeletonText className="block h-5 w-60" />
) : isAvailable ? ( ) : isAvailable ? (
<div className="space-y-3"> <div className="space-y-3 text-right">
{filterDays(index).map((dayRange, i) => ( {filterDays(index).map((dayRange, i) => (
<div key={i} className="flex items-center leading-4"> <div key={i} className="flex items-center leading-4">
<span className="w-28">{format(dayRange.startTime)}</span> <span className="w-16 sm:w-28 sm:text-left">{format(dayRange.startTime)}</span>
<span className="">-</span> <span className="ml-4">-</span>
<div className="ml-6">{format(dayRange.endTime)}</div> <div className="ml-6">{format(dayRange.endTime)}</div>
</div> </div>
))} ))}
</div> </div>
) : ( ) : (
<span className="text-gray-500 opacity-50 ">{t("unavailable")}</span> <span className="ml-6 text-gray-500 opacity-50 sm:ml-0">{t("unavailable")}</span>
)} )}
</li> </li>
); );
})} })}
</ol> </ol>
<hr /> <hr />
<div className="flex justify-between"> <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
<span className="flex items-center text-sm text-gray-600"> <span className="flex items-center justify-center text-sm text-gray-600 sm:justify-start">
<Icon.FiGlobe className="mr-2" /> <Icon.FiGlobe className="mr-2" />
{schedule?.timeZone || <SkeletonText className="block h-5 w-32" />} {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
</span> </span>
@ -168,6 +172,7 @@ export const AvailabilityTab = () => {
color="minimal" color="minimal"
EndIcon={Icon.FiExternalLink} EndIcon={Icon.FiExternalLink}
target="_blank" target="_blank"
className="justify-center border sm:border-0"
rel="noopener noreferrer"> rel="noopener noreferrer">
{t("edit_availability")} {t("edit_availability")}
</Button> </Button>

4
apps/web/components/v2/eventtype/EventSetupTab.tsx
View File

@ -132,14 +132,14 @@ export const EventSetupTab = (
} }
return ( return (
<li key={location.type} className="mb-2 rounded-md border border-neutral-300 py-1.5 px-2"> <li key={location.type} className="mb-2 rounded-md border border-neutral-300 py-1.5 px-2">
<div className="flex justify-between"> <div className="flex max-w-full justify-between">
<div key={index} className="flex flex-grow items-center"> <div key={index} className="flex flex-grow items-center">
<img <img
src={eventLocationType.iconUrl} src={eventLocationType.iconUrl}
className="h-6 w-6" className="h-6 w-6"
alt={`${eventLocationType.label} logo`} alt={`${eventLocationType.label} logo`}
/> />
<span className="text-sm ltr:ml-2 rtl:mr-2"> <span className="truncate text-sm ltr:ml-2 rtl:mr-2">
{location[eventLocationType.defaultValueVariable] || eventLocationType.label} {location[eventLocationType.defaultValueVariable] || eventLocationType.label}
</span> </span>
</div> </div>

23
apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
View File

@ -23,6 +23,7 @@ import {
} from "@calcom/ui/v2"; } from "@calcom/ui/v2";
import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent"; import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
import { Dialog } from "@calcom/ui/v2/core/Dialog"; import { Dialog } from "@calcom/ui/v2/core/Dialog";
import Divider from "@calcom/ui/v2/core/Divider";
import Dropdown, { import Dropdown, {
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
@ -172,11 +173,11 @@ function EventTypeSingleLayout({
subtitle={eventType.description || ""} subtitle={eventType.description || ""}
CTA={ CTA={
<div className="flex items-center justify-end"> <div className="flex items-center justify-end">
<div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100"> <div className="hidden items-center rounded-md px-2 sm:flex sm:hover:bg-gray-100">
<Skeleton <Skeleton
as={Label} as={Label}
htmlFor="hiddenSwitch" htmlFor="hiddenSwitch"
className="mt-2 hidden cursor-pointer self-center pr-2 sm:inline"> className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
{t("hide_from_profile")} {t("hide_from_profile")}
</Skeleton> </Skeleton>
<Switch <Switch
@ -231,7 +232,7 @@ function EventTypeSingleLayout({
/> />
</ButtonGroup> </ButtonGroup>
<VerticalDivider /> <VerticalDivider className="hidden lg:block" />
<Dropdown> <Dropdown>
<DropdownMenuTrigger className="block h-9 w-9 justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 lg:hidden"> <DropdownMenuTrigger className="block h-9 w-9 justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 lg:hidden">
@ -264,6 +265,22 @@ function EventTypeSingleLayout({
{t("delete")} {t("delete")}
</Button> </Button>
</DropdownMenuItem> </DropdownMenuItem>
<Divider />
<div className="flex items-center rounded-md py-1.5 px-4 sm:hidden sm:hover:bg-gray-100">
<Skeleton
as={Label}
htmlFor="hiddenSwitch"
className="mt-2 inline cursor-pointer self-center pr-2 sm:hidden">
{t("hide_from_profile")}
</Skeleton>
<Switch
id="hiddenSwitch"
defaultChecked={formMethods.getValues("hidden")}
onCheckedChange={(e) => {
formMethods.setValue("hidden", e);
}}
/>
</div>
</DropdownMenuContent> </DropdownMenuContent>
</Dropdown> </Dropdown>
<div className="border-l-2 border-gray-300" /> <div className="border-l-2 border-gray-300" />

4
packages/app-store/_components/AppCard.tsx
View File

@ -26,8 +26,8 @@ export default function AppCard({
const [animationRef] = useAutoAnimate<HTMLDivElement>(); const [animationRef] = useAutoAnimate<HTMLDivElement>();
return ( return (
<div ref={animationRef} className="mb-4 mt-2 rounded-md border border-gray-200 p-8 text-sm"> <div ref={animationRef} className="mb-4 mt-2 rounded-md border border-gray-200 p-4 text-sm sm:p-8">
<div className="flex w-full"> <div className="flex w-full flex-col gap-2 sm:flex-row sm:gap-0">
{/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */} {/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */}
<Link href={"/apps/" + app.slug}> <Link href={"/apps/" + app.slug}>
<a className="mr-3 h-auto w-10 rounded-sm"> <a className="mr-3 h-auto w-10 rounded-sm">

8
packages/ui/v2/core/Shell.tsx
View File

@ -785,12 +785,12 @@ export function ShellMain(props: LayoutProps) {
<header <header
className={classNames( className={classNames(
props.large && "py-8", props.large && "py-8",
"mb-4 flex w-full items-start pt-4 pb-2 md:p-0 lg:mb-10" "mb-4 flex w-full max-w-full items-center pt-4 md:p-0 lg:mb-10"
)}> )}>
{props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>} {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
<div className="w-full ltr:mr-4 rtl:ml-4 sm:block"> <div className="w-full ltr:mr-4 rtl:ml-4 sm:block">
{props.heading && ( {props.heading && (
<h1 className="font-cal text-xl font-bold tracking-wide text-black"> <h1 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 mb-1 truncate text-xl font-bold tracking-wide text-black xl:max-w-full">
{!isLocaleReady ? <SkeletonText invisible /> : props.heading} {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
</h1> </h1>
)} )}
@ -830,7 +830,7 @@ function MainContainer({
const [sideContainerOpen, setSideContainerOpen] = props.drawerState || [false, noop]; const [sideContainerOpen, setSideContainerOpen] = props.drawerState || [false, noop];
return ( return (
<main className="relative z-0 flex flex-1 flex-col overflow-y-auto bg-white focus:outline-none "> <main className="relative z-0 flex flex-1 flex-col overflow-y-auto bg-white focus:outline-none">
{/* show top navigation for md and smaller (tablet and phones) */} {/* show top navigation for md and smaller (tablet and phones) */}
{TopNavContainerProp} {TopNavContainerProp}
{/* The following is used for settings navigation on medium and smaller screens */} {/* The following is used for settings navigation on medium and smaller screens */}
@ -844,7 +844,7 @@ function MainContainer({
}} }}
/> />
{SettingsSidebarContainerProp} {SettingsSidebarContainerProp}
<div className="px-4 py-2 lg:py-8 lg:px-12"> <div className="max-w-full px-4 py-2 lg:py-8 lg:px-12">
<ErrorBoundary> <ErrorBoundary>
{/* add padding to top for mobile when App Bar is fixed */} {/* add padding to top for mobile when App Bar is fixed */}
<div className="pt-14 sm:hidden" /> <div className="pt-14 sm:hidden" />