Skip to content

[V2] Fix /settings/conferencing - 4421 #4428

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

Merged
kodiakhq merged 2 commits into from
Sep 13, 2022
Merged

[V2] Fix /settings/conferencing - 4421 #4428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c6a3ac2
Tidyup app cards
sean-brydon Sep 13, 2022
9707e92
Merge branch 'main' into 4421-settings-conferencing-ui-issues
sean-brydon Sep 13, 2022
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
16 changes: 6 additions & 10 deletions apps/web/pages/v2/settings/my-account/conferencing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,7 @@ import { getSession } from "@calcom/lib/auth";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import prisma from "@calcom/prisma";
import { Icon } from "@calcom/ui";
import Dropdown, {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@calcom/ui/v2/core/Dropdown";
import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Button } from "@calcom/ui/v2";
import Meta from "@calcom/ui/v2/core/Meta";
import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
import { List, ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/modules/List";
Expand All @@ -30,10 +26,10 @@ const ConferencingLayout = (props: inferSSRProps<typeof getServerSideProps>) =>
return (
<div className="w-full bg-white sm:mx-0 xl:mt-0">
<Meta title="conferencing" description="conferencing_description" />
<List>
<List roundContainer={true}>
{apps.map((app) => (
<ListItem className="flex-col border-0" key={app.title}>
<div className="flex w-full flex-1 items-center space-x-3 pb-5 pl-1 pt-1 rtl:space-x-reverse">
<ListItem rounded={false} className="flex-col border-0" key={app.title}>
<div className="flex w-full flex-1 items-center space-x-3 pl-1 pt-1 rtl:space-x-reverse">
{
// eslint-disable-next-line @next/next/no-img-element
app.logo && <img className="h-10 w-10" src={app.logo} alt={app.title} />
Expand All @@ -46,8 +42,8 @@ const ConferencingLayout = (props: inferSSRProps<typeof getServerSideProps>) =>
</div>
<div>
<Dropdown>
<DropdownMenuTrigger className="focus:ring-brand-900 block h-[36px] w-auto justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1">
<Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
<DropdownMenuTrigger asChild>
<Button StartIcon={Icon.FiMoreHorizontal} size="icon" color="secondary" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
Expand Down
25 changes: 20 additions & 5 deletions packages/ui/v2/modules/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,31 @@ import { createElement } from "react";

import classNames from "@calcom/lib/classNames";

export function List(props: JSX.IntrinsicElements["ul"]) {
export type ListProps = {
roundContainer?: boolean;
} & JSX.IntrinsicElements["ul"];

export function List(props: ListProps) {
return (
<ul {...props} className={classNames("-mx-4 rounded-sm sm:mx-0 sm:overflow-hidden", props.className)}>
<ul
{...props}
className={classNames(
"-mx-4 rounded-sm sm:mx-0 sm:overflow-hidden ",
// Add rounded top and bottome if roundContainer is true
props.roundContainer && "[&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md ",
Copy link
Member Author

@sean-brydon sean-brydon Sep 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be ideal if we could pass [&_a]:rounded-none here but for some reason specificity doesn't like it and ignores.

props.className
)}>
{props.children}
</ul>
);
}

export type ListItemProps = { expanded?: boolean } & ({ href?: never } & JSX.IntrinsicElements["li"]);
export type ListItemProps = { expanded?: boolean; rounded?: boolean } & ({
href?: never;
} & JSX.IntrinsicElements["li"]);

export function ListItem(props: ListItemProps) {
const { href, expanded, ...passThroughProps } = props;
const { href, expanded, rounded = true, ...passThroughProps } = props;
Copy link
Member Author

@sean-brydon sean-brydon Sep 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comment above

If the above approached worked we would be able to get away without this additional prop


const elementType = href ? "a" : "li";

Expand All @@ -23,8 +36,10 @@ export function ListItem(props: ListItemProps) {
{
...passThroughProps,
className: classNames(
"items-center rounded-md bg-white min-w-0 flex-1 flex border-neutral-200 p-4 sm:mx-0 md:border md:p-4 xl:mt-0",
"items-center bg-white min-w-0 flex-1 flex border-neutral-200 p-4 sm:mx-0 md:border md:p-4 xl:mt-0",
expanded ? "my-2 border" : "border -mb-px last:mb-0",
// Pass rounded false to not round the corners -> Usefull when used in list we can use roundedContainer to create the right design
rounded ? "rounded-md" : "rounded-none",
props.className,
(props.onClick || href) && "hover:bg-neutral-50"
),
Expand Down