From 284478954e3e034aaaff9720d837a714258cdf5a Mon Sep 17 00:00:00 2001 From: Letter N <24603524+LetterN@users.noreply.github.com> Date: Tue, 14 Jan 2025 11:17:51 +0800 Subject: [PATCH] update input() style (#2038) --- OpenDreamClient/Interface/DreamStylesheet.cs | 70 ++++++++++++++++++- .../Interface/Prompts/ListPrompt.cs | 9 ++- .../Interface/Prompts/TextPrompt.cs | 2 + TestGame/code.dm | 48 +++++++++++++ 4 files changed, 124 insertions(+), 5 deletions(-) diff --git a/OpenDreamClient/Interface/DreamStylesheet.cs b/OpenDreamClient/Interface/DreamStylesheet.cs index 3bf0de0a3c..629169934f 100644 --- a/OpenDreamClient/Interface/DreamStylesheet.cs +++ b/OpenDreamClient/Interface/DreamStylesheet.cs @@ -169,7 +169,15 @@ public static Stylesheet Make() { // LineEdit Element() // background color - .Prop(LineEdit.StylePropertyStyleBox, new StyleBoxFlat{ BackgroundColor = Color.FromHex("#D3B5B5"), BorderThickness = new Thickness(1), BorderColor = Color.FromHex("#abadb3")}) + .Prop(LineEdit.StylePropertyStyleBox, new StyleBoxFlat { + BackgroundColor = Color.White, + BorderThickness = new Thickness(2, 2, 1, 1), + BorderColor = Color.FromHex("#abadb3"), + ContentMarginLeftOverride = 2 + 2, + ContentMarginTopOverride = 2 + 2, + ContentMarginRightOverride = 2 + 1, + ContentMarginBottomOverride = 2 + 1, + }) // default font color .Prop("font-color", Color.Black) .Prop("cursor-color", Color.Black), @@ -182,9 +190,36 @@ public static Stylesheet Make() { Element().Pseudo(LineEdit.StylePseudoClassPlaceholder) .Prop("font-color", Color.FromHex("#7d7d7d")), + // TextEdit + Element() + // default font color + .Prop("font-color", Color.Black) + .Prop("cursor-color", Color.Black), + // ItemList selected item Element() - .Prop(ItemList.StylePropertySelectedItemBackground, new StyleBoxFlat { BackgroundColor = Color.Blue }), + .Prop(ItemList.StylePropertyBackground, new StyleBoxFlat { + BackgroundColor = Color.White, + BorderThickness = new Thickness(2, 2, 1, 1), // pretend shadow effect + BorderColor = Color.FromHex("#abadb3") + }) + .Prop(ItemList.StylePropertyItemBackground, new StyleBoxFlat { + ContentMarginLeftOverride = 4, + ContentMarginRightOverride = 8, + Padding = new Thickness(2, 2, 1, 1) + }) + .Prop(ItemList.StylePropertySelectedItemBackground, new StyleBoxFlat { + BackgroundColor = Color.FromHex("#0000aa99"), + // this is INTENDED do not make the overrides a padding + ContentMarginLeftOverride = 4, + ContentMarginRightOverride = 8, + Padding = new Thickness(2, 2, 1, 1) + }) + .Prop(ItemList.StylePropertyDisabledItemBackground, new StyleBoxFlat { + ContentMarginLeftOverride = 4, + ContentMarginRightOverride = 8, + Padding = new Thickness(2, 2, 1, 1) + }), // TabContainer Element() @@ -206,6 +241,37 @@ public static Stylesheet Make() { .Prop(Slider.StylePropertyForeground, new StyleBoxFlat { BackgroundColor = Color.LightGray, BorderThickness = new Thickness(1), BorderColor = Color.Black}) .Prop(Slider.StylePropertyGrabber, new StyleBoxFlat { BackgroundColor = Color.Transparent, BorderThickness = new Thickness(1), BorderColor = Color.Black, ContentMarginLeftOverride=10, ContentMarginRightOverride=10}) .Prop(Slider.StylePropertyFill, new StyleBoxFlat { BackgroundColor = Color.Transparent, BorderThickness = new Thickness(0), BorderColor = Color.Black}), + + // that thing on the top, some might say "topbar" + Element() + .Prop(PanelContainer.StylePropertyPanel, new StyleBoxFlat { + Padding = new Thickness(1) + }), + + new StyleRule(new SelectorChild( + new SelectorElement(typeof(MenuBar.MenuTopButton), null, null, null), + new SelectorElement(typeof(Label), null, null, null)), + [ + new StyleProperty("font", notoSansFont10) + ]), + + Element() + .Prop(PanelContainer.StylePropertyPanel, new StyleBoxFlat { + ContentMarginLeftOverride = 3, + ContentMarginRightOverride = 3, + ContentMarginTopOverride = 2, + ContentMarginBottomOverride = 2, + }), + + Element() + .Pseudo(MenuBar.MenuTopButton.StylePseudoClassHover) + .Prop(PanelContainer.StylePropertyPanel, new StyleBoxFlat { + BackgroundColor = Color.FromHex("#bfbfbf"), + ContentMarginLeftOverride = 3, + ContentMarginRightOverride = 3, + ContentMarginTopOverride = 2, + ContentMarginBottomOverride = 2, + }), }); } } diff --git a/OpenDreamClient/Interface/Prompts/ListPrompt.cs b/OpenDreamClient/Interface/Prompts/ListPrompt.cs index 8f6b63cf33..e9c2b04943 100644 --- a/OpenDreamClient/Interface/Prompts/ListPrompt.cs +++ b/OpenDreamClient/Interface/Prompts/ListPrompt.cs @@ -10,10 +10,13 @@ internal sealed class ListPrompt : InputWindow { public ListPrompt(string title, string message, string defaultValue, bool canCancel, string[] values, Action? onClose) : base(title, message, canCancel, onClose) { - _itemList = new(); + _itemList = new ItemList(); + // don't make it as long as the width + // really this should check for fontHeight not hacky const 24 + MinHeight = Math.Clamp(100 + (24 * values.Length), MinHeight, MinWidth); - bool foundDefault = false; - foreach (string value in values) { + var foundDefault = false; + foreach (var value in values) { ItemList.Item item = new(_itemList) { Text = value }; diff --git a/OpenDreamClient/Interface/Prompts/TextPrompt.cs b/OpenDreamClient/Interface/Prompts/TextPrompt.cs index 67da9fd3b0..8f189ee3b3 100644 --- a/OpenDreamClient/Interface/Prompts/TextPrompt.cs +++ b/OpenDreamClient/Interface/Prompts/TextPrompt.cs @@ -8,6 +8,8 @@ internal sealed class TextPrompt : InputWindow { public TextPrompt(string title, string message, string defaultValue, bool canCancel, Action? onClose) : base(title, message, canCancel, onClose) { + MinHeight = 100; + _textEdit = new LineEdit { Text = defaultValue, VerticalAlignment = VAlignment.Top diff --git a/TestGame/code.dm b/TestGame/code.dm index c0b366a806..c756394932 100644 --- a/TestGame/code.dm +++ b/TestGame/code.dm @@ -278,6 +278,54 @@ client.show_popup_menus = !client.show_popup_menus src << "Popups are now [client.show_popup_menus ? "enabled" : "disabled"]" + // input() test + verb/text_test() + set category = "Input Test" + src << input("Input test: text") as text|null + + // todo: implement + // verb/password_test() + // set category = "Input Test" + // src << input("Input test: password") as password|null + + verb/multiline_test() + set category = "Input Test" + src << input("Input test: message") as message|null + + verb/command_test() + set category = "Input Test" + src << input("Input test: command_text") as command_text|null + + verb/num_test() + set category = "Input Test" + src << input("Input test: num") as num|null + + verb/icon_test() + set category = "Input Test" + src << input("Input test: icon") as icon|null + + verb/sound_test() + set category = "Input Test" + src << input("Input test: sound") as sound|null + + verb/file_test() + set category = "Input Test" + src << input("Input test: file") as file|null + + // todo: implement + // verb/key_test() + // set category = "Input Test" + // src << input("Input test: key") as key|null + + verb/color_test() + set category = "Input Test" + src << input("Input test: color") as color|null + + verb/list_test() + set category = "Input Test" + src << input("Input test: list") as null|anything in list("option 1", "option 2", "option 3", "option 4", "option 5") + + /mob/Stat() if (statpanel("Status")) stat("tick_usage", world.tick_usage)