mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 12:17:35 +00:00
ThemeEditor: Arrange the theme properties into groups
This makes it clearer which properties are related, instead of them all being in one list per tab.
This commit is contained in:
Sam Atkins
Andreas Kling
parent
423383e9aa
commit
4edc33b4a6
2 changed files with 198 additions and 164 deletions
|
|
@ -22,6 +22,7 @@
|
|||
#include <LibGUI/Button.h>
|
||||
#include <LibGUI/FilePicker.h>
|
||||
#include <LibGUI/Frame.h>
|
||||
#include <LibGUI/GroupBox.h>
|
||||
#include <LibGUI/Icon.h>
|
||||
#include <LibGUI/ItemListModel.h>
|
||||
#include <LibGUI/Label.h>
|
||||
|
|
@ -36,113 +37,133 @@ namespace ThemeEditor {
|
|||
static const PropertyTab window_tab {
|
||||
"Windows",
|
||||
{
|
||||
{ Gfx::FlagRole::IsDark },
|
||||
{ "General",
|
||||
{ { Gfx::FlagRole::IsDark },
|
||||
{ Gfx::AlignmentRole::TitleAlignment },
|
||||
{ Gfx::MetricRole::TitleHeight },
|
||||
{ Gfx::MetricRole::TitleButtonWidth },
|
||||
{ Gfx::MetricRole::TitleButtonHeight },
|
||||
{ Gfx::PathRole::TitleButtonIcons },
|
||||
{ Gfx::FlagRole::TitleButtonsIconOnly },
|
||||
{ Gfx::FlagRole::TitleButtonsIconOnly } } },
|
||||
|
||||
{ Gfx::MetricRole::BorderThickness },
|
||||
{ Gfx::MetricRole::BorderRadius },
|
||||
{ "Border",
|
||||
{ { Gfx::MetricRole::BorderThickness },
|
||||
{ Gfx::MetricRole::BorderRadius } } },
|
||||
|
||||
{ Gfx::ColorRole::ActiveWindowBorder1 },
|
||||
{ "Active Window",
|
||||
{ { Gfx::ColorRole::ActiveWindowBorder1 },
|
||||
{ Gfx::ColorRole::ActiveWindowBorder2 },
|
||||
{ Gfx::ColorRole::ActiveWindowTitle },
|
||||
{ Gfx::ColorRole::ActiveWindowTitleShadow },
|
||||
{ Gfx::ColorRole::ActiveWindowTitleStripes },
|
||||
{ Gfx::PathRole::ActiveWindowShadow },
|
||||
{ Gfx::PathRole::ActiveWindowShadow } } },
|
||||
|
||||
{ Gfx::ColorRole::InactiveWindowBorder1 },
|
||||
{ "Inactive Window",
|
||||
{ { Gfx::ColorRole::InactiveWindowBorder1 },
|
||||
{ Gfx::ColorRole::InactiveWindowBorder2 },
|
||||
{ Gfx::ColorRole::InactiveWindowTitle },
|
||||
{ Gfx::ColorRole::InactiveWindowTitleShadow },
|
||||
{ Gfx::ColorRole::InactiveWindowTitleStripes },
|
||||
{ Gfx::PathRole::InactiveWindowShadow },
|
||||
{ Gfx::PathRole::InactiveWindowShadow } } },
|
||||
|
||||
{ Gfx::ColorRole::HighlightWindowBorder1 },
|
||||
{ "Highlighted Window",
|
||||
{ { Gfx::ColorRole::HighlightWindowBorder1 },
|
||||
{ Gfx::ColorRole::HighlightWindowBorder2 },
|
||||
{ Gfx::ColorRole::HighlightWindowTitle },
|
||||
{ Gfx::ColorRole::HighlightWindowTitleShadow },
|
||||
{ Gfx::ColorRole::HighlightWindowTitleStripes },
|
||||
{ Gfx::ColorRole::HighlightWindowTitleStripes } } },
|
||||
|
||||
{ Gfx::ColorRole::MovingWindowBorder1 },
|
||||
{ "Moving Window",
|
||||
{ { Gfx::ColorRole::MovingWindowBorder1 },
|
||||
{ Gfx::ColorRole::MovingWindowBorder2 },
|
||||
{ Gfx::ColorRole::MovingWindowTitle },
|
||||
{ Gfx::ColorRole::MovingWindowTitleShadow },
|
||||
{ Gfx::ColorRole::MovingWindowTitleStripes },
|
||||
{ Gfx::ColorRole::MovingWindowTitleStripes } } },
|
||||
|
||||
{ Gfx::ColorRole::Window },
|
||||
{ Gfx::ColorRole::WindowText },
|
||||
{ "Contents",
|
||||
{ { Gfx::ColorRole::Window },
|
||||
{ Gfx::ColorRole::WindowText } } },
|
||||
|
||||
{ Gfx::ColorRole::DesktopBackground },
|
||||
{ Gfx::PathRole::TaskbarShadow },
|
||||
{ "Desktop",
|
||||
{ { Gfx::ColorRole::DesktopBackground },
|
||||
{ Gfx::PathRole::TaskbarShadow } } },
|
||||
}
|
||||
};
|
||||
|
||||
static const PropertyTab widgets_tab {
|
||||
"Widgets",
|
||||
{
|
||||
{ Gfx::ColorRole::Accent },
|
||||
{ "General",
|
||||
{ { Gfx::ColorRole::Accent },
|
||||
{ Gfx::ColorRole::Base },
|
||||
{ Gfx::ColorRole::ThreedHighlight },
|
||||
{ Gfx::ColorRole::ThreedShadow1 },
|
||||
{ Gfx::ColorRole::ThreedShadow2 },
|
||||
{ Gfx::ColorRole::HoverHighlight },
|
||||
{ Gfx::ColorRole::HoverHighlight } } },
|
||||
|
||||
{ Gfx::ColorRole::BaseText },
|
||||
{ "Text",
|
||||
{ { Gfx::ColorRole::BaseText },
|
||||
{ Gfx::ColorRole::DisabledTextFront },
|
||||
{ Gfx::ColorRole::DisabledTextBack },
|
||||
{ Gfx::ColorRole::PlaceholderText },
|
||||
{ Gfx::ColorRole::PlaceholderText } } },
|
||||
|
||||
{ Gfx::ColorRole::Link },
|
||||
{ "Links",
|
||||
{ { Gfx::ColorRole::Link },
|
||||
{ Gfx::ColorRole::ActiveLink },
|
||||
{ Gfx::ColorRole::VisitedLink },
|
||||
{ Gfx::ColorRole::VisitedLink } } },
|
||||
|
||||
{ Gfx::ColorRole::Button },
|
||||
{ Gfx::ColorRole::ButtonText },
|
||||
{ "Buttons",
|
||||
{ { Gfx::ColorRole::Button },
|
||||
{ Gfx::ColorRole::ButtonText } } },
|
||||
|
||||
{ Gfx::ColorRole::Tooltip },
|
||||
{ "Tooltips",
|
||||
{ { Gfx::ColorRole::Tooltip },
|
||||
{ Gfx::ColorRole::TooltipText },
|
||||
{ Gfx::PathRole::TooltipShadow },
|
||||
{ Gfx::PathRole::TooltipShadow } } },
|
||||
|
||||
{ Gfx::ColorRole::Tray },
|
||||
{ Gfx::ColorRole::TrayText },
|
||||
{ "Trays",
|
||||
{ { Gfx::ColorRole::Tray },
|
||||
{ Gfx::ColorRole::TrayText } } },
|
||||
|
||||
{ Gfx::ColorRole::Ruler },
|
||||
{ "Ruler",
|
||||
{ { Gfx::ColorRole::Ruler },
|
||||
{ Gfx::ColorRole::RulerBorder },
|
||||
{ Gfx::ColorRole::RulerActiveText },
|
||||
{ Gfx::ColorRole::RulerInactiveText },
|
||||
{ Gfx::ColorRole::RulerInactiveText } } },
|
||||
|
||||
{ Gfx::ColorRole::Gutter },
|
||||
{ Gfx::ColorRole::GutterBorder },
|
||||
{ "Gutter",
|
||||
{ { Gfx::ColorRole::Gutter },
|
||||
{ Gfx::ColorRole::GutterBorder } } },
|
||||
|
||||
{ Gfx::ColorRole::RubberBandBorder },
|
||||
{ Gfx::ColorRole::RubberBandFill },
|
||||
{ "Rubber Band",
|
||||
{ { Gfx::ColorRole::RubberBandBorder },
|
||||
{ Gfx::ColorRole::RubberBandFill } } },
|
||||
|
||||
{ Gfx::ColorRole::MenuBase },
|
||||
{ "Menus",
|
||||
{ { Gfx::ColorRole::MenuBase },
|
||||
{ Gfx::ColorRole::MenuBaseText },
|
||||
{ Gfx::ColorRole::MenuSelection },
|
||||
{ Gfx::ColorRole::MenuSelectionText },
|
||||
{ Gfx::ColorRole::MenuStripe },
|
||||
{ Gfx::PathRole::MenuShadow },
|
||||
{ Gfx::PathRole::MenuShadow } } },
|
||||
|
||||
{ Gfx::ColorRole::FocusOutline },
|
||||
{ "Selection",
|
||||
{ { Gfx::ColorRole::FocusOutline },
|
||||
{ Gfx::ColorRole::TextCursor },
|
||||
{ Gfx::ColorRole::Selection },
|
||||
{ Gfx::ColorRole::SelectionText },
|
||||
{ Gfx::ColorRole::InactiveSelection },
|
||||
{ Gfx::ColorRole::InactiveSelectionText },
|
||||
{ Gfx::ColorRole::HighlightSearching },
|
||||
{ Gfx::ColorRole::HighlightSearchingText },
|
||||
{ Gfx::ColorRole::HighlightSearchingText } } },
|
||||
}
|
||||
};
|
||||
|
||||
static const PropertyTab syntax_highlighting_tab {
|
||||
"Syntax Highlighting",
|
||||
{
|
||||
{ Gfx::ColorRole::SyntaxComment },
|
||||
{ "General",
|
||||
{ { Gfx::ColorRole::SyntaxComment },
|
||||
{ Gfx::ColorRole::SyntaxControlKeyword },
|
||||
{ Gfx::ColorRole::SyntaxIdentifier },
|
||||
{ Gfx::ColorRole::SyntaxKeyword },
|
||||
|
|
@ -158,7 +179,7 @@ static const PropertyTab syntax_highlighting_tab {
|
|||
{ Gfx::ColorRole::SyntaxCustomType },
|
||||
{ Gfx::ColorRole::SyntaxNamespace },
|
||||
{ Gfx::ColorRole::SyntaxMember },
|
||||
{ Gfx::ColorRole::SyntaxParameter },
|
||||
{ Gfx::ColorRole::SyntaxParameter } } },
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -362,10 +383,17 @@ void MainWidget::add_property_tab(PropertyTab const& property_tab)
|
|||
properties_list->layout()->set_spacing(12);
|
||||
properties_list->layout()->set_margins({ 8 });
|
||||
|
||||
for (auto const& property : property_tab.properties) {
|
||||
NonnullRefPtr<GUI::Widget> row_widget = properties_list->add<GUI::Widget>();
|
||||
row_widget->set_fixed_height(24);
|
||||
for (auto const& group : property_tab.property_groups) {
|
||||
NonnullRefPtr<GUI::GroupBox> group_box = properties_list->add<GUI::GroupBox>(group.title);
|
||||
group_box->set_layout<GUI::VerticalBoxLayout>();
|
||||
group_box->layout()->set_spacing(12);
|
||||
// 1px less on the left makes the text line up with the group title.
|
||||
group_box->layout()->set_margins({ 8, 8, 8, 7 });
|
||||
group_box->set_shrink_to_fit(true);
|
||||
|
||||
for (auto const& property : group.properties) {
|
||||
NonnullRefPtr<GUI::Widget> row_widget = group_box->add<GUI::Widget>();
|
||||
row_widget->set_fixed_height(22);
|
||||
property.role.visit(
|
||||
[&](Gfx::AlignmentRole role) {
|
||||
row_widget->load_from_gml(alignment_property_gml);
|
||||
|
|
@ -448,6 +476,7 @@ void MainWidget::add_property_tab(PropertyTab const& property_tab)
|
|||
m_path_inputs[to_underlying(role)] = path_input;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void MainWidget::set_alignment(Gfx::AlignmentRole role, Gfx::TextAlignment value)
|
||||
|
|
|
|||
|
|
@ -66,11 +66,16 @@ struct Property {
|
|||
Variant<Gfx::AlignmentRole, Gfx::ColorRole, Gfx::FlagRole, Gfx::MetricRole, Gfx::PathRole> role;
|
||||
};
|
||||
|
||||
struct PropertyTab {
|
||||
struct PropertyGroup {
|
||||
String title;
|
||||
Vector<Property> properties;
|
||||
};
|
||||
|
||||
struct PropertyTab {
|
||||
String title;
|
||||
Vector<PropertyGroup> property_groups;
|
||||
};
|
||||
|
||||
class MainWidget final : public GUI::Widget {
|
||||
C_OBJECT(MainWidget);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue