CAL-1892: Show booker layout dark mode preview based on theme the user selects (#9664)
This commit is contained in:
parent
3c68c7f7cb
commit
a348c3a20a
|
@ -38,6 +38,7 @@ const generateHashedLink = (id: number) => {
|
|||
|
||||
export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps, "eventType" | "team">) => {
|
||||
const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery();
|
||||
const { data: user } = trpc.viewer.me.useQuery();
|
||||
const formMethods = useFormContext<FormValues>();
|
||||
const { t } = useLocale();
|
||||
|
||||
|
@ -49,6 +50,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
|
|||
const bookingFields: Prisma.JsonObject = {};
|
||||
|
||||
const workflows = eventType.workflows.map((workflowOnEventType) => workflowOnEventType.workflow);
|
||||
const selectedThemeIsDark =
|
||||
user?.theme === "dark" ||
|
||||
(!user?.theme && typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
|
||||
|
||||
eventType.bookingFields.forEach(({ name }) => {
|
||||
bookingFields[name] = name + " input";
|
||||
|
@ -162,7 +166,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
|
|||
</div>
|
||||
<hr className="border-subtle [&:has(+div:empty)]:hidden" />
|
||||
<div>
|
||||
<BookerLayoutSelector fallbackToUserSettings />
|
||||
<BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} />
|
||||
</div>
|
||||
<hr className="border-subtle" />
|
||||
<FormBuilder
|
||||
|
|
|
@ -70,6 +70,13 @@ const AppearanceView = () => {
|
|||
},
|
||||
});
|
||||
|
||||
const selectedTheme = formMethods.watch("theme");
|
||||
const selectedThemeIsDark =
|
||||
selectedTheme === "dark" ||
|
||||
(selectedTheme === "" &&
|
||||
typeof document !== "undefined" &&
|
||||
document.documentElement.classList.contains("dark"));
|
||||
|
||||
const {
|
||||
formState: { isSubmitting, isDirty },
|
||||
reset,
|
||||
|
@ -144,6 +151,7 @@ const AppearanceView = () => {
|
|||
|
||||
<hr className="border-subtle my-8 border [&:has(+hr)]:hidden" />
|
||||
<BookerLayoutSelector
|
||||
isDark={selectedThemeIsDark}
|
||||
name="metadata.defaultBookerLayouts"
|
||||
title={t("bookerlayout_user_settings_title")}
|
||||
description={t("bookerlayout_user_settings_description")}
|
||||
|
|
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 16 KiB |
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 24 KiB |
|
@ -23,6 +23,13 @@ type BookerLayoutSelectorProps = {
|
|||
* settings.
|
||||
*/
|
||||
fallbackToUserSettings?: boolean;
|
||||
/**
|
||||
* isDark boolean should be passed in when the user selected 'dark mode' in the theme settings in profile/appearance.
|
||||
* So it's not based on the user's system settings, but on the user's preference for the booker.
|
||||
* This boolean is then used to show a dark version of the layout image. It's only easthetic, no functionality is attached
|
||||
* to this boolean.
|
||||
*/
|
||||
isDark?: boolean;
|
||||
};
|
||||
|
||||
const defaultFieldName = "metadata.bookerLayouts";
|
||||
|
@ -32,6 +39,7 @@ export const BookerLayoutSelector = ({
|
|||
description,
|
||||
name,
|
||||
fallbackToUserSettings,
|
||||
isDark,
|
||||
}: BookerLayoutSelectorProps) => {
|
||||
const { control, getValues } = useFormContext();
|
||||
const { t } = useLocale();
|
||||
|
@ -58,6 +66,7 @@ export const BookerLayoutSelector = ({
|
|||
showUserSettings={shouldShowUserSettings}
|
||||
settings={value}
|
||||
onChange={onChange}
|
||||
isDark={isDark}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
@ -69,11 +78,12 @@ type BookerLayoutFieldsProps = {
|
|||
settings: BookerLayoutSettings;
|
||||
onChange: (settings: BookerLayoutSettings) => void;
|
||||
showUserSettings: boolean;
|
||||
isDark?: boolean;
|
||||
};
|
||||
|
||||
type BookerLayoutState = { [key in BookerLayouts]: boolean };
|
||||
|
||||
const BookerLayoutFields = ({ settings, onChange, showUserSettings }: BookerLayoutFieldsProps) => {
|
||||
const BookerLayoutFields = ({ settings, onChange, showUserSettings, isDark }: BookerLayoutFieldsProps) => {
|
||||
const { t } = useLocale();
|
||||
const { isLoading: isUserLoading, data: user } = useMeQuery();
|
||||
const [isOverridingSettings, setIsOverridingSettings] = useState(false);
|
||||
|
@ -143,7 +153,7 @@ const BookerLayoutFields = ({ settings, onChange, showUserSettings }: BookerLayo
|
|||
<label>
|
||||
<img
|
||||
className="mb-3 w-full max-w-none cursor-pointer"
|
||||
src={`/bookerlayout_${layout}.svg`}
|
||||
src={`/bookerlayout_${layout}${isDark ? "_dark" : ""}.svg`}
|
||||
alt="Layout preview"
|
||||
/>
|
||||
<Checkbox
|
||||
|
|
Loading…
Reference in New Issue
Block a user