system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-21 18:15:58 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Implement flex reverse layouts

Browse source 
This builds on the work done by implementing the flex order CSS
property and implements flex reverse layouts by just reversing
the order and the items within each order bucket.
This commit is contained in:
Enver Balalic 2022-04-02 11:29:55 +02:00 committed by Andreas Kling
parent 645d49fa53
commit 747f347b75
3 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Base/res/html/misc/flex-order.html
View file

@ -76,6 +76,12 @@
<div class="box" style="order: 1;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p>1/1/<> - reverse</p>
<div class="my-container" style="flex-direction: row-reverse; width: 500px;">
<div class="box" style="order: 1;flex: 80% 0 4;">1</div>
<div class="box" style="order: 1;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p>3/-1/-2</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: 3;flex: 80% 0 4;">1</div>

20
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -48,8 +48,6 @@ void FlexFormattingContext::run(Box const& run_box, LayoutMode)
// This implements https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
// FIXME: Implement reverse and ordering.
// 1. Generate anonymous flex items
generate_anonymous_flex_items();
@ -203,13 +201,25 @@ void FlexFormattingContext::generate_anonymous_flex_items()
});
auto keys = order_item_bucket.keys();
quick_sort(keys, [](auto& a, auto& b) { return a < b; });
if (is_direction_reverse()) {
quick_sort(keys, [](auto& a, auto& b) { return a > b; });
} else {
quick_sort(keys, [](auto& a, auto& b) { return a < b; });
}
for (auto key : keys) {
auto order_bucket = order_item_bucket.get(key);
if (order_bucket.has_value()) {
for (auto flex_item : order_bucket.value()) {
m_flex_items.append(move(flex_item));
auto items = order_bucket.value();
if (is_direction_reverse()) {
for (auto flex_item : items.in_reverse()) {
m_flex_items.append(move(flex_item));
}
} else {
for (auto flex_item : items) {
m_flex_items.append(move(flex_item));
}
}
}
}

2
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
View file

@ -118,7 +118,7 @@ private:
bool is_row_layout() const { return m_flex_direction == CSS::FlexDirection::Row || m_flex_direction == CSS::FlexDirection::RowReverse; }
bool is_single_line() const { return flex_container().computed_values().flex_wrap() == CSS::FlexWrap::Nowrap; }
bool is_direction_reverse() const { return m_flex_direction == CSS::FlexDirection::ColumnReverse || m_flex_direction == CSS::FlexDirection::RowReverse; }
void populate_specified_margins(FlexItem&, CSS::FlexDirection) const;
FormattingState::NodeState& m_flex_container_state;