From e8d97c3d470efb33b6bfb7be307cc14e9da49a9d Mon Sep 17 00:00:00 2001
From: Seris02 <49109742+Seris02@users.noreply.github.com>
Date: Fri, 1 Oct 2021 07:13:57 +0800
Subject: [PATCH] [nonmodular] makes the prefs tricolor select into color
 select buttons instead of text boxes (#8499)

* weh

* woops

* yee again
---
 code/modules/client/preferences.dm            | 33 ++++++++
 .../preferences/features/base.tsx             | 79 +++++++++----------
 2 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/code/modules/client/preferences.dm b/code/modules/client/preferences.dm
index 5d2edea8e8d..77961df2410 100644
--- a/code/modules/client/preferences.dm
+++ b/code/modules/client/preferences.dm
@@ -297,6 +297,39 @@ GLOBAL_LIST_EMPTY(preferences_datums)
 				var/datum/loadout_manager/tgui = new(usr)
 				tgui.ui_interact(usr)
 			return TRUE
+		if ("set_tricolor_preference")
+			var/requested_preference_key = params["preference"]
+			var/index_key = params["value"]
+
+			var/datum/preference/requested_preference = GLOB.preference_entries_by_key[requested_preference_key]
+			if (isnull(requested_preference))
+				return FALSE
+
+			if (!istype(requested_preference, /datum/preference/tri_color))
+				return FALSE
+
+			var/default_value_list = read_preference(requested_preference.type)
+			if (!islist(default_value_list))
+				return FALSE
+			var/default_value = default_value_list[index_key]
+
+			// Yielding
+			var/new_color = input(
+				usr,
+				"Select new color",
+				null,
+				default_value || COLOR_WHITE,
+			) as color | null
+
+			if (!new_color)
+				return FALSE
+
+			default_value_list[index_key] = new_color
+
+			if (!update_preference(requested_preference, default_value_list))
+				return FALSE
+
+			return TRUE
 		//SKYRAT EDIT END
 
 
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx
index 8cb6c5ae6b7..2dfdeacad4d 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/base.tsx
@@ -4,7 +4,7 @@ import { ComponentType, createComponentVNode, InfernoNode } from "inferno";
 import { VNodeFlags } from "inferno-vnode-flags";
 import { sendAct, useBackend, useLocalState } from "../../../../backend";
 // SKYRAT EDIT
-import { Box, Button, Dropdown, NumberInput, Stack, TextArea, Input, ColorBox } from "../../../../components";
+import { Box, Button, Dropdown, NumberInput, Stack, TextArea, Input } from "../../../../components";
 // SKYRAT EDIT END
 import { createSetPreference, PreferencesMenuData } from "../../data";
 import { ServerPreferencesFetcher } from "../../ServerPreferencesFetcher";
@@ -357,49 +357,46 @@ export const FeatureShortTextInput = (
 };
 
 export const FeatureTriColorInput = (props: FeatureValueProps<string[]>) => {
-  const setColorValue = (color, index) => {
-    const currentValue = [...props.value];
-    currentValue[index] = color;
-    props.handleSetValue(currentValue);
+  const buttonFromValue = (index) => {
+    return (
+      <Stack.Item>
+        <Button onClick={() => {
+          props.act("set_tricolor_preference", {
+            preference: props.featureId,
+            value: index+1,
+          });
+        }}>
+          <Stack align="center" fill>
+            <Stack.Item>
+              <Box style={{
+                background: props.value[index].startsWith("#")
+                  ? props.value[index]
+                  : `#${props.value[index]}`,
+                border: "2px solid white",
+                "box-sizing": "content-box",
+                height: "11px",
+                width: "11px",
+                ...(props.shrink ? {
+                  "margin": "1px",
+                } : {}),
+              }} />
+            </Stack.Item>
+
+            {!props.shrink && (
+              <Stack.Item>
+                Change
+              </Stack.Item>
+            )}
+          </Stack>
+        </Button>
+      </Stack.Item>
+    );
   };
   return (
     <Stack align="center" fill>
-      <Stack.Item grow>
-        <Input
-          width="100%"
-          value={props.value[0]}
-          onChange={(_, value) => setColorValue(value, 0)}
-        />
-      </Stack.Item>
-      <Stack.Item>
-        <ColorBox
-          color={props.value[0]}
-        />
-      </Stack.Item>
-      <Stack.Item grow>
-        <Input
-          width="100%"
-          value={props.value[1]}
-          onChange={(_, value) => setColorValue(value, 1)}
-        />
-      </Stack.Item>
-      <Stack.Item>
-        <ColorBox
-          color={props.value[1]}
-        />
-      </Stack.Item>
-      <Stack.Item grow>
-        <Input
-          width="100%"
-          value={props.value[2]}
-          onChange={(_, value) => setColorValue(value, 2)}
-        />
-      </Stack.Item>
-      <Stack.Item>
-        <ColorBox
-          color={props.value[2]}
-        />
-      </Stack.Item>
+      {buttonFromValue(0)}
+      {buttonFromValue(1)}
+      {buttonFromValue(2)}
     </Stack>
   );
 };