Theming: Add alignment section

filiphsps · awesomekling · commit 35dac843b4d6 · 2022-01-01T22:51:53.000+01:00
This commit removes the IsTitleCenter property and replaces it with
the TitleAlignment property that supports "Left", "Right" &amp; "Center".
diff --git a/Base/res/themes/Basalt.ini b/Base/res/themes/Basalt.ini
@@ -72,9 +72,11 @@ TooltipText=white
 Tray=#171717
 TrayText=white
 
+[Alignments]
+TitleAlignment=Left
+
 [Flags]
 IsDark=true
-IsTitleCenter=false
 
 [Metrics]
 TitleHeight=24
diff --git a/Base/res/themes/Coffee.ini b/Base/res/themes/Coffee.ini
@@ -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/
diff --git a/Base/res/themes/Cupertino.ini b/Base/res/themes/Cupertino.ini
@@ -69,9 +69,11 @@ TooltipText=white
 Tray=#212121
 TrayText=#fcfcfc
 
+[Alignments]
+TitleAlignment=Center
+
 [Flags]
 IsDark=true
-IsTitleCenter=true
 
 [Metrics]
 BorderRadius=8
diff --git a/Base/res/themes/Dark.ini b/Base/res/themes/Dark.ini
@@ -64,6 +64,8 @@ TooltipText=white
 Tray=#323232
 TrayText=white
 
+[Alignments]
+TitleAlignment=Left
+
 [Flags]
 IsDark=true
-IsTitleCenter=false
diff --git a/Base/res/themes/Default.ini b/Base/res/themes/Default.ini
@@ -72,9 +72,11 @@ TooltipText=black
 Tray=#808080
 TrayText=#ffffff
 
+[Alignments]
+TitleAlignment=Left
+
 [Flags]
 IsDark=false
-IsTitleCenter=false
 
 [Metrics]
 BorderThickness=4
diff --git a/Base/res/themes/Desert.ini b/Base/res/themes/Desert.ini
@@ -72,9 +72,11 @@ TooltipText=black
 Tray=#a28d68
 TrayText=white
 
+[Alignments]
+TitleAlignment=Left
+
 [Flags]
 IsDark=false
-IsTitleCenter=false
 
 [Metrics]
 TitleHeight=19
diff --git a/Base/res/themes/Faux Pas.ini b/Base/res/themes/Faux Pas.ini
@@ -64,6 +64,8 @@ TooltipText=black
 Tray=#282828
 TrayText=white
 
+[Alignments]
+TitleAlignment=Left
+
 [Flags]
 IsDark=false
-IsTitleCenter=false
diff --git a/Base/res/themes/Light.ini b/Base/res/themes/Light.ini
@@ -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
diff --git a/Base/res/themes/Nord.ini b/Base/res/themes/Nord.ini
@@ -64,6 +64,8 @@ TooltipText=white
 Tray=#3b4252
 TrayText=white
 
+[Alignments]
+TitleAlignment=Left
+
 [Flags]
 IsDark=true
-IsTitleCenter=false
diff --git a/Base/res/themes/Plum.ini b/Base/res/themes/Plum.ini
@@ -72,9 +72,11 @@ TooltipText=black
 Tray=#808080
 TrayText=#ffffff
 
+[Alignments]
+TitleAlignment=Left
+
 [Flags]
 IsDark=false
-IsTitleCenter=false
 
 [Metrics]
 TitleHeight=19
diff --git a/Base/res/themes/Redmond 2000.ini b/Base/res/themes/Redmond 2000.ini
@@ -68,9 +68,11 @@ TooltipText=black
 Tray=#808080
 TrayText=white
 
+[Alignments]
+TitleAlignment=Left
+
 [Flags]
 IsDark=false
-IsTitleCenter=false
 
 [Metrics]
 TitleButtonWidth=17
diff --git a/Base/res/themes/Redmond.ini b/Base/res/themes/Redmond.ini
@@ -68,9 +68,11 @@ TooltipText=black
 Tray=#808080
 TrayText=white
 
+[Alignments]
+TitleAlignment=Left
+
 [Flags]
 IsDark=false
-IsTitleCenter=false
 
 [Metrics]
 TitleButtonWidth=17
diff --git a/Base/res/themes/Silver.ini b/Base/res/themes/Silver.ini
@@ -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/
diff --git a/Base/res/themes/Sunshine.ini b/Base/res/themes/Sunshine.ini
@@ -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/
diff --git a/Userland/Libraries/LibGUI/Variant.cpp b/Userland/Libraries/LibGUI/Variant.cpp
@@ -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:
diff --git a/Userland/Libraries/LibGUI/Variant.h b/Userland/Libraries/LibGUI/Variant.h
@@ -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 @@ class Variant {
     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 @@ class Variant {
         Font,
         TextAlignment,
         ColorRole,
+        AlignmentRole,
         FlagRole,
         MetricRole,
         PathRole,
@@ -90,6 +93,7 @@ class Variant {
     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 @@ class Variant {
         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 @@ class Variant {
         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;
diff --git a/Userland/Libraries/LibGfx/ClassicWindowTheme.cpp b/Userland/Libraries/LibGfx/ClassicWindowTheme.cpp
@@ -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,36 +74,47 @@ 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) {
                 for (int i = 2; i <= titlebar_inner_rect.height() - 2; i += 2) {
                     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());
diff --git a/Userland/Libraries/LibGfx/Palette.cpp b/Userland/Libraries/LibGfx/Palette.cpp
@@ -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)
diff --git a/Userland/Libraries/LibGfx/Palette.h b/Userland/Libraries/LibGfx/Palette.h
diff --git a/Userland/Libraries/LibGfx/SystemTheme.cpp b/Userland/Libraries/LibGfx/SystemTheme.cpp
diff --git a/Userland/Libraries/LibGfx/SystemTheme.h b/Userland/Libraries/LibGfx/SystemTheme.h
