Merge pull request #18454 from wordpress-mobile/feature/18176-prompt_card_size

Blogging Prompts Feature Introduction: allow prompt card size to be dynamic

Author: ScoutHarris

WordPress/Classes/ViewRelated/Blog/Blog Dashboard/Cards/Prompts/DashboardPromptsCardCell.swift

@@ -13,6 +13,32 @@ class DashboardPromptsCardCell: UICollectionViewCell, Reusable {
         }
     }
 
+    // This is public so it can be accessed from the BloggingPromptsFeatureDescriptionView.
+    private(set) lazy var cardFrameView: BlogDashboardCardFrameView = {
+        let frameView = BlogDashboardCardFrameView()
+        frameView.translatesAutoresizingMaskIntoConstraints = false
+        frameView.title = Strings.cardFrameTitle
+        frameView.icon = Style.frameIconImage
+
+        // NOTE: Remove the logic for iOS 13 once we drop that version.
+        if #available (iOS 14.0, *) {
+            // assign an empty closure so the button appears.
+            frameView.onEllipsisButtonTap = {}
+            frameView.ellipsisButton.showsMenuAsPrimaryAction = true
+            frameView.ellipsisButton.menu = contextMenu
+        } else {
+            // Show a fallback implementation using `MenuSheetViewController`.
+            // iOS 13 doesn't support showing UIMenu programmatically.
+            frameView.onEllipsisButtonTap = { [weak self] in
+                self?.showMenuSheet()
+            }
+        }
+
+        return frameView
+    }()
+
+    // MARK: - Private Properties
+
     /// When set to true, a "default" version of the card is displayed. That is:
     /// - `maxAvatarCount` number of avatars.
     /// - `maxAvatarCount` answer count.
@@ -25,8 +51,6 @@ class DashboardPromptsCardCell: UICollectionViewCell, Reusable {
         }
     }
 
-    // MARK: - Private Properties
-
     // Used to present the menu sheet for contextual menu.
     // NOTE: Remove this once we drop support for iOS 13.
     private weak var presenterViewController: BlogDashboardViewController? = nil
@@ -39,29 +63,6 @@ class DashboardPromptsCardCell: UICollectionViewCell, Reusable {
         return stackView
     }()
 
-    private lazy var cardFrameView: BlogDashboardCardFrameView = {
-        let frameView = BlogDashboardCardFrameView()
-        frameView.translatesAutoresizingMaskIntoConstraints = false
-        frameView.title = Strings.cardFrameTitle
-        frameView.icon = Style.frameIconImage
-
-        // NOTE: Remove the logic for iOS 13 once we drop that version.
-        if #available (iOS 14.0, *) {
-            // assign an empty closure so the button appears.
-            frameView.onEllipsisButtonTap = {}
-            frameView.ellipsisButton.showsMenuAsPrimaryAction = true
-            frameView.ellipsisButton.menu = contextMenu
-        } else {
-            // Show a fallback implementation using `MenuSheetViewController`.
-            // iOS 13 doesn't support showing UIMenu programmatically.
-            frameView.onEllipsisButtonTap = { [weak self] in
-                self?.showMenuSheet()
-            }
-        }
-
-        return frameView
-    }()
-
     // MARK: Top row views
 
     private lazy var promptLabel: UILabel = {

WordPress/Classes/ViewRelated/Feature Introduction/Blogging Prompts/BloggingPromptsFeatureDescriptionView.swift

@@ -28,15 +28,17 @@ private extension BloggingPromptsFeatureDescriptionView {
     func configurePromptCard() {
         let promptCard = DashboardPromptsCardCell()
         promptCard.configureForExampleDisplay()
-        promptCard.translatesAutoresizingMaskIntoConstraints = false
 
-        promptCard.layer.cornerRadius = Style.cardCornerRadius
-        promptCard.layer.shadowOffset = Style.cardShadowOffset
-        promptCard.layer.shadowOpacity = Style.cardShadowOpacity
-        promptCard.layer.shadowRadius = Style.cardShadowRadius
+        // The DashboardPromptsCardCell doesn't resize dynamically when used in this context.
+        // So use its cardFrameView instead.
+        promptCard.cardFrameView.translatesAutoresizingMaskIntoConstraints = false
+        promptCard.cardFrameView.layer.cornerRadius = Style.cardCornerRadius
+        promptCard.cardFrameView.layer.shadowOffset = Style.cardShadowOffset
+        promptCard.cardFrameView.layer.shadowOpacity = Style.cardShadowOpacity
+        promptCard.cardFrameView.layer.shadowRadius = Style.cardShadowRadius
 
-        promptCardView.addSubview(promptCard)
-        promptCardView.pinSubviewToSafeArea(promptCard)
+        promptCardView.addSubview(promptCard.cardFrameView)
+        promptCardView.pinSubviewToAllEdges(promptCard.cardFrameView)
     }
 
     func configureDescription() {

WordPress/Classes/ViewRelated/Feature Introduction/Blogging Prompts/BloggingPromptsFeatureDescriptionView.xib

@@ -16,20 +16,20 @@
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="8JU-nl-SWR" userLabel="Prompt Card">
-                    <rect key="frame" x="37" y="0.0" width="340" height="165"/>
+                    <rect key="frame" x="52" y="0.0" width="310.5" height="200.5"/>
                     <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                     <constraints>
-                        <constraint firstAttribute="height" constant="165" id="BfW-eb-ZtV"/>
+                        <constraint firstAttribute="height" relation="greaterThanOrEqual" id="BfW-eb-ZtV"/>
                     </constraints>
                 </view>
                 <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="We’ll show you a new prompt each day on your dashboard to help get those creative juices flowing!" textAlignment="center" lineBreakMode="wordWrap" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1gW-xt-yLe" userLabel="Description">
-                    <rect key="frame" x="16" y="189" width="382" height="36"/>
+                    <rect key="frame" x="16" y="224.5" width="382" height="36"/>
                     <fontDescription key="fontDescription" style="UICTFontTextStyleBody"/>
                     <color key="textColor" systemColor="secondaryLabelColor"/>
                     <nil key="highlightedColor"/>
                 </label>
                 <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" scrollEnabled="NO" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" editable="NO" text="Note: You can learn more and set up reminders at any time in My Site &gt; Settings &gt; Blogging Reminders." textAlignment="natural" adjustsFontForContentSizeCategory="YES" selectable="NO" translatesAutoresizingMaskIntoConstraints="NO" id="z9E-X2-t3c" userLabel="Note">
-                    <rect key="frame" x="16" y="249" width="382" height="78"/>
+                    <rect key="frame" x="16" y="284.5" width="382" height="42.5"/>
                     <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                     <color key="textColor" systemColor="secondaryLabelColor"/>
                     <fontDescription key="fontDescription" style="UICTFontTextStyleCaption1"/>
@@ -40,11 +40,11 @@
             <color key="backgroundColor" systemColor="systemBackgroundColor"/>
             <constraints>
                 <constraint firstItem="z9E-X2-t3c" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="16" id="1K2-WJ-vdn"/>
+                <constraint firstItem="8JU-nl-SWR" firstAttribute="width" secondItem="iN0-l3-epB" secondAttribute="width" multiplier="0.75" id="4C5-B7-SUy"/>
                 <constraint firstItem="8JU-nl-SWR" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="95d-85-VYs"/>
                 <constraint firstAttribute="bottom" secondItem="z9E-X2-t3c" secondAttribute="bottom" id="IUZ-vA-5QN"/>
-                <constraint firstAttribute="trailing" secondItem="8JU-nl-SWR" secondAttribute="trailing" constant="37" id="KcL-0K-qQO"/>
-                <constraint firstItem="8JU-nl-SWR" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="37" id="LNK-l6-tLb"/>
                 <constraint firstItem="1gW-xt-yLe" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="16" id="WJ4-xD-ctR"/>
+                <constraint firstItem="8JU-nl-SWR" firstAttribute="centerX" secondItem="vUN-kp-3ea" secondAttribute="centerX" id="sjz-gT-pc8"/>
                 <constraint firstAttribute="trailing" secondItem="1gW-xt-yLe" secondAttribute="trailing" constant="16" id="srn-mJ-gKe"/>
                 <constraint firstAttribute="trailing" secondItem="z9E-X2-t3c" secondAttribute="trailing" constant="16" id="vmH-4q-pbI"/>
                 <constraint firstItem="z9E-X2-t3c" firstAttribute="top" secondItem="1gW-xt-yLe" secondAttribute="bottom" constant="24" id="wED-RV-9Lf"/>

WordPress/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.swift

@@ -508,6 +508,7 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
     func configureVerticalButtonView() {
         usesVerticalActionButtons = true
 
+        footerView.backgroundColor = .systemBackground
         footerHeightContraint.constant = footerHeight
         selectedStateButtonsContainer.axis = .vertical
 
@@ -520,6 +521,7 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
         visualEffects.forEach { (visualEffect) in
             visualEffect.isHidden = true
         }
+        navigationController?.navigationBar.backgroundColor = .systemBackground
     }
 
     /// In scenarios where the content offset before content changes doesn't align with the available space after the content changes then the offset can be lost. In