SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: design logic

Browse Source
This commit is contained in:
IlyaDoronin 2024-03-04 19:31:11 +03:00
parent 755ec24ff0
commit 7291d08d6a
5 changed files with 273 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/model/quizSettings.ts
View File

@ -46,7 +46,7 @@ export type QuizType = "quiz" | "form" | null;
export type QuizResultsType = true | null;
export type Theme =
export type QuizTheme =
| "StandardTheme"
| "StandardDarkTheme"
| "PinkTheme"
@ -57,20 +57,17 @@ export type Theme =
| "GoldDarkTheme"
| "PurpleTheme"
| "BlueTheme"
| "BlueDarkTheme";
export type Design =
| ""
| "design1"
| "design2"
| "design3"
| "design4"
| "design5"
| "design6"
| "design7"
| "design8"
| "design9"
| "design10";
| "BlueDarkTheme"
| "Design1"
| "Design2"
| "Design3"
| "Design4"
| "Design5"
| "Design6"
| "Design7"
| "Design8"
| "Design9"
| "Design10";
export interface QuizConfig {
type: QuizType;
@ -78,8 +75,8 @@ export interface QuizConfig {
startpageType: QuizStartpageType;
results: QuizResultsType;
haveRoot: string | null;
theme: Theme;
design: Design;
theme: QuizTheme;
design: boolean;
resultInfo: {
when: "email" | "";
share: true | false;
@ -149,6 +146,7 @@ export const defaultQuizConfig: QuizConfig = {
results: null,
haveRoot: null,
theme: "StandardTheme",
design: false,
resultInfo: {
when: "",
share: false,

54
src/pages/DesignPage/DesignFilling.tsx
View File

@ -21,11 +21,9 @@ import Desgin8 from "@icons/designs/design8.jpg";
import Desgin9 from "@icons/designs/design9.jpg";
import Desgin10 from "@icons/designs/design10.jpg";
import type { Theme } from "@model/quizSettings";
import type { Design } from "@model/quizSettings";
import type { DesignItem } from "./DesignGroup";
const LIGHT_THEME_BUTTONS: DesignItem<Theme>[] = [
const LIGHT_THEME_BUTTONS: DesignItem[] = [
{
label: "Стандартный",
name: "StandardTheme",
@ -51,7 +49,7 @@ const LIGHT_THEME_BUTTONS: DesignItem<Theme>[] = [
{ label: "Розовый", name: "PinkTheme", colors: ["#D34085", "#333647", ""] },
];
const DARK_THEME_BUTTONS: DesignItem<Theme>[] = [
const DARK_THEME_BUTTONS: DesignItem[] = [
{
label: "Стандартный",
name: "StandardDarkTheme",
@ -74,19 +72,19 @@ const DARK_THEME_BUTTONS: DesignItem<Theme>[] = [
},
];
const DESIGNG_LIST_FIRST: DesignItem<Design>[] = [
{ label: "Дизайн 1", name: "design1", picture: Desgin1 },
{ label: "Дизайн 2", name: "design2", picture: Desgin2 },
{ label: "Дизайн 3", name: "design3", picture: Desgin3 },
{ label: "Дизайн 4", name: "design4", picture: Desgin4 },
{ label: "Дизайн 5", name: "design5", picture: Desgin5 },
const DESIGNG_LIST_FIRST: DesignItem[] = [
{ label: "Дизайн 1", name: "Design1", picture: Desgin1 },
{ label: "Дизайн 2", name: "Design2", picture: Desgin2 },
{ label: "Дизайн 3", name: "Design3", picture: Desgin3 },
{ label: "Дизайн 4", name: "Design4", picture: Desgin4 },
{ label: "Дизайн 5", name: "Design5", picture: Desgin5 },
];
const DESIGNG_LIST_SECOND: DesignItem<Design>[] = [
{ label: "Дизайн 6", name: "design6", picture: Desgin6 },
{ label: "Дизайн 7", name: "design7", picture: Desgin7 },
{ label: "Дизайн 8", name: "design8", picture: Desgin8 },
{ label: "Дизайн 9", name: "design9", picture: Desgin9 },
{ label: "Дизайн 10", name: "design10", picture: Desgin10 },
const DESIGNG_LIST_SECOND: DesignItem[] = [
{ label: "Дизайн 6", name: "Design6", picture: Desgin6 },
{ label: "Дизайн 7", name: "Design7", picture: Desgin7 },
{ label: "Дизайн 8", name: "Design8", picture: Desgin8 },
{ label: "Дизайн 9", name: "Design9", picture: Desgin9 },
{ label: "Дизайн 10", name: "Design10", picture: Desgin10 },
];
interface DesignFillingProps {
@ -129,24 +127,24 @@ export const DesignFilling = ({
}}
>
<Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
<DesignGroup<Theme>
<DesignGroup
title="Со светлым фоном"
value={quiz?.config.design ? "" : quiz?.config.theme || ""}
list={LIGHT_THEME_BUTTONS}
onChange={(name) =>
updateQuiz(quiz?.id, (quiz) => {
quiz.config.design = "";
quiz.config.design = false;
quiz.config.theme = name;
})
}
/>
<DesignGroup<Theme>
<DesignGroup
title="С тёмным фоном"
value={quiz?.config.design ? "" : quiz?.config.theme || ""}
list={DARK_THEME_BUTTONS}
onChange={(name) =>
updateQuiz(quiz?.id, (quiz) => {
quiz.config.design = "";
quiz.config.design = false;
quiz.config.theme = name;
})
}
@ -156,24 +154,24 @@ export const DesignFilling = ({
<Divider sx={{ margin: "20px 0", background: "#7E2AEA33" }} />
</Box>
<Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
<DesignGroup<Design>
<DesignGroup
title="С картинкой"
value={quiz?.config.design || ""}
value={quiz?.config.theme || ""}
list={DESIGNG_LIST_FIRST}
onChange={(name) =>
updateQuiz(quiz?.id, (quiz) => {
quiz.config.theme = "StandardTheme";
quiz.config.design = name;
quiz.config.design = true;
quiz.config.theme = name;
})
}
/>
<DesignGroup<Design>
value={quiz?.config.design || ""}
<DesignGroup
value={quiz?.config.theme || ""}
list={DESIGNG_LIST_SECOND}
onChange={(name) =>
updateQuiz(quiz?.id, (quiz) => {
quiz.config.theme = "StandardTheme";
quiz.config.design = name;
quiz.config.design = true;
quiz.config.theme = name;
})
}
/>

16
src/pages/DesignPage/DesignGroup.tsx
View File

@ -8,26 +8,28 @@ import {
import ColorRingIcon from "./ColorRingIcon";
export type DesignItem<T = string> = {
name: T;
import type { QuizTheme } from "@model/quizSettings";
export type DesignItem = {
name: QuizTheme;
label: string;
colors?: string[];
picture?: string;
};
type DesignGroupProps<T> = {
type DesignGroupProps = {
title?: string;
list: DesignItem<T>[];
list: DesignItem[];
value: string;
onChange: (name: T) => void;
onChange: (name: QuizTheme) => void;
};
export const DesignGroup = <T extends string>({
export const DesignGroup = ({
title,
list,
value,
onChange,
}: DesignGroupProps<T>) => {
}: DesignGroupProps) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(830));

1
src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
View File

@ -13,7 +13,6 @@ import YoutubeEmbedIframe from "./YoutubeEmbedIframe";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
import { notReachable } from "../../utils/notReachable";
import { useUADevice } from "../../utils/hooks/useUADevice";
import { useEffect, useRef, useState } from "react";
import { NameplateLogo } from "@icons/NameplateLogo";
import { modes } from "@utils/themes/Publication/themePublication";

224
src/utils/themes/Publication/themePublication.ts
View File

@ -2,6 +2,8 @@ import { createTheme } from "@mui/material";
import themePublic from "./genericPublication";
import theme from "../generic";
import type { QuizTheme } from "@model/quizSettings";
const StandardTheme = createTheme({
...themePublic,
palette: {
@ -222,6 +224,206 @@ const BlueDarkTheme = createTheme({
},
});
const Design1 = createTheme({
...themePublic,
palette: {
primary: {
main: "#F2B133",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#F2B133",
},
background: {
default: "#FFFCF6",
},
},
});
const Design2 = createTheme({
...themePublic,
palette: {
primary: {
main: "#758E4F",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#758E4F",
},
background: {
default: "#F9FBF1",
},
},
});
const Design3 = createTheme({
...themePublic,
palette: {
primary: {
main: "#07A0C3",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#07A0C3",
},
background: {
default: "#333647",
},
},
});
const Design4 = createTheme({
...themePublic,
palette: {
primary: {
main: "#F2B133",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#F2B133",
},
background: {
default: "#FFFCF6",
},
},
});
const Design5 = createTheme({
...themePublic,
palette: {
primary: {
main: "#07A0C3",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#07A0C3",
},
background: {
default: "#333647",
},
},
});
const Design6 = createTheme({
...themePublic,
palette: {
primary: {
main: "#D34085",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#D34085",
},
background: {
default: "#333647",
},
},
});
const Design8 = createTheme({
...themePublic,
palette: {
primary: {
main: "#D34085",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#D34085",
},
background: {
default: "#333647",
},
},
});
const Design7 = createTheme({
...themePublic,
palette: {
primary: {
main: "#F2B133",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#F2B133",
},
background: {
default: "#FFFCF6",
},
},
});
const Design9 = createTheme({
...themePublic,
palette: {
primary: {
main: "#758E4F",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#758E4F",
},
background: {
default: "#F9FBF1",
},
},
});
const Design10 = createTheme({
...themePublic,
palette: {
primary: {
main: "#07A0C3",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#07A0C3",
},
background: {
default: "#333647",
},
},
});
export const modes = {
StandardTheme: true,
StandardDarkTheme: false,
@ -234,9 +436,19 @@ export const modes = {
PurpleTheme: true,
BlueTheme: true,
BlueDarkTheme: false,
Design1: false,
Design2: false,
Design3: true,
Design4: false,
Design5: false,
Design6: false,
Design7: false,
Design8: false,
Design9: false,
Design10: false,
};
export const themesPublication = {
export const themesPublication: Record<QuizTheme, any> = {
StandardTheme,
StandardDarkTheme,
PinkTheme,
@ -248,4 +460,14 @@ export const themesPublication = {
PurpleTheme,
BlueTheme,
BlueDarkTheme,
Design1,
Design2,
Design3,
Design4,
Design5,
Design6,
Design7,
Design8,
Design9,
Design10,
};