RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2026-01-12 22:30:59 +00:00
Code Issues Activity Actions

LibGUI: Programatically draw table header sorting arrows

Browse source 
These arrows were previously drawn using the code points U+2B06 and
U+2B07. The .png files for these emoji were removed in commit bfe99eb
and added to the Katica Regular 10 font in commit cf62d08. The emoji
were not added to the bold Katica variants that are used by the table
header view. The effect is that a "?" replacement character was
rendered.

Instead of rendering the emoji, we can draw the arrows programatically,
like we do in other GUI components (e.g. the scrollbar).
This commit is contained in:
Timothy Flynn 2022-08-15 10:26:24 -04:00 • committed by Andreas Kling
parent e746360b9a
commit 32642394a9
4 changed files with 32 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Userland/Libraries/LibGUI/AbstractTableView.cpp
View file

@ -60,7 +60,7 @@ void AbstractTableView::auto_resize_column(int column)
int header_width = m_column_header->font().width(model.column_name(column));
if (column == m_key_column && model.is_column_sortable(column))
header_width += font().width(" \xE2\xAC\x86"sv);
header_width += HeaderView::sorting_arrow_width + HeaderView::sorting_arrow_offset;
int column_width = header_width;
bool is_empty = true;
@ -99,7 +99,7 @@ void AbstractTableView::update_column_sizes()
continue;
int header_width = m_column_header->font().width(model.column_name(column));
if (column == m_key_column && model.is_column_sortable(column))
header_width += font().width(" \xE2\xAC\x86"sv); // UPWARDS BLACK ARROW
header_width += HeaderView::sorting_arrow_width + HeaderView::sorting_arrow_offset;
int column_width = header_width;
for (int row = 0; row < row_count; ++row) {
auto cell_data = model.index(row, column).data();

24
Userland/Libraries/LibGUI/HeaderView.cpp
View file

@ -264,22 +264,22 @@ void HeaderView::paint_horizontal(Painter& painter)
bool pressed = section == m_pressed_section && m_pressed_section_is_pressed;
bool hovered = section == m_hovered_section && model()->is_column_sortable(section);
Gfx::StylePainter::paint_button(painter, cell_rect, palette(), Gfx::ButtonStyle::Normal, pressed, hovered);
String text;
if (is_key_column) {
StringBuilder builder;
builder.append(model()->column_name(section));
if (m_table_view.sort_order() == SortOrder::Ascending)
builder.append(" \xE2\xAC\x86"sv); // UPWARDS BLACK ARROW
else if (m_table_view.sort_order() == SortOrder::Descending)
builder.append(" \xE2\xAC\x87"sv); // DOWNWARDS BLACK ARROW
text = builder.to_string();
} else {
text = model()->column_name(section);
}
auto text = model()->column_name(section);
auto text_rect = cell_rect.shrunken(m_table_view.horizontal_padding() * 2, 0);
if (pressed)
text_rect.translate_by(1, 1);
painter.draw_text(text_rect, text, font(), section_data.alignment, palette().button_text());
if (is_key_column && (m_table_view.sort_order() != SortOrder::None)) {
Gfx::IntPoint offset { text_rect.x() + font().width(text) + sorting_arrow_offset, sorting_arrow_offset };
auto coordinates = m_table_view.sort_order() == SortOrder::Ascending
? ascending_arrow_coordinates.span()
: descending_arrow_coordinates.span();
painter.draw_triangle(offset, coordinates, palette().button_text());
}
x_offset += section_width + m_table_view.horizontal_padding() * 2;
}

15
Userland/Libraries/LibGUI/HeaderView.h
View file

@ -41,6 +41,21 @@ public:
Function<void(int section)> on_resize_doubleclick;
static constexpr auto const sorting_arrow_offset = 3;
static constexpr auto const sorting_arrow_width = 6;
static constexpr auto const ascending_arrow_coordinates = Array {
Gfx::IntPoint { 4, 2 },
Gfx::IntPoint { 1, 5 },
Gfx::IntPoint { 7, 5 },
};
static constexpr auto const descending_arrow_coordinates = Array {
Gfx::IntPoint { 1, 3 },
Gfx::IntPoint { 7, 3 },
Gfx::IntPoint { 4, 6 },
};
private:
HeaderView(AbstractTableView&, Gfx::Orientation);

6
Userland/Libraries/LibGUI/TreeView.cpp
View file

@ -644,7 +644,7 @@ void TreeView::auto_resize_column(int column)
int header_width = column_header().font().width(model.column_name(column));
if (column == m_key_column && model.is_column_sortable(column))
header_width += font().width(" \xE2\xAC\x86"sv);
header_width += HeaderView::sorting_arrow_width + HeaderView::sorting_arrow_offset;
int column_width = header_width;
bool is_empty = true;
@ -689,7 +689,7 @@ void TreeView::update_column_sizes()
continue;
int header_width = column_header().font().width(model.column_name(column));
if (column == m_key_column && model.is_column_sortable(column))
header_width += font().width(" \xE2\xAC\x86"sv);
header_width += HeaderView::sorting_arrow_width + HeaderView::sorting_arrow_offset;
int column_width = header_width;
traverse_in_paint_order([&](ModelIndex const& index, Gfx::IntRect const&, Gfx::IntRect const&, int) {
auto cell_data = model.index(index.row(), column, index.parent()).data();
@ -710,7 +710,7 @@ void TreeView::update_column_sizes()
int tree_column_header_width = column_header().font().width(model.column_name(tree_column));
if (tree_column == m_key_column && model.is_column_sortable(tree_column))
tree_column_header_width += font().width(" \xE2\xAC\x86"sv);
tree_column_header_width += HeaderView::sorting_arrow_width + HeaderView::sorting_arrow_offset;
int tree_column_width = tree_column_header_width;
traverse_in_paint_order([&](ModelIndex const& index, Gfx::IntRect const&, Gfx::IntRect const&, int indent_level) {
auto cell_data = model.index(index.row(), tree_column, index.parent()).data();