[nonmodular] makes the prefs tricolor select into color select buttons instead of text boxes (#8499)

* weh

* woops

* yee again
This commit is contained in:
Seris02
2021-10-01 00:13:57 +01:00
committed by GitHub
parent d761232fe3
commit e8d97c3d47
2 changed files with 71 additions and 41 deletions
+33
View File
@@ -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
@@ -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>
);
};