draft of roulette settings page

OpenDonationAssistant · Feb 11, 2024 · b72c352 · b72c352
1 parent cab09ec
commit b72c352
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 19 deletions.
diff --git a/src/components/ConfigurationPage/css/WidgetButton.css b/src/components/ConfigurationPage/css/WidgetButton.css
@@ -15,13 +15,11 @@
 /* CSS */
 .widget-button {
   border: 1px solid #151a33;
-  margin-left: 10px;
   background-color: #151a33;
-  color: #6b7bbc;
+  color: #7885bd;
   border-radius: 4px;
   box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px 0;
   box-sizing: border-box;
-  color: #fff;
   cursor: pointer;
   font-family:
     "Akzidenz Grotesk BQ Medium",
@@ -66,4 +64,5 @@
   border: 1px solid red;
   background: #e62143;
   color: white;
+  margin-left: 10px;
 }
diff --git a/src/pages/Reel/RouletteWidgetSettings.module.css b/src/pages/Reel/RouletteWidgetSettings.module.css
@@ -5,14 +5,18 @@
   align-items: end;
 }
 
-.addoptionsbutton {
-  border: none;
-  background-color: initial;
-  color: #684aff;
-}
-
 .addbuttoncontainer {
-  width: 50%;
+  width: 60%;
   text-align: center;
-  padding-top: 10px;
+  padding-top: 20px;
+}
+
+.option {
+  width: 60%;
+  display: flex;
+  align-items: center;
+}
+
+.option .widget-settings-value {
+  width: unset;
 }
diff --git a/src/pages/Reel/RouletteWidgetSettings.tsx b/src/pages/Reel/RouletteWidgetSettings.tsx
@@ -38,6 +38,16 @@ export default function RouletteWidgetSettings({
     });
   }, [config]);
 
+  function updateOption(index: number, value: string) {
+    const updated = optionList.toSpliced(index, 1, value);
+    update("optionList", updated);
+  }
+
+  function removeOption(index: number) {
+    const updated = optionList.toSpliced(index, 1);
+    update("optionList", updated);
+  }
+
   return (
     <>
       <BaseSettings id={id} onChange={onChange} />
@@ -46,16 +56,36 @@ export default function RouletteWidgetSettings({
         <div className={classes.optionscontainer}>
           {optionList &&
             optionList.map((option, number) => (
-              <textarea
-                key={number}
-                value={option}
-                className="widget-settings-value"
-              />
+              <>
+                <div className={classes.option}>
+                  <textarea
+                    key={number}
+                    value={option}
+                    className="widget-settings-value"
+                    style={{ width: "100%" }}
+                    onChange={(e) => updateOption(number, e.target.value)}
+                  />
+                  <button className="widget-button" onClick={() => {
+                    removeOption(number);
+                  }}>
+                    <span className="material-symbols-sharp">delete</span>
+                  </button>
+                </div>
+              </>
             ))}
           <div className={classes.addbuttoncontainer}>
-          <button className={classes.addoptionsbutton}>
-            <span className="material-symbols-sharp">add</span>
-          </button>
+            <button
+              className="widget-button"
+              style={{ width: "100%" }}
+              onClick={() => {
+                setOptionList((oldList) => {
+                  oldList.push("");
+                  return structuredClone(oldList);
+                });
+              }}
+            >
+              Добавить
+            </button>
           </div>
         </div>
       </div>