-
Notifications
You must be signed in to change notification settings - Fork 14
refactor(ui): introduce semantic color system #26
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
7d94a34
0e2a3ef
955d42e
4accc1f
663aa3f
f82a139
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,16 @@ | ||
| #include "MainWindow.h" | ||
| #include "Rendering/Frame/RenderingManager.h" | ||
| #include "Services/ClipboardService.h" | ||
| #include "UI/Core/Theme.h" | ||
| #include <cmath> | ||
|
Check warning on line 5 in ImguiMapEditor/Presentation/MainWindow.cpp
|
||
| #include <imgui.h> | ||
| #include <spdlog/spdlog.h> | ||
|
|
||
| namespace MapEditor { | ||
| namespace Presentation { | ||
|
|
||
| namespace SC = SemanticColors; | ||
|
|
||
| MainWindow::MainWindow(Services::ViewSettings &view_settings, | ||
| Services::ClientVersionRegistry &version_registry, | ||
| UI::MapPanel &map_panel, | ||
|
|
@@ -96,20 +100,20 @@ | |
| if (is_active) { | ||
| // Pulsate between Green and Yellow for Active + Modified | ||
| float t = (sinf((float)ImGui::GetTime() * 5.0f) * 0.5f) + 0.5f; | ||
| ImVec4 color_green = ImVec4(0.0f, 0.5f, 0.0f, 0.7f); | ||
| ImVec4 color_yellow = ImVec4(1.0f, 0.8f, 0.0f, 0.7f); | ||
| ImVec4 color_green = ImVec4(SC::SAVED.x, SC::SAVED.y, SC::SAVED.z, 0.7f); | ||
| ImVec4 color_yellow = ImVec4(SC::MODIFIED.x, SC::MODIFIED.y, SC::MODIFIED.z, 0.7f); | ||
|
|
||
| tab_color.x = color_green.x + (color_yellow.x - color_green.x) * t; | ||
| tab_color.y = color_green.y + (color_yellow.y - color_green.y) * t; | ||
| tab_color.z = color_green.z + (color_yellow.z - color_green.z) * t; | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🟡 Hardcoded Alpha: While the color components are now semantic, the alpha value |
||
| tab_color.w = 0.7f; | ||
| } else { | ||
| // Static yellow/gold for Modified | ||
| tab_color = ImVec4(0.8f, 0.65f, 0.0f, 0.7f); | ||
| tab_color = ImVec4(SC::GOLD.x, SC::GOLD.y, SC::GOLD.z, 0.7f); | ||
| } | ||
| } else { | ||
| // Static green for Active | ||
| tab_color = ImVec4(0.0f, 0.5f, 0.0f, 0.7f); | ||
| tab_color = ImVec4(SC::SAVED.x, SC::SAVED.y, SC::SAVED.z, 0.7f); | ||
| } | ||
|
|
||
| ImGui::PushStyleColor(ImGuiCol_Tab, tab_color); | ||
|
|
@@ -145,7 +149,7 @@ | |
| } else { | ||
| spdlog::error("Error: RenderState not found for session {}", | ||
| static_cast<int>(session->getID())); | ||
| ImGui::TextColored(ImVec4(1, 0, 0, 1), | ||
| ImGui::TextColored(SC::DANGER, | ||
| "Error: RenderState not found for session %d", | ||
| static_cast<int>(session->getID())); | ||
| } | ||
|
|
||
Large diffs are not rendered by default.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| #include "UI/Dialogs/ClientConfiguration/ClientConfigurationDialog.h" | ||
| #include "UI/Core/Theme.h" | ||
| #include "UI/Dialogs/ClientConfiguration/ClientPropertyEditor.h" | ||
| #include "Presentation/Dialogs/ClientConfigurationController.h" | ||
| #include "Domain/ClientVersion.h" | ||
|
|
@@ -26,14 +27,14 @@ void pushCompactStyle() { | |
| } | ||
| void popCompactStyle() { ImGui::PopStyleVar(5); } | ||
|
|
||
| constexpr ImVec4 kBlueAccent = ImVec4(0.19f, 0.44f, 0.84f, 1.0f); | ||
| constexpr ImVec4 kBlueHover = ImVec4(0.25f, 0.50f, 0.92f, 1.0f); | ||
| constexpr ImVec4 kBlueActive = ImVec4(0.15f, 0.38f, 0.76f, 1.0f); | ||
| constexpr ImVec4 kRedDelete = ImVec4(0.78f, 0.14f, 0.20f, 1.0f); | ||
| constexpr ImVec4 kRedHover = ImVec4(0.86f, 0.20f, 0.27f, 1.0f); | ||
| constexpr ImVec4 kGreenStatus = ImVec4(0.43f, 0.82f, 0.43f, 1.0f); | ||
| constexpr ImVec4 kTextOffWhite = ImVec4(0.85f, 0.87f, 0.91f, 1.0f); | ||
| constexpr ImVec4 kTextMuted = ImVec4(0.67f, 0.70f, 0.75f, 1.0f); | ||
| constexpr ImVec4 kBlueAccent = SemanticColors::INFO; | ||
| constexpr ImVec4 kBlueHover = SemanticColors::Lighten(SemanticColors::INFO); | ||
| constexpr ImVec4 kBlueActive = SemanticColors::Darken(SemanticColors::INFO); | ||
| constexpr ImVec4 kRedDelete = SemanticColors::DANGER; | ||
| constexpr ImVec4 kRedHover = SemanticColors::Lighten(SemanticColors::DANGER); | ||
| constexpr ImVec4 kGreenStatus = SemanticColors::SAVED; | ||
| constexpr ImVec4 kTextOffWhite = SemanticColors::HEADER_TEXT; | ||
| constexpr ImVec4 kTextMuted = SemanticColors::MUTED; | ||
|
Comment on lines
+30
to
+37
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Defining the normal, hovered, and active button colors as the exact same semantic color removes all visual feedback when the user interacts with the buttons. Use the constexpr ImVec4 kBlueAccent = SemanticColors::INFO;
constexpr ImVec4 kBlueHover = SemanticColors::Lighten(SemanticColors::INFO);
constexpr ImVec4 kBlueActive = SemanticColors::Darken(SemanticColors::INFO);
constexpr ImVec4 kRedDelete = SemanticColors::DANGER;
constexpr ImVec4 kRedHover = SemanticColors::Lighten(SemanticColors::DANGER);
constexpr ImVec4 kGreenStatus = SemanticColors::SAVED;
constexpr ImVec4 kTextOffWhite = SemanticColors::HEADER_TEXT;
constexpr ImVec4 kTextMuted = SemanticColors::MUTED; |
||
|
|
||
| } // namespace | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| #include "ConfirmationDialog.h" | ||
| #include "UI/Core/Theme.h" | ||
| #include <imgui.h> | ||
| #include <IconsFontAwesome6.h> | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,6 +2,7 @@ | |
| #include "Application/MapTabManager.h" | ||
| #include "Application/EditorSession.h" | ||
| #include "Domain/MapInstance.h" | ||
| #include "UI/Core/Theme.h" | ||
| #include <imgui.h> | ||
| #include <IconsFontAwesome6.h> | ||
| #include <algorithm> | ||
|
|
@@ -10,13 +11,9 @@ | |
| namespace MapEditor { | ||
| namespace UI { | ||
|
|
||
| namespace SC = SemanticColors; | ||
|
|
||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🟡 This local color constant could be replaced with a derivative of |
||
| static constexpr ImVec4 kModifiedYellow{0.50f, 0.42f, 0.14f, 1.0f}; | ||
| static constexpr ImVec4 kDangerRed{0.70f, 0.18f, 0.18f, 1.0f}; | ||
| static constexpr ImVec4 kDangerRedHover{0.80f, 0.25f, 0.25f, 1.0f}; | ||
| static constexpr ImVec4 kDangerRedActive{0.60f, 0.12f, 0.12f, 1.0f}; | ||
| static constexpr ImVec4 kGoToBlue{0.18f, 0.40f, 0.65f, 1.0f}; | ||
| static constexpr ImVec4 kGoToBlueHover{0.22f, 0.48f, 0.75f, 1.0f}; | ||
| static constexpr ImVec4 kGoToBlueActive{0.14f, 0.35f, 0.58f, 1.0f}; | ||
|
|
||
| static float bounceOffset() { | ||
| return std::sin(static_cast<float>(ImGui::GetTime()) * 3.0f) * 3.0f; | ||
|
|
@@ -160,9 +157,9 @@ EditTownsDialog::Result EditTownsDialog::render() { | |
| ImGui::TextDisabled("ID %u: %s", towns_[selected_index_].id, towns_[selected_index_].name.c_str()); | ||
| ImGui::Spacing(); | ||
|
|
||
| ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.8f, 0.2f, 0.2f, 1.0f)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0.9f, 0.3f, 0.3f, 1.0f)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0.7f, 0.1f, 0.1f, 1.0f)); | ||
| ImGui::PushStyleColor(ImGuiCol_Button, SC::DANGER); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonHovered, SC::Lighten(SC::DANGER)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonActive, SC::Darken(SC::DANGER)); | ||
|
|
||
| if (ImGui::Button(ICON_FA_TRASH " Yes, Remove", ImVec2(120, 0))) { | ||
| uint32_t removed_id = towns_[selected_index_].id; | ||
|
|
@@ -332,9 +329,9 @@ EditTownsDialog::Result EditTownsDialog::render() { | |
|
|
||
| ImGui::Spacing(); | ||
|
|
||
| ImGui::PushStyleColor(ImGuiCol_Button, kDangerRed); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonHovered, kDangerRedHover); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonActive, kDangerRedActive); | ||
| ImGui::PushStyleColor(ImGuiCol_Button, SC::DANGER); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonHovered, SC::Lighten(SC::DANGER)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonActive, SC::Darken(SC::DANGER)); | ||
| if (ImGui::Button(ICON_FA_CROSSHAIRS " Change Temple Position", ImVec2(-1, 0))) { | ||
| if (on_pick_position_ && on_pick_position_()) { | ||
| is_picking_position_ = true; | ||
|
|
@@ -345,9 +342,9 @@ EditTownsDialog::Result EditTownsDialog::render() { | |
| ImGui::SetTooltip("Click on map to set temple position"); | ||
| } | ||
|
|
||
| ImGui::PushStyleColor(ImGuiCol_Button, kGoToBlue); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonHovered, kGoToBlueHover); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonActive, kGoToBlueActive); | ||
| ImGui::PushStyleColor(ImGuiCol_Button, SC::INFO); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonHovered, SC::Lighten(SC::INFO)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonActive, SC::Darken(SC::INFO)); | ||
| if (ImGui::Button(ICON_FA_LOCATION_DOT " Go To Position", ImVec2(-1, 0))) { | ||
| if (has_selection && on_go_to_) { | ||
| on_go_to_(towns_[selected_index_].temple_position); | ||
|
|
@@ -359,7 +356,7 @@ EditTownsDialog::Result EditTownsDialog::render() { | |
| } | ||
|
|
||
| if (is_picking_position_) { | ||
| ImGui::TextColored(ImVec4(1.0f, 0.8f, 0.0f, 1.0f), | ||
| ImGui::TextColored(SC::GOLD, | ||
| ICON_FA_CROSSHAIRS " Click on map to select..."); | ||
| } | ||
|
|
||
|
|
@@ -386,9 +383,9 @@ EditTownsDialog::Result EditTownsDialog::render() { | |
| bool flash_active = flash_age < 1.0f && flash_age > 0.0f; | ||
|
|
||
| if (flash_active) { | ||
| ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.15f, 0.55f, 0.15f, 1.0f)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0.18f, 0.65f, 0.18f, 1.0f)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0.12f, 0.50f, 0.12f, 1.0f)); | ||
| ImGui::PushStyleColor(ImGuiCol_Button, SC::SAVED); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonHovered, SC::Lighten(SC::SAVED)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonActive, SC::Darken(SC::SAVED)); | ||
| } | ||
|
|
||
| if (ImGui::Button(ICON_FA_FLOPPY_DISK " Apply", ImVec2(button_w, 0))) { | ||
|
|
@@ -403,9 +400,9 @@ EditTownsDialog::Result EditTownsDialog::render() { | |
|
|
||
| ImGui::SameLine(); | ||
|
|
||
| ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0.20f, 0.45f, 0.70f, 1.0f)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0.25f, 0.55f, 0.80f, 1.0f)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0.15f, 0.40f, 0.65f, 1.0f)); | ||
| ImGui::PushStyleColor(ImGuiCol_Button, SC::INFO); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonHovered, SC::Lighten(SC::INFO)); | ||
| ImGui::PushStyleColor(ImGuiCol_ButtonActive, SC::Darken(SC::INFO)); | ||
|
|
||
| if (ImGui::Button(ICON_FA_CHECK " OK", ImVec2(button_w, 0))) { | ||
| applyChangesToMap(); | ||
|
|
||
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -1,13 +1,16 @@ | ||||||||
| #include "AvailableClientsPanel.h" | ||||||||
| #include "UI/Core/Theme.h" | ||||||||
| #include <IconsFontAwesome6.h> | ||||||||
| #include <filesystem> | ||||||||
| #include <imgui.h> | ||||||||
|
|
||||||||
| namespace MapEditor { | ||||||||
| namespace UI { | ||||||||
|
|
||||||||
| namespace SC = SemanticColors; | ||||||||
|
|
||||||||
|
Comment on lines
9
to
+11
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🟢 Duplicate namespace alias.
Suggested change
|
||||||||
| void AvailableClientsPanel::render() { | ||||||||
| ImGui::TextColored(ImVec4(0.85f, 0.88f, 0.92f, 1.0f), "Available Clients"); | ||||||||
| ImGui::TextColored(SC::TextPrimary(), "Available Clients"); | ||||||||
| ImGui::Spacing(); | ||||||||
| ImGui::Separator(); | ||||||||
| ImGui::Spacing(); | ||||||||
|
|
@@ -34,13 +37,11 @@ void AvailableClientsPanel::render() { | |||||||
| ImGui::PushID(static_cast<int>(index)); | ||||||||
|
|
||||||||
| if (is_selected) { | ||||||||
| ImGui::PushStyleColor(ImGuiCol_Header, ImVec4(0.25f, 0.45f, 0.70f, 0.9f)); | ||||||||
| ImGui::PushStyleColor(ImGuiCol_HeaderHovered, | ||||||||
| ImVec4(0.30f, 0.50f, 0.75f, 1.0f)); | ||||||||
| ImGui::PushStyleColor(ImGuiCol_Header, ImGui::GetStyleColorVec4(ImGuiCol_HeaderActive)); | ||||||||
| ImGui::PushStyleColor(ImGuiCol_HeaderHovered, ImGui::GetStyleColorVec4(ImGuiCol_HeaderHovered)); | ||||||||
| } else { | ||||||||
| ImGui::PushStyleColor(ImGuiCol_Header, ImVec4(0.18f, 0.20f, 0.24f, 0.6f)); | ||||||||
| ImGui::PushStyleColor(ImGuiCol_HeaderHovered, | ||||||||
| ImVec4(0.22f, 0.25f, 0.30f, 0.8f)); | ||||||||
| ImGui::PushStyleColor(ImGuiCol_Header, ImGui::GetStyleColorVec4(ImGuiCol_Header)); | ||||||||
| ImGui::PushStyleColor(ImGuiCol_HeaderHovered, ImGui::GetStyleColorVec4(ImGuiCol_HeaderHovered)); | ||||||||
| } | ||||||||
|
|
||||||||
| float item_height = 60.0f; | ||||||||
|
|
@@ -60,7 +61,7 @@ void AvailableClientsPanel::render() { | |||||||
| // Bookmark icon | ||||||||
| ImGui::BeginGroup(); | ||||||||
| ImGui::SetCursorPosY(ImGui::GetCursorPosY() + 12.0f); | ||||||||
| ImGui::PushStyleColor(ImGuiCol_Text, ImVec4(0.85f, 0.65f, 0.30f, 1.0f)); | ||||||||
| ImGui::PushStyleColor(ImGuiCol_Text, SC::GOLD); | ||||||||
| ImGui::Text(ICON_FA_BOOKMARK); | ||||||||
| ImGui::PopStyleColor(); | ||||||||
| ImGui::EndGroup(); | ||||||||
|
|
@@ -70,7 +71,7 @@ void AvailableClientsPanel::render() { | |||||||
| // Client name and version info | ||||||||
| ImGui::BeginGroup(); | ||||||||
| ImGui::SetCursorPosY(ImGui::GetCursorPosY() + 4.0f); | ||||||||
| ImGui::TextColored(ImVec4(0.43f, 0.82f, 0.43f, 1.0f), "%s", | ||||||||
| ImGui::TextColored(SC::TextPrimary(), "%s", | ||||||||
| client->getName().c_str()); | ||||||||
|
|
||||||||
| const char* type_str = "???"; | ||||||||
|
|
@@ -79,7 +80,7 @@ void AvailableClientsPanel::render() { | |||||||
| case Domain::ItemDataSource::SRV: type_str = "SRV"; break; | ||||||||
| case Domain::ItemDataSource::DAT: type_str = "DAT"; break; | ||||||||
| } | ||||||||
| ImGui::TextColored(ImVec4(0.55f, 0.58f, 0.62f, 1.0f), "%u | %s", | ||||||||
| ImGui::TextColored(SC::TextDim(), "%u | %s", | ||||||||
| client->getVersion(), type_str); | ||||||||
| ImGui::EndGroup(); | ||||||||
|
|
||||||||
|
|
@@ -94,8 +95,8 @@ void AvailableClientsPanel::render() { | |||||||
|
|
||||||||
| if (total_count == 0) { | ||||||||
| ImGui::Spacing(); | ||||||||
| ImGui::TextColored(ImVec4(0.5f, 0.52f, 0.55f, 1.0f), "No clients in database."); | ||||||||
| ImGui::TextColored(ImVec4(0.4f, 0.42f, 0.45f, 1.0f), | ||||||||
| ImGui::TextColored(SC::TextDim(), "No clients in database."); | ||||||||
| ImGui::TextColored(SC::TextDim(), | ||||||||
| "Use 'Client Config' to add clients."); | ||||||||
| } | ||||||||
|
|
||||||||
|
|
||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🟡 This file uses
sinf, but<cmath>is not explicitly included. While it might be included transitively, it's better to include it for portability and clarity.