Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make TableListLayout respect padding by default #286

Merged
merged 1 commit into from
Apr 6, 2021
Merged

Make TableListLayout respect padding by default #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

### Fixed

- [`TableListLayout` now maintains padding by default and with center alignments.](https://github.com/kyleve/Listable/pull/286)

### Added

### Removed
Expand Down
31 changes: 17 additions & 14 deletions ListableUI/Sources/Layout/Table/TableListLayout.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,11 +459,13 @@ final class TableListLayout : ListLayout
let viewSize = context.viewBounds.size
let viewWidth = context.viewBounds.width

let rootWidth = TableAppearance.Layout.width(
with: viewSize.width,
let rootWidth = CustomWidth.custom(CustomWidth.Custom(
padding: HorizontalPadding(left: layout.padding.left, right: layout.padding.right),
constraint: layout.width
)
width: layout.width,
alignment: .center
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume / think the actual value passed here doesn't matter, since we're measuring within a container of the same width, right? Eg, no other place we should be pulling this value from?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not that I can think of. I didn't see an alignment option in the layout itself. I chose .center because it most closely matched the behavior of CustomWidth.default, with the addition of considering the padding.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

))

let defaultWidth = rootWidth.position(with: viewSize, defaultWidth: viewSize.width).width

//
// Item Positioning
Expand Down Expand Up @@ -497,8 +499,8 @@ final class TableListLayout : ListLayout

performLayout(for: self.content.header) { header in
let hasListHeader = self.content.header.isPopulated

let position = header.layouts.table.width.position(with: viewSize, defaultWidth: rootWidth)
let headerWith = header.layouts.table.width.merge(with: rootWidth)
let position = headerWith.position(with: viewSize, defaultWidth: defaultWidth)

let measureInfo = Sizing.MeasureInfo(
sizeConstraint: CGSize(width: position.width, height: .greatestFiniteMagnitude),
Expand Down Expand Up @@ -526,8 +528,8 @@ final class TableListLayout : ListLayout
//

self.content.sections.forEachWithIndex { sectionIndex, isLast, section in

let sectionPosition = section.layouts.table.width.position(with: viewSize, defaultWidth: rootWidth)
let sectionWidth = section.layouts.table.width.merge(with: rootWidth)
let sectionPosition = sectionWidth.position(with: viewSize, defaultWidth: defaultWidth)

//
// Section Header
Expand All @@ -537,7 +539,7 @@ final class TableListLayout : ListLayout
let hasSectionFooter = section.footer.isPopulated

performLayout(for: section.header) { header in
let width = header.layouts.table.width.merge(with: section.layouts.table.width)
let width = header.layouts.table.width.merge(with: sectionWidth)
let position = width.position(with: viewSize, defaultWidth: sectionPosition.width)

let measureInfo = Sizing.MeasureInfo(
Expand Down Expand Up @@ -567,7 +569,7 @@ final class TableListLayout : ListLayout

if section.layouts.table.columns.count == 1 {
section.items.forEachWithIndex { itemIndex, isLast, item in
let width = item.layouts.table.width.merge(with: section.layouts.table.width)
let width = item.layouts.table.width.merge(with: rootWidth)
let itemPosition = width.position(with: viewSize, defaultWidth: sectionPosition.width)

let measureInfo = Sizing.MeasureInfo(
Expand Down Expand Up @@ -644,7 +646,7 @@ final class TableListLayout : ListLayout
//

performLayout(for: section.footer) { footer in
let width = footer.layouts.table.width.merge(with: section.layouts.table.width)
let width = footer.layouts.table.width.merge(with: sectionWidth)
let position = width.position(with: viewSize, defaultWidth: sectionPosition.width)

let measureInfo = Sizing.MeasureInfo(
Expand Down Expand Up @@ -690,8 +692,8 @@ final class TableListLayout : ListLayout

performLayout(for: self.content.footer) { footer in
let hasFooter = footer.isPopulated

let position = footer.layouts.table.width.position(with: viewSize, defaultWidth: rootWidth)
let footerWidth = footer.layouts.table.width.merge(with: rootWidth)
let position = footerWidth.position(with: viewSize, defaultWidth: defaultWidth)

let measureInfo = Sizing.MeasureInfo(
sizeConstraint: CGSize(width: position.width, height: .greatestFiniteMagnitude),
Expand Down Expand Up @@ -720,7 +722,8 @@ final class TableListLayout : ListLayout
//

performLayout(for: self.content.overscrollFooter) { footer in
let position = footer.layouts.table.width.position(with: viewSize, defaultWidth: rootWidth)
let footerWidth = footer.layouts.table.width.merge(with: rootWidth)
let position = footerWidth.position(with: viewSize, defaultWidth: defaultWidth)

let measureInfo = Sizing.MeasureInfo(
sizeConstraint: CGSize(width: position.width, height: .greatestFiniteMagnitude),
Expand Down
3 changes: 2 additions & 1 deletion ListableUI/Sources/Sizing.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,8 @@ public enum CustomWidth : Equatable
case .left:
return padding.left
case .center:
return round((parentWidth - width) / 2.0)
let availableWidth = parentWidth - (padding.left + padding.right)
return round((availableWidth - width) / 2.0) + padding.left
case .right:
return parentWidth - width - padding.right
}
Expand Down
Binary file modified ...tLayoutTests.swift/All/test_layout_vertical()/Images/200.0 x 700.0.snapshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
134 changes: 67 additions & 67 deletions ...ts/TableListLayoutTests.swift/All/test_layout_vertical()/ListAttributes/200.0 x 700.0.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,159 +2,159 @@
▿ contentSize: (200.0, 700.0)
- width: 200.0
- height: 700.0
▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 10.0, 140.0, 50.0)))
▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 10.0, 140.0, 50.0)))
▿ some: ListableUI.ListLayoutAttributes.Supplementary
▿ frame: (30.0, 10.0, 140.0, 50.0)
▿ origin: (30.0, 10.0)
- x: 30.0
▿ frame: (20.0, 10.0, 140.0, 50.0)
▿ origin: (20.0, 10.0)
- x: 20.0
- y: 10.0
▿ size: (140.0, 50.0)
- width: 140.0
- height: 50.0
▿ footer: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 600.0, 140.0, 70.0)))
▿ footer: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 600.0, 140.0, 70.0)))
▿ some: ListableUI.ListLayoutAttributes.Supplementary
▿ frame: (30.0, 600.0, 140.0, 70.0)
▿ origin: (30.0, 600.0)
- x: 30.0
▿ frame: (20.0, 600.0, 140.0, 70.0)
▿ origin: (20.0, 600.0)
- x: 20.0
- y: 600.0
▿ size: (140.0, 70.0)
- width: 140.0
- height: 70.0
- overscrollFooter: nil
▿ sections: 4 elements
▿ ListableUI.ListLayoutAttributes.Section
▿ frame: (30.0, 80.0, 140.0, 160.0)
▿ origin: (30.0, 80.0)
- x: 30.0
▿ frame: (20.0, 80.0, 140.0, 160.0)
▿ origin: (20.0, 80.0)
- x: 20.0
- y: 80.0
▿ size: (140.0, 160.0)
- width: 140.0
- height: 160.0
▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 80.0, 140.0, 30.0)))
▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 80.0, 140.0, 30.0)))
▿ some: ListableUI.ListLayoutAttributes.Supplementary
▿ frame: (30.0, 80.0, 140.0, 30.0)
▿ origin: (30.0, 80.0)
- x: 30.0
▿ frame: (20.0, 80.0, 140.0, 30.0)
▿ origin: (20.0, 80.0)
- x: 20.0
- y: 80.0
▿ size: (140.0, 30.0)
- width: 140.0
- height: 30.0
▿ footer: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 200.0, 140.0, 40.0)))
▿ footer: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 200.0, 140.0, 40.0)))
▿ some: ListableUI.ListLayoutAttributes.Supplementary
▿ frame: (30.0, 200.0, 140.0, 40.0)
▿ origin: (30.0, 200.0)
- x: 30.0
▿ frame: (20.0, 200.0, 140.0, 40.0)
▿ origin: (20.0, 200.0)
- x: 20.0
- y: 200.0
▿ size: (140.0, 40.0)
- width: 140.0
- height: 40.0
▿ items: 3 elements
▿ ListableUI.ListLayoutAttributes.Item
▿ frame: (30.0, 120.0, 140.0, 20.0)
▿ origin: (30.0, 120.0)
- x: 30.0
▿ frame: (20.0, 120.0, 140.0, 20.0)
▿ origin: (20.0, 120.0)
- x: 20.0
- y: 120.0
▿ size: (140.0, 20.0)
- width: 140.0
- height: 20.0
▿ ListableUI.ListLayoutAttributes.Item
▿ frame: (30.0, 145.0, 140.0, 20.0)
▿ origin: (30.0, 145.0)
- x: 30.0
▿ frame: (20.0, 145.0, 140.0, 20.0)
▿ origin: (20.0, 145.0)
- x: 20.0
- y: 145.0
▿ size: (140.0, 20.0)
- width: 140.0
- height: 20.0
▿ ListableUI.ListLayoutAttributes.Item
▿ frame: (30.0, 170.0, 140.0, 20.0)
▿ origin: (30.0, 170.0)
- x: 30.0
▿ frame: (20.0, 170.0, 140.0, 20.0)
▿ origin: (20.0, 170.0)
- x: 20.0
- y: 170.0
▿ size: (140.0, 20.0)
- width: 140.0
- height: 20.0
▿ ListableUI.ListLayoutAttributes.Section
▿ frame: (30.0, 270.0, 140.0, 165.0)
▿ origin: (30.0, 270.0)
- x: 30.0
▿ frame: (20.0, 270.0, 140.0, 165.0)
▿ origin: (20.0, 270.0)
- x: 20.0
- y: 270.0
▿ size: (140.0, 165.0)
- width: 140.0
- height: 165.0
▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 270.0, 140.0, 30.0)))
▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 270.0, 140.0, 30.0)))
▿ some: ListableUI.ListLayoutAttributes.Supplementary
▿ frame: (30.0, 270.0, 140.0, 30.0)
▿ origin: (30.0, 270.0)
- x: 30.0
▿ frame: (20.0, 270.0, 140.0, 30.0)
▿ origin: (20.0, 270.0)
- x: 20.0
- y: 270.0
▿ size: (140.0, 30.0)
- width: 140.0
- height: 30.0
▿ footer: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 395.0, 140.0, 40.0)))
▿ footer: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 395.0, 140.0, 40.0)))
▿ some: ListableUI.ListLayoutAttributes.Supplementary
▿ frame: (30.0, 395.0, 140.0, 40.0)
▿ origin: (30.0, 395.0)
- x: 30.0
▿ frame: (20.0, 395.0, 140.0, 40.0)
▿ origin: (20.0, 395.0)
- x: 20.0
- y: 395.0
▿ size: (140.0, 40.0)
- width: 140.0
- height: 40.0
▿ items: 2 elements
▿ ListableUI.ListLayoutAttributes.Item
▿ frame: (30.0, 310.0, 140.0, 30.0)
▿ origin: (30.0, 310.0)
- x: 30.0
▿ frame: (20.0, 310.0, 140.0, 30.0)
▿ origin: (20.0, 310.0)
- x: 20.0
- y: 310.0
▿ size: (140.0, 30.0)
- width: 140.0
- height: 30.0
▿ ListableUI.ListLayoutAttributes.Item
▿ frame: (30.0, 345.0, 140.0, 40.0)
▿ origin: (30.0, 345.0)
- x: 30.0
▿ frame: (20.0, 345.0, 140.0, 40.0)
▿ origin: (20.0, 345.0)
- x: 20.0
- y: 345.0
▿ size: (140.0, 40.0)
- width: 140.0
- height: 40.0
▿ ListableUI.ListLayoutAttributes.Section
▿ frame: (30.0, 455.0, 140.0, 75.0)
▿ origin: (30.0, 455.0)
- x: 30.0
▿ frame: (20.0, 455.0, 140.0, 75.0)
▿ origin: (20.0, 455.0)
- x: 20.0
- y: 455.0
▿ size: (140.0, 75.0)
- width: 140.0
- height: 75.0
▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 455.0, 140.0, 30.0)))
▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 455.0, 140.0, 30.0)))
▿ some: ListableUI.ListLayoutAttributes.Supplementary
▿ frame: (30.0, 455.0, 140.0, 30.0)
▿ origin: (30.0, 455.0)
- x: 30.0
▿ frame: (20.0, 455.0, 140.0, 30.0)
▿ origin: (20.0, 455.0)
- x: 20.0
- y: 455.0
▿ size: (140.0, 30.0)
- width: 140.0
- height: 30.0
- footer: nil
▿ items: 2 elements
▿ ListableUI.ListLayoutAttributes.Item
▿ frame: (30.0, 495.0, 140.0, 10.0)
▿ origin: (30.0, 495.0)
- x: 30.0
▿ frame: (20.0, 495.0, 140.0, 10.0)
▿ origin: (20.0, 495.0)
- x: 20.0
- y: 495.0
▿ size: (140.0, 10.0)
- width: 140.0
- height: 10.0
▿ ListableUI.ListLayoutAttributes.Item
▿ frame: (30.0, 510.0, 140.0, 20.0)
▿ origin: (30.0, 510.0)
- x: 30.0
▿ frame: (20.0, 510.0, 140.0, 20.0)
▿ origin: (20.0, 510.0)
- x: 20.0
- y: 510.0
▿ size: (140.0, 20.0)
- width: 140.0
- height: 20.0
▿ ListableUI.ListLayoutAttributes.Section
▿ frame: (30.0, 545.0, 140.0, 35.0)
▿ origin: (30.0, 545.0)
- x: 30.0
▿ frame: (20.0, 545.0, 140.0, 35.0)
▿ origin: (20.0, 545.0)
- x: 20.0
- y: 545.0
▿ size: (140.0, 35.0)
- width: 140.0
Expand All @@ -163,17 +163,17 @@
- footer: nil
▿ items: 2 elements
▿ ListableUI.ListLayoutAttributes.Item
▿ frame: (30.0, 545.0, 140.0, 10.0)
▿ origin: (30.0, 545.0)
- x: 30.0
▿ frame: (20.0, 545.0, 140.0, 10.0)
▿ origin: (20.0, 545.0)
- x: 20.0
- y: 545.0
▿ size: (140.0, 10.0)
- width: 140.0
- height: 10.0
▿ ListableUI.ListLayoutAttributes.Item
▿ frame: (30.0, 560.0, 140.0, 20.0)
▿ origin: (30.0, 560.0)
- x: 30.0
▿ frame: (20.0, 560.0, 140.0, 20.0)
▿ origin: (20.0, 560.0)
- x: 20.0
- y: 560.0
▿ size: (140.0, 20.0)
- width: 140.0
Expand Down
35 changes: 35 additions & 0 deletions ListableUI/Tests/SizingTests.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,43 @@
//

import XCTest
@testable import ListableUI

class SizingTests: XCTestCase
{
// MARK: - CustomWidth Tests

func test_customWidth_alignment_originWith() {
// Given
let parentWidth: CGFloat = 100
let width: CGFloat = 80
let padding = HorizontalPadding(left: 7, right: 3)

// When: Left
do {
let alignment = CustomWidth.Alignment.left
let origin = alignment.originWith(parentWidth: parentWidth, width: width, padding: padding)

// Should align left edge with left padding
XCTAssertEqual(origin, 7)
}

// When: Center
do {
let alignment = CustomWidth.Alignment.center
let origin = alignment.originWith(parentWidth: parentWidth, width: width, padding: padding)

// Should center within width minus padding then offset by left padding
XCTAssertEqual(origin, 12)
}

// When: Right
do {
let alignment = CustomWidth.Alignment.right
let origin = alignment.originWith(parentWidth: parentWidth, width: width, padding: padding)

// Should align right edge with right edge of width minus right padding
XCTAssertEqual(origin, 17)
}
}
}