Theming: Add alignment section

This commit removes the IsTitleCenter property and replaces it with
the TitleAlignment property that supports "Left", "Right" & "Center".
This commit is contained in:
Filiph Sandström 2022-01-01 18:26:19 +01:00 committed by Andreas Kling
parent 2bb32a87f9
commit 35dac843b4
Notes: sideshowbarker 2024-07-17 21:48:56 +09:00
21 changed files with 181 additions and 32 deletions

View file

@ -72,9 +72,11 @@ TooltipText=white
Tray=#171717
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=true
IsTitleCenter=false
[Metrics]
TitleHeight=24

View file

@ -68,9 +68,11 @@ TooltipText=black
Tray=#9397a5
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=false
IsTitleCenter=false
[Paths]
TitleButtonIcons=/res/icons/themes/Coffee/16x16/

View file

@ -69,9 +69,11 @@ TooltipText=white
Tray=#212121
TrayText=#fcfcfc
[Alignments]
TitleAlignment=Center
[Flags]
IsDark=true
IsTitleCenter=true
[Metrics]
BorderRadius=8

View file

@ -64,6 +64,8 @@ TooltipText=white
Tray=#323232
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=true
IsTitleCenter=false

View file

@ -72,9 +72,11 @@ TooltipText=black
Tray=#808080
TrayText=#ffffff
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=false
IsTitleCenter=false
[Metrics]
BorderThickness=4

View file

@ -72,9 +72,11 @@ TooltipText=black
Tray=#a28d68
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=false
IsTitleCenter=false
[Metrics]
TitleHeight=19

View file

@ -64,6 +64,8 @@ TooltipText=black
Tray=#282828
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=false
IsTitleCenter=false

View file

@ -72,9 +72,11 @@ TooltipText=#4b4b4b
Tray=#3b3b3b
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=false
IsTitleCenter=false
[Paths]
MenuShadow=/res/icons/themes/Redmond/menu-shadow.png

View file

@ -64,6 +64,8 @@ TooltipText=white
Tray=#3b4252
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=true
IsTitleCenter=false

View file

@ -72,9 +72,11 @@ TooltipText=black
Tray=#808080
TrayText=#ffffff
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=false
IsTitleCenter=false
[Metrics]
TitleHeight=19

View file

@ -68,9 +68,11 @@ TooltipText=black
Tray=#808080
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=false
IsTitleCenter=false
[Metrics]
TitleButtonWidth=17

View file

@ -68,9 +68,11 @@ TooltipText=black
Tray=#808080
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=false
IsTitleCenter=false
[Metrics]
TitleButtonWidth=17

View file

@ -64,9 +64,11 @@ TooltipText=black
Tray=#3b3b3b
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=false
IsTitleCenter=false
[Paths]
TitleButtonIcons=/res/icons/themes/Silver/16x16/

View file

@ -68,9 +68,11 @@ TooltipText=black
Tray=#9397a5
TrayText=white
[Alignments]
TitleAlignment=Left
[Flags]
IsDark=false
IsTitleCenter=false
[Paths]
TitleButtonIcons=/res/icons/themes/Sunshine/16x16/

View file

@ -1,5 +1,6 @@
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2022, Filiph Sandström <filiph.sandstrom@filfatstudios.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -48,6 +49,8 @@ const char* to_string(Variant::Type type)
return "TextAlignment";
case Variant::Type::ColorRole:
return "ColorRole";
case Variant::Type::AlignmentRole:
return "AlignmentRole";
case Variant::Type::FlagRole:
return "FlagRole";
case Variant::Type::MetricRole:
@ -99,6 +102,12 @@ Variant::Variant(Gfx::ColorRole value)
m_value.as_color_role = value;
}
Variant::Variant(Gfx::AlignmentRole value)
: m_type(Type::AlignmentRole)
{
m_value.as_alignment_role = value;
}
Variant::Variant(Gfx::FlagRole value)
: m_type(Type::FlagRole)
{
@ -355,6 +364,9 @@ void Variant::copy_from(const Variant& other)
case Type::ColorRole:
m_value.as_color_role = other.m_value.as_color_role;
break;
case Type::AlignmentRole:
m_value.as_alignment_role = other.m_value.as_alignment_role;
break;
case Type::FlagRole:
m_value.as_flag_role = other.m_value.as_flag_role;
break;
@ -406,6 +418,8 @@ bool Variant::operator==(const Variant& other) const
return m_value.as_text_alignment == other.m_value.as_text_alignment;
case Type::ColorRole:
return m_value.as_color_role == other.m_value.as_color_role;
case Type::AlignmentRole:
return m_value.as_alignment_role == other.m_value.as_alignment_role;
case Type::FlagRole:
return m_value.as_flag_role == other.m_value.as_flag_role;
case Type::MetricRole:
@ -451,6 +465,7 @@ bool Variant::operator<(const Variant& other) const
case Type::Font:
case Type::TextAlignment:
case Type::ColorRole:
case Type::AlignmentRole:
case Type::FlagRole:
case Type::MetricRole:
case Type::PathRole:
@ -512,6 +527,8 @@ String Variant::to_string() const
}
case Type::ColorRole:
return String::formatted("Gfx::ColorRole::{}", Gfx::to_string(m_value.as_color_role));
case Type::AlignmentRole:
return String::formatted("Gfx::AlignmentRole::{}", Gfx::to_string(m_value.as_alignment_role));
case Type::FlagRole:
return String::formatted("Gfx::FlagRole::{}", Gfx::to_string(m_value.as_flag_role));
case Type::MetricRole:

View file

@ -1,5 +1,6 @@
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2022, Filiph Sandström <filiph.sandstrom@filfatstudios.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -35,6 +36,7 @@ public:
Variant(const Gfx::Font&);
Variant(const Gfx::TextAlignment);
Variant(const Gfx::ColorRole);
Variant(const Gfx::AlignmentRole);
Variant(const Gfx::FlagRole);
Variant(const Gfx::MetricRole);
Variant(const Gfx::PathRole);
@ -68,6 +70,7 @@ public:
Font,
TextAlignment,
ColorRole,
AlignmentRole,
FlagRole,
MetricRole,
PathRole,
@ -90,6 +93,7 @@ public:
bool is_font() const { return m_type == Type::Font; }
bool is_text_alignment() const { return m_type == Type::TextAlignment; }
bool is_color_role() const { return m_type == Type::ColorRole; }
bool is_alignment_role() const { return m_type == Type::AlignmentRole; }
bool is_flag_role() const { return m_type == Type::FlagRole; }
bool is_metric_role() const { return m_type == Type::MetricRole; }
bool is_path_role() const { return m_type == Type::PathRole; }
@ -254,6 +258,13 @@ public:
return m_value.as_color_role;
}
Gfx::AlignmentRole to_alignment_role() const
{
if (type() != Type::AlignmentRole)
return Gfx::AlignmentRole::NoRole;
return m_value.as_alignment_role;
}
Gfx::FlagRole to_flag_role() const
{
if (type() != Type::FlagRole)
@ -325,6 +336,7 @@ private:
Gfx::RGBA32 as_color;
Gfx::TextAlignment as_text_alignment;
Gfx::ColorRole as_color_role;
Gfx::AlignmentRole as_alignment_role;
Gfx::FlagRole as_flag_role;
Gfx::MetricRole as_metric_role;
Gfx::PathRole as_path_role;

View file

@ -1,6 +1,6 @@
/*
* Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, Filiph Sandström <filiph.sandstrom@filfatstudios.com>
* Copyright (c) 2021-2022, Filiph Sandström <filiph.sandstrom@filfatstudios.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -74,16 +74,12 @@ void ClassicWindowTheme::paint_normal_frame(Painter& painter, WindowState window
painter.fill_rect_with_gradient(titlebar_rect, border_color, border_color2);
auto title_alignment = palette.title_alignment();
int stripe_right = leftmost_button_rect.left() - 3;
if (stripes_color.alpha() > 0) {
if (palette.is_title_center()) {
auto stripe_width = (leftmost_button_rect.left() / 2 - titlebar_title_rect.width() / 2) - titlebar_icon_rect.width() - 3;
for (int i = 2; i <= titlebar_inner_rect.height() - 2; i += 2) {
painter.draw_line({ titlebar_inner_rect.left(), titlebar_inner_rect.y() + i }, { titlebar_inner_rect.left() + stripe_width, titlebar_inner_rect.y() + i }, stripes_color);
painter.draw_line({ stripe_right - stripe_width, titlebar_inner_rect.y() + i }, { stripe_right, titlebar_inner_rect.y() + i }, stripes_color);
}
} else {
switch (title_alignment) {
case Gfx::TextAlignment::CenterLeft: {
int stripe_left = titlebar_title_rect.right() + 5;
if (stripe_left && stripe_right && stripe_left < stripe_right) {
@ -91,19 +87,34 @@ void ClassicWindowTheme::paint_normal_frame(Painter& painter, WindowState window
painter.draw_line({ stripe_left, titlebar_inner_rect.y() + i }, { stripe_right, titlebar_inner_rect.y() + i }, stripes_color);
}
}
break;
}
case Gfx::TextAlignment::CenterRight: {
for (int i = 2; i <= titlebar_inner_rect.height() - 2; i += 2) {
painter.draw_line({ titlebar_inner_rect.left(), titlebar_inner_rect.y() + i }, { stripe_right - titlebar_title_rect.width() - 3, titlebar_inner_rect.y() + i }, stripes_color);
}
break;
}
case Gfx::TextAlignment::Center: {
auto stripe_width = (leftmost_button_rect.left() / 2 - titlebar_title_rect.width() / 2) - titlebar_icon_rect.width() - 3;
for (int i = 2; i <= titlebar_inner_rect.height() - 2; i += 2) {
painter.draw_line({ titlebar_inner_rect.left(), titlebar_inner_rect.y() + i }, { titlebar_inner_rect.left() + stripe_width, titlebar_inner_rect.y() + i }, stripes_color);
painter.draw_line({ stripe_right - stripe_width, titlebar_inner_rect.y() + i }, { stripe_right, titlebar_inner_rect.y() + i }, stripes_color);
}
break;
}
default:
dbgln("Unhandled title alignment!");
}
}
auto clipped_title_rect = titlebar_title_rect;
clipped_title_rect.set_width(stripe_right - clipped_title_rect.x());
if (!clipped_title_rect.is_empty()) {
auto align = Gfx::TextAlignment::CenterLeft;
if (palette.is_title_center())
align = Gfx::TextAlignment::Center;
painter.draw_text(clipped_title_rect.translated(1, 2), window_title, title_font, align, shadow_color, Gfx::TextElision::Right);
painter.draw_text(clipped_title_rect.translated(1, 2), window_title, title_font, title_alignment, shadow_color, Gfx::TextElision::Right);
// FIXME: The translated(0, 1) wouldn't be necessary if we could center text based on its baseline.
painter.draw_text(clipped_title_rect.translated(0, 1), window_title, title_font, align, title_color, Gfx::TextElision::Right);
painter.draw_text(clipped_title_rect.translated(0, 1), window_title, title_font, title_alignment, title_color, Gfx::TextElision::Right);
}
painter.draw_scaled_bitmap(titlebar_icon_rect, icon, icon.rect());

View file

@ -1,6 +1,7 @@
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2022, Filiph Sandström <filiph.sandstrom@filfatstudios.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -57,6 +58,14 @@ void Palette::set_color(ColorRole role, Color color)
theme.color[(int)role] = color.value();
}
void Palette::set_alignment(AlignmentRole role, Gfx::TextAlignment value)
{
if (m_impl->ref_count() != 1)
m_impl = m_impl->clone();
auto& theme = const_cast<SystemTheme&>(impl().theme());
theme.alignment[(int)role] = value;
}
void Palette::set_flag(FlagRole role, bool value)
{
if (m_impl->ref_count() != 1)

View file

@ -1,6 +1,7 @@
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2022, Filiph Sandström <filiph.sandstrom@filfatstudios.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -31,6 +32,12 @@ public:
return Color::from_rgba(theme().color[(int)role]);
}
Gfx::TextAlignment alignment(AlignmentRole role) const
{
VERIFY((int)role < (int)AlignmentRole::__Count);
return theme().alignment[(int)role];
}
bool flag(FlagRole role) const
{
VERIFY((int)role < (int)FlagRole::__Count);
@ -125,8 +132,9 @@ public:
Color syntax_preprocessor_statement() const { return color(ColorRole::SyntaxPreprocessorStatement); }
Color syntax_preprocessor_value() const { return color(ColorRole::SyntaxPreprocessorValue); }
Gfx::TextAlignment title_alignment() const { return alignment(AlignmentRole::TitleAlignment); }
bool is_dark() const { return flag(FlagRole::IsDark); }
bool is_title_center() const { return flag(FlagRole::IsTitleCenter); }
int window_border_thickness() const { return metric(MetricRole::BorderThickness); }
int window_border_radius() const { return metric(MetricRole::BorderRadius); }
@ -142,11 +150,13 @@ public:
String tooltip_shadow_path() const { return path(PathRole::TooltipShadow); }
Color color(ColorRole role) const { return m_impl->color(role); }
Gfx::TextAlignment alignment(AlignmentRole role) const { return m_impl->alignment(role); }
bool flag(FlagRole role) const { return m_impl->flag(role); }
int metric(MetricRole role) const { return m_impl->metric(role); }
String path(PathRole role) const { return m_impl->path(role); }
void set_color(ColorRole, Color);
void set_alignment(AlignmentRole, Gfx::TextAlignment);
void set_flag(FlagRole, bool);
void set_metric(MetricRole, int);
void set_path(PathRole, String);

View file

@ -1,6 +1,7 @@
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2022, Filiph Sandström <filiph.sandstrom@filfatstudios.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -45,6 +46,29 @@ Core::AnonymousBuffer load_system_theme(Core::ConfigFile const& file)
return file.read_bool_entry("Flags", name, false);
};
auto get_alignment = [&](auto& name, auto role) {
auto alignment = file.read_entry("Alignments", name).to_lowercase();
if (alignment.is_empty()) {
switch (role) {
case (int)AlignmentRole::TitleAlignment:
return Gfx::TextAlignment::CenterLeft;
default:
dbgln("Alignment {} has no fallback value!", name);
return Gfx::TextAlignment::CenterLeft;
}
}
if (alignment == "left" || alignment == "centerleft")
return Gfx::TextAlignment::CenterLeft;
else if (alignment == "right" || alignment == "centerright")
return Gfx::TextAlignment::CenterRight;
else if (alignment == "center")
return Gfx::TextAlignment::Center;
dbgln("Alignment {} has an invalid value!", name);
return Gfx::TextAlignment::CenterLeft;
};
auto get_metric = [&](auto& name, auto role) {
int metric = file.read_num_entry("Metrics", name, -1);
if (metric == -1) {
@ -86,6 +110,12 @@ Core::AnonymousBuffer load_system_theme(Core::ConfigFile const& file)
ENUMERATE_COLOR_ROLES(__ENUMERATE_COLOR_ROLE)
#undef __ENUMERATE_COLOR_ROLE
#undef __ENUMERATE_ALIGNMENT_ROLE
#define __ENUMERATE_ALIGNMENT_ROLE(role) \
data->alignment[(int)AlignmentRole::role] = get_alignment(#role, (int)AlignmentRole::role);
ENUMERATE_ALIGNMENT_ROLES(__ENUMERATE_ALIGNMENT_ROLE)
#undef __ENUMERATE_ALIGNMENT_ROLE
#undef __ENUMERATE_FLAG_ROLE
#define __ENUMERATE_FLAG_ROLE(role) \
data->flag[(int)FlagRole::role] = get_flag(#role);

View file

@ -1,6 +1,7 @@
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2022, Filiph Sandström <filiph.sandstrom@filfatstudios.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -13,6 +14,7 @@
#include <LibCore/AnonymousBuffer.h>
#include <LibCore/ConfigFile.h>
#include <LibGfx/Color.h>
#include <LibGfx/TextAlignment.h>
namespace Gfx {
@ -90,9 +92,11 @@ namespace Gfx {
C(Window) \
C(WindowText)
#define ENUMERATE_ALIGNMENT_ROLES(C) \
C(TitleAlignment)
#define ENUMERATE_FLAG_ROLES(C) \
C(IsDark) \
C(IsTitleCenter)
C(IsDark)
#define ENUMERATE_METRIC_ROLES(C) \
C(BorderThickness) \
@ -139,6 +143,33 @@ inline const char* to_string(ColorRole role)
}
}
enum class AlignmentRole {
NoRole,
#undef __ENUMERATE_ALIGNMENT_ROLE
#define __ENUMERATE_ALIGNMENT_ROLE(role) role,
ENUMERATE_ALIGNMENT_ROLES(__ENUMERATE_ALIGNMENT_ROLE)
#undef __ENUMERATE_ALIGNMENT_ROLE
__Count,
};
inline const char* to_string(AlignmentRole role)
{
switch (role) {
case AlignmentRole::NoRole:
return "NoRole";
#undef __ENUMERATE_ALIGNMENT_ROLE
#define __ENUMERATE_ALIGNMENT_ROLE(role) \
case AlignmentRole::role: \
return #role;
ENUMERATE_ALIGNMENT_ROLES(__ENUMERATE_ALIGNMENT_ROLE)
#undef __ENUMERATE_ALIGNMENT_ROLE
default:
VERIFY_NOT_REACHED();
}
}
enum class FlagRole {
NoRole,
@ -222,6 +253,7 @@ inline const char* to_string(PathRole role)
struct SystemTheme {
RGBA32 color[(int)ColorRole::__Count];
Gfx::TextAlignment alignment[(int)AlignmentRole::__Count];
bool flag[(int)FlagRole::__Count];
int metric[(int)MetricRole::__Count];
char path[(int)PathRole::__Count][256]; // TODO: PATH_MAX?