Skip to content

Commit

Permalink
Merge pull request #18456 from wordpress-mobile/feature/18402-bottom-…
Browse files Browse the repository at this point in the history 
…sheet-prompt

Blogging Prompts: Create prompts header view for create new action sheet
  • Loading branch information
@wargcm
wargcm authored Apr 27, 2022
2 parents cec3e1f + 698d069 commit fd72e9b
Show file tree
Hide file tree
Showing 4 changed files with 231 additions and 1 deletion.
92 changes: 92 additions & 0 deletions WordPress/Classes/ViewRelated/System/Action Sheet/BloggingPromptsHeaderView.swift
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import UIKit

class BloggingPromptsHeaderView: UIView, NibLoadable {
@IBOutlet private weak var containerStackView: UIStackView!
@IBOutlet private weak var titleStackView: UIStackView!
@IBOutlet private weak var titleLabel: UILabel!
@IBOutlet private weak var promptLabel: UILabel!
@IBOutlet private weak var answerPromptButton: UIButton!
@IBOutlet private weak var answeredStackView: UIStackView!
@IBOutlet private weak var answeredLabel: UILabel!
@IBOutlet private weak var shareButton: UIButton!
@IBOutlet private weak var dividerView: UIView!

override func awakeFromNib() {
super.awakeFromNib()
configureView()
}

@IBAction private func answerPromptTapped(_ sender: Any) {
// TODO
}

@IBAction private func shareTapped(_ sender: Any) {
// TODO
}
}

// MARK: - Private methods

private extension BloggingPromptsHeaderView {

func configureView() {
// TODO: Hide correct UI based on if prompt is answered
answerPromptButton.isHidden = true
configureSpacing()
configureStrings()
configureStyles()
configureConstraints()
}

func configureSpacing() {
containerStackView.setCustomSpacing(Constants.titleSpacing, after: titleStackView)
containerStackView.setCustomSpacing(Constants.answeredViewSpacing, after: answeredStackView)
containerStackView.setCustomSpacing(Constants.answerPromptButtonSpacing, after: answerPromptButton)
}

func configureStrings() {
titleLabel.text = Strings.title
// TODO: Use prompt from backend
promptLabel.text = Strings.examplePrompt
answerPromptButton.titleLabel?.text = Strings.answerButtonTitle
answeredLabel.text = Strings.answeredLabelTitle
shareButton.titleLabel?.text = Strings.shareButtonTitle
}

func configureStyles() {
titleLabel.font = WPStyleGuide.fontForTextStyle(.subheadline, fontWeight: .semibold)
promptLabel.font = WPStyleGuide.BloggingPrompts.promptContentFont
answerPromptButton.titleLabel?.font = WPStyleGuide.BloggingPrompts.buttonTitleFont
answerPromptButton.titleLabel?.adjustsFontForContentSizeCategory = true
answerPromptButton.setTitleColor(WPStyleGuide.BloggingPrompts.buttonTitleColor, for: .normal)
answeredLabel.font = WPStyleGuide.BloggingPrompts.buttonTitleFont
answeredLabel.textColor = WPStyleGuide.BloggingPrompts.answeredLabelColor
shareButton.titleLabel?.font = WPStyleGuide.BloggingPrompts.buttonTitleFont
shareButton.titleLabel?.adjustsFontForContentSizeCategory = true
shareButton.titleLabel?.adjustsFontSizeToFitWidth = true
shareButton.setTitleColor(WPStyleGuide.BloggingPrompts.buttonTitleColor, for: .normal)
}

func configureConstraints() {
NSLayoutConstraint.activate([
dividerView.heightAnchor.constraint(equalToConstant: .hairlineBorderWidth),
])
}

// MARK: - Constants

struct Constants {
static let titleSpacing: CGFloat = 8.0
static let answeredViewSpacing: CGFloat = 9.0
static let answerPromptButtonSpacing: CGFloat = 9.0
}

struct Strings {
static let examplePrompt = NSLocalizedString("Cast the movie of your life.", comment: "Example prompt for blogging prompts in the create new bottom action sheet.")
static let title = NSLocalizedString("Prompts", comment: "Title label for blogging prompts in the create new bottom action sheet.")
static let answerButtonTitle = NSLocalizedString("Answer Prompt", comment: "Title for a call-to-action button in the create new bottom action sheet.")
static let answeredLabelTitle = NSLocalizedString("✓ Answered", comment: "Title label that indicates the prompt has been answered.")
static let shareButtonTitle = NSLocalizedString("Share", comment: "Title for a button that allows the user to share their answer to the prompt.")
}

}
125 changes: 125 additions & 0 deletions WordPress/Classes/ViewRelated/System/Action Sheet/BloggingPromptsHeaderView.xib
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<device id="retina6_1" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
<capability name="System colors in document resources" minToolsVersion="11.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="iN0-l3-epB" customClass="BloggingPromptsHeaderView" customModule="WordPress" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="349" height="120"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" translatesAutoresizingMaskIntoConstraints="NO" id="HBh-15-Hby">
<rect key="frame" x="0.0" y="0.0" width="349" height="92"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacing="5" translatesAutoresizingMaskIntoConstraints="NO" id="stO-XN-YJp">
<rect key="frame" x="131" y="0.0" width="87.5" height="24"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="icon-lightbulb-outline" translatesAutoresizingMaskIntoConstraints="NO" id="AiS-VC-l3e">
<rect key="frame" x="0.0" y="3" width="18" height="18"/>
<constraints>
<constraint firstAttribute="width" constant="18" id="VuP-Sn-J3O"/>
<constraint firstAttribute="height" constant="18" id="Wgm-8p-3As"/>
</constraints>
</imageView>
<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">
<rect key="frame" x="23" y="0.0" width="64.5" height="24"/>
<constraints>
<constraint firstAttribute="height" relation="greaterThanOrEqual" constant="24" id="5Im-WR-keg"/>
</constraints>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<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">
<rect key="frame" x="73.5" y="24" width="202.5" height="24"/>
<constraints>
<constraint firstAttribute="height" relation="greaterThanOrEqual" constant="24" id="XJS-Qq-aST"/>
</constraints>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="fqk-gy-gv5">
<rect key="frame" x="125" y="48" width="99" height="23.5"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="Answer Prompt">
<directionalEdgeInsets key="contentInsets" top="16" leading="0.0" bottom="16" trailing="0.0"/>
</buttonConfiguration>
<connections>
<action selector="answerPromptTapped:" destination="iN0-l3-epB" eventType="touchUpInside" id="maK-JO-Huc"/>
</connections>
</button>
<stackView opaque="NO" contentMode="scaleToFill" spacing="16" translatesAutoresizingMaskIntoConstraints="NO" id="74j-gh-nmq">
<rect key="frame" x="100.5" y="71.5" width="148" height="20.5"/>
<subviews>
<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">
<rect key="frame" x="0.0" y="0.0" width="94.5" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="deu-kl-qJY">
<rect key="frame" x="110.5" y="0.0" width="37.5" height="20.5"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="Share">
<directionalEdgeInsets key="contentInsets" top="16" leading="0.0" bottom="16" trailing="0.0"/>
</buttonConfiguration>
<connections>
<action selector="shareTapped:" destination="iN0-l3-epB" eventType="touchUpInside" id="ABZ-P1-FDh"/>
</connections>
</button>
</subviews>
</stackView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="9KN-UC-IRC">
<rect key="frame" x="0.0" y="92" width="349" height="0.0"/>
<color key="backgroundColor" systemColor="separatorColor"/>
</view>
</subviews>
<constraints>
<constraint firstItem="9KN-UC-IRC" firstAttribute="leading" secondItem="HBh-15-Hby" secondAttribute="leading" id="i3E-vF-ouk"/>
<constraint firstAttribute="trailing" secondItem="9KN-UC-IRC" secondAttribute="trailing" id="j2W-Lj-CP5"/>
</constraints>
</stackView>
</subviews>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="HBh-15-Hby" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="1Us-st-jWK"/>
<constraint firstItem="HBh-15-Hby" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="CcK-Dx-5sh"/>
<constraint firstAttribute="bottom" secondItem="HBh-15-Hby" secondAttribute="bottom" constant="28" id="a95-RM-xA7"/>
<constraint firstAttribute="trailing" secondItem="HBh-15-Hby" secondAttribute="trailing" id="gqq-A6-5fK"/>
</constraints>
<nil key="simulatedTopBarMetrics"/>
<nil key="simulatedBottomBarMetrics"/>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<connections>
<outlet property="answerPromptButton" destination="fqk-gy-gv5" id="g2H-Pl-Cot"/>
<outlet property="answeredLabel" destination="ttu-81-Rjc" id="qUD-tY-fry"/>
<outlet property="answeredStackView" destination="74j-gh-nmq" id="mWB-ce-YU3"/>
<outlet property="containerStackView" destination="HBh-15-Hby" id="ce7-Wx-TUC"/>
<outlet property="dividerView" destination="9KN-UC-IRC" id="Wnd-hZ-yio"/>
<outlet property="promptLabel" destination="Rye-vB-0gG" id="VoE-0W-soe"/>
<outlet property="shareButton" destination="deu-kl-qJY" id="4ur-ok-U6p"/>
<outlet property="titleLabel" destination="BJN-uB-YYG" id="zxX-90-kDD"/>
<outlet property="titleStackView" destination="stO-XN-YJp" id="Mjx-Bg-Wpo"/>
</connections>
<point key="canvasLocation" x="180.43478260869566" y="-91.741071428571431"/>
</view>
</objects>
<resources>
<image name="icon-lightbulb-outline" width="24" height="24"/>
<systemColor name="separatorColor">
<color red="0.23529411764705882" green="0.23529411764705882" blue="0.2627450980392157" alpha="0.28999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>
3 changes: 2 additions & 1 deletion WordPress/Classes/ViewRelated/System/Floating Create Button/CreateButtonActionSheet.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@ class CreateButtonActionSheet: ActionSheetViewController {
}

init(actions: [ActionSheetItem]) {
let headerView = FeatureFlag.bloggingPrompts.enabled ? BloggingPromptsHeaderView.loadFromNib() : nil
let buttons = actions.map { $0.makeButton() }
super.init(headerTitle: Constants.title, buttons: buttons)
super.init(headerView: headerView, headerTitle: Constants.title, buttons: buttons)
}

required init?(coder: NSCoder) {
Expand Down
Loading

0 comments on commit fd72e9b

Please sign in to comment.