SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

add fullscreen param to widgets

Browse Source
This commit is contained in:
nflnkr 2024-05-27 17:24:04 +03:00
parent 7b1fafe372
commit 9271bbb80d
8 changed files with 49 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/model/widget/banner.ts
View File

@ -22,6 +22,7 @@ export interface BannerWidgetComponentProps {
rounded?: boolean;
bannerFullWidth?: boolean;
pulsation?: boolean;
fullScreen?: boolean;
}
export type BannerWidgetParams = Omit<BannerWidgetComponentProps, "onWidgetClose">;

1
lib/model/widget/button.ts
View File

@ -14,6 +14,7 @@ export interface ButtonWidgetComponentProps {
buttonText?: string;
buttonTextColor?: string;
buttonBackgroundColor?: string;
fullScreen?: boolean;
}
export type ButtonWidgetParams = Omit<ButtonWidgetComponentProps, "fixedSide"> & {

1
lib/model/widget/popup.ts
View File

@ -7,6 +7,7 @@ export interface PopupWidgetComponentProps {
autoShowQuizTime?: number | null;
hideOnMobile?: boolean;
openOnLeaveAttempt?: boolean;
fullScreen?: boolean;
}
export type PopupWidgetParams = PopupWidgetComponentProps;

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@frontend/squzanswerer",
"version": "1.0.43",
"version": "1.0.44",
"type": "module",
"main": "./dist-package/index.js",
"module": "./dist-package/index.js",

17
src/widgets/banner/QuizBanner.tsx
View File

@ -30,6 +30,7 @@ export default function QuizBanner({
pulsation = false,
autoShowWidgetTime = 0,
dialogDimensions,
fullScreen = false,
}: BannerWidgetComponentProps) {
const isMobile = useMediaQuery("(max-width: 600px)");
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
@ -189,10 +190,18 @@ export default function QuizBanner({
quizId={quizId}
onClose={() => setIsQuizShown(false)}
disableScrollLock
paperSx={{
width: dialogDimensions?.width,
height: dialogDimensions?.height,
}}
paperSx={[
(isMobile || fullScreen) ? {
width: "100%",
height: "100%",
maxHeight: "100%",
borderRadius: 0,
m: 0,
} : {
width: dialogDimensions?.width,
height: dialogDimensions?.height,
},
]}
/>
</ThemeProvider>,
document.body

17
src/widgets/button/OpenQuizButton.tsx
View File

@ -20,6 +20,7 @@ export default function OpenQuizButton({
buttonText = "Пройти квиз",
buttonTextColor,
buttonBackgroundColor,
fullScreen = false,
}: ButtonWidgetComponentProps) {
const isMobile = useMediaQuery("(max-width: 600px)");
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
@ -106,10 +107,18 @@ export default function OpenQuizButton({
open={isQuizShown}
quizId={quizId}
onClose={() => setIsQuizShown(false)}
paperSx={{
width: dialogDimensions?.width,
height: dialogDimensions?.height,
}}
paperSx={[
(isMobile || fullScreen) ? {
width: "100%",
height: "100%",
maxHeight: "100%",
borderRadius: 0,
m: 0,
} : {
width: dialogDimensions?.width,
height: dialogDimensions?.height,
},
]}
/>
</ThemeProvider>
);

20
src/widgets/popup/QuizPopup.tsx
View File

@ -5,15 +5,13 @@ import { useMediaQuery } from "@mui/material";
import { PopupWidgetComponentProps } from "@/model/widget/popup";
const WIDGET_DEFAULT_WIDTH = "600px";
const WIDGET_DEFAULT_HEIGHT = "80%";
export default function QuizPopup({
quizId,
dialogDimensions,
autoShowQuizTime = null,
hideOnMobile = false,
openOnLeaveAttempt = false,
fullScreen = false,
}: PopupWidgetComponentProps) {
const initialIsQuizShown = (autoShowQuizTime !== null || openOnLeaveAttempt) ? false : true;
@ -59,10 +57,18 @@ export default function QuizPopup({
open={isQuizShown}
quizId={quizId}
onClose={() => setIsQuizShown(false)}
paperSx={{
width: dialogDimensions?.width ?? WIDGET_DEFAULT_WIDTH,
height: dialogDimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
}}
paperSx={[
(isMobile || fullScreen) ? {
width: "100%",
height: "100%",
maxHeight: "100%",
borderRadius: 0,
m: 0,
} : {
width: dialogDimensions?.width,
height: dialogDimensions?.height,
},
]}
/>
);
}

14
src/widgets/side/QuizSideButton.tsx
View File

@ -64,7 +64,12 @@ export default function QuizSideButton({
{
m: 0,
},
!(isMobile || fullScreen) && {
(isMobile || fullScreen) ? {
width: "100%",
height: "100%",
maxHeight: "100%",
borderRadius: 0,
} : {
position: "absolute",
bottom: PADDING,
right: position === "right" ? PADDING : undefined,
@ -74,13 +79,6 @@ export default function QuizSideButton({
height: dialogDimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
maxHeight: `calc(100% - ${PADDING * 2}px)`,
},
(isMobile || fullScreen) && {
position: "relative",
width: "100%",
height: "100%",
maxHeight: "100%",
borderRadius: 0,
},
]}
/>
<Fade in={!isWidgetHidden} timeout={400}>