mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 23:37:35 +00:00
LibGUI: TabWidget add vertical tabs
Add vertical tabs to TabWidget, this can be set using the ```TabWidget::set_tab_position``` function or in the GML
This commit is contained in:
Cameron Youell
Andreas Kling
parent
8a7876d65c
commit
5b82bd719e
7 changed files with 155 additions and 88 deletions
|
|
@ -2,6 +2,7 @@
|
|||
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
|
||||
* Copyright (c) 2020, Sarah Taube <metalflakecobaltpaint@gmail.com>
|
||||
* Copyright (c) 2021, Filiph Sandström <filiph.sandstrom@filfatstudios.com>
|
||||
* Copyright (c) 2022, Cameron Youell <cameronyouell@gmail.com>
|
||||
* Copyright (c) 2022, the SerenityOS developers.
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
|
|
@ -17,7 +18,7 @@
|
|||
|
||||
namespace Gfx {
|
||||
|
||||
void ClassicStylePainter::paint_tab_button(Painter& painter, IntRect const& rect, Palette const& palette, bool active, bool hovered, bool enabled, bool top, bool in_active_window)
|
||||
void ClassicStylePainter::paint_tab_button(Painter& painter, IntRect const& rect, Palette const& palette, bool active, bool hovered, bool enabled, GUI::TabWidget::TabPosition position, bool in_active_window)
|
||||
{
|
||||
Color base_color = palette.button();
|
||||
Color highlight_color2 = palette.threed_highlight();
|
||||
|
|
@ -30,18 +31,19 @@ void ClassicStylePainter::paint_tab_button(Painter& painter, IntRect const& rect
|
|||
PainterStateSaver saver(painter);
|
||||
painter.translate(rect.location());
|
||||
|
||||
if (top) {
|
||||
auto accent = palette.accent();
|
||||
if (!in_active_window)
|
||||
accent = accent.to_grayscale();
|
||||
|
||||
switch (position) {
|
||||
case GUI::TabWidget::TabPosition::Top:
|
||||
// Base
|
||||
painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 1 }, base_color);
|
||||
|
||||
// Top line
|
||||
if (active) {
|
||||
auto accent = palette.accent();
|
||||
if (!in_active_window)
|
||||
accent = accent.to_grayscale();
|
||||
painter.draw_line({ 3, 0 }, { rect.width() - 3, 0 }, accent.darkened());
|
||||
Gfx::IntRect accent_rect { 1, 1, rect.width() - 2, 2 };
|
||||
painter.fill_rect_with_gradient(accent_rect, accent, accent.lightened(1.5f));
|
||||
painter.fill_rect_with_gradient({ 1, 1, rect.width() - 2, 2 }, accent, accent.lightened(1.5f));
|
||||
painter.set_pixel({ 2, 0 }, highlight_color2);
|
||||
} else {
|
||||
painter.draw_line({ 2, 0 }, { rect.width() - 3, 0 }, highlight_color2);
|
||||
|
|
@ -52,27 +54,17 @@ void ClassicStylePainter::paint_tab_button(Painter& painter, IntRect const& rect
|
|||
painter.set_pixel({ 1, 1 }, highlight_color2);
|
||||
|
||||
// Right side
|
||||
|
||||
IntPoint top_right_outer { rect.width() - 1, 2 };
|
||||
IntPoint bottom_right_outer { rect.width() - 1, rect.height() - 1 };
|
||||
painter.draw_line(top_right_outer, bottom_right_outer, shadow_color2);
|
||||
|
||||
IntPoint top_right_inner { rect.width() - 2, 2 };
|
||||
IntPoint bottom_right_inner { rect.width() - 2, rect.height() - 1 };
|
||||
painter.draw_line(top_right_inner, bottom_right_inner, shadow_color1);
|
||||
|
||||
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);
|
||||
} else {
|
||||
break;
|
||||
case GUI::TabWidget::TabPosition::Bottom:
|
||||
// Base
|
||||
painter.fill_rect({ 0, 0, rect.width() - 1, rect.height() }, base_color);
|
||||
|
||||
// Bottom line
|
||||
if (active) {
|
||||
auto accent = palette.accent();
|
||||
if (!in_active_window)
|
||||
accent = accent.to_grayscale();
|
||||
Gfx::IntRect accent_rect { 1, rect.height() - 3, rect.width() - 2, 2 };
|
||||
painter.fill_rect_with_gradient(accent_rect, accent, accent.lightened(1.5f));
|
||||
painter.fill_rect_with_gradient({ 1, rect.height() - 3, rect.width() - 2, 2 }, accent, accent.lightened(1.5f));
|
||||
painter.draw_line({ 2, rect.height() - 1 }, { rect.width() - 3, rect.height() - 1 }, accent.darkened());
|
||||
} else {
|
||||
painter.draw_line({ 2, rect.height() - 1 }, { rect.width() - 3, rect.height() - 1 }, shadow_color2);
|
||||
|
|
@ -83,15 +75,48 @@ void ClassicStylePainter::paint_tab_button(Painter& painter, IntRect const& rect
|
|||
painter.set_pixel({ 1, rect.height() - 2 }, highlight_color2);
|
||||
|
||||
// Right side
|
||||
IntPoint top_right_outer { rect.width() - 1, 0 };
|
||||
IntPoint bottom_right_outer { rect.width() - 1, rect.height() - 3 };
|
||||
painter.draw_line(top_right_outer, bottom_right_outer, shadow_color2);
|
||||
painter.draw_line({ rect.width() - 1, 0 }, { rect.width() - 1, rect.height() - 3 }, shadow_color2);
|
||||
painter.draw_line({ rect.width() - 2, 0 }, { rect.width() - 2, rect.height() - 3 }, shadow_color1);
|
||||
painter.set_pixel({ rect.width() - 2, rect.height() - 2 }, shadow_color2);
|
||||
break;
|
||||
case GUI::TabWidget::TabPosition::Left:
|
||||
// Base tab
|
||||
painter.fill_rect({ 1, 1, rect.width(), rect.height() - 1 }, base_color);
|
||||
painter.draw_line({ 2, 0 }, { rect.width(), 0 }, highlight_color2);
|
||||
painter.draw_line({ 2, rect.height() - 1 }, { rect.width(), rect.height() - 1 }, shadow_color2);
|
||||
|
||||
IntPoint top_right_inner { rect.width() - 2, 0 };
|
||||
IntPoint bottom_right_inner { rect.width() - 2, rect.height() - 3 };
|
||||
painter.draw_line(top_right_inner, bottom_right_inner, shadow_color1);
|
||||
// If the tab is active, draw the accent line
|
||||
if (active) {
|
||||
painter.fill_rect_with_gradient({ 1, 1, 2, rect.height() - 2 }, accent, accent.lightened(1.5f));
|
||||
painter.draw_line({ 0, 2 }, { 0, rect.height() - 3 }, accent.darkened());
|
||||
} else {
|
||||
painter.draw_line({ 0, 2 }, { 0, rect.height() - 3 }, highlight_color2);
|
||||
painter.draw_line({ rect.width(), 1 }, { rect.width(), rect.height() - 1 }, shadow_color1);
|
||||
}
|
||||
|
||||
painter.set_pixel(rect.width() - 2, rect.height() - 2, shadow_color2);
|
||||
// Make appear as if the tab is rounded
|
||||
painter.set_pixel({ 1, 1 }, highlight_color2);
|
||||
painter.set_pixel({ 1, rect.height() - 2 }, shadow_color2);
|
||||
break;
|
||||
case GUI::TabWidget::TabPosition::Right:
|
||||
// Base tab
|
||||
painter.fill_rect({ 0, 1, rect.width() - 1, rect.height() - 1 }, base_color);
|
||||
painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, highlight_color2);
|
||||
painter.draw_line({ 0, rect.height() - 1 }, { rect.width() - 2, rect.height() - 1 }, shadow_color2);
|
||||
|
||||
// If the tab is active, draw the accent line
|
||||
if (active) {
|
||||
painter.fill_rect_with_gradient({ rect.width() - 2, 1, 2, rect.height() - 2 }, accent.lightened(1.5f), accent);
|
||||
painter.draw_line({ rect.width(), 2 }, { rect.width(), rect.height() - 3 }, accent.darkened());
|
||||
} else {
|
||||
painter.draw_line({ rect.width(), 2 }, { rect.width(), rect.height() - 3 }, shadow_color2);
|
||||
painter.draw_line({ 0, 0 }, { 0, rect.height() - 1 }, shadow_color1);
|
||||
}
|
||||
|
||||
// Make appear as if the tab is rounded
|
||||
painter.set_pixel({ rect.width() - 1, 1 }, shadow_color1);
|
||||
painter.set_pixel({ rect.width() - 1, rect.height() - 2 }, shadow_color2);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ namespace Gfx {
|
|||
class ClassicStylePainter : public BaseStylePainter {
|
||||
public:
|
||||
virtual void paint_button(Painter&, IntRect const&, Palette const&, ButtonStyle, bool pressed, bool hovered = false, bool checked = false, bool enabled = true, bool focused = false, bool default_button = false) override;
|
||||
virtual void paint_tab_button(Painter&, IntRect const&, Palette const&, bool active, bool hovered, bool enabled, bool top, bool in_active_window) override;
|
||||
virtual void paint_tab_button(Painter&, IntRect const&, Palette const&, bool active, bool hovered, bool enabled, GUI::TabWidget::TabPosition position, bool in_active_window) override;
|
||||
virtual void paint_frame(Painter&, IntRect const&, Palette const&, FrameShape, FrameShadow, int thickness, bool skip_vertical_lines = false) override;
|
||||
virtual void paint_window_frame(Painter&, IntRect const&, Palette const&) override;
|
||||
virtual void paint_progressbar(Painter&, IntRect const&, Palette const&, int min, int max, int value, StringView text, Orientation = Orientation::Horizontal) override;
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@ BaseStylePainter& StylePainter::current()
|
|||
return style;
|
||||
}
|
||||
|
||||
void StylePainter::paint_tab_button(Painter& painter, IntRect const& rect, Palette const& palette, bool active, bool hovered, bool enabled, bool top, bool in_active_window)
|
||||
void StylePainter::paint_tab_button(Painter& painter, IntRect const& rect, Palette const& palette, bool active, bool hovered, bool enabled, GUI::TabWidget::TabPosition position, bool in_active_window)
|
||||
{
|
||||
current().paint_tab_button(painter, rect, palette, active, hovered, enabled, top, in_active_window);
|
||||
current().paint_tab_button(painter, rect, palette, active, hovered, enabled, position, in_active_window);
|
||||
}
|
||||
|
||||
void StylePainter::paint_button(Painter& painter, IntRect const& rect, Palette const& palette, ButtonStyle button_style, bool pressed, bool hovered, bool checked, bool enabled, bool focused, bool default_button)
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
#pragma once
|
||||
|
||||
#include <AK/Forward.h>
|
||||
#include <LibGUI/TabWidget.h>
|
||||
#include <LibGfx/Forward.h>
|
||||
#include <LibGfx/Orientation.h>
|
||||
|
||||
|
|
@ -37,7 +38,7 @@ public:
|
|||
virtual ~BaseStylePainter() = default;
|
||||
|
||||
virtual void paint_button(Painter&, IntRect const&, Palette const&, ButtonStyle, bool pressed, bool hovered = false, bool checked = false, bool enabled = true, bool focused = false, bool default_button = false) = 0;
|
||||
virtual void paint_tab_button(Painter&, IntRect const&, Palette const&, bool active, bool hovered, bool enabled, bool top, bool in_active_window) = 0;
|
||||
virtual void paint_tab_button(Painter&, IntRect const&, Palette const&, bool active, bool hovered, bool enabled, GUI::TabWidget::TabPosition position, bool in_active_window) = 0;
|
||||
virtual void paint_frame(Painter&, IntRect const&, Palette const&, FrameShape, FrameShadow, int thickness, bool skip_vertical_lines = false) = 0;
|
||||
virtual void paint_window_frame(Painter&, IntRect const&, Palette const&) = 0;
|
||||
virtual void paint_progressbar(Painter&, IntRect const&, Palette const&, int min, int max, int value, StringView text, Orientation = Orientation::Horizontal) = 0;
|
||||
|
|
@ -56,7 +57,7 @@ public:
|
|||
|
||||
// FIXME: These are here for API compatibility, we should probably remove them and move BaseStylePainter into here
|
||||
static void paint_button(Painter&, IntRect const&, Palette const&, ButtonStyle, bool pressed, bool hovered = false, bool checked = false, bool enabled = true, bool focused = false, bool default_button = false);
|
||||
static void paint_tab_button(Painter&, IntRect const&, Palette const&, bool active, bool hovered, bool enabled, bool top, bool in_active_window);
|
||||
static void paint_tab_button(Painter&, IntRect const&, Palette const&, bool active, bool hovered, bool enabled, GUI::TabWidget::TabPosition position, bool in_active_window);
|
||||
static void paint_frame(Painter&, IntRect const&, Palette const&, FrameShape, FrameShadow, int thickness, bool skip_vertical_lines = false);
|
||||
static void paint_window_frame(Painter&, IntRect const&, Palette const&);
|
||||
static void paint_progressbar(Painter&, IntRect const&, Palette const&, int min, int max, int value, StringView text, Orientation = Orientation::Horizontal);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue