Merge pull request #17462 from wordpress-mobile/issue/17087-content-c…

…ell-spacing Comment Detail: Fix spacing for views in content cell
wordpress-mobile · Nov 12, 2021 · 6946b67 · 6946b67
2 parents b3d9e06 + e31c499
commit 6946b67
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.swift
@@ -28,8 +28,15 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
         }
     }
 
+    // MARK: Constants
+
+    private let customBottomSpacing: CGFloat = 10
+
     // MARK: Outlets
 
+    @IBOutlet private weak var containerStackView: UIStackView!
+    @IBOutlet private weak var containerStackBottomConstraint: NSLayoutConstraint!
+
     @IBOutlet private weak var avatarImageView: CircularImageView!
     @IBOutlet private weak var nameLabel: UILabel!
     @IBOutlet private weak var dateLabel: UILabel!
@@ -139,6 +146,13 @@ class CommentContentTableViewCell: UITableViewCell, NibReusable {
         isAccessoryButtonEnabled = comment.isApproved()
         isModerationEnabled = comment.allowsModeration()
 
+        // When reaction bar is hidden, add some space between the webview and the moderation bar.
+        containerStackView.setCustomSpacing(isReactionEnabled ? 0 : customBottomSpacing, after: webView)
+
+        // When both reaction bar and moderation bar is hidden, the custom spacing for the webview won't be applied since it's at the bottom of the stack view.
+        // The reaction bar and the moderation bar have their own spacing, unlike the webview. Therefore, additional bottom spacing is needed.
+        containerStackBottomConstraint.constant = (isReactionEnabled || isModerationEnabled) ? 0 : customBottomSpacing
+
         if isModerationEnabled {
             moderationBar.commentStatus = CommentStatusType.typeForStatus(comment.status)
         }

diff --git a/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.xib b/WordPress/Classes/ViewRelated/Comments/CommentContentTableViewCell.xib
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="19162" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="19455" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19144"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19454"/>
         <capability name="Image references" minToolsVersion="12.0"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
@@ -106,7 +106,7 @@
                                         </state>
                                     </button>
                                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="X2J-8b-R5F" userLabel="Like Button">
-                                        <rect key="frame" x="60" y="0.0" width="82.5" height="0.0"/>
+                                        <rect key="frame" x="60" y="0.0" width="78.5" height="0.0"/>
                                         <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                         <color key="tintColor" systemColor="secondaryLabelColor"/>
                                         <inset key="contentEdgeInsets" minX="5" minY="10" maxX="35" maxY="15"/>
@@ -153,6 +153,8 @@
             <connections>
                 <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="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"/>
                 <outlet property="moderationBar" destination="T1Z-LV-01Y" id="YUL-ft-QkO"/>