GTabWidget: Make a custom look for tab buttons.

Applications/ProcessManager/main.cpp

@@ -24,9 +24,14 @@ int main(int argc, char** argv)
     tabwidget->add_widget("Processes", widget);
     auto* placeholder_label = new GLabel("Placeholder text");
     placeholder_label->set_fill_with_background_color(true);
-    placeholder_label->set_background_color(Color::from_rgb(0xffc0c0));
+    placeholder_label->set_background_color(Color::LightGray);
     tabwidget->add_widget("Placeholder", placeholder_label);
 
+    auto* placeholder2_label = new GLabel("Placeholder2 text");
+    placeholder2_label->set_fill_with_background_color(true);
+    placeholder2_label->set_background_color(Color::LightGray);
+    tabwidget->add_widget("Another", placeholder2_label);
+
     widget->set_layout(make<GBoxLayout>(Orientation::Vertical));
 
     auto* toolbar = new GToolBar(widget);

LibGUI/GTabWidget.cpp

@@ -81,21 +81,40 @@ void GTabWidget::paint_event(GPaintEvent& event)
     GPainter painter(*this);
     painter.add_clip_rect(event.rect());
 
-    painter.fill_rect(bar_rect(), Color::MidGray);
+    painter.fill_rect(bar_rect(), Color::LightGray);
 
     for (int i = 0; i < m_tabs.size(); ++i) {
+        if (m_tabs[i].widget == m_active_widget)
+            continue;
         auto button_rect = this->button_rect(i);
-        StylePainter::paint_button(painter, button_rect, ButtonStyle::Normal, m_tabs[i].widget == m_active_widget);
+        StylePainter::paint_tab_button(painter, button_rect, false, m_tabs[i].hovered, m_tabs[i].widget->is_enabled());
         painter.draw_text(button_rect, m_tabs[i].title, TextAlignment::Center);
     }
+
+    for (int i = 0; i < m_tabs.size(); ++i) {
+        if (m_tabs[i].widget != m_active_widget)
+            continue;
+        auto button_rect = this->button_rect(i);
+        StylePainter::paint_tab_button(painter, button_rect, true, m_tabs[i].hovered, m_tabs[i].widget->is_enabled());
+        painter.draw_text(button_rect, m_tabs[i].title, TextAlignment::Center);
+        break;
+    }
 }
 
 Rect GTabWidget::button_rect(int index) const
 {
-    int x_offset = 0;
+    int x_offset = 2;
     for (int i = 0; i < index; ++i)
         x_offset += m_tabs[i].width(font());
-    return { x_offset, 0, m_tabs[index].width(font()), bar_height() };
+    Rect rect { x_offset, 0, m_tabs[index].width(font()), bar_height() };
+    if (m_tabs[index].widget != m_active_widget) {
+        rect.move_by(0, 2);
+        rect.set_height(rect.height() - 2);
+    } else {
+        rect.move_by(-2, 0);
+        rect.set_width(rect.width() + 4);
+    }
+    return rect;
 }
 
 int GTabWidget::TabData::width(const Font& font) const

LibGUI/GTabWidget.h

@@ -34,6 +34,7 @@ private:
         int width(const Font&) const;
         String title;
         GWidget* widget { nullptr };
+        bool hovered { false };
     };
     Vector<TabData> m_tabs;
 };

SharedGraphics/StylePainter.cpp

@@ -1,6 +1,41 @@
 #include <SharedGraphics/StylePainter.h>
 #include <LibGUI/GPainter.h>
 
+void StylePainter::paint_tab_button(Painter& painter, const Rect& rect, bool active, bool hovered, bool enabled)
+{
+    Color button_color = Color::from_rgb(0xc0c0c0);
+    Color highlight_color2 = Color::from_rgb(0xdfdfdf);
+    Color shadow_color1 = Color::from_rgb(0x808080);
+    Color shadow_color2 = Color::from_rgb(0x404040);
+    ASSERT(!hovered);
+
+    if (enabled) {
+        if (hovered)
+            button_color = Color::from_rgb(0xe3dfdb);
+        //else
+//            button_color = Color::from_rgb(0xd6d2ce);
+    } else if (hovered && enabled)
+        button_color = Color::from_rgb(0xd4d4d4);
+
+    PainterStateSaver saver(painter);
+    painter.translate(rect.location());
+
+    // Base
+    painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 1 }, button_color);
+
+    // Top line
+    painter.draw_line({ 2, 0 }, { rect.width() - 3, 0 }, highlight_color2);
+
+    // Left side
+    painter.draw_line({ 0, 2 }, { 0, rect.height() - 1 }, highlight_color2);
+    painter.set_pixel({ 1, 1 }, highlight_color2);
+
+    // Right side
+    painter.draw_line({ rect.width() - 1, 2, }, { rect.width() - 1, rect.height() - 1 }, shadow_color2);
+    painter.draw_line({ rect.width() - 2, 2, }, { rect.width() - 2, rect.height() - 1 }, shadow_color1);
+    painter.set_pixel({ rect.width() - 2, 1, }, shadow_color2);
+}
+
 static void paint_button_new(Painter& painter, const Rect& rect, bool pressed, bool checked, bool hovered, bool enabled)
 {
     Color button_color = Color::from_rgb(0xc0c0c0);

SharedGraphics/StylePainter.h

@@ -10,6 +10,7 @@ enum class FrameShape { NoFrame, Box, Container, Panel, VerticalLine, Horizontal
 class StylePainter {
 public:
     static void paint_button(Painter&, const Rect&, ButtonStyle, bool pressed, bool hovered = false, bool checked = false, bool enabled = true);
+    static void paint_tab_button(Painter&, const Rect&, bool active, bool hovered, bool enabled);
     static void paint_surface(Painter&, const Rect&, bool paint_vertical_lines = true);
     static void paint_frame(Painter&, const Rect&, FrameShape, FrameShadow, int thickness, bool skip_vertical_lines = false);
     static void paint_menu_frame(Painter&, const Rect&);