[MIRROR] Improve tgui say experience with extra control prefs (#9230)

Co-authored-by: ShadowLarkens <shadowlarkens@gmail.com>
Co-authored-by: CHOMPStation2 <chompsation2@gmail.com>

code/modules/client/preferences/types/ui.dm

@@ -35,3 +35,27 @@
 
 /datum/preference/toggle/tgui_say_light/apply_to_client(client/client, value)
 	client.tgui_say?.load()
+
+/datum/preference/toggle/tgui_say_emotes
+	category = PREFERENCE_CATEGORY_GAME_PREFERENCES
+	savefile_key = "tgui_say_emotes"
+	default_value = TRUE
+	savefile_identifier = PREFERENCE_PLAYER
+
+/datum/preference/toggle/tgui_say_emotes/apply_to_client(client/client, value)
+	client.tgui_say?.load()
+
+/datum/preference/numeric/tgui_say_height
+	category = PREFERENCE_CATEGORY_GAME_PREFERENCES
+	savefile_key = "tgui_say_height"
+	savefile_identifier = PREFERENCE_PLAYER
+
+	minimum = 1
+	maximum = 5
+	step = 1
+
+/datum/preference/numeric/tgui_say_height/create_default_value()
+	return 1
+
+/datum/preference/numeric/tgui_say_height/apply_to_client(client/client, value)
+	client.tgui_say?.load()

code/modules/mob/typing_indicator.dm

@@ -31,7 +31,7 @@
 	set name = "Me verb"
 	set category = "IC.TGUI Say" //CHOMPEdit
 
-	if(client?.prefs?.read_preference(/datum/preference/toggle/tgui_say))
+	if(client?.prefs?.read_preference(/datum/preference/toggle/tgui_say) && client?.prefs?.read_preference(/datum/preference/toggle/tgui_say_emotes))
 		winset(src, null, "command=[client.tgui_say_create_open_command(ME_CHANNEL)]")
 		return
 
@@ -65,7 +65,7 @@
 	set category = "IC.TGUI Say" //CHOMPEdit
 	set desc = "Emote to nearby people (and your pred/prey)"
 
-	if(client?.prefs?.read_preference(/datum/preference/toggle/tgui_say))
+	if(client?.prefs?.read_preference(/datum/preference/toggle/tgui_say) && client?.prefs?.read_preference(/datum/preference/toggle/tgui_say_emotes))
 		winset(src, null, "command=[client.tgui_say_create_open_command(SUBTLE_CHANNEL)]")
 		return
 

code/modules/tgui_input/say_modal/modal.dm

@@ -64,10 +64,12 @@
 /datum/tgui_say/proc/load()
 	window_open = FALSE
 
-	winset(client, "tgui_say", "pos=410,400;size=360,30;is-visible=0;")
+	var/minimumHeight = client?.prefs?.read_preference(/datum/preference/numeric/tgui_say_height) || 1
+	winset(client, "tgui_say", "pos=410,400;size=360,[(minimumHeight * 20) + 10];is-visible=0;")
 
 	window.send_message("props", list(
 		lightMode = client?.prefs?.read_preference(/datum/preference/toggle/tgui_say_light),
+		minimumHeight = minimumHeight,
 		maxLength = max_length,
 	))
 

tgui/packages/tgui-say/TguiSay.tsx

@@ -1,4 +1,5 @@
 import { KEY } from 'common/keys';
+import { clamp } from 'common/math';
 import { BooleanLike } from 'common/react';
 import { Component, createRef, RefObject } from 'react';
 import { dragStartHandler } from 'tgui/drag';
@@ -19,12 +20,13 @@ type ByondOpen = {
 
 type ByondProps = {
   maxLength: number;
+  minimumHeight: number;
   lightMode: BooleanLike;
 };
 
 type State = {
   buttonContent: string | number;
-  size: WINDOW_SIZES;
+  size: number;
 };
 
 const CHANNEL_REGEX = /^:\w\s|^,b\s/;
@@ -35,6 +37,7 @@ export class TguiSay extends Component<{}, State> {
   private currentPrefix: keyof typeof RADIO_PREFIXES | null;
   private innerRef: RefObject<HTMLTextAreaElement>;
   private lightMode: boolean;
+  private minimumHeight: number;
   private maxLength: number;
   private messages: typeof byondMessages;
   state: State;
@@ -47,6 +50,7 @@ export class TguiSay extends Component<{}, State> {
     this.currentPrefix = null;
     this.innerRef = createRef();
     this.lightMode = false;
+    this.minimumHeight = 1;
     this.maxLength = 1024;
     this.messages = byondMessages;
     this.state = {
@@ -299,8 +303,10 @@ export class TguiSay extends Component<{}, State> {
   };
 
   handleProps = (data: ByondProps) => {
-    const { maxLength, lightMode } = data;
+    const { maxLength, minimumHeight, lightMode } = data;
     this.maxLength = maxLength;
+    this.minimumHeight = minimumHeight;
+    this.setSize();
     this.lightMode = !!lightMode;
   };
 
@@ -313,7 +319,7 @@ export class TguiSay extends Component<{}, State> {
   }
 
   setSize(length = 0) {
-    let newSize: WINDOW_SIZES;
+    let newSize: number;
 
     const currentValue = this.innerRef.current?.value;
 
@@ -327,6 +333,9 @@ export class TguiSay extends Component<{}, State> {
       newSize = WINDOW_SIZES.small;
     }
 
+    newSize = clamp(newSize, this.minimumHeight * 20 + 10, WINDOW_SIZES.max);
+    console.log(newSize);
+
     if (this.state.size !== newSize) {
       this.setState({ size: newSize });
       windowSet(newSize);

tgui/packages/tgui-say/constants.ts

@@ -3,6 +3,7 @@ export enum WINDOW_SIZES {
   small = 30,
   medium = 50,
   large = 70,
+  max = 130,
   width = 360,
 }
 

tgui/packages/tgui-say/helpers.ts

@@ -25,8 +25,9 @@ export const windowClose = () => {
 /**
  * Modifies the window size.
  */
-export const windowSet = (size = WINDOW_SIZES.small) => {
+export const windowSet = (size: number = WINDOW_SIZES.small) => {
   let sizeStr = `${WINDOW_SIZES.width}x${size}`;
+  console.log(sizeStr);
 
   Byond.winset('tgui_say.browser', {
     size: sizeStr,
@@ -41,6 +42,5 @@ export const windowSet = (size = WINDOW_SIZES.small) => {
 const setWindowVisibility = (visible: boolean) => {
   Byond.winset('tgui_say', {
     'is-visible': visible,
-    size: `${WINDOW_SIZES.width}x${WINDOW_SIZES.small}`,
   });
 };

tgui/packages/tgui-say/styles/window.scss

@@ -27,3 +27,15 @@
 .window-70 {
   height: 70px;
 }
+
+.window-90 {
+  height: 90px;
+}
+
+.window-110 {
+  height: 110px;
+}
+
+.window-130 {
+  height: 130px;
+}

tgui/packages/tgui/interfaces/PreferencesMenu/preferences/features/game_preferences/ui.tsx

@@ -1,4 +1,9 @@
-import { CheckboxInput, FeatureToggle } from '../base';
+import {
+  CheckboxInput,
+  FeatureNumeric,
+  FeatureSliderInput,
+  FeatureToggle,
+} from '../base';
 
 export const BROWSER_STYLED: FeatureToggle = {
   name: 'Use Fake NanoUI Browser Style',
@@ -27,3 +32,17 @@ export const TGUI_SAY_LIGHT_MODE: FeatureToggle = {
   description: 'Sets TGUI Say to use a light mode.',
   component: CheckboxInput,
 };
+
+export const tgui_say_emotes: FeatureToggle = {
+  name: 'Say: Use TGUI For Emotes',
+  category: 'UI',
+  description: 'Sets whether to use TGUI Say for emotes.',
+  component: CheckboxInput,
+};
+
+export const tgui_say_height: FeatureNumeric = {
+  name: 'Say: TGUI Height (Lines)',
+  category: 'UI',
+  description: 'Amount of lines to show in the tgui say input.',
+  component: FeatureSliderInput,
+};