Skip to content

Commit 2363fc1

Browse files
wargcmwargcm
committed
Create prompts header view for bottom action sheet
See #18402
1 parent bd05911 commit 2363fc1

4 files changed

Lines changed: 225 additions & 1 deletion

File tree

‎WordPress/Classes/ViewRelated/System/Action Sheet/BloggingPromptsHeaderView.swift‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import UIKit
2+
3+
class BloggingPromptsHeaderView: UIView, NibLoadable {
4+
@IBOutlet private weak var containerStackView: UIStackView!
5+
@IBOutlet private weak var titleStackView: UIStackView!
6+
@IBOutlet private weak var titleLabel: UILabel!
7+
@IBOutlet private weak var promptLabel: UILabel!
8+
@IBOutlet private weak var answerPromptButton: UIButton!
9+
@IBOutlet private weak var answeredStackView: UIStackView!
10+
@IBOutlet private weak var answeredLabel: UILabel!
11+
@IBOutlet private weak var shareButton: UIButton!
12+
13+
override func awakeFromNib() {
14+
super.awakeFromNib()
15+
configureView()
16+
}
17+
18+
@IBAction private func answerPromptTapped(_ sender: Any) {
19+
// TODO
20+
}
21+
22+
@IBAction private func shareTapped(_ sender: Any) {
23+
// TODO
24+
}
25+
}
26+
27+
// MARK: - Private methods
28+
29+
private extension BloggingPromptsHeaderView {
30+
31+
func configureView() {
32+
// TODO: Hide correct UI based on if prompt is answered
33+
answerPromptButton.isHidden = true
34+
configureSpacing()
35+
configureStrings()
36+
configureStyles()
37+
}
38+
39+
func configureSpacing() {
40+
containerStackView.setCustomSpacing(Constants.titleSpacing, after: titleStackView)
41+
containerStackView.setCustomSpacing(Constants.answeredViewSpacing, after: answeredStackView)
42+
containerStackView.setCustomSpacing(Constants.answerPromptButtonSpacing, after: answerPromptButton)
43+
}
44+
45+
func configureStrings() {
46+
titleLabel.text = Strings.title
47+
// TODO: Use prompt from backend
48+
promptLabel.text = Strings.examplePrompt
49+
answerPromptButton.titleLabel?.text = Strings.answerButtonTitle
50+
answeredLabel.text = Strings.answeredLabelTitle
51+
shareButton.titleLabel?.text = Strings.shareButtonTitle
52+
}
53+
54+
func configureStyles() {
55+
titleLabel.font = WPStyleGuide.fontForTextStyle(.subheadline, fontWeight: .semibold)
56+
promptLabel.font = WPStyleGuide.BloggingPrompts.promptContentFont
57+
answerPromptButton.titleLabel?.font = WPStyleGuide.BloggingPrompts.buttonTitleFont
58+
answerPromptButton.titleLabel?.adjustsFontForContentSizeCategory = true
59+
answerPromptButton.setTitleColor(WPStyleGuide.BloggingPrompts.buttonTitleColor, for: .normal)
60+
answeredLabel.font = WPStyleGuide.BloggingPrompts.buttonTitleFont
61+
answeredLabel.textColor = WPStyleGuide.BloggingPrompts.answeredLabelColor
62+
shareButton.titleLabel?.font = WPStyleGuide.BloggingPrompts.buttonTitleFont
63+
shareButton.titleLabel?.adjustsFontForContentSizeCategory = true
64+
shareButton.titleLabel?.adjustsFontSizeToFitWidth = true
65+
shareButton.setTitleColor(WPStyleGuide.BloggingPrompts.buttonTitleColor, for: .normal)
66+
}
67+
68+
// MARK: - Constants
69+
70+
struct Constants {
71+
static let titleSpacing: CGFloat = 8.0
72+
static let answeredViewSpacing: CGFloat = 9.0
73+
static let answerPromptButtonSpacing: CGFloat = 9.0
74+
}
75+
76+
struct Strings {
77+
static let examplePrompt = NSLocalizedString("Cast the movie of your life.", comment: "Example prompt for blogging prompts in the create new bottom action sheet.")
78+
static let title = NSLocalizedString("Prompts", comment: "Title label for blogging prompts in the create new bottom action sheet.")
79+
static let answerButtonTitle = NSLocalizedString("Answer Prompt", comment: "Title for a call-to-action button in the create new bottom action sheet.")
80+
static let answeredLabelTitle = NSLocalizedString("✓ Answered", comment: "Title label that indicates the prompt has been answered.")
81+
static let shareButtonTitle = NSLocalizedString("Share", comment: "Title for a button that allows the user to share their answer to the prompt.")
82+
}
83+
84+
}

‎WordPress/Classes/ViewRelated/System/Action Sheet/BloggingPromptsHeaderView.xib‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="20037" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
3+
<device id="retina6_1" orientation="portrait" appearance="light"/>
4+
<dependencies>
5+
<deployment identifier="iOS"/>
6+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
7+
<capability name="System colors in document resources" minToolsVersion="11.0"/>
8+
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
9+
</dependencies>
10+
<objects>
11+
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
12+
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
13+
<view contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="iN0-l3-epB" customClass="BloggingPromptsHeaderView" customModule="WordPress" customModuleProvider="target">
14+
<rect key="frame" x="0.0" y="0.0" width="349" height="120"/>
15+
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
16+
<subviews>
17+
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" translatesAutoresizingMaskIntoConstraints="NO" id="HBh-15-Hby">
18+
<rect key="frame" x="0.0" y="0.0" width="349" height="92"/>
19+
<subviews>
20+
<stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacing="5" translatesAutoresizingMaskIntoConstraints="NO" id="stO-XN-YJp">
21+
<rect key="frame" x="131" y="0.0" width="87.5" height="24"/>
22+
<subviews>
23+
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="icon-lightbulb-outline" translatesAutoresizingMaskIntoConstraints="NO" id="AiS-VC-l3e">
24+
<rect key="frame" x="0.0" y="3" width="18" height="18"/>
25+
<constraints>
26+
<constraint firstAttribute="width" constant="18" id="VuP-Sn-J3O"/>
27+
<constraint firstAttribute="height" constant="18" id="Wgm-8p-3As"/>
28+
</constraints>
29+
</imageView>
30+
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="751" text="Prompts" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="BJN-uB-YYG">
31+
<rect key="frame" x="23" y="0.0" width="64.5" height="24"/>
32+
<constraints>
33+
<constraint firstAttribute="height" relation="greaterThanOrEqual" constant="24" id="5Im-WR-keg"/>
34+
</constraints>
35+
<fontDescription key="fontDescription" type="system" pointSize="17"/>
36+
<nil key="textColor"/>
37+
<nil key="highlightedColor"/>
38+
</label>
39+
</subviews>
40+
</stackView>
41+
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="751" text="Cast the movie of your life." textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="3" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Rye-vB-0gG">
42+
<rect key="frame" x="73.5" y="24" width="202.5" height="24"/>
43+
<constraints>
44+
<constraint firstAttribute="height" relation="greaterThanOrEqual" constant="24" id="XJS-Qq-aST"/>
45+
</constraints>
46+
<fontDescription key="fontDescription" type="system" pointSize="17"/>
47+
<nil key="textColor"/>
48+
<nil key="highlightedColor"/>
49+
</label>
50+
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="fqk-gy-gv5">
51+
<rect key="frame" x="125" y="48" width="99" height="22.5"/>
52+
<state key="normal" title="Button"/>
53+
<buttonConfiguration key="configuration" style="plain" title="Answer Prompt">
54+
<directionalEdgeInsets key="contentInsets" top="16" leading="0.0" bottom="16" trailing="0.0"/>
55+
</buttonConfiguration>
56+
<connections>
57+
<action selector="answerPromptTapped:" destination="iN0-l3-epB" eventType="touchUpInside" id="maK-JO-Huc"/>
58+
</connections>
59+
</button>
60+
<stackView opaque="NO" contentMode="scaleToFill" spacing="16" translatesAutoresizingMaskIntoConstraints="NO" id="74j-gh-nmq">
61+
<rect key="frame" x="100.5" y="70.5" width="148" height="20.5"/>
62+
<subviews>
63+
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="✓ Answered" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ttu-81-Rjc">
64+
<rect key="frame" x="0.0" y="0.0" width="94.5" height="20.5"/>
65+
<fontDescription key="fontDescription" type="system" pointSize="17"/>
66+
<nil key="textColor"/>
67+
<nil key="highlightedColor"/>
68+
</label>
69+
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="deu-kl-qJY">
70+
<rect key="frame" x="110.5" y="0.0" width="37.5" height="20.5"/>
71+
<state key="normal" title="Button"/>
72+
<buttonConfiguration key="configuration" style="plain" title="Share">
73+
<directionalEdgeInsets key="contentInsets" top="16" leading="0.0" bottom="16" trailing="0.0"/>
74+
</buttonConfiguration>
75+
<connections>
76+
<action selector="shareTapped:" destination="iN0-l3-epB" eventType="touchUpInside" id="ABZ-P1-FDh"/>
77+
</connections>
78+
</button>
79+
</subviews>
80+
</stackView>
81+
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="9KN-UC-IRC">
82+
<rect key="frame" x="0.0" y="91" width="349" height="1"/>
83+
<color key="backgroundColor" systemColor="separatorColor"/>
84+
<constraints>
85+
<constraint firstAttribute="height" constant="1" id="Fe2-Kr-HkA"/>
86+
</constraints>
87+
</view>
88+
</subviews>
89+
<constraints>
90+
<constraint firstItem="9KN-UC-IRC" firstAttribute="leading" secondItem="HBh-15-Hby" secondAttribute="leading" id="i3E-vF-ouk"/>
91+
<constraint firstAttribute="trailing" secondItem="9KN-UC-IRC" secondAttribute="trailing" id="j2W-Lj-CP5"/>
92+
</constraints>
93+
</stackView>
94+
</subviews>
95+
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
96+
<constraints>
97+
<constraint firstItem="HBh-15-Hby" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="1Us-st-jWK"/>
98+
<constraint firstItem="HBh-15-Hby" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="CcK-Dx-5sh"/>
99+
<constraint firstAttribute="bottom" secondItem="HBh-15-Hby" secondAttribute="bottom" constant="28" id="a95-RM-xA7"/>
100+
<constraint firstAttribute="trailing" secondItem="HBh-15-Hby" secondAttribute="trailing" id="gqq-A6-5fK"/>
101+
</constraints>
102+
<nil key="simulatedTopBarMetrics"/>
103+
<nil key="simulatedBottomBarMetrics"/>
104+
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
105+
<connections>
106+
<outlet property="answerPromptButton" destination="fqk-gy-gv5" id="g2H-Pl-Cot"/>
107+
<outlet property="answeredLabel" destination="ttu-81-Rjc" id="qUD-tY-fry"/>
108+
<outlet property="answeredStackView" destination="74j-gh-nmq" id="mWB-ce-YU3"/>
109+
<outlet property="containerStackView" destination="HBh-15-Hby" id="ce7-Wx-TUC"/>
110+
<outlet property="promptLabel" destination="Rye-vB-0gG" id="VoE-0W-soe"/>
111+
<outlet property="shareButton" destination="deu-kl-qJY" id="4ur-ok-U6p"/>
112+
<outlet property="titleLabel" destination="BJN-uB-YYG" id="zxX-90-kDD"/>
113+
<outlet property="titleStackView" destination="stO-XN-YJp" id="Mjx-Bg-Wpo"/>
114+
</connections>
115+
<point key="canvasLocation" x="180.43478260869566" y="-91.741071428571431"/>
116+
</view>
117+
</objects>
118+
<resources>
119+
<image name="icon-lightbulb-outline" width="24" height="24"/>
120+
<systemColor name="separatorColor">
121+
<color red="0.23529411764705882" green="0.23529411764705882" blue="0.2627450980392157" alpha="0.28999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
122+
</systemColor>
123+
<systemColor name="systemBackgroundColor">
124+
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
125+
</systemColor>
126+
</resources>
127+
</document>

‎WordPress/Classes/ViewRelated/System/Floating Create Button/CreateButtonActionSheet.swift‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ class CreateButtonActionSheet: ActionSheetViewController {
1111
}
1212

1313
init(actions: [ActionSheetItem]) {
14+
let headerView = FeatureFlag.bloggingPrompts.enabled ? BloggingPromptsHeaderView.loadFromNib() : nil
1415
let buttons = actions.map { $0.makeButton() }
15-
super.init(headerTitle: Constants.title, buttons: buttons)
16+
super.init(headerView: headerView, headerTitle: Constants.title, buttons: buttons)
1617
}
1718

1819
required init?(coder: NSCoder) {

0 commit comments

Comments
 (0)