add AnimatedFontProperty

OpenDonationAssistant · Jun 24, 2024 · 33f795e · 33f795e
1 parent 95b2c6a
commit 33f795e
Show file tree

Hide file tree

Showing 23 changed files with 601 additions and 147 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,12 +19,14 @@
     "@types/uuid": "^9.0.7",
     "@types/video.js": "^7.3.56",
     "ahooks": "^3.8.0",
+    "animate.css": "^4.1.1",
     "antd": "^5.17.4",
     "axios": "^1.5.1",
     "bootstrap": "^5.3.1",
     "howler": "^2.2.3",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
+    "immer": "^10.1.1",
     "pino": "^8.16.1",
     "rc-slider": "^10.5.0",
     "react": "^18.2.0",

diff --git a/public/opacity.png b/public/opacity.png
diff --git a/src/components/ConfigurationPage/css/Widget.css b/src/components/ConfigurationPage/css/Widget.css
@@ -7,20 +7,19 @@
   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5);
 }
 
-.widget-settings .ant-tabs-top > .ant-tabs-nav::before {
+.ant-tabs-top > .ant-tabs-nav::before {
   border-bottom: 1px solid #674afd;
 }
 
-.widget-settings .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
+.ant-tabs-card.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
   background-color: #684aff;
   border: 1px solid #684aff;
 }
 
-.widget-settings .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
+.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
   border: 1px solid #684aff;
 }
 
-.widget-settings
   .ant-tabs-card
   > .ant-tabs-nav
   .ant-tabs-tab-active
@@ -73,6 +72,7 @@
   vertical-align: middle;
   font-weight: 600;
   font-size: 24px;
+  font-family: Play;
   margin-left: 10px;
 }
 
@@ -221,3 +221,7 @@
   box-shadow: rgba(0, 0, 0, 0.15) 0 3px 9px 0;
   transform: translateY(-2px);
 }
+
+.ant-modal-content {
+  min-width: 800px;
+}
diff --git a/src/components/ConfigurationPage/css/WidgetSettings.css b/src/components/ConfigurationPage/css/WidgetSettings.css
@@ -3,15 +3,18 @@
 :root {
   --oda-main-border: 1px solid #674afd;
   --oda-main-text-color: white;
-  --oda-secondary-text-color: rgba(220, 220, 220, 0.9);
   --oda-main-font-family: Play;
+  --oda-control-background-color: #684aff;
+  --oda-secondary-text-color: rgba(220, 220, 220, 0.9);
+  --oda-label-font: 1rem var(--oda-main-font-family);
+  --oda-label-color: #FFFFFFDA;
   --oda-label-background-color: #151a33;
   --oda-btn-background-color: #151a33;
 }
 
 .oda-btn-default {
   color: var(--oda-main-text-color);
-  background-color: #151a33;
+  background-color: var(--oda-btn-background-color);
   border: var(--oda-main-border);
   font-family: var(--oda-main-font-family);
   font-size: 14px;
@@ -43,8 +46,9 @@
 
 .widget-settings-item {
   display: flex;
-  position: relative;
   justify-content: space-between;
+  align-items: center;
+  position: relative;
   margin-top: 10px;
   min-height: 45px;
   flex-wrap: wrap;
@@ -56,7 +60,6 @@
 }
 
 .widget-settings-name {
-  position: absolute;
   color: white;
   display: block;
   transition: 0.2s;
@@ -101,7 +104,7 @@
   top: 1px;
 }
 
-.widget-settings .ant-color-picker-trigger {
+.ant-color-picker-trigger {
   background-color: #684aff;
   width: 100%;
   justify-content: flex-start;
@@ -117,7 +120,7 @@
   border-radius: 2px;
 }
 
-.widget-settings .ant-tabs .ant-tabs-tab {
+.ant-tabs .ant-tabs-tab {
   color: #7885bd;
   font-family: "Play";
   font-weight: 900;
@@ -142,22 +145,11 @@
   border-radius: 3px;
 }
 
-.widget-settings .ant-input-number {
-  background-color: #684aff;
-  width: 25%;
-  position: absolute;
-  right: 0;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.9);
-  border-radius: 3px;
-}
-
-.widget-settings .ant-input-number .ant-input-number-handler {
+.ant-input-number .ant-input-number-handler {
   display: none;
 }
 
-.widget-settings .ant-input-number .ant-input-number-handler-wrap {
+.ant-input-number .ant-input-number-handler-wrap {
   display: none;
 }
 
@@ -199,7 +191,7 @@
 
 .widget-settings-value {
   font-family: inherit;
-  width: 100%;
+  width: 25%;
   outline: 0;
   font-size: 1rem;
   font-family: "Martian Mono", monospace;
@@ -286,17 +278,17 @@ textarea.widget-settings-value {
   margin-bottom: 10px;
 }
 
-.payment-alerts-previews-item .ant-tabs {
+.ant-tabs {
   margin-top: 5px;
   flex: 1 1 auto;
   margin-bottom: 10px;
 }
 
-.payment-alerts-previews-item .ant-tabs .ant-tabs-nav {
+.ant-tabs .ant-tabs-nav {
   padding-left: 5px;
 }
 
-.payment-alerts-previews-item .ant-tabs .ant-tabs-content-holder {
+.ant-tabs .ant-tabs-content-holder {
   padding-left: 10px;
   padding-right: 10px;
 }
@@ -424,23 +416,33 @@ div.payment-alert-image-preview {
   width: 100%;
 }
 
-.widget-settings .ant-collapse {
+.ant-collapse {
   background-color: #151a33;
   font-family: Play;
   border: 1px solid #674afd;
   margin-bottom: 20px;
 }
 
-.widget-settings .ant-collapse .ant-collapse-content {
+.ant-collapse .ant-collapse-content {
   background-color: #2b3566;
 }
 
-.widget-settings .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+/* .ant-collapse .ant-collapse-item { */
+/*   background-color: var(--oda-label-background-color); */
+/*   border-radius: 10px; */
+/* } */
+
+.ant-collapse > .ant-collapse-item > .ant-collapse-header {
   font-family: Play;
   font-weight: 900;
   color: white;
 }
 
+.ant-collapse > .ant-collapse-item > .ant-collapse-header:first {
+  border-bottom-right-radius:0;
+  border-bottom-left-radius:0;
+}
+
 .configuration-container .ant-table {
   border: var(--oda-main-border);
 }

diff --git a/src/components/ConfigurationPage/settings/ColorPicker.module.css b/src/components/ConfigurationPage/settings/ColorPicker.module.css
@@ -1,5 +1,5 @@
 .container {
   width: 25%;
-  position: absolute;
-  right: 0;
+  /* position: absolute; */
+  /* right: 0; */
 }
diff --git a/src/components/ConfigurationPage/settings/ColorPicker.tsx b/src/components/ConfigurationPage/settings/ColorPicker.tsx
@@ -1,18 +1,17 @@
-import
-{ ColorPicker as AntColorPicker }
-from
-"antd"
-;
+import { ColorPicker as AntColorPicker } from "antd";
 import classes from "./ColorPicker.module.css";
 
 export default function ColorPicker({ value, onChange }) {
   return (
     <>
       <div className={`${classes.container}`}>
-      <AntColorPicker value={value} showText
-              onChange={(newValue) => {
-                onChange(newValue.toRgbString());
-              }}/>
+        <AntColorPicker
+          value={value}
+          showText
+          onChange={(newValue) => {
+            onChange(newValue.toRgbString());
+          }}
+        />
       </div>
     </>
   );

diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
@@ -385,10 +385,7 @@ export default function PaymentAlertSettings({
       )}
       {!alert.image && !alert.video && (
         <div className={`payment-alert-image-preview`}>
-          <img
-            className="alert-no-image"
-            src={`/icons/picture.png`}
-          />
+          <img className="alert-no-image" src={`/icons/picture.png`} />
         </div>
       )}
       <AntTabs type="card" items={tabs(alert, index)} />
@@ -436,12 +433,10 @@ export default function PaymentAlertSettings({
             />
           )}
           {prop.type === "color" && (
-            <div className="color-container">
-              <ColorPicker
-                value={prop.value}
-                onChange={(value) => update(prop.name, value, index)}
-              />
-            </div>
+            <ColorPicker
+              value={prop.value}
+              onChange={(value) => update(prop.name, value, index)}
+            />
           )}
           {prop.type === "text" && (
             <>
@@ -478,7 +473,9 @@ export default function PaymentAlertSettings({
           {[
             ...tabContent(alert, "trigger", index),
             <div key={`${index}_trigger`} className="widget-settings-item">
-              <div className="widget-settings-name">{t("widget-alert-amount")}</div>
+              <div className="widget-settings-name">
+                {t("widget-alert-amount")}
+              </div>
               <Input
                 size="small"
                 className="widget-settings-value"

diff --git a/src/components/ConfigurationPage/settings/properties/BooleanPropertyInput.module.css b/src/components/ConfigurationPage/settings/properties/BooleanPropertyInput.module.css
@@ -1,6 +1,5 @@
 .checkboxwrapper {
   text-align: right;
-  width: 100%;
   margin-top: 10px;
   height: 36px;
 }

diff --git a/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.module.css b/src/components/ConfigurationPage/widgetproperties/AnimatedFontProperty.module.css
@@ -0,0 +1,37 @@
+.button {
+  position: absolute;
+  right: 0;
+  width: 25%;
+}
+
+.addanimationbuttoncontainer{
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+  margin-bottom: 10px;
+}
+
+.demo{
+  margin-bottom: 10px;
+  text-align: center;
+  padding: 2px;
+  border-radius: 4px;
+  min-height: 40px;
+  width: 100%;
+  z-index: 2;
+  position: relative;
+}
+
+.background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+}
+
+.democontainer {
+  position: relative;
+  border: 3px solid #674afd;
+  box-shadow: inset 0 0 5px 0px rgba(0, 0, 0, 0.6);
+}