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">) => {
|
export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps, "eventType" | "team">) => {
|
||||||
const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery();
|
const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery();
|
||||||
|
const { data: user } = trpc.viewer.me.useQuery();
|
||||||
const formMethods = useFormContext<FormValues>();
|
const formMethods = useFormContext<FormValues>();
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
|
|
||||||
|
@ -49,6 +50,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
|
||||||
const bookingFields: Prisma.JsonObject = {};
|
const bookingFields: Prisma.JsonObject = {};
|
||||||
|
|
||||||
const workflows = eventType.workflows.map((workflowOnEventType) => workflowOnEventType.workflow);
|
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 }) => {
|
eventType.bookingFields.forEach(({ name }) => {
|
||||||
bookingFields[name] = name + " input";
|
bookingFields[name] = name + " input";
|
||||||
|
@ -162,7 +166,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
|
||||||
</div>
|
</div>
|
||||||
<hr className="border-subtle [&:has(+div:empty)]:hidden" />
|
<hr className="border-subtle [&:has(+div:empty)]:hidden" />
|
||||||
<div>
|
<div>
|
||||||
<BookerLayoutSelector fallbackToUserSettings />
|
<BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} />
|
||||||
</div>
|
</div>
|
||||||
<hr className="border-subtle" />
|
<hr className="border-subtle" />
|
||||||
<FormBuilder
|
<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 {
|
const {
|
||||||
formState: { isSubmitting, isDirty },
|
formState: { isSubmitting, isDirty },
|
||||||
reset,
|
reset,
|
||||||
|
@ -144,6 +151,7 @@ const AppearanceView = () => {
|
||||||
|
|
||||||
<hr className="border-subtle my-8 border [&:has(+hr)]:hidden" />
|
<hr className="border-subtle my-8 border [&:has(+hr)]:hidden" />
|
||||||
<BookerLayoutSelector
|
<BookerLayoutSelector
|
||||||
|
isDark={selectedThemeIsDark}
|
||||||
name="metadata.defaultBookerLayouts"
|
name="metadata.defaultBookerLayouts"
|
||||||
title={t("bookerlayout_user_settings_title")}
|
title={t("bookerlayout_user_settings_title")}
|
||||||
description={t("bookerlayout_user_settings_description")}
|
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.
|
* settings.
|
||||||
*/
|
*/
|
||||||
fallbackToUserSettings?: boolean;
|
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";
|
const defaultFieldName = "metadata.bookerLayouts";
|
||||||
|
@ -32,6 +39,7 @@ export const BookerLayoutSelector = ({
|
||||||
description,
|
description,
|
||||||
name,
|
name,
|
||||||
fallbackToUserSettings,
|
fallbackToUserSettings,
|
||||||
|
isDark,
|
||||||
}: BookerLayoutSelectorProps) => {
|
}: BookerLayoutSelectorProps) => {
|
||||||
const { control, getValues } = useFormContext();
|
const { control, getValues } = useFormContext();
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
|
@ -58,6 +66,7 @@ export const BookerLayoutSelector = ({
|
||||||
showUserSettings={shouldShowUserSettings}
|
showUserSettings={shouldShowUserSettings}
|
||||||
settings={value}
|
settings={value}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
|
isDark={isDark}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
@ -69,11 +78,12 @@ type BookerLayoutFieldsProps = {
|
||||||
settings: BookerLayoutSettings;
|
settings: BookerLayoutSettings;
|
||||||
onChange: (settings: BookerLayoutSettings) => void;
|
onChange: (settings: BookerLayoutSettings) => void;
|
||||||
showUserSettings: boolean;
|
showUserSettings: boolean;
|
||||||
|
isDark?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
type BookerLayoutState = { [key in BookerLayouts]: boolean };
|
type BookerLayoutState = { [key in BookerLayouts]: boolean };
|
||||||
|
|
||||||
const BookerLayoutFields = ({ settings, onChange, showUserSettings }: BookerLayoutFieldsProps) => {
|
const BookerLayoutFields = ({ settings, onChange, showUserSettings, isDark }: BookerLayoutFieldsProps) => {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
const { isLoading: isUserLoading, data: user } = useMeQuery();
|
const { isLoading: isUserLoading, data: user } = useMeQuery();
|
||||||
const [isOverridingSettings, setIsOverridingSettings] = useState(false);
|
const [isOverridingSettings, setIsOverridingSettings] = useState(false);
|
||||||
|
@ -143,7 +153,7 @@ const BookerLayoutFields = ({ settings, onChange, showUserSettings }: BookerLayo
|
||||||
<label>
|
<label>
|
||||||
<img
|
<img
|
||||||
className="mb-3 w-full max-w-none cursor-pointer"
|
className="mb-3 w-full max-w-none cursor-pointer"
|
||||||
src={`/bookerlayout_${layout}.svg`}
|
src={`/bookerlayout_${layout}${isDark ? "_dark" : ""}.svg`}
|
||||||
alt="Layout preview"
|
alt="Layout preview"
|
||||||
/>
|
/>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
|
|
Loading…
Reference in New Issue
Block a user