Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

fix(ui): fix ui preview critical bug (#4086)

Browse source 
* fix(ui): fix ui preview critical bug

fix ui switch platform and theme style messed up bug

* fix: let helmet manage all body classnames
let helmet manage all the body classnames
This commit is contained in:
simeng-li 2023-06-27 10:00:00 +08:00 • committed by GitHub
parent 12b9e7dfe0
commit 752d39b2ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/ui/src/Layout/AppLayout/index.module.scss
View file

@ -1,20 +1,5 @@
@use '@/scss/underscore' as _;
/* Preview Settings */
.preview {
pointer-events: none;
user-select: none;
.viewBox::-webkit-scrollbar {
display: none;
}
main {
pointer-events: none;
user-select: none;
}
}
/* Main Layout */
.viewBox {
position: absolute;

6
packages/ui/src/Providers/AppBoundary/AppMeta.tsx
View file

@ -18,13 +18,14 @@ import * as styles from './index.module.scss';
* - data-theme: set html data-theme attribute
* - favicon: set favicon
* - apple-touch-icon: set apple touch icon
* - body class: set preview body class
* - body class: set platform body class
* - body class: set theme body class
* - custom css: set custom css style tag
*/
const AppMeta = () => {
const { experienceSettings, theme, platform } = useContext(PageContext);
const { experienceSettings, theme, platform, isPreview } = useContext(PageContext);
return (
<Helmet>
@ -38,8 +39,7 @@ const AppMeta = () => {
{experienceSettings?.customCss && <style>{experienceSettings.customCss}</style>}
<body
className={classNames(
// Should preserve any existing classNames
conditionalString(document.body.className),
conditionalString(isPreview && styles.preview),
platform === 'mobile' ? 'mobile' : 'desktop',
conditionalString(styles[theme])
)}

15
packages/ui/src/Providers/AppBoundary/index.module.scss
View file

@ -11,6 +11,21 @@ body {
}
}
/* Preview Settings */
.preview {
pointer-events: none;
user-select: none;
.viewBox::-webkit-scrollbar {
display: none;
}
main {
pointer-events: none;
user-select: none;
}
}
:global(body.mobile) {
--max-width: 360px;
background: var(--color-bg-body);

5
packages/ui/src/Providers/SettingsProvider/use-preview.ts
View file

@ -1,8 +1,6 @@
import { ConnectorPlatform } from '@logto/schemas';
import { conditionalString } from '@silverhand/essentials';
import { useContext, useEffect, useState } from 'react';
import * as styles from '@/Layout/AppLayout/index.module.scss';
import PageContext from '@/Providers/PageContextProvider/PageContext';
import initI18n from '@/i18n/init';
import { changeLanguage } from '@/i18n/utils';
@ -18,9 +16,6 @@ const usePreview = () => {
// Init i18n
const i18nInit = initI18n();
// Block pointer event
document.body.classList.add(conditionalString(styles.preview));
// Listen to the message from the ancestor window
const previewMessageHandler = async (event: MessageEvent) => {
// #event.data should be guarded at the provider's side