Search card update (#211)

* wip

* alphabetized

* reusing backerdashboardprojectcell now

* swiftlint fix

* change green color

* new screenshots

* corrected gren color

* corrected green color

* PR feedback review

* deleted search project cell

* new screenshots

* rename searchprojectcell

* progress bar percentage change

* progress bar percentage variety

* progress bar percentage variety screenshots

* pr adjustments new tests

* new screenshots and update for ipad

* new screenshots

* new screenshots

Kickstarter-iOS/DataSources/SearchDataSource.swift

@@ -31,8 +31,10 @@ internal final class SearchDataSource: ValueCellDataSource {
     }
 
     if !projects.isEmpty {
-      projects.suffix(from: 1).forEach {
-        self.appendRow(value: $0, cellClass: SearchProjectCell.self, toSection: Section.projects.rawValue)
+      projects.dropFirst().forEach {
+        self.appendRow(value: $0,
+                       cellClass: BackerDashboardProjectCell.self,
+                       toSection: Section.projects.rawValue)
       }
     }
   }
@@ -43,7 +45,7 @@ internal final class SearchDataSource: ValueCellDataSource {
 
   override func configureCell(tableCell cell: UITableViewCell, withValue value: Any) {
     switch (cell, value) {
-    case let (cell as SearchProjectCell, value as Project):
+    case let (cell as BackerDashboardProjectCell, value as Project):
       cell.configureWith(value: value)
     case let (cell as MostPopularSearchProjectCell, value as Project):
       cell.configureWith(value: value)

Kickstarter-iOS/Views/Cells/BackerDashboardProjectCell.swift

@@ -50,6 +50,11 @@ internal final class BackerDashboardProjectCell: UITableViewCell, ValueCell {
       |> UITableViewCell.lens.isAccessibilityElement .~ true
       |> UITableViewCell.lens.accessibilityHint %~ { _ in Strings.Opens_project() }
       |> UITableViewCell.lens.accessibilityTraits .~ UIAccessibilityTraitButton
+      |> UITableViewCell.lens.contentView.layoutMargins %~~ { _, cell in
+        cell.traitCollection.isRegularRegular
+          ? .init(topBottom: Styles.grid(2), leftRight: Styles.grid(20))
+          : .init(topBottom: Styles.grid(1), leftRight: Styles.grid(2))
+    }
 
     _ = self.cardView
       |> dropShadowStyleMedium()

Kickstarter-iOS/Views/Cells/MostPopularSearchProjectCell.swift

@@ -5,19 +5,22 @@ import Prelude_UIKit
 import UIKit
 
 internal final class MostPopularSearchProjectCell: UITableViewCell, ValueCell {
-  fileprivate let viewModel: SearchProjectCellViewModelType = SearchProjectCellViewModel()
+  fileprivate let viewModel: MostPopularSearchProjectCellViewModelType =
+    MostPopularSearchProjectCellViewModel()
 
   @IBOutlet fileprivate weak var cardView: UIView!
-  @IBOutlet fileprivate weak var fundingTitleLabel: UILabel!
-  @IBOutlet fileprivate weak var dateStackView: UIStackView!
-  @IBOutlet fileprivate weak var deadlineSubtitleLabel: UILabel!
-  @IBOutlet fileprivate weak var deadlineTitleLabel: UILabel!
-  @IBOutlet fileprivate weak var statsStackView: UIStackView!
+  @IBOutlet fileprivate weak var metadataBackgroundView: UIView!
+  @IBOutlet fileprivate weak var metadataIconImageView: UIImageView!
+  @IBOutlet fileprivate weak var metadataLabel: UILabel!
+  @IBOutlet fileprivate weak var percentFundedLabel: UILabel!
+  @IBOutlet fileprivate weak var progressBarView: UIView!
+  @IBOutlet fileprivate weak var progressStaticView: UIView!
   @IBOutlet fileprivate weak var projectImageView: UIImageView!
   @IBOutlet fileprivate weak var projectInfoOverlayView: UIView!
   @IBOutlet fileprivate weak var projectInfoStackView: UIStackView!
   @IBOutlet fileprivate weak var projectNameLabel: UILabel!
   @IBOutlet fileprivate weak var separateView: UIView!
+  @IBOutlet fileprivate weak var statsStackView: UIStackView!
 
   internal func configureWith(value: Project) {
     self.viewModel.inputs.configureWith(project: value)
@@ -36,19 +39,10 @@ internal final class MostPopularSearchProjectCell: UITableViewCell, ValueCell {
     }
 
     _ = self.cardView
-      |> dropShadowStyleMedium()
-
-    _ = self.dateStackView |> UIStackView.lens.spacing .~ Styles.gridHalf(1)
+      |> dropShadowStyleLarge()
 
-    _ = self.deadlineSubtitleLabel
-      |> UILabel.lens.font .~ .ksr_body(size: 14)
-      |> UILabel.lens.textColor .~ .ksr_text_navy_500
-
-    _ = self.deadlineTitleLabel
-      |> UILabel.lens.font .~ .ksr_headline(size: 14)
-      |> UILabel.lens.textColor .~ .ksr_text_navy_700
-
-    _ = self.statsStackView |> UIStackView.lens.spacing .~ Styles.grid(1)
+    _ = self.statsStackView
+      |> UIStackView.lens.spacing .~ Styles.grid(6)
 
     _ = self.projectImageView
       |> UIImageView.lens.contentMode .~ .scaleAspectFill
@@ -62,6 +56,21 @@ internal final class MostPopularSearchProjectCell: UITableViewCell, ValueCell {
           : .init(all: Styles.grid(2))
     }
 
+    _ = self.metadataBackgroundView
+      |> dropShadowStyleMedium()
+      |> UIView.lens.layer.shadowOpacity .~ 0.3
+      |> UIView.lens.layer.cornerRadius .~ 2.0
+
+    _ = self.metadataLabel
+      |> UILabel.lens.textColor .~ .white
+      |> UILabel.lens.font .~ .ksr_headline(size: 12)
+
+    _ = self.metadataIconImageView
+      |> UIImageView.lens.tintColor .~ .white
+
+    _ = self.percentFundedLabel
+      |> UILabel.lens.font .~ .ksr_headline(size: 14)
+
     _ = self.projectInfoStackView
       |> UIStackView.lens.spacing .~ Styles.grid(2)
 
@@ -77,15 +86,28 @@ internal final class MostPopularSearchProjectCell: UITableViewCell, ValueCell {
 
     _ = self.separateView
       |> separatorStyle
+
+    _ = self.progressStaticView
+      |> UIView.lens.backgroundColor .~ .black
+      |> UIView.lens.alpha .~ 0.15
   }
 
   internal override func bindViewModel() {
     super.bindViewModel()
 
-    self.projectNameLabel.rac.text = self.viewModel.outputs.projectNameLabelText
-    self.fundingTitleLabel.rac.attributedText = self.viewModel.outputs.fundingLargeLabelText
-    self.deadlineSubtitleLabel.rac.text = self.viewModel.outputs.deadlineSubtitleLabelText
-    self.deadlineTitleLabel.rac.text = self.viewModel.outputs.deadlineTitleLabelText
-    self.projectImageView.rac.imageUrl = self.viewModel.outputs.projectImageUrlFull
+    self.metadataBackgroundView.rac.backgroundColor = self.viewModel.outputs.progressBarColor
+    self.metadataLabel.rac.text = self.viewModel.outputs.metadataText
+    self.percentFundedLabel.rac.attributedText = self.viewModel.outputs.percentFundedText
+    self.progressBarView.rac.backgroundColor = self.viewModel.outputs.progressBarColor
+    self.projectImageView.rac.imageUrl = self.viewModel.outputs.projectImageUrl
+    self.projectNameLabel.rac.attributedText = self.viewModel.outputs.projectName
+
+    self.viewModel.outputs.progress
+      .observeForUI()
+      .observeValues { [weak element = progressBarView] progress in
+        let anchorX = progress == 0 ? 0 : 0.5 / progress
+        element?.layer.anchorPoint = CGPoint(x: CGFloat(max(anchorX, 0.5)), y: 0.5)
+        element?.transform = CGAffineTransform(scaleX: CGFloat(min(progress, 1.0)), y: 1.0)
+    }
   }
 }

Kickstarter-iOS/Views/Controllers/SearchViewController.swift

@@ -29,6 +29,8 @@ internal final class SearchViewController: UITableViewController {
 
     self.tableView.dataSource = self.dataSource
 
+    self.tableView.register(nib: .BackerDashboardProjectCell)
+
     self.viewModel.inputs.viewDidLoad()
   }
 

Kickstarter-iOS/Views/Controllers/SearchViewControllerTests.swift

@@ -25,6 +25,8 @@ internal final class SearchViewContollerTests: TestCase {
         |> Project.lens.id .~ $0
         |> Project.lens.photo.full .~ ""
         |> Project.lens.photo.med .~ ""
+        |> Project.lens.stats.goal .~ ($0 * 20)
+        |> Project.lens.stats.pledged .~ ($0 * $0 * 4)
     }
 
     let discoveryResponse = .template
@@ -72,6 +74,8 @@ internal final class SearchViewContollerTests: TestCase {
         |> Project.lens.id .~ $0
         |> Project.lens.photo.full .~ ""
         |> Project.lens.photo.med .~ ""
+        |> Project.lens.stats.goal .~ ($0 * 20)
+        |> Project.lens.stats.pledged .~ ($0 * $0 * 4)
     }
 
     let discoveryResponse = .template