fix saving properties with multiple widgets of same type, add backgro…

…und colors settings to donaters-top widget
OpenDonationAssistant · Jan 26, 2024 · 805fb79 · 805fb79
1 parent 71482f7
commit 805fb79
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 17 deletions.
diff --git a/src/components/ConfigurationPage/ConfigurationPage.tsx b/src/components/ConfigurationPage/ConfigurationPage.tsx
@@ -75,10 +75,11 @@ export default function ConfigurationPage({}: {}) {
       const settings = defaultSettings[it.type];
       const mergedSettings = settings.properties.map((prop) => {
 				const value = it.config?.properties?.find((sameprop) => sameprop.name === prop.name)?.value;
+        const updatedProp = structuredClone(prop);
 				if (value != null){
-				  prop.value = value;
+				  updatedProp.value = value;
 				}
-				return prop;
+				return updatedProp;
       });
 			if (it.config) {
 				it.config.properties = mergedSettings;

diff --git a/src/components/ConfigurationPage/WidgetConfiguration.tsx b/src/components/ConfigurationPage/WidgetConfiguration.tsx
@@ -80,7 +80,6 @@ export default function WidgetConfiguration({
   }
 
   function saveSettings() {
-    console.log(config.get(id));
     return axios.patch(
       `${process.env.REACT_APP_WIDGET_API_ENDPOINT}/widgets/${id}`,
       {

diff --git a/src/components/ConfigurationPage/WidgetSettings.ts b/src/components/ConfigurationPage/WidgetSettings.ts
@@ -35,7 +35,7 @@ const defaultSettings = {
         name: "font",
         type: "fontselect",
         value: "Roboto",
-        displayName: "Шрифт",
+        displayName: "Шрифт списка",
       },
       {
         name: "titleFontSize",
@@ -47,19 +47,31 @@ const defaultSettings = {
         name: "fontSize",
         type: "number",
         value: "24",
-        displayName: "Размер шрифта",
+        displayName: "Размер шрифта списка",
       },
       {
         name: "titleColor",
         type: "color",
         value: "#ffffff",
         displayName: "Цвет заголовка",
       },
+      {
+        name: "titleBackgroundColor",
+        type: "color",
+        value: "#000000",
+        displayName: "Цвет фона заголовка",
+      },
       {
         name: "color",
         type: "color",
         value: "#ffffff",
-        displayName: "Цвет",
+        displayName: "Цвет списка",
+      },
+      {
+        name: "backgroundColor",
+        type: "color",
+        value: "#000000",
+        displayName: "Цвет фона списка",
       },
       {
         name: "titleAlphaChannel",

diff --git a/src/components/DonatersTopList/DonatersTopList.tsx b/src/components/DonatersTopList/DonatersTopList.tsx
@@ -15,6 +15,23 @@ const overflowHiddenForRootElement = (
   />
 );
 
+const fullHeight = (
+  <style
+    dangerouslySetInnerHTML={{
+      __html: `html, body { height: 100%; }`,
+    }}
+  />
+);
+
+function hexToRgb(hex: string) {
+  var bigint = parseInt(hex.substring(1), 16);
+  var r = (bigint >> 16) & 255;
+  var g = (bigint >> 8) & 255;
+  var b = bigint & 255;
+
+  return { r, g, b };
+}
+
 export default function DonatersTopList({}: {}) {
   const [donaters, setDonaters] = useState(new Map());
   const { recipientId, settings, conf, widgetId } = useLoaderData();
@@ -57,23 +74,33 @@ export default function DonatersTopList({}: {}) {
   }, [recipientId]);
 
   const type = findSetting(settings, "type", "All");
-  const titleFontSize = findSetting(settings, "titleFontSize", "24px");
-  const fontSize = findSetting(settings, "fontSize", "24px");
-  const titleFont = findSetting(settings, "titleFont", "Roboto");
-  const font = findSetting(settings, "font", "Roboto");
-  const titleColor = findSetting(settings, "titleColor", "white");
-  const color = findSetting(settings, "color", "white");
+
   const title = findSetting(settings, "title", "Донатеры");
-  const alphaChannel = findSetting(settings, "alphaChannel", "1.0");
+  const titleColor = findSetting(settings, "titleColor", "black");
+  const titleBackgroundColor = hexToRgb(
+    findSetting(settings, "titleBackgroundColor", "white"),
+  );
   const titleAlphaChannel = findSetting(settings, "titleAlphaChannel", "1.0");
+  const titleFont = findSetting(settings, "titleFont", "Roboto");
+  const titleFontSize = findSetting(settings, "titleFontSize", "24px");
+
+  const color = findSetting(settings, "color", "black");
+  const backgroundColor = hexToRgb(
+    findSetting(settings, "backgroundColor", "white"),
+  );
+  const alphaChannel = findSetting(settings, "alphaChannel", "1.0");
+  const font = findSetting(settings, "font", "Roboto");
+  const fontSize = findSetting(settings, "fontSize", "24px");
+
+  console.log(`color: ${JSON.stringify(backgroundColor)}`);
+  console.log(`title color: ${JSON.stringify(titleBackgroundColor)}`);
 
   // todo rename to listStyle - it's not only text style
   const textStyle = {
     fontSize: fontSize ? fontSize + "px" : "unset",
     lineHeight: fontSize ? fontSize + "px" : "unset",
     fontFamily: font ? font : "unset",
     color: color,
-    backgroundColor: `rgba(0, 0, 0, ${alphaChannel})`,
   };
   textStyle.display = layout === "vertical" ? "block" : "inline";
   textStyle.marginLeft = layout === "vertical" ? "0px" : "20px";
@@ -82,15 +109,20 @@ export default function DonatersTopList({}: {}) {
   donatersTopStyle.fontSize = titleFontSize + "px";
   donatersTopStyle.fontFamily = titleFont;
   donatersTopStyle.color = titleColor;
-  donatersTopStyle.backgroundColor = `rgba(0, 0, 0, ${titleAlphaChannel})`;
-
-  console.log(donatersTopStyle);
+  donatersTopStyle.backgroundColor = `rgba(${titleBackgroundColor.r}, ${titleBackgroundColor.g}, ${titleBackgroundColor.b}, ${titleAlphaChannel})`;
 
   return (
     <>
       <FontImport font={font} />
       <FontImport font={titleFont} />
       {overflowHiddenForRootElement}
+      {fullHeight}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `#root { background-color: rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${alphaChannel}); }`,
+        }}
+      />
+
       {"All" === type && (
         <div className="donaters-list" style={textStyle}>
           {donaters &&