added desktop app layout for v2.0, changed 2.0 banner (#4242)
Peer Richelsen
GitHub
parent
e52af8d387
commit
b4d1cb0988
|
|
@ -77,7 +77,7 @@ class MyDocument extends Document<Props> {
|
|||
</Head>
|
||||
|
||||
{/* Keep the embed hidden till parent initializes and gives it the appropriate styles */}
|
||||
<body className="dark:bg-darkgray-50 bg-gray-100">
|
||||
<body className="dark:bg-darkgray-50 desktop-transparent bg-gray-100">
|
||||
<Main />
|
||||
<NextScript />
|
||||
{/* In case of Embed we want background to be transparent so that it merges into the website seamlessly. Also, we keep the body hidden here and embed logic would take care of showing the body when it's ready */}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@ body {
|
|||
/* disable user selection on buttons, links and images on desktop app */
|
||||
html.todesktop button,
|
||||
html.todesktop a,
|
||||
html.todesktop img{
|
||||
html.todesktop img,
|
||||
html.todesktop header{
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
|
|
@ -38,14 +39,13 @@ html.todesktop div {
|
|||
}
|
||||
|
||||
/* make header draggable on desktop app */
|
||||
html.todesktop header {
|
||||
html.todesktop header{
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
html.todesktop header button {
|
||||
html.todesktop header button{
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
|
||||
html.todesktop .logo {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -63,13 +63,47 @@ html.todesktop .desktop-hidden {
|
|||
}
|
||||
|
||||
html.todesktop header {
|
||||
margin-top: -9px;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
html.todesktop header nav {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
html.todesktop aside {
|
||||
margin:0px -6px;
|
||||
}
|
||||
|
||||
/* TODO: add "native" MacOS colors
|
||||
requires darkmode for MacOS first
|
||||
|
||||
html.todesktop .desktop-transparent{
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
html.todesktop aside a {
|
||||
height: 28px;
|
||||
padding: 0px 8px;
|
||||
font-size: 12px;
|
||||
color: #383438 !important
|
||||
}
|
||||
|
||||
html.todesktop nav a:hover{
|
||||
background-color: inherit !important
|
||||
}
|
||||
|
||||
html.todesktop nav a[aria-current="page"]{
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
html.todesktop nav a svg{
|
||||
color: #0272F7 !important
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Adds Utility to hide scrollbar to tailwind
|
||||
https://github.com/tailwindlabs/tailwindcss/discussions/2394
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
const plugin = require("tailwindcss/plugin");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||
|
|
@ -191,5 +194,10 @@ module.exports = {
|
|||
require("@tailwindcss/forms"),
|
||||
require("@tailwindcss/typography"),
|
||||
require("@tailwindcss/line-clamp"),
|
||||
plugin(({ addVariant }) => {
|
||||
addVariant("mac", ".mac &");
|
||||
addVariant("windows", ".windows &");
|
||||
addVariant("ios", ".ios &");
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
import { Alert } from "@calcom/ui/Alert";
|
||||
import { Alert as AlertV2 } from "@calcom/ui/v2/core/Alert";
|
||||
|
||||
function UserV2OptInBanner() {
|
||||
// Only show on client-side
|
||||
if (typeof document === "undefined") return null;
|
||||
|
|
@ -9,33 +6,23 @@ function UserV2OptInBanner() {
|
|||
|
||||
if (hasV2OptInCookie)
|
||||
return (
|
||||
<AlertV2
|
||||
severity="info"
|
||||
title={
|
||||
<>
|
||||
You're using the new version of Cal.com.{" "}
|
||||
<a href="/api/v2-opt-in" className="underline">
|
||||
Go back to previous version
|
||||
</a>
|
||||
.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<p className="text-xs text-gray-400">
|
||||
You're using the new version of Cal.com.{" "}
|
||||
<a href="/api/v2-opt-in" className="text-blue-400 underline">
|
||||
Go back
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
);
|
||||
|
||||
return (
|
||||
<Alert
|
||||
severity="info"
|
||||
title={
|
||||
<>
|
||||
Want to try the new version of Cal.com?{" "}
|
||||
<a href="/api/v2-opt-in" className="underline">
|
||||
Opt-in to our V2 beta
|
||||
</a>
|
||||
.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<p className="text-xs text-gray-400">
|
||||
Want to try the new version of Cal.com?{" "}
|
||||
<a href="/api/v2-opt-in" className="text-blue-400 underline">
|
||||
Opt-in to our v2.0 beta
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ export const KBarContent = () => {
|
|||
return (
|
||||
<KBarPortal>
|
||||
<KBarPositioner>
|
||||
<KBarAnimator className="z-10 w-full max-w-screen-sm overflow-hidden rounded-sm bg-white shadow-lg">
|
||||
<KBarAnimator className="z-10 w-full max-w-screen-sm overflow-hidden rounded-md bg-white shadow-lg">
|
||||
<div className="flex items-center justify-center border-b">
|
||||
<Icon.FiSearch className="mx-3 h-4 w-4 text-gray-500" />
|
||||
<KBarSearch className="w-full rounded-sm py-2.5 focus-visible:outline-none" />
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export function Alert(props: AlertProps) {
|
|||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
"rounded-sm border border-opacity-20 p-3",
|
||||
"rounded-md border border-opacity-20 p-3",
|
||||
props.className,
|
||||
severity === "error" && "border-red-900 bg-red-50 text-red-800",
|
||||
severity === "warning" && "border-yellow-700 bg-yellow-50 text-yellow-700",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
|
|||
import UserV2OptInBanner from "@calcom/features/users/components/UserV2OptInBanner";
|
||||
import CustomBranding from "@calcom/lib/CustomBranding";
|
||||
import classNames from "@calcom/lib/classNames";
|
||||
import { JOIN_SLACK, ROADMAP, WEBAPP_URL } from "@calcom/lib/constants";
|
||||
import { JOIN_SLACK, ROADMAP, DESKTOP_APP_LINK, WEBAPP_URL } from "@calcom/lib/constants";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import useTheme from "@calcom/lib/hooks/useTheme";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
|
|
@ -106,7 +106,7 @@ export function ShellSubHeading(props: {
|
|||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={classNames("mb-3 block justify-between sm:flex", props.className)}>
|
||||
<header className={classNames("mb-3 block justify-between sm:flex", props.className)}>
|
||||
<div>
|
||||
<h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
|
||||
{props.title}
|
||||
|
|
@ -114,7 +114,7 @@ export function ShellSubHeading(props: {
|
|||
{props.subtitle && <p className="text-sm text-neutral-500 ltr:mr-4">{props.subtitle}</p>}
|
||||
</div>
|
||||
{props.actions && <div className="flex-shrink-0">{props.actions}</div>}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -138,7 +138,6 @@ const Layout = (props: LayoutProps) => {
|
|||
<div className="flex h-screen overflow-hidden" data-testid="dashboard-shell">
|
||||
{props.SidebarContainer || <SideBarContainer />}
|
||||
<div className="flex w-0 flex-1 flex-col overflow-hidden">
|
||||
<UserV2OptInBanner />
|
||||
<ImpersonatingBanner />
|
||||
<MainContainer {...props} />
|
||||
</div>
|
||||
|
|
@ -279,7 +278,7 @@ function UserDropdown({ small }: { small?: boolean }) {
|
|||
) : (
|
||||
<>
|
||||
<DropdownMenuItem>
|
||||
<a
|
||||
<button
|
||||
onClick={() => {
|
||||
mutation.mutate({ away: !user?.away });
|
||||
utils.invalidateQueries("viewer.me");
|
||||
|
|
@ -295,7 +294,7 @@ function UserDropdown({ small }: { small?: boolean }) {
|
|||
aria-hidden="true"
|
||||
/>
|
||||
{user.away ? t("set_as_free") : t("set_as_away")}
|
||||
</a>
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||
{user.username && (
|
||||
|
|
@ -345,6 +344,17 @@ function UserDropdown({ small }: { small?: boolean }) {
|
|||
{t("help")}
|
||||
</button>
|
||||
|
||||
<DropdownMenuItem>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={DESKTOP_APP_LINK}
|
||||
className="desktop-hidden hidden items-center px-4 py-2 text-sm text-gray-700 lg:flex">
|
||||
<Icon.FiDownload className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-3" />{" "}
|
||||
{t("download_desktop_app")}
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||
<DropdownMenuItem>
|
||||
<a
|
||||
|
|
@ -652,28 +662,49 @@ function SideBar() {
|
|||
const { isLocaleReady } = useLocale();
|
||||
|
||||
return (
|
||||
<aside className="hidden w-14 flex-col border-r border-gray-100 bg-gray-50 md:flex lg:w-56 lg:flex-shrink-0 lg:px-4">
|
||||
<aside className="desktop-transparent hidden w-14 flex-col border-r border-gray-100 bg-gray-50 md:flex lg:w-56 lg:flex-shrink-0 lg:px-4">
|
||||
<div className="flex h-0 flex-1 flex-col overflow-y-auto pt-3 pb-4 lg:pt-5">
|
||||
<div className="items-center justify-between md:hidden lg:flex">
|
||||
<header className="items-center justify-between md:hidden lg:flex">
|
||||
<Link href="/event-types">
|
||||
<a className="px-4">
|
||||
<Logo small />
|
||||
</a>
|
||||
</Link>
|
||||
<KBarTrigger />
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
color="minimal"
|
||||
onClick={() => window.history.back()}
|
||||
className="desktop-only group flex text-sm font-medium text-neutral-500 hover:text-neutral-900">
|
||||
<Icon.FiArrowLeft className="h-4 w-4 flex-shrink-0 text-neutral-500 group-hover:text-neutral-900" />
|
||||
</button>
|
||||
<button
|
||||
color="minimal"
|
||||
onClick={() => window.history.forward()}
|
||||
className="desktop-only group flex text-sm font-medium text-neutral-500 hover:text-neutral-900">
|
||||
<Icon.FiArrowRight className="h-4 w-4 flex-shrink-0 text-neutral-500 group-hover:text-neutral-900" />
|
||||
</button>
|
||||
<KBarTrigger />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<hr className="desktop-only absolute -left-3 -right-3 mt-4 block w-full border-gray-200" />
|
||||
|
||||
{/* logo icon for tablet */}
|
||||
<Link href="/event-types">
|
||||
<a className="text-center md:inline lg:hidden">
|
||||
<Logo small icon />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<Navigation />
|
||||
</div>
|
||||
|
||||
{/* TODO @Peer_Rich: reintroduce in 2.1
|
||||
<Tips />
|
||||
*/}
|
||||
<div className="mb-4 hidden lg:block">
|
||||
<UserV2OptInBanner />
|
||||
</div>
|
||||
|
||||
{!isLocaleReady ? null : <TrialBanner />}
|
||||
<div data-testid="user-dropdown-trigger">
|
||||
|
|
@ -702,7 +733,7 @@ export function ShellMain(props: LayoutProps) {
|
|||
/>
|
||||
)}
|
||||
{props.heading && (
|
||||
<div className={classNames(props.large && "py-8", "flex w-full items-center pt-4 md:p-0")}>
|
||||
<header className={classNames(props.large && "py-8", "flex w-full items-center pt-4 md:p-0")}>
|
||||
{props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
|
||||
<div className="mb-4 w-full ltr:mr-4 rtl:ml-4">
|
||||
{props.heading && (
|
||||
|
|
@ -717,7 +748,7 @@ export function ShellMain(props: LayoutProps) {
|
|||
)}
|
||||
</div>
|
||||
{props.CTA && <div className="mb-4 flex-shrink-0">{props.CTA}</div>}
|
||||
</div>
|
||||
</header>
|
||||
)}
|
||||
</div>
|
||||
<div className={classNames("", props.flexChildrenContainer && "flex flex-1 flex-col")}>
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
|
|||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>
|
||||
<div className="max-w-48 shadow-dropdown">{t("new_event_subtitle")}</div>
|
||||
<div className="max-w-48">{t("new_event_subtitle")}</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||
{props.options.map((option) => (
|
||||
|
|
|
|||
Loading…
Reference in New Issue