Merge pull request #17551 from wordpress-mobile/issue/17476-cell-inde…

…ntation Reader Comments: Indent cells according to comment depth
wordpress-mobile · Nov 25, 2021 · 7efda72 · 7efda72
2 parents 3e39057 + ec6cf71
commit 7efda72
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -35,6 +35,18 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
         }
     }
 
+    override var indentationWidth: CGFloat {
+        didSet {
+            updateContainerLeadingConstraint()
+        }
+    }
+
+    override var indentationLevel: Int {
+        didSet {
+            updateContainerLeadingConstraint()
+        }
+    }
+
     // MARK: Constants
 
     private let customBottomSpacing: CGFloat = 10
@@ -44,6 +56,9 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
     @IBOutlet private weak var containerStackView: UIStackView!
     @IBOutlet private weak var containerStackBottomConstraint: NSLayoutConstraint!
 
+    // used for indentation
+    @IBOutlet private weak var containerStackLeadingConstraint: NSLayoutConstraint!
+
     @IBOutlet private weak var avatarImageView: CircularImageView!
     @IBOutlet private weak var nameLabel: UILabel!
     @IBOutlet private weak var dateLabel: UILabel!
@@ -350,6 +365,10 @@ private extension CommentContentTableViewCell {
         moderationBar.isHidden = !isModerationEnabled || hidesModerationBar
     }
 
+    func updateContainerLeadingConstraint() {
+        containerStackLeadingConstraint?.constant = indentationWidth * CGFloat(indentationLevel)
+    }
+
     /// Updates the style and text of the Like button.
     /// - Parameters:
     ///   - liked: Represents the target state – true if the comment is liked, or should be false otherwise.

diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.xib b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.xib
@@ -92,7 +92,7 @@
                                 <rect key="frame" x="0.0" y="168" width="288" height="57"/>
                                 <subviews>
                                     <button opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="761" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="VoI-YI-Qgc" userLabel="Reply Button">
-                                        <rect key="frame" x="0.0" y="8.5" width="174.5" height="40"/>
+                                        <rect key="frame" x="0.0" y="8.5" width="170.5" height="40"/>
                                         <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                         <color key="tintColor" systemColor="secondaryLabelColor"/>
                                         <inset key="contentEdgeInsets" minX="0.0" minY="10" maxX="15" maxY="15"/>
@@ -106,7 +106,7 @@
                                         </state>
                                     </button>
                                     <button opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="762" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="X2J-8b-R5F" userLabel="Like Button">
-                                        <rect key="frame" x="179.5" y="8" width="53.5" height="41"/>
+                                        <rect key="frame" x="175.5" y="7" width="57.5" height="43.5"/>
                                         <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                         <color key="tintColor" systemColor="secondaryLabelColor"/>
                                         <inset key="contentEdgeInsets" minX="0.0" minY="10" maxX="15" maxY="15"/>
@@ -150,6 +150,7 @@
                 <outlet property="accessoryButton" destination="1G8-cc-t5d" id="kLS-Ag-hAG"/>
                 <outlet property="avatarImageView" destination="9QY-3I-cxv" id="lbp-Hv-zRm"/>
                 <outlet property="containerStackBottomConstraint" destination="jAu-U3-I4N" id="1Hk-Cp-fR5"/>
+                <outlet property="containerStackLeadingConstraint" destination="uFL-PF-ffo" id="6Ah-H9-d0b"/>
                 <outlet property="containerStackView" destination="hcN-S7-sLG" id="k9D-6a-BmR"/>
                 <outlet property="dateLabel" destination="ghT-Xy-q8c" id="ffa-qV-3tn"/>
                 <outlet property="likeButton" destination="X2J-8b-R5F" id="6w2-io-GXb"/>

diff --git a/WordPress/Classes/ViewRelated/Reader/ReaderCommentsViewController.swift b/WordPress/Classes/ViewRelated/Reader/ReaderCommentsViewController.swift
@@ -70,9 +70,18 @@ import UIKit
             return
         }
 
+        cell.indentationWidth = Constants.indentationWidth
+        cell.indentationLevel = min(Constants.maxIndentationLevel, Int(comment.depth))
         cell.hidesModerationBar = true
         cell.configure(with: comment) { _ in
             tableView.performBatchUpdates({})
         }
     }
 }
+
+private extension ReaderCommentsViewController {
+    struct Constants {
+        static let indentationWidth: CGFloat = 15.0
+        static let maxIndentationLevel: Int = 4
+    }
+}