Skip to content

Commit fd72e9b

Browse files
wargcmwargcm
authored
Merge pull request #18456 from wordpress-mobile/feature/18402-bottom-sheet-prompt
Blogging Prompts: Create prompts header view for create new action sheet
2 parents cec3e1f + 698d069 commit fd72e9b

4 files changed

Lines changed: 231 additions & 1 deletion

File tree

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

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

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
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="23.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="71.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="92" width="349" height="0.0"/>
83+
<color key="backgroundColor" systemColor="separatorColor"/>
84+
</view>
85+
</subviews>
86+
<constraints>
87+
<constraint firstItem="9KN-UC-IRC" firstAttribute="leading" secondItem="HBh-15-Hby" secondAttribute="leading" id="i3E-vF-ouk"/>
88+
<constraint firstAttribute="trailing" secondItem="9KN-UC-IRC" secondAttribute="trailing" id="j2W-Lj-CP5"/>
89+
</constraints>
90+
</stackView>
91+
</subviews>
92+
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
93+
<constraints>
94+
<constraint firstItem="HBh-15-Hby" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="1Us-st-jWK"/>
95+
<constraint firstItem="HBh-15-Hby" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="CcK-Dx-5sh"/>
96+
<constraint firstAttribute="bottom" secondItem="HBh-15-Hby" secondAttribute="bottom" constant="28" id="a95-RM-xA7"/>
97+
<constraint firstAttribute="trailing" secondItem="HBh-15-Hby" secondAttribute="trailing" id="gqq-A6-5fK"/>
98+
</constraints>
99+
<nil key="simulatedTopBarMetrics"/>
100+
<nil key="simulatedBottomBarMetrics"/>
101+
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
102+
<connections>
103+
<outlet property="answerPromptButton" destination="fqk-gy-gv5" id="g2H-Pl-Cot"/>
104+
<outlet property="answeredLabel" destination="ttu-81-Rjc" id="qUD-tY-fry"/>
105+
<outlet property="answeredStackView" destination="74j-gh-nmq" id="mWB-ce-YU3"/>
106+
<outlet property="containerStackView" destination="HBh-15-Hby" id="ce7-Wx-TUC"/>
107+
<outlet property="dividerView" destination="9KN-UC-IRC" id="Wnd-hZ-yio"/>
108+
<outlet property="promptLabel" destination="Rye-vB-0gG" id="VoE-0W-soe"/>
109+
<outlet property="shareButton" destination="deu-kl-qJY" id="4ur-ok-U6p"/>
110+
<outlet property="titleLabel" destination="BJN-uB-YYG" id="zxX-90-kDD"/>
111+
<outlet property="titleStackView" destination="stO-XN-YJp" id="Mjx-Bg-Wpo"/>
112+
</connections>
113+
<point key="canvasLocation" x="180.43478260869566" y="-91.741071428571431"/>
114+
</view>
115+
</objects>
116+
<resources>
117+
<image name="icon-lightbulb-outline" width="24" height="24"/>
118+
<systemColor name="separatorColor">
119+
<color red="0.23529411764705882" green="0.23529411764705882" blue="0.2627450980392157" alpha="0.28999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
120+
</systemColor>
121+
<systemColor name="systemBackgroundColor">
122+
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
123+
</systemColor>
124+
</resources>
125+
</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)