diff --git a/WooCommerce/Classes/Extensions/UIImage+Woo.swift b/WooCommerce/Classes/Extensions/UIImage+Woo.swift index f5e5f6f9d07..db8a643ff4b 100644 --- a/WooCommerce/Classes/Extensions/UIImage+Woo.swift +++ b/WooCommerce/Classes/Extensions/UIImage+Woo.swift @@ -210,6 +210,12 @@ extension UIImage { return UIImage.gridicon(.comment) } + /// Comment Content Icon + /// + static var commentContent: UIImage { + return UIImage(named: "icon-comment-content") ?? UIImage.gridicon(.comment) + } + /// Credit Card Icon /// static var creditCardImage: UIImage { diff --git a/WooCommerce/Classes/Extensions/UIView+Border.swift b/WooCommerce/Classes/Extensions/UIView+Border.swift index 01f527e8c93..864cddd931f 100644 --- a/WooCommerce/Classes/Extensions/UIView+Border.swift +++ b/WooCommerce/Classes/Extensions/UIView+Border.swift @@ -1,9 +1,10 @@ import UIKit extension UIView { - /// Creates a border view with the given height and color. + /// Creates a border view with the given height, and color. /// - Parameter height: height of the border. Default to be 0.5px. /// - Parameter color: background color of the border. Default to be the divider color. + /// static func createBorderView(height: CGFloat = 0.5, color: UIColor = .systemColor(.separator)) -> UIView { let view = UIView(frame: .zero) @@ -14,4 +15,22 @@ extension UIView { ]) return view } + + /// Creates an empty view with the given height, width, and color + /// - Parameter height: height of the separator. Default to be 0.5px. + /// - Parameter width: width of the separator. Default to be 0.5px. + /// - Parameter color: background color of the separator. Default to be `.clear` + /// + static func createSeparatorView(height: CGFloat = 0.5, + width: CGFloat = 0.5, + color: UIColor = .clear) -> UIView { + let view = UIView(frame: .zero) + view.translatesAutoresizingMaskIntoConstraints = false + view.backgroundColor = color + NSLayoutConstraint.activate([ + view.heightAnchor.constraint(equalToConstant: height), + view.widthAnchor.constraint(equalToConstant: width) + ]) + return view + } } diff --git a/WooCommerce/Classes/ViewRelated/Orders/OrderListViewController.swift b/WooCommerce/Classes/ViewRelated/Orders/OrderListViewController.swift index 5d0417b2023..a4330a5406f 100644 --- a/WooCommerce/Classes/ViewRelated/Orders/OrderListViewController.swift +++ b/WooCommerce/Classes/ViewRelated/Orders/OrderListViewController.swift @@ -828,7 +828,7 @@ private extension OrderListViewController { let viewModel = TopBannerViewModel( title: bannerTitle, infoText: bannerText, - icon: UIImage.gridicon(.comment), + icon: UIImage.commentContent, isExpanded: true, topButton: .dismiss(handler: { self.showIPPFeedbackDismissAlert() diff --git a/WooCommerce/Classes/ViewRelated/Top Banner/TopBannerView.swift b/WooCommerce/Classes/ViewRelated/Top Banner/TopBannerView.swift index 14c1a6ef96b..3127ddd3365 100644 --- a/WooCommerce/Classes/ViewRelated/Top Banner/TopBannerView.swift +++ b/WooCommerce/Classes/ViewRelated/Top Banner/TopBannerView.swift @@ -50,6 +50,12 @@ final class TopBannerView: UIView { return stackView }() + private let labelHolderStackView: UIStackView = { + let stackView = UIStackView() + stackView.axis = .horizontal + return stackView + }() + // StackView to hold the action buttons. Needed to change the axis on larger accessibility traits private let buttonsStackView = UIStackView() @@ -114,6 +120,10 @@ private extension TopBannerView { zip(viewModel.actionButtons, actionButtons).forEach { buttonInfo, button in button.setTitle(buttonInfo.title, for: .normal) + button.titleLabel?.font = .boldSystemFont(ofSize: titleLabel.font.pointSize) + // Overrides the general .applyLinkButtonStyle() with pink color + // pecCkj-fa-p2 + button.setTitleColor(UIColor.withColorStudio(.pink), for: .normal) button.on(.touchUpInside, call: { _ in buttonInfo.action(button) }) } } @@ -141,7 +151,7 @@ private extension TopBannerView { func createMainStackView(with viewModel: TopBannerViewModel) -> UIStackView { let iconInformationStackView = createIconInformationStackView(with: viewModel) - let mainStackView = UIStackView(arrangedSubviews: [iconInformationStackView, createBorderView()]) + let mainStackView = UIStackView(arrangedSubviews: [createBorderView(), iconInformationStackView, createBorderView()]) if isActionEnabled { configureActionStackView(with: viewModel) mainStackView.addArrangedSubview(actionStackView) @@ -167,6 +177,18 @@ private extension TopBannerView { return iconInformationStackView } + func createLabelHolderStackView() -> UIStackView { + labelHolderStackView.addArrangedSubviews([ + createSeparatorView(height: Constants.labelHolderHeight, width: Constants.labelHolderLeftMargin), + infoLabel, + createSeparatorView(height: Constants.labelHolderHeight, width: Constants.labelHolderRightMargin) + ]) + labelHolderStackView.spacing = Constants.labelHolderSpacing + infoLabel.adjustsFontSizeToFitWidth = true + + return labelHolderStackView + } + func createInformationStackView(with viewModel: TopBannerViewModel) -> UIStackView { let topActionButton = topButton(for: viewModel.topButton) titleStackView.addArrangedSubviews([titleLabel, topActionButton].compactMap { $0 }) @@ -179,7 +201,8 @@ private extension TopBannerView { // titleStackView will hidden if there is no title titleStackView.isHidden = viewModel.title == nil || viewModel.title?.isEmpty == true - let informationStackView = UIStackView(arrangedSubviews: [titleStackView, infoLabel]) + let informationStackView = UIStackView(arrangedSubviews: [titleStackView, createLabelHolderStackView()]) + informationStackView.axis = .vertical informationStackView.spacing = 9 @@ -225,6 +248,10 @@ private extension TopBannerView { return UIView.createBorderView() } + func createSeparatorView(height: CGFloat, width: CGFloat) -> UIView { + return UIView.createSeparatorView(height: height, width: width) + } + func topButton(for buttonType: TopBannerViewModel.TopButtonType) -> UIButton? { switch buttonType { case .chevron: @@ -293,14 +320,14 @@ private extension TopBannerView { func updateExpandCollapseState(isExpanded: Bool) { let image = isExpanded ? UIImage.chevronUpImage: UIImage.chevronDownImage expandCollapseButton.setImage(image, for: .normal) - infoLabel.isHidden = !isExpanded + labelHolderStackView.isHidden = !isExpanded if isActionEnabled { actionStackView.isHidden = !isExpanded } titleStackView.accessibilityHint = isExpanded ? Localization.collapseHint : Localization.expandHint titleStackView.accessibilityValue = isExpanded ? Localization.expanded : Localization.collapsed - let accessibleView = isExpanded ? infoLabel : nil + let accessibleView = isExpanded ? labelHolderStackView : nil UIAccessibility.post(notification: .layoutChanged, argument: accessibleView) } } @@ -316,3 +343,14 @@ private extension TopBannerView { static let dismissHint = NSLocalizedString("Double-tap to dismiss", comment: "Accessibility hint to dismiss a banner") } } + +// MARK: - Constants +// +private extension TopBannerView { + enum Constants { + static let labelHolderHeight: CGFloat = 48.0 + static let labelHolderLeftMargin: CGFloat = 0.0 + static let labelHolderRightMargin: CGFloat = 24.0 + static let labelHolderSpacing: CGFloat = 1.0 + } +} diff --git a/WooCommerce/Resources/Images.xcassets/icon-comment-content.imageset/Contents.json b/WooCommerce/Resources/Images.xcassets/icon-comment-content.imageset/Contents.json new file mode 100644 index 00000000000..f76a0020422 --- /dev/null +++ b/WooCommerce/Resources/Images.xcassets/icon-comment-content.imageset/Contents.json @@ -0,0 +1,12 @@ +{ + "images" : [ + { + "filename" : "icon-comment-content.pdf", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/WooCommerce/Resources/Images.xcassets/icon-comment-content.imageset/icon-comment-content.pdf b/WooCommerce/Resources/Images.xcassets/icon-comment-content.imageset/icon-comment-content.pdf new file mode 100644 index 00000000000..0d211cf5987 Binary files /dev/null and b/WooCommerce/Resources/Images.xcassets/icon-comment-content.imageset/icon-comment-content.pdf differ