add layouts to donaters-list-widget, add input field to color picker

src/components/ConfigurationPage/WidgetSettings.ts

@@ -15,28 +15,70 @@ const defaultSettings = {
       },
       {
         name: "topsize",
-        type: "string",
+        type: "number",
         value: "3",
-        displayName: "Кол-во в топе",
+        displayName: "Кол-во донатеров",
+      },
+      {
+        name: "title",
+        type: "text",
+        value: "Донатеры",
+        displayName: "Заголовок",
+      },
+      {
+        name: "titleFont",
+        type: "fontselect",
+        value: "Roboto",
+        displayName: "Шрифт заголовка",
       },
       {
         name: "font",
         type: "fontselect",
         value: "Roboto",
         displayName: "Шрифт",
       },
+      {
+        name: "titleFontSize",
+        type: "number",
+        value: "24",
+        displayName: "Размер шрифта заголовка",
+      },
       {
         name: "fontSize",
-        type: "string",
+        type: "number",
         value: "24",
         displayName: "Размер шрифта",
       },
+      {
+        name: "titleColor",
+        type: "color",
+        value: "#ffffff",
+        displayName: "Цвет заголовка",
+      },
       {
         name: "color",
         type: "color",
         value: "#ffffff",
         displayName: "Цвет",
       },
+      {
+        name: "titleAlphaChannel",
+        type: "number",
+        value: "1.0",
+        displayName: "Прозрачность заголовка",
+      },
+      {
+        name: "alphaChannel",
+        type: "number",
+        value: "1.0",
+        displayName: "Прозрачность списка",
+      },
+      {
+        name: "layout",
+        type: "custom",
+        value: "vertical",
+        displayName: "Компоновка",
+      },
     ],
   },
   "donation-timer": {

src/components/ConfigurationPage/css/WidgetSettings.css

@@ -141,8 +141,40 @@ textarea.widget-settings-value {
 	margin-right: 25px;
 }
 
-.widget-settings-item .react-colorful {
+.color-value:hover {
+	cursor:pointer;
+}
+
+.color-picker-popup {
 	position: absolute;
-	right: 74px;
+	right: 70px;
 	z-index: 2;
+	background-color: rgba(0,0,0,1.0);
+	padding: 2px;
+	border: 1px solid #684aff;
+}
+
+.color-picker-popup .react-colorful {
+	width: initial;
+}
+
+.color-picker-value {
+	border-radius: 5px;
+	margin-top: 5px;
+}
+
+.widget-settings-radiobutton img {
+	width: 400px;
+	margin-bottom: 20px;
+	border: 1px solid #684aff;
+	margin-left: 5px;
+}
+
+.widget-settings-radiobutton img:hover {
+	cursor: pointer;
+}
+
+.widget-settings-radiocontainer {
+	display: flex;
+	flex-direction: column;
 }

src/components/ConfigurationPage/settings/ColorPicker.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { HexColorPicker } from "react-colorful";
 
-export default function ColorPicker({value, onChange}) {
+export default function ColorPicker({ value, onChange }) {
   const [isOpen, toggle] = useState(false);
   return (
     <>
@@ -10,12 +10,24 @@ export default function ColorPicker({value, onChange}) {
         style={{ backgroundColor: value }}
         onClick={() => toggle(!isOpen)}
       />
-      {isOpen && (<HexColorPicker
-        color={value}
-        onChange={(newValue) => {
-          onChange(newValue);
-        }}
-      />)}
+      {isOpen && (
+        <>
+          <div className="color-picker-popup">
+            <HexColorPicker
+              color={value}
+              onChange={(newValue) => {
+                onChange(newValue);
+                toggle(!isOpen);
+              }}
+            />
+            <input
+              className="color-picker-value"
+              value={value}
+              onChange={(e) => onChange(e.target.value)}
+            />
+          </div>
+        </>
+      )}
     </>
   );
 }

src/components/ConfigurationPage/settings/DonatersTopListSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { ChangeEvent, useContext } from "react";
 import { WidgetsContext } from "../WidgetsContext";
 import ColorPicker from "./ColorPicker";
 
@@ -70,7 +70,7 @@ export default function DonatersTopListSettings({
       {config.get(id)?.properties?.map((prop) => (
         <div key={prop.name} className="widget-settings-item">
           <div className="widget-settings-name">{prop.displayName}</div>
-          {(!prop.type || prop.type == "string") && (prop.type != "custom") && (
+          {(!prop.type || prop.type == "string") && prop.type != "custom" && (
             <input
               value={prop.value}
               className="widget-settings-value"
@@ -94,26 +94,81 @@ export default function DonatersTopListSettings({
               onChange={(value) => update(prop.name, value)}
             />
           )}
-					{prop.name === "type" && (
+          {prop.name === "type" && (
             <select
               value={prop.value}
               className="widget-settings-value select"
               onChange={(e) => update(prop.name, e.target.value)}
             >
               <option key="All">All</option>
               <option key="Top">Top</option>
+              <option key="Last">Last</option>
             </select>
-					)}
-					{prop.name === "period" && (
+          )}
+          {prop.name === "period" && (
             <select
               value={prop.value}
               className="widget-settings-value select"
               onChange={(e) => update(prop.name, e.target.value)}
             >
               <option key="month">month</option>
-              <option key="month">day</option>
+              <option key="day">day</option>
             </select>
-					)}
+          )}
+          {prop.name === "layout" && (
+            <>
+              <div className="widget-settings-radiocontainer">
+                <label className="widget-settings-radiobutton">
+                  <input
+                    title="vertical"
+                    type="radio"
+                    value="vertical"
+                    checked={prop.value === "vertical"}
+                    onChange={(e) => update(prop.name, e.target.value)}
+                  />
+                  <img
+                    title="vertical"
+                    src={`/icons/vertical.jpg`}
+                    onClick={() => update(prop.name, "vertical")}
+                  />
+                </label>
+                <label className="widget-settings-radiobutton">
+                  <input
+                    title="horizontal"
+                    type="radio"
+                    value="horizontal"
+                    checked={prop.value === "horizontal"}
+                    onChange={(e) => update(prop.name, e.target.value)}
+                  />
+                  <img
+                    title="horizontal"
+                    src={`/icons/horizontal.jpg`}
+                    onClick={() => update(prop.name, "horizontal")}
+                  />
+                </label>
+              </div>
+            </>
+          )}
+          {prop.type === "text" && (
+            <>
+              <textarea
+                style={{ width: "100%" }}
+                className="widget-settings-value"
+                value={prop.value}
+                onChange={(e) => update(prop.name, e.target.value)}
+              />
+            </>
+          )}
+          {prop.type === "number" && (
+            <>
+              <input
+                value={prop.value}
+                type="number"
+                className="widget-settings-value"
+                onChange={(e) => update(prop.name, e.target.value)}
+              />
+            </>
+          )}
         </div>
       ))}
     </>

src/components/DonatersTopList/DonatersTopList.css

@@ -8,6 +8,11 @@
 
 .donaters-top {
 	text-align: center;
+	display: inline;
+}
+
+.donaters-title {
+	text-align: center;
 }
 
 .donaters-list .donater {

src/components/DonatersTopList/DonatersTopList.tsx

@@ -22,6 +22,7 @@ export default function DonatersTopList({}: {}) {
 
   const period = findSetting(settings, "period", "month");
   const topsize = findSetting(settings, "topsize", 3);
+  const layout = findSetting(settings, "layout", "vertical");
 
   function updateDonaters() {
     axios
@@ -32,9 +33,12 @@ export default function DonatersTopList({}: {}) {
       .then((data) => {
         const map = new Map();
         Object.keys(data).forEach((key) => map.set(key, data[key]));
-        const sortedMap = new Map(
-          [...map.entries()].sort((a, b) => b[1].amount - a[1].amount),
-        );
+        const sortedMap =
+          type === "Last"
+            ? map
+            : new Map(
+                [...map.entries()].sort((a, b) => b[1].amount - a[1].amount),
+              );
         setDonaters(sortedMap);
       });
   }
@@ -49,20 +53,41 @@ export default function DonatersTopList({}: {}) {
   }, [recipientId]);
 
   const type = findSetting(settings, "type", "All");
+  const titleFontSize = findSetting(settings, "titleFontSize", "24px");
+  console.log(`title font size: ${titleFontSize}`);
   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 titleAlphaChannel = findSetting(settings, "titleAlphaChannel", "1.0");
+
+  // 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";
+
+  const donatersTopStyle = layout === "vertical" ? {} : { display: "inline" };
+  donatersTopStyle.fontSize = titleFontSize + "px";
+  donatersTopStyle.fontFamily = titleFont;
+  donatersTopStyle.color = titleColor;
+	donatersTopStyle.backgroundColor = `rgba(0, 0, 0, ${titleAlphaChannel})`;
+
+  console.log(donatersTopStyle);
 
   return (
     <>
       <FontImport font={font} />
-			{overflowHiddenForRootElement}
+      <FontImport font={titleFont} />
+      {overflowHiddenForRootElement}
       {"All" === type && (
         <div className="donaters-list" style={textStyle}>
           {donaters &&
@@ -77,11 +102,29 @@ export default function DonatersTopList({}: {}) {
       )}
       {"Top" === type && (
         <>
-          <div style={textStyle} className="donaters-top">
-            Топ {topsize} {period === "day" && <span>дня</span>}
-            {period === "month" && <span>месяца</span>}
+          <div style={donatersTopStyle} className="donaters-title">
+            {title}
+          </div>
+          <div className="donaters-top">
+            {donaters &&
+              donaters.size > 0 &&
+              Array.from(donaters.keys())
+                .slice(0, topsize)
+                .map((donater) => (
+                  <div key={donater} style={textStyle} className="donater">
+                    {donater} - {donaters.get(donater).amount}{" "}
+                    {donaters.get(donater).currency}{" "}
+                  </div>
+                ))}
+          </div>
+        </>
+      )}
+      {"Last" === type && (
+        <>
+          <div style={donatersTopStyle} className="donaters-title">
+            {title}
           </div>
-          <div style={textStyle} className="donaters-top">
+          <div className="donaters-top">
             {donaters &&
               donaters.size > 0 &&
               Array.from(donaters.keys())