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

Zomars/calendars UI fixes (#1288) 

* Updates yarn.lock

* Primary calendar selector UI fixes

* Update translation string

* Mobile fixes
This commit is contained in:
Omar López 2021-12-09 12:37:29 -07:00 committed by GitHub
parent 8617b2db65
commit 5902f78fb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/Shell.tsx
View File

@ -106,7 +106,7 @@ export function ShellSubHeading(props: {
</h2>
{props.subtitle && <p className="mr-4 text-sm text-neutral-500">{props.subtitle}</p>}
</div>
{props.actions && <div className="flex-shrink-0 mb-4">{props.actions}</div>}
{props.actions && <div className="flex-shrink-0">{props.actions}</div>}
</div>
);
}
@ -199,7 +199,7 @@ export default function Shell(props: {
<div className="hidden md:flex lg:flex-shrink-0">
<div className="flex flex-col w-14 lg:w-56">
<div className="flex flex-col flex-1 h-0 bg-white border-r border-gray-200">
<div className="flex flex-col flex-1 pt-3 lg:pt-5 pb-4 overflow-y-auto">
<div className="flex flex-col flex-1 pt-3 pb-4 overflow-y-auto lg:pt-5">
<Link href="/event-types">
<a className="px-4 md:hidden lg:inline">
<Logo small />
@ -211,7 +211,7 @@ export default function Shell(props: {
<Logo small icon />
</a>
</Link>
<nav className="flex-1 px-2 mt-2 lg:mt-5 space-y-1 bg-white">
<nav className="flex-1 px-2 mt-2 space-y-1 bg-white lg:mt-5">
{navigation.map((item) => (
<Link key={item.name} href={item.href}>
<a
@ -328,13 +328,13 @@ function UserDropdown({ small }: { small?: boolean }) {
return (
<Dropdown>
<DropdownMenuTrigger asChild>
<div className="flex items-center space-x-2 cursor-pointer group w-full">
<div className="flex items-center w-full space-x-2 cursor-pointer group">
<span
className={classNames(small ? "w-8 h-8" : "w-10 h-10", "bg-gray-300 rounded-full flex-shrink-0")}>
<Avatar imageSrc={user?.avatar || ""} alt={user?.username || "Nameless User"} />
</span>
{!small && (
<span className="flex flex-grow items-center truncate">
<span className="flex items-center flex-grow truncate">
<span className="flex-grow text-sm truncate">
<span className="block font-medium text-gray-900 truncate">
{user?.username || "Nameless User"}

60
components/integrations/CalendarListContainer.tsx
View File

@ -162,6 +162,7 @@ function ConnectedCalendarsList(props: Props) {
}
function PrimaryCalendarSelector() {
const { t } = useLocale();
const query = trpc.useQuery(["viewer.connectedCalendars"], {
suspense: true,
});
@ -196,28 +197,37 @@ function PrimaryCalendarSelector() {
})),
})) ?? [];
return (
<Select
name={"primarySelectedCalendar"}
options={options}
isSearchable={false}
className="flex-1 block w-full min-w-0 mt-1 mb-2 border-gray-300 rounded-none focus:ring-primary-500 focus:border-primary-500 rounded-r-md sm:text-sm"
onChange={(option) => {
setSelectedOption(option);
if (!option) {
return;
}
<div className="relative">
{/* There's no easy way to customize the displayed value for a Select, so we fake it. */}
<div className="absolute z-10 pointer-events-none">
<Button size="sm" color="secondary" className="border-transparent m-[1px] rounded-sm">
{t("select_destination_calendar")}: {selectedOption?.label || ""}
</Button>
</div>
<Select
name={"primarySelectedCalendar"}
placeholder={`${t("select_destination_calendar")}:`}
options={options}
isSearchable={false}
className="flex-1 block w-full min-w-0 mt-1 mb-2 border-gray-300 rounded-none focus:ring-primary-500 focus:border-primary-500 rounded-r-md sm:text-sm"
onChange={(option) => {
setSelectedOption(option);
if (!option) {
return;
}
/* Split only the first `:`, since Apple uses the full URL as externalId */
const [integration, externalId] = option.value.split(/:(.+)/);
/* Split only the first `:`, since Apple uses the full URL as externalId */
const [integration, externalId] = option.value.split(/:(.+)/);
mutation.mutate({
integration,
externalId,
});
}}
isLoading={mutation.isLoading}
value={selectedOption}
/>
mutation.mutate({
integration,
externalId,
});
}}
isLoading={mutation.isLoading}
value={selectedOption}
/>
</div>
);
}
@ -266,7 +276,7 @@ export function CalendarListContainer(props: { heading?: false }) {
<>
{heading && (
<ShellSubHeading
className="mt-10"
className="mt-10 mb-0"
title={
<SubHeadingTitleWithConnections
title="Calendars"
@ -274,11 +284,13 @@ export function CalendarListContainer(props: { heading?: false }) {
/>
}
subtitle={t("configure_how_your_event_types_interact")}
actions={<div className="block"></div>}
actions={
<div className="block max-w-full sm:min-w-80">
<PrimaryCalendarSelector />
</div>
}
/>
)}
<p className="mr-4 text-sm text-neutral-500">{t("select_destination_calendar")}</p>
<PrimaryCalendarSelector />
<ConnectedCalendarsList onChanged={onChanged} />
{!!query.data?.connectedCalendars.length && (
<ShellSubHeading

1
next-env.d.ts vendored
View File

@ -1,5 +1,4 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited

4
public/static/locales/en/common.json
View File

@ -545,11 +545,11 @@
"connect_your_favourite_apps": "Connect your favourite apps.",
"automation": "Automation",
"configure_how_your_event_types_interact": "Configure how your event types should interact with your calendars.",
"select_destination_calendar": "Select a destination calendar for your bookings.",
"select_destination_calendar": "Create events on",
"connect_an_additional_calendar": "Connect an additional calendar",
"conferencing": "Conferencing",
"calendar": "Calendar",
"not_installed": "Not installed",
"error_password_mismatch": "Passwords don't match.",
"error_required_field": "This field is required."
}
}

50
yarn.lock
View File

@ -847,6 +847,17 @@
"@types/yargs" "^16.0.0"
chalk "^4.0.0"
"@jest/types@^27.4.2":
version "27.4.2"
resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.4.2.tgz#96536ebd34da6392c2b7c7737d693885b5dd44a5"
integrity sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==
dependencies:
"@types/istanbul-lib-coverage" "^2.0.0"
"@types/istanbul-reports" "^3.0.0"
"@types/node" "*"
"@types/yargs" "^16.0.0"
chalk "^4.0.0"
"@jimp/bmp@^0.16.1":
version "0.16.1"
resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.16.1.tgz#6e2da655b2ba22e721df0795423f34e92ef13768"
@ -2426,6 +2437,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
dependencies:
color-convert "^2.0.1"
ansi-styles@^5.0.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
any-base@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/any-base/-/any-base-1.1.0.tgz#ae101a62bc08a597b4c9ab5b7089d456630549fe"
@ -3764,6 +3780,11 @@ diff-sequences@^26.6.2:
resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
diff-sequences@^27.4.0:
version "27.4.0"
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.4.0.tgz#d783920ad8d06ec718a060d00196dfef25b132a5"
integrity sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==
diff@^4.0.1:
version "4.0.2"
resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@ -5809,7 +5830,7 @@ jest-config@^26.6.3:
micromatch "^4.0.2"
pretty-format "^26.6.2"
jest-diff@^26.0.0, jest-diff@^26.6.2:
jest-diff@^26.6.2:
version "26.6.2"
resolved "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
@ -5819,6 +5840,16 @@ jest-diff@^26.0.0, jest-diff@^26.6.2:
jest-get-type "^26.3.0"
pretty-format "^26.6.2"
jest-diff@^27.0.0:
version "27.4.2"
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.4.2.tgz#786b2a5211d854f848e2dcc1e324448e9481f36f"
integrity sha512-ujc9ToyUZDh9KcqvQDkk/gkbf6zSaeEg9AiBxtttXW59H/AcqEYp1ciXAtJp+jXWva5nAf/ePtSsgWwE5mqp4Q==
dependencies:
chalk "^4.0.0"
diff-sequences "^27.4.0"
jest-get-type "^27.4.0"
pretty-format "^27.4.2"
jest-docblock@^26.0.0:
version "26.0.0"
resolved "https://registry.npmjs.org/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
@ -5867,6 +5898,11 @@ jest-get-type@^26.3.0:
resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
jest-get-type@^27.4.0:
version "27.4.0"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.4.0.tgz#7503d2663fffa431638337b3998d39c5e928e9b5"
integrity sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==
jest-haste-map@^26.6.2:
version "26.6.2"
resolved "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
@ -8049,7 +8085,7 @@ prettier@^2.3.2:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
pretty-format@^26.0.0, pretty-format@^26.6.2:
pretty-format@^26.6.2:
version "26.6.2"
resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
@ -8059,6 +8095,16 @@ pretty-format@^26.0.0, pretty-format@^26.6.2:
ansi-styles "^4.0.0"
react-is "^17.0.1"
pretty-format@^27.0.0, pretty-format@^27.4.2:
version "27.4.2"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.4.2.tgz#e4ce92ad66c3888423d332b40477c87d1dac1fb8"
integrity sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==
dependencies:
"@jest/types" "^27.4.2"
ansi-regex "^5.0.1"
ansi-styles "^5.0.0"
react-is "^17.0.1"
pretty-format@^3.8.0:
version "3.8.0"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"