diff --git a/src/components/ConfigurationPage/settings/FontSelect.tsx b/src/components/ConfigurationPage/settings/FontSelect.tsx index 506aa29..ccb0c88 100644 --- a/src/components/ConfigurationPage/settings/FontSelect.tsx +++ b/src/components/ConfigurationPage/settings/FontSelect.tsx @@ -2,6 +2,7 @@ import { Select } from "antd"; const fonts = [ "Alice", + "Play", "Roboto", "Ruslan Display", "Cuprum", diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx index 6e6fe5f..ce8e747 100644 --- a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx +++ b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx @@ -4,10 +4,12 @@ import axios from "axios"; import ColorPicker from "./ColorPicker"; import BaseSettings from "./BaseSettings"; import BooleanPropertyInput from "./properties/BooleanPropertyInput"; -import FontSelect from "./FontSelect"; import { Tabs as AntTabs, Input } from "antd"; import TextPropertyModal from "../widgetproperties/TextPropertyModal"; import { useTranslation } from "react-i18next"; +import { AnimatedFontProperty } from "../widgetproperties/AnimatedFontProperty"; +import AnimatedFontComponent from "../widgetproperties/AnimatedFontComponent"; +import { SingleChoiceProperty } from "../widgetproperties/SingleChoiceProperty"; interface PaymentAlertSettingsProps { id: string; @@ -53,24 +55,17 @@ export default function PaymentAlertSettings({ displayName: "widget-alert-image-show-time", }, { - tab: "header", - name: "nicknameFont", - type: "fontselect", - value: "Roboto", - displayName: "widget-alert-title-font-family", - }, - { - tab: "header", - name: "nicknameFontSize", - value: "60", - displayName: "widget-alert-title-font-size", + tab: "image", + name: "appearance", + type: "custom", + value: "none", }, { tab: "header", - name: "headerColor", - type: "color", - value: "#fb8c2b", - displayName: "widget-alert-title-color", + name: "headerFont", + type: "fontselect", + value: null, + displayName: "widget-alert-title-font-family", }, { tab: "header", @@ -81,24 +76,11 @@ export default function PaymentAlertSettings({ }, { tab: "message", - name: "messageFont", + name: "font", type: "fontselect", - value: "Roboto", + value: null, displayName: "widget-alert-message-font-family", }, - { - tab: "message", - name: "messageFontSize", - value: "25", - displayName: "widget-alert-message-font-size", - }, - { - tab: "message", - name: "messageColor", - type: "color", - value: "#ffffff", - displayName: "widget-alert-message-color", - }, { tab: "voice", name: "voiceTextTemplate", @@ -413,6 +395,8 @@ export default function PaymentAlertSettings({ const tabContent = (alert, selectedTab: string, index: number) => alert?.properties .filter((it) => it.tab === selectedTab) + .filter((it) => it.type !== "fontselect") + .filter((it) => it.type !== "custom") .map((prop) => (
{t(prop.displayName)}
@@ -426,12 +410,6 @@ export default function PaymentAlertSettings({ }} /> )} - {prop.type === "fontselect" && ( - update(prop.name, font, index)} - /> - )} {prop.type === "color" && ( {[ ...tabContent(alert, "image", index), + new SingleChoiceProperty( + "widgetId", + "appearance", + "choice", + alert.properties.find((prop) => prop.name === "appearance") + ?.value, + "appearance", + [ + "bounce", + "flash", + "pulse", + "rubberBand", + "shakeY", + "shakeX", + "headShake", + "swing", + "wobble", + "jello", + "heartBeat", + "backInDown", + "backInLeft", + "backInRight", + "backInUp", + "bounceIn", + "bounceInDown", + "bounceInLeft", + "bounceInRight", + "bounceInUp", + "fadeIn", + "fadeInDown", + "fadeInDownBig", + "fadeInLeft", + "fadeInLeftBig", + "fadeInRight", + "fadeInRightBig", + "fadeInUp", + "fadeInUpBig", + "fadeInTopLeft", + "fadeInTopRight", + "fadeInBottomLeft", + "fadeInBottomRight", + "flip", + "flinInX", + "flipInY", + "lightSpeedInRight", + "lightSpeedInLeft", + "rotateIn", + "rotateInDownLeft", + "rotateInDownRight", + "rotateInUpLeft", + "rotateInUpRight", + "hinge", + "jackInTheBox", + "rollIn", + "zoomIn", + "zoomInDown", + "zoomInLeft", + "zoomInRight", + "zoomInUp", + "slideInDown", + "slideInLeft", + "slideInRight", + "slideInUp", + "none", + ], + ).markup((widgetId, name, value) => + update("appearance", value, index), + ),
{!alert.video && !alert.image && ( <> @@ -592,16 +638,68 @@ export default function PaymentAlertSettings({ { key: "header", label: t("tab-alert-title"), - children: [<>{tabContent(alert, "header", index)}], + children: [ + <> + {[ + ...tabContent(alert, "header", index), + + update("headerFont", value, index), + }} + > + prop.name === "headerFont", + )?.value, + label: "widget-alert-title-font-family", + }) + } + /> + , + ]} + , + ], }, { key: "message", label: t("tab-alert-message"), - children: [<>{tabContent(alert, "message", index)}], + children: [ + <> + {[ + ...tabContent(alert, "message", index), + + update("font", value, index), + }} + > + prop.name === "font") + ?.value, + label: "widget-alert-message-font-family", + }) + } + /> + , + ]} + , + ], }, ]; - // {alertCard(config.get(id)?.defaultAlert)} return ( <> (); + const { t } = useTranslation(); + const { updateConfig } = useContext(WidgetsContext); + + function toggleModal() { + const classList = document.getElementById("root")?.classList; + if (classList?.contains("blured")) { + classList.remove("blured"); + } else { + classList?.add("blured"); + } + setShowModal((old) => !old); + } + + return ( + <> + {property.createFontImport()} +
+ + + +
+
+ Это текст для демонстрации +
+
+
+ + {new FontProperty( + property.widgetId, + "font-family", + "font", + property.value.family, + "button-font", + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.family = value; + }), + ); + })} + {new NumberProperty( + property.widgetId, + "font-size", + "number", + property.value.size, + "button-font-size", + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.size = value; + }), + ); + })} + {new ColorProperty( + property.widgetId, + "color", + "color", + property.value.color, + "button-text-color", + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.color = value; + }), + ); + })} + {new BooleanProperty( + property.widgetId, + "bold", + "boolean", + property.value.weight, + "widget-font-bold", + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.weight = value; + }), + ); + })} + {new BooleanProperty( + property.widgetId, + "italic", + "boolean", + property.value.italic, + "widget-font-italic", + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.italic = value; + }), + ); + })} + {new BooleanProperty( + property.widgetId, + "bold", + "boolean", + property.value.underline, + "widget-font-underline", + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.underline = value; + }), + ); + })} + + ), + }, + { + label: t("widget-font-shadowtablabel"), + key: "shadow", + children: ( + <> + {new NumberProperty( + property.widgetId, + "shadow-offset-x", + "number", + property.value.shadowOffsetX, + "button-shadow-offset-x", + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.shadowOffsetX = value; + }), + ); + })} + {new NumberProperty( + property.widgetId, + "shadow-offset-y", + "number", + property.value.shadowOffsetY, + "button-shadow-offset-y", + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.shadowOffsetY = value; + }), + ); + })} + {new NumberProperty( + property.widgetId, + "shadow-size", + "number", + property.value.shadowWidth, + "button-shadow-size", + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.shadowWidth = value; + }), + ); + })} + {new ColorProperty( + property.widgetId, + "shadow-color", + "color", + property.value.shadowColor, + "button-shadow-color", + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.shadowColor = value; + }), + ); + })} + + ), + }, + { + label: t("widget-font-animationtablabel"), + key: "animation", + children: ( + <> + {new SingleChoiceProperty( + property.widgetId, + "font-animation", + "choice", + property.value.animation, + "widget-font-animation", + animations, + ).markup((p1, p2, value) => { + updateConfig( + property.widgetId, + property.name, + produce(property.value, (draft) => { + draft.animation = value; + }), + ); + })} + + ), + }, + ]} + /> + +
+ + ); +} diff --git a/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx b/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx index 69e6b8e..05a8f8f 100644 --- a/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx +++ b/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.tsx @@ -1,34 +1,7 @@ -import { ReactNode, useContext, useState } from "react"; +import { ReactNode } from "react"; import { DefaultWidgetProperty } from "./WidgetProperty"; -import { Tabs as AntTabs, Modal } from "antd"; -import { useTranslation } from "react-i18next"; -import classes from "./AnimatedFontProperty.module.css"; -import { ColorProperty } from "./ColorProperty"; -import { FontProperty } from "./FontProperty"; -import { NumberProperty } from "./NumberProperty"; -import { WidgetsContext } from "../WidgetsContext"; -import { produce } from "immer"; import FontImport from "../../FontImport/FontImport"; -import { BooleanProperty } from "./BooleanProperty"; -import { SingleChoiceProperty } from "./SingleChoiceProperty"; - -const animationType = ["entire", "by words", "by symbols"]; - -const animations = [ - "none", - "bounce", - "flash", - "pulse", - "rubberBand", - "shakeX", - "shakeY", - "headShake", - "swing", - "tada", - "wobble", - "jello", - "heartBeat", -]; +import AnimatedFontComponent from "./AnimatedFontComponent"; export class AnimatedFontProperty extends DefaultWidgetProperty { private _label: string; @@ -82,7 +55,10 @@ export class AnimatedFontProperty extends DefaultWidgetProperty { if (this.value.animation === "none") { return; } - return `animate__animated animate__infinite animate__slower animate__${this.value.animation}`; + if (this.value.animation === "pulse") { + return `animate__animated animate__infinite animate__${this.value.animation}`; + } + return `animate__animated animate__infinite animate__slow animate__${this.value.animation}`; } createFontImport() { @@ -101,257 +77,7 @@ export class AnimatedFontProperty extends DefaultWidgetProperty { }; } - button: React.FC = () => { - const [showModal, setShowModal] = useState(); - const { t } = useTranslation(); - const { updateConfig } = useContext(WidgetsContext); - - function toggleModal() { - const classList = document.getElementById("root")?.classList; - if (classList?.contains("blured")) { - classList.remove("blured"); - } else { - classList?.add("blured"); - } - setShowModal((old) => !old); - } - - return ( - <> - {this.createFontImport()} -
- - - -
-
- Это текст для демонстрации -
-
-
- - {new FontProperty( - this.widgetId, - "font-family", - "font", - this.value.family, - "button-font", - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.family = value; - }), - ); - })} - {new NumberProperty( - this.widgetId, - "font-size", - "number", - this.value.size, - "button-font-size", - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.size = value; - }), - ); - })} - {new ColorProperty( - this.widgetId, - "color", - "color", - this.value.color, - "button-text-color", - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.color = value; - }), - ); - })} - {new BooleanProperty( - this.widgetId, - "bold", - "boolean", - this.value.weight, - "widget-font-bold", - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.weight = value; - }), - ); - })} - {new BooleanProperty( - this.widgetId, - "italic", - "boolean", - this.value.italic, - "widget-font-italic", - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.italic = value; - }), - ); - })} - {new BooleanProperty( - this.widgetId, - "bold", - "boolean", - this.value.underline, - "widget-font-underline", - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.underline = value; - }), - ); - })} - - ), - }, - { - label: t("widget-font-shadowtablabel"), - key: "shadow", - children: ( - <> - {new NumberProperty( - this.widgetId, - "shadow-offset-x", - "number", - this.value.shadowOffsetX, - "button-shadow-offset-x", - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.shadowOffsetX = value; - }), - ); - })} - {new NumberProperty( - this.widgetId, - "shadow-offset-y", - "number", - this.value.shadowOffsetY, - "button-shadow-offset-y", - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.shadowOffsetY = value; - }), - ); - })} - {new NumberProperty( - this.widgetId, - "shadow-size", - "number", - this.value.shadowWidth, - "button-shadow-size", - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.shadowWidth = value; - }), - ); - })} - {new ColorProperty( - this.widgetId, - "shadow-color", - "color", - this.value.shadowColor, - "button-shadow-color", - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.shadowColor = value; - }), - ); - })} - - ), - }, - { - label: t("widget-font-animationtablabel"), - key: "animation", - children: ( - <> - {new SingleChoiceProperty( - this.widgetId, - "font-animation", - "choice", - this.value.animation, - "widget-font-animation", - animations, - ).markup((p1, p2, value) => { - updateConfig( - this.widgetId, - this.name, - produce(this.value, (draft) => { - draft.animation = value; - }), - ); - })} - - ), - }, - ]} - /> - -
- - ); - }; - markup(): ReactNode { - return <>{this.button({})}; + return ; } } diff --git a/src/components/PaymentAlerts/sections/AlertImage/AlertImage.tsx b/src/components/PaymentAlerts/sections/AlertImage/AlertImage.tsx index a9982d4..712913e 100644 --- a/src/components/PaymentAlerts/sections/AlertImage/AlertImage.tsx +++ b/src/components/PaymentAlerts/sections/AlertImage/AlertImage.tsx @@ -11,10 +11,12 @@ export default function AlertImage({ const [image, setImage] = useState(null); const [video, setVideo] = useState(null); const [style, setStyle] = useState({}); + const [className, setClassName] = useState(""); const videoRef = useRef(null); useEffect(() => { alertController.addAlertImageRenderer({ + setClassName: setClassName, setVideo: setVideo, setImage: setImage, setStyle: setStyle, @@ -36,7 +38,7 @@ export default function AlertImage({