From 43a539a46580b7bb4e06198c0bf1380a5631ef23 Mon Sep 17 00:00:00 2001 From: Anna Date: Tue, 8 Feb 2022 19:26:11 -0500 Subject: [PATCH] feat: turn settings tabs into a sidebar --- ChatTwo/Ui/Settings.cs | 63 +++++++++++++++++------- ChatTwo/Ui/SettingsTabs/Display.cs | 2 +- ChatTwo/Ui/SettingsTabs/Fonts.cs | 10 ++-- ChatTwo/Ui/SettingsTabs/Miscellaneous.cs | 6 +-- ChatTwo/Ui/SettingsTabs/Tabs.cs | 4 +- ChatTwo/Util/ImGuiUtil.cs | 12 +++++ 6 files changed, 69 insertions(+), 28 deletions(-) diff --git a/ChatTwo/Ui/Settings.cs b/ChatTwo/Ui/Settings.cs index 9b36426..f2e757e 100755 --- a/ChatTwo/Ui/Settings.cs +++ b/ChatTwo/Ui/Settings.cs @@ -15,6 +15,8 @@ internal sealed class Settings : IUiComponent { private Configuration Mutable { get; } private List Tabs { get; } + private int _currentTab; + internal Settings(PluginUi ui) { this.Ui = ui; this.Mutable = new Configuration(); @@ -50,7 +52,7 @@ internal sealed class Settings : IUiComponent { return; } - ImGui.SetNextWindowSize(new Vector2(500, 650) * ImGuiHelpers.GlobalScale, ImGuiCond.FirstUseEver); + ImGui.SetNextWindowSize(new Vector2(475, 600) * ImGuiHelpers.GlobalScale, ImGuiCond.FirstUseEver); var name = string.Format(Language.Settings_Title, this.Ui.Plugin.Name); if (!ImGui.Begin($"{name}###chat2-settings", ref this.Ui.SettingsVisible)) { @@ -62,28 +64,55 @@ internal sealed class Settings : IUiComponent { this.Initialise(); } - if (ImGui.BeginTabBar("settings-tabs")) { - foreach (var settingsTab in this.Tabs) { - if (!ImGui.BeginTabItem(settingsTab.Name)) { - continue; - } + if (ImGui.BeginTable("##chat2-settings-table", 2)) { + ImGui.TableSetupColumn("tab", ImGuiTableColumnFlags.WidthFixed); + ImGui.TableSetupColumn("settings", ImGuiTableColumnFlags.WidthStretch); - var height = ImGui.GetContentRegionAvail().Y - - ImGui.GetStyle().FramePadding.Y * 2 - - ImGui.GetStyle().ItemSpacing.Y - - ImGui.GetStyle().ItemInnerSpacing.Y * 2 - - ImGui.CalcTextSize("A").Y; - if (ImGui.BeginChild("##chat2-settings", new Vector2(-1, height))) { - settingsTab.Draw(); - ImGui.EndChild(); - } + ImGui.TableNextColumn(); - ImGui.EndTabItem(); + for (var i = 0; i < this.Tabs.Count; i++) { + if (ImGui.Selectable($"{this.Tabs[i].Name}###tab-{i}", this._currentTab == i)) { + this._currentTab = i; + } } - ImGui.EndTabBar(); + ImGui.TableNextColumn(); + + var height = ImGui.GetContentRegionAvail().Y + - ImGui.GetStyle().FramePadding.Y * 2 + - ImGui.GetStyle().ItemSpacing.Y + - ImGui.GetStyle().ItemInnerSpacing.Y * 2 + - ImGui.CalcTextSize("A").Y; + if (ImGui.BeginChild("##chat2-settings", new Vector2(-1, height))) { + this.Tabs[this._currentTab].Draw(); + ImGui.EndChild(); + } + + ImGui.EndTable(); } + // if (ImGui.BeginTabBar("settings-tabs")) { + // foreach (var settingsTab in this.Tabs) { + // if (!ImGui.BeginTabItem(settingsTab.Name)) { + // continue; + // } + // + // var height = ImGui.GetContentRegionAvail().Y + // - ImGui.GetStyle().FramePadding.Y * 2 + // - ImGui.GetStyle().ItemSpacing.Y + // - ImGui.GetStyle().ItemInnerSpacing.Y * 2 + // - ImGui.CalcTextSize("A").Y; + // if (ImGui.BeginChild("##chat2-settings", new Vector2(-1, height))) { + // settingsTab.Draw(); + // ImGui.EndChild(); + // } + // + // ImGui.EndTabItem(); + // } + // + // ImGui.EndTabBar(); + // } + ImGui.Separator(); var save = ImGui.Button(Language.Settings_Save); diff --git a/ChatTwo/Ui/SettingsTabs/Display.cs b/ChatTwo/Ui/SettingsTabs/Display.cs index 15214a7..716726a 100755 --- a/ChatTwo/Ui/SettingsTabs/Display.cs +++ b/ChatTwo/Ui/SettingsTabs/Display.cs @@ -67,7 +67,7 @@ internal sealed class Display : ISettingsTab { ImGuiUtil.OptionCheckbox(ref this.Mutable.ShowNoviceNetwork, Language.Options_ShowNoviceNetwork_Name, Language.Options_ShowNoviceNetwork_Description); ImGui.Spacing(); - if (ImGui.DragFloat(Language.Options_WindowOpacity_Name, ref this.Mutable.WindowAlpha, .0025f, 0f, 1f, $"{this.Mutable.WindowAlpha * 100f:N2}%%")) { + if (ImGuiUtil.DragFloatVertical(Language.Options_WindowOpacity_Name, ref this.Mutable.WindowAlpha, .0025f, 0f, 1f, $"{this.Mutable.WindowAlpha * 100f:N2}%%")) { switch (this.Mutable.WindowAlpha) { case > 1f and <= 100f: this.Mutable.WindowAlpha /= 100f; diff --git a/ChatTwo/Ui/SettingsTabs/Fonts.cs b/ChatTwo/Ui/SettingsTabs/Fonts.cs index ecea48d..7287a59 100755 --- a/ChatTwo/Ui/SettingsTabs/Fonts.cs +++ b/ChatTwo/Ui/SettingsTabs/Fonts.cs @@ -28,7 +28,7 @@ public class Fonts : ISettingsTab { ImGui.PushTextWrapPos(); - if (ImGui.BeginCombo(Language.Options_Font_Name, this.Mutable.GlobalFont)) { + if (ImGuiUtil.BeginComboVertical(Language.Options_Font_Name, this.Mutable.GlobalFont)) { foreach (var font in Ui.Fonts.GlobalFonts) { if (ImGui.Selectable(font.Name, this.Mutable.GlobalFont == font.Name)) { this.Mutable.GlobalFont = font.Name; @@ -58,7 +58,7 @@ public class Fonts : ISettingsTab { ImGuiUtil.WarningText(Language.Options_Font_Warning); ImGui.Spacing(); - if (ImGui.BeginCombo(Language.Options_JapaneseFont_Name, this.Mutable.JapaneseFont)) { + if (ImGuiUtil.BeginComboVertical(Language.Options_JapaneseFont_Name, this.Mutable.JapaneseFont)) { foreach (var (name, _) in Ui.Fonts.JapaneseFonts) { if (ImGui.Selectable(name, this.Mutable.JapaneseFont == name)) { this.Mutable.JapaneseFont = name; @@ -90,9 +90,9 @@ public class Fonts : ISettingsTab { const float speed = .0125f; const float min = 8f; const float max = 36f; - ImGui.DragFloat(Language.Options_FontSize_Name, ref this.Mutable.FontSize, speed, min, max, $"{this.Mutable.FontSize:N1}"); - ImGui.DragFloat(Language.Options_JapaneseFontSize_Name, ref this.Mutable.JapaneseFontSize, speed, min, max, $"{this.Mutable.JapaneseFontSize:N1}"); - ImGui.DragFloat(Language.Options_SymbolsFontSize_Name, ref this.Mutable.SymbolsFontSize, speed, min, max, $"{this.Mutable.SymbolsFontSize:N1}"); + ImGuiUtil.DragFloatVertical(Language.Options_FontSize_Name, ref this.Mutable.FontSize, speed, min, max, $"{this.Mutable.FontSize:N1}"); + ImGuiUtil.DragFloatVertical(Language.Options_JapaneseFontSize_Name, ref this.Mutable.JapaneseFontSize, speed, min, max, $"{this.Mutable.JapaneseFontSize:N1}"); + ImGuiUtil.DragFloatVertical(Language.Options_SymbolsFontSize_Name, ref this.Mutable.SymbolsFontSize, speed, min, max, $"{this.Mutable.SymbolsFontSize:N1}"); ImGuiUtil.HelpText(Language.Options_SymbolsFontSize_Description); ImGui.PopTextWrapPos(); diff --git a/ChatTwo/Ui/SettingsTabs/Miscellaneous.cs b/ChatTwo/Ui/SettingsTabs/Miscellaneous.cs index 24d8935..250332f 100755 --- a/ChatTwo/Ui/SettingsTabs/Miscellaneous.cs +++ b/ChatTwo/Ui/SettingsTabs/Miscellaneous.cs @@ -14,7 +14,7 @@ internal sealed class Miscellaneous : ISettingsTab { } public void Draw() { - if (ImGui.BeginCombo(Language.Options_Language_Name, this.Mutable.LanguageOverride.Name())) { + if (ImGuiUtil.BeginComboVertical(Language.Options_Language_Name, this.Mutable.LanguageOverride.Name())) { foreach (var language in Enum.GetValues()) { if (ImGui.Selectable(language.Name())) { this.Mutable.LanguageOverride = language; @@ -27,7 +27,7 @@ internal sealed class Miscellaneous : ISettingsTab { ImGuiUtil.HelpText(string.Format(Language.Options_Language_Description, Plugin.PluginName)); ImGui.Spacing(); - if (ImGui.BeginCombo(Language.Options_CommandHelpSide_Name, this.Mutable.CommandHelpSide.Name())) { + if (ImGuiUtil.BeginComboVertical(Language.Options_CommandHelpSide_Name, this.Mutable.CommandHelpSide.Name())) { foreach (var side in Enum.GetValues()) { if (ImGui.Selectable(side.Name(), this.Mutable.CommandHelpSide == side)) { this.Mutable.CommandHelpSide = side; @@ -40,7 +40,7 @@ internal sealed class Miscellaneous : ISettingsTab { ImGuiUtil.HelpText(string.Format(Language.Options_CommandHelpSide_Description, Plugin.PluginName)); ImGui.Spacing(); - if (ImGui.BeginCombo(Language.Options_KeybindMode_Name, this.Mutable.KeybindMode.Name())) { + if (ImGuiUtil.BeginComboVertical(Language.Options_KeybindMode_Name, this.Mutable.KeybindMode.Name())) { foreach (var mode in Enum.GetValues()) { if (ImGui.Selectable(mode.Name(), this.Mutable.KeybindMode == mode)) { this.Mutable.KeybindMode = mode; diff --git a/ChatTwo/Ui/SettingsTabs/Tabs.cs b/ChatTwo/Ui/SettingsTabs/Tabs.cs index a1a177f..ce31cad 100755 --- a/ChatTwo/Ui/SettingsTabs/Tabs.cs +++ b/ChatTwo/Ui/SettingsTabs/Tabs.cs @@ -76,7 +76,7 @@ internal sealed class Tabs : ISettingsTab { ImGui.InputText(Language.Options_Tabs_Name, ref tab.Name, 512, ImGuiInputTextFlags.EnterReturnsTrue); ImGui.Checkbox(Language.Options_Tabs_ShowTimestamps, ref tab.DisplayTimestamp); - if (ImGui.BeginCombo(Language.Options_Tabs_UnreadMode, tab.UnreadMode.Name())) { + if (ImGuiUtil.BeginComboVertical(Language.Options_Tabs_UnreadMode, tab.UnreadMode.Name())) { foreach (var mode in Enum.GetValues()) { if (ImGui.Selectable(mode.Name(), tab.UnreadMode == mode)) { tab.UnreadMode = mode; @@ -93,7 +93,7 @@ internal sealed class Tabs : ISettingsTab { } var input = tab.Channel?.ToChatType().Name() ?? Language.Options_Tabs_NoInputChannel; - if (ImGui.BeginCombo(Language.Options_Tabs_InputChannel, input)) { + if (ImGuiUtil.BeginComboVertical(Language.Options_Tabs_InputChannel, input)) { if (ImGui.Selectable(Language.Options_Tabs_NoInputChannel, tab.Channel == null)) { tab.Channel = null; } diff --git a/ChatTwo/Util/ImGuiUtil.cs b/ChatTwo/Util/ImGuiUtil.cs index ebcdaae..15bb881 100755 --- a/ChatTwo/Util/ImGuiUtil.cs +++ b/ChatTwo/Util/ImGuiUtil.cs @@ -143,4 +143,16 @@ internal static class ImGuiUtil { ImGui.PopStyleColor(); } } + + internal static bool BeginComboVertical(string label, string previewValue, ImGuiComboFlags flags = ImGuiComboFlags.None) { + ImGui.TextUnformatted(label); + ImGui.SetNextItemWidth(-1); + return ImGui.BeginCombo($"##{label}", previewValue, flags); + } + + internal static bool DragFloatVertical(string label, ref float value, float vSpeed = 1.0f, float vMin = float.MinValue, float vMax = float.MaxValue, string? format = null, ImGuiSliderFlags flags = ImGuiSliderFlags.None) { + ImGui.TextUnformatted(label); + ImGui.SetNextItemWidth(-1); + return ImGui.DragFloat($"##{label}", ref value, vSpeed, vMin, vMax, format, flags); + } }