NT-206 - [1/4] Reward received toggle - UI #844

dusi · 2019-09-17T18:37:24Z

📲 What

Basic UI for the reward received toggle.

🤔 Why

Step one in showing the toggle is to actually have something to show 😉 so this is the UI itself.

🛠 How

It's been pretty challening making this work with a stack view - apparently multi-line labels and stack views are hard - who'd knew 🤦‍♂.

Because of that we're simply using auto layout and we're not adjusting axis for accessibility traits. Even though this causes the lack of axis adjustment often seen in the Settings.app (see bellow) where the toggle would align on the next line it's a small trade off to make. The toggle's width makes it acceptable staying at it's position at all times while adjusting just the label. We can potentially address this in the future with more customized control.

👀 See

`.large`	`.extraExtraExtraLarge`	`.accessibilityExtraExtraExtraLarge`

`.large`	`.extraExtraExtraLarge`	`.accessibilityExtraExtraExtraLarge`

`.large`	`.extraExtraExtraLarge`	`.accessibilityExtraExtraExtraLarge`

♿️ Accessibility

VoiceOver accessibility will be addressed in a follow up PR since it showed up quite challenging.

Dynamic type resizes properly

✅ Acceptance criteria

Rewards received toggle UI is showing when navigating to manage pledge screen (Profile > Backed project > Manage

⏰ TODO

(will be addressed in follow up PRs)

VoiceOver support
The actual business logic
Strings

…ce priority

dusi · 2019-09-17T18:38:14Z

Kickstarter-iOS/Views/Controllers/ManageViewPledgeRewardReceivedViewController.swift

+import Prelude
+import UIKit
+
+final class ManageViewPledgeRewardReceivedViewController: ToggleViewController {


Since we're using ToggleViewController as a base class it could be reused in the future and this controller should be able to provide it's own logic (which API call will be called) + styling.

dusi · 2019-09-17T18:38:50Z

Kickstarter-iOS/Views/Controllers/ManageViewPledgeRewardReceivedViewControllerTests.swift

+
+        let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)
+
+        parent.view.frame.size.height = 60


More real time scenario and should make the snapshot smaller.

I wonder if would make sense for us to wait until the manage/view pledge screen is finished in order to create snapshot test for just that viewController instead of one for each child. This way we would avoid testing the same screen twice 🤔

Yeah, I'm not sure which side I lean towards more...I think each controller should be testable by itself but agree that as soon as we add manage pledge screen tests it will be a duplicate.

We already do this with SortPagerViewControllerTests or ProjectNavBarViewControllerTests which test just the menu itself and then we also have a test for the container ProjectPamphletContentViewControllerConversionTests.

I believe testing each controller is more correct, since its parent can additionally style it or decide what it needs to do with it.

dusi · 2019-09-17T18:39:45Z

Kickstarter-iOS/Views/Controllers/ToggleViewController.swift

+    super.viewDidLoad()
+
+    _ = self.titleLabel
+      |> ksr_setContentCompressionResistancePriority(.defaultLow, for: .horizontal)


Makes sure that the titleLabel does not push the switch off screen and rather pushes its own text on next line.

dusi · 2019-09-17T18:40:24Z

Kickstarter-iOS/Views/Controllers/ToggleViewControllerTests.swift

+    combos([Language.en], devices).forEach { language, device in
+      withEnvironment(language: language) {
+        let controller = ToggleViewController.instantiate()
+        controller.titleLabel.text = "Title for testing purposes only"


Since the base class doesn't provide default title or ON/OFF state we're setting it here simply for the purposes of our tests.

dusi · 2019-09-17T18:41:11Z

Kickstarter-iOS/Views/Controllers/ToggleViewControllerTests.swift

+    }
+  }
+
+  func testViewSupportsDynamicType() {


I've also decided to add Dynamic type snapshot in order to keep a regression test for the resizing of the label. This should only be done on the base class (no need for subclasses to handle this)

ifbarrera · 2019-09-18T15:06:50Z

Kickstarter-iOS/Views/Controllers/ManageViewPledgeViewController.swift

+
+  private func setupConstraints() {
+    NSLayoutConstraint.activate([
+      self.rootStackView.widthAnchor.constraint(equalTo: self.rootScrollView.widthAnchor)


You usually need to also set the width of the scroll view to be the equal to the width of the parent VC 🤔

Yeah, I know we've done it before but it didn't seem necessary this time ... same on PledgeVC 🤔 🐒

ifbarrera · 2019-09-18T15:11:04Z

Kickstarter-iOS/Views/Controllers/ManageViewPledgeViewController.swift

+    |> \.alwaysBounceVertical .~ true
+}
+
+private let rootStackViewStyle = { (stackView: UIStackView) in


In PledgeViewController we also have a rootStackViewStyle: https://github.com/kickstarter/ios-oss/blob/master/Kickstarter-iOS/Views/Controllers/PledgeViewController.swift#L402

I wonder if it be worthwhile to extract this style into our CheckoutStyles.swift file so they can be shared? I'd imagine that the pledge screen and the manage pledge screen should probably have consistent root stack view styles regardless.

LOL, there's so many repeated styles..I'll try to consolidate these into something more reusable 😄

ifbarrera · 2019-09-18T15:13:31Z

Kickstarter-iOS/Views/Controllers/ToggleViewController.swift

+      self.titleLabel.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
+      self.titleLabel.centerYAnchor.constraint(equalTo: self.toggle.centerYAnchor),
+      self.titleLabel.rightAnchor.constraint(lessThanOrEqualTo: self.toggle.leftAnchor),
+      self.toggle.rightAnchor.constraint(equalTo: self.view.rightAnchor)


Does the toggle need a vertical position constraint? 🤔 Looks like there isn't one set right now.

ifbarrera · 2019-09-18T15:19:01Z

Library/Styles/CheckoutStylesTests.swift

@@ -39,6 +39,15 @@ final class CheckoutStylesTests: XCTestCase {
    XCTAssertEqual(9, stackView.spacing)
  }

+  func testCheckoutSwitchControlStyle() {


I really don't think these tests are necessary 😬 Anytime we decide to change a small aspect of the checkout UI these tests break - it seems like it adds unnecessary maintenance for something that's already covered with other tests (snapshot tests) and offers only a marginal increase in test coverage.

Deleted

Scollaco

Looking good. I just left a few question/comments 👍

Scollaco · 2019-09-18T15:19:18Z

Kickstarter-iOS/Views/Controllers/ManageViewPledgeViewController.swift

@@ -68,6 +93,15 @@ final class ManageViewPledgeViewController: UIViewController {
    _ = self.closeButton
      |> \.accessibilityLabel %~ { _ in Strings.Dismiss() }
      |> \.width .~ Styles.minTouchSize.width
+
+    _ = self


The title should be handled by the view model, because it depends on the project state (live vs finished)

Apologies, completely missed this

Scollaco · 2019-09-18T15:23:49Z

Kickstarter-iOS/Views/Controllers/ManageViewPledgeRewardReceivedViewControllerTests.swift

+
+        let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)
+
+        parent.view.frame.size.height = 60


I wonder if would make sense for us to wait until the manage/view pledge screen is finished in order to create snapshot test for just that viewController instead of one for each child. This way we would avoid testing the same screen twice 🤔

Scollaco · 2019-09-18T15:50:19Z

Library/Styles/CheckoutStyles.swift

+public let checkoutSwitchControlStyle: SwitchControlStyle = { switchControl in
+  switchControl
+    |> \.onTintColor .~ UIColor.ksr_green_500
+    |> \.tintColor .~ UIColor.ksr_green_500


Is the tintColor supposed to be green? Our app usually adopts grey for the off state. Maybe a ksr_grey_500 or darker would fit better?

Yeah, the design was kinda weird because it wasn't using the native switch component...let me run this by Nneka

dusi

Trying to tidy up the styles into more reusable styles, I've discovered that some of the child controller (sub-controllers on the pledge screen) use different spacing for their sub-components (like stepper, buttons, labels, etc.)

I wonder if we should simplify this and make it consistent...This would mean the vertical spacing (in points) would be the same for these sections (highlighted bellow in red).

Before and after would look something like this:

Before	After

This is something we would have probably spotted if we had a designer. It's always a good practice to keep things consistent between components that construct the same page because it's easier to thing about these in the future and makes changes easier to do.

Cc: @nnekab @jamielynnroth

dusi · 2019-09-18T23:16:12Z

Kickstarter-iOS/Views/Cells/PledgeCreditCardView.swift

@@ -112,7 +112,6 @@ final class PledgeCreditCardView: UIView {

 private let adaptableStackViewStyle: StackViewStyle = { stackView in
  stackView
-    |> \.backgroundColor .~ UIColor.white


From the docs...

UIStackView is a non-drawing view, meaning that drawRect() is never called and its background color is ignored. If you desperately want a background color, consider placing the stack view inside another UIView and giving that view a background color.

Basically all these backgroundColor styles were obsolete so I've removed them

ksr-ci-bot · 2019-09-18T23:21:55Z

	1 Warning
⚠️	Big PR

Generated by 🚫 Danger

Scollaco

Looks much better!

ifbarrera · 2019-09-19T15:06:16Z

Trying to tidy up the styles into more reusable styles, I've discovered that some of the child controller (sub-controllers on the pledge screen) use different spacing for their sub-components (like stepper, buttons, labels, etc.)

I wonder if we should simplify this and make it consistent...This would mean the vertical spacing (in points) would be the same for these sections (highlighted bellow in red).

Before and after would look something like this:

Before After

This is something we would have probably spotted if we had a designer. It's always a good practice to keep things consistent between components that construct the same page because it's easier to thing about these in the future and makes changes easier to do.

Cc: @nnekab @jamielynnroth

Yeah I would vote we make them consistent.

Scollaco · 2019-09-19T15:50:53Z

Yeah, I agree that we should be consistent. This would help us to define baseStyles and make the styling process much simpler without the need to tweak the spacing for each subview.

dusi added 5 commits September 16, 2019 21:27

Add switch control style

0cb62b3

Add functional helper to UIView allowing setting compression resistan…

b86377c

…ce priority

Add reusable toggle vc and customized reward received vc

81472cc

Present reward received toggle

1c3df91

Merge branch 'master' into reward-received-toggle-ui

5488da7

dusi changed the title ~~[1/3] Reward received toggle - UI~~ [1/4] Reward received toggle - UI Sep 17, 2019

dusi commented Sep 17, 2019

View reviewed changes

dusi changed the title ~~[1/4] Reward received toggle - UI~~ NT-206 - [1/4] Reward received toggle - UI Sep 17, 2019

dusi added the needs review label Sep 17, 2019

dusi assigned Scollaco Sep 17, 2019

dusi requested a review from ifbarrera September 17, 2019 18:43

ifbarrera reviewed Sep 18, 2019

View reviewed changes

Scollaco reviewed Sep 18, 2019

View reviewed changes

dusi added 5 commits September 18, 2019 14:42

Remove style tests

0b31e4d

Set title from VM

8c56e0b

Change checkout switch tint color

a75b4ad

Consolidate stack view styles

9cb2b68

Remove background color from stack view styles

d6e0f82

dusi commented Sep 18, 2019

View reviewed changes

dusi added 2 commits September 18, 2019 16:22

Format code

cf1c103

Merge branch 'master' into reward-received-toggle-ui

b266cdf

dusi requested a review from Scollaco September 18, 2019 23:23

Scollaco approved these changes Sep 19, 2019

View reviewed changes

dusi added 2 commits September 19, 2019 14:57

Localize string

974edda

Merge branch 'master' into reward-received-toggle-ui

92e81b0

dusi merged commit 999f51b into master Sep 19, 2019

dusi deleted the reward-received-toggle-ui branch September 19, 2019 22:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NT-206 - [1/4] Reward received toggle - UI #844

NT-206 - [1/4] Reward received toggle - UI #844

dusi commented Sep 17, 2019 •

edited by Scollaco

Loading

dusi Sep 17, 2019

dusi Sep 17, 2019

Scollaco Sep 18, 2019

dusi Sep 18, 2019

dusi Sep 17, 2019

dusi Sep 17, 2019

dusi Sep 17, 2019

ifbarrera Sep 18, 2019

dusi Sep 18, 2019

ifbarrera Sep 18, 2019

dusi Sep 18, 2019

ifbarrera Sep 18, 2019 •

edited

Loading

dusi Sep 18, 2019

ifbarrera Sep 18, 2019

dusi Sep 18, 2019

Scollaco left a comment

Scollaco Sep 18, 2019

dusi Sep 18, 2019

Scollaco Sep 18, 2019

Scollaco Sep 18, 2019

dusi Sep 18, 2019

dusi left a comment •

edited

Loading

dusi Sep 18, 2019

dusi Sep 19, 2019

ksr-ci-bot commented Sep 18, 2019 •

edited

Loading

Scollaco left a comment

ifbarrera commented Sep 19, 2019

Scollaco commented Sep 19, 2019


		let (parent, _) = traitControllers(device: device, orientation: .portrait, child: controller)

		parent.view.frame.size.height = 60

NT-206 - [1/4] Reward received toggle - UI #844

NT-206 - [1/4] Reward received toggle - UI #844

Conversation

dusi commented Sep 17, 2019 • edited by Scollaco Loading

📲 What

🤔 Why

🛠 How

👀 See

♿️ Accessibility

✅ Acceptance criteria

⏰ TODO

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ifbarrera Sep 18, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Scollaco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dusi left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ksr-ci-bot commented Sep 18, 2019 • edited Loading

Scollaco left a comment

Choose a reason for hiding this comment

ifbarrera commented Sep 19, 2019

Scollaco commented Sep 19, 2019

dusi commented Sep 17, 2019 •

edited by Scollaco

Loading

ifbarrera Sep 18, 2019 •

edited

Loading

dusi left a comment •

edited

Loading

ksr-ci-bot commented Sep 18, 2019 •

edited

Loading