mirror of
https://github.com/SerenityOS/serenity
synced 2024-10-15 04:13:11 +00:00
LibWeb: Implement flex reverse layouts
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:
parent
645d49fa53
commit
747f347b75
|
@ -76,6 +76,12 @@
|
||||||
<div class="box" style="order: 1;flex: 80% 0 1;">2</div>
|
<div class="box" style="order: 1;flex: 80% 0 1;">2</div>
|
||||||
<div class="box" style="flex: 80% 0 0;">3</div>
|
<div class="box" style="flex: 80% 0 0;">3</div>
|
||||||
</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>
|
<p>3/-1/-2</p>
|
||||||
<div class="my-container" style="width: 500px;">
|
<div class="my-container" style="width: 500px;">
|
||||||
<div class="box" style="order: 3;flex: 80% 0 4;">1</div>
|
<div class="box" style="order: 3;flex: 80% 0 4;">1</div>
|
||||||
|
|
|
@ -48,8 +48,6 @@ void FlexFormattingContext::run(Box const& run_box, LayoutMode)
|
||||||
|
|
||||||
// This implements https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
|
// This implements https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
|
||||||
|
|
||||||
// FIXME: Implement reverse and ordering.
|
|
||||||
|
|
||||||
// 1. Generate anonymous flex items
|
// 1. Generate anonymous flex items
|
||||||
generate_anonymous_flex_items();
|
generate_anonymous_flex_items();
|
||||||
|
|
||||||
|
@ -203,13 +201,25 @@ void FlexFormattingContext::generate_anonymous_flex_items()
|
||||||
});
|
});
|
||||||
|
|
||||||
auto keys = order_item_bucket.keys();
|
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) {
|
for (auto key : keys) {
|
||||||
auto order_bucket = order_item_bucket.get(key);
|
auto order_bucket = order_item_bucket.get(key);
|
||||||
if (order_bucket.has_value()) {
|
if (order_bucket.has_value()) {
|
||||||
for (auto flex_item : order_bucket.value()) {
|
auto items = order_bucket.value();
|
||||||
m_flex_items.append(move(flex_item));
|
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));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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_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_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;
|
void populate_specified_margins(FlexItem&, CSS::FlexDirection) const;
|
||||||
|
|
||||||
FormattingState::NodeState& m_flex_container_state;
|
FormattingState::NodeState& m_flex_container_state;
|
||||||
|
|
Loading…
Reference in a new issue