From 14b5c56d6a2c203a83253a69a7923b66748082e5 Mon Sep 17 00:00:00 2001 From: kean Date: Fri, 3 Jan 2025 07:30:59 -0500 Subject: [PATCH 1/9] Fix RTL support in WebKitViewController --- .../WebKitViewController.swift | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/WordPress/Classes/Utility/WebViewController/WebKitViewController.swift b/WordPress/Classes/Utility/WebViewController/WebKitViewController.swift index ef059aa7c96e..977f338193ce 100644 --- a/WordPress/Classes/Utility/WebViewController/WebKitViewController.swift +++ b/WordPress/Classes/Utility/WebViewController/WebKitViewController.swift @@ -1,5 +1,3 @@ -import Foundation -import Gridicons import UIKit @preconcurrency import WebKit import WordPressShared @@ -39,7 +37,7 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable { let analyticsSource: String? @objc lazy var backButton: UIBarButtonItem = { - let button = UIBarButtonItem(image: UIImage.gridicon(.chevronLeft).imageFlippedForRightToLeftLayoutDirection(), + let button = UIBarButtonItem(image: UIImage(systemName: "chevron.backward"), style: .plain, target: self, action: #selector(goBack)) @@ -47,7 +45,7 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable { return button }() @objc lazy var forwardButton: UIBarButtonItem = { - let button = UIBarButtonItem(image: .gridicon(.chevronRight), + let button = UIBarButtonItem(image: UIImage(systemName: "chevron.forward"), style: .plain, target: self, action: #selector(goForward)) @@ -55,7 +53,7 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable { return button }() @objc lazy var shareButton: UIBarButtonItem = { - let button = UIBarButtonItem(image: .gridicon(.shareiOS), + let button = UIBarButtonItem(image: UIImage(systemName: "square.and.arrow.up"), style: .plain, target: self, action: #selector(share)) @@ -63,7 +61,7 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable { return button }() @objc lazy var safariButton: UIBarButtonItem = { - let button = UIBarButtonItem(image: .gridicon(.globe), + let button = UIBarButtonItem(image: UIImage(systemName: "safari"), style: .plain, target: self, action: #selector(openInSafari)) @@ -72,12 +70,12 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable { return button }() @objc lazy var refreshButton: UIBarButtonItem = { - let button = UIBarButtonItem(image: .gridicon(.refresh), style: .plain, target: self, action: #selector(WebKitViewController.refresh)) + let button = UIBarButtonItem(image: UIImage(systemName: "arrow.clockwise"), style: .plain, target: self, action: #selector(WebKitViewController.refresh)) button.title = NSLocalizedString("Refresh", comment: "Button label to refres a web page") return button }() @objc lazy var closeButton: UIBarButtonItem = { - let button = UIBarButtonItem(image: .gridicon(.cross), style: .plain, target: self, action: #selector(WebKitViewController.close)) + let button = UIBarButtonItem(image: UIImage(systemName: "xmark"), style: .plain, target: self, action: #selector(WebKitViewController.close)) button.title = NSLocalizedString("webKit.button.dismiss", value: "Dismiss", comment: "Verb. Dismiss the web view screen.") return button }() @@ -178,7 +176,7 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable { let stackView = UIStackView(arrangedSubviews: [ progressView, webView - ]) + ]) stackView.axis = .vertical stackView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(stackView) @@ -329,6 +327,9 @@ class WebKitViewController: UIViewController, WebKitAuthenticatable { space, safariButton ] + for item in items { + item.tintColor = UIAppColor.tint + } setToolbarItems(items, animated: false) } From eb7bed63e7d383f676aa47c9ff1b5d73d327ba0d Mon Sep 17 00:00:00 2001 From: kean Date: Fri, 3 Jan 2025 07:34:49 -0500 Subject: [PATCH 2/9] Use semantic back/forward chevrons in other places --- .../Blaze Campaigns/BlazeCampaignTableViewCell.swift | 2 +- .../Classes/ViewRelated/Blog/My Site/NoSitesView.swift | 2 +- .../ViewRelated/Domains/Views/SiteDomainsView.swift | 2 +- .../Me/App Settings/DebugMenuViewController.swift | 2 +- .../ViewRelated/Post/Prepublishing/PublishButton.swift | 2 +- .../Controllers/ReaderPostActions/ReaderPostMenu.swift | 2 +- .../Reader/Sidebar/ReaderSidebarViewController.swift | 7 ++----- 7 files changed, 8 insertions(+), 11 deletions(-) diff --git a/WordPress/Classes/ViewRelated/Blaze Campaigns/BlazeCampaignTableViewCell.swift b/WordPress/Classes/ViewRelated/Blaze Campaigns/BlazeCampaignTableViewCell.swift index 7f4b06eb16ca..d32641df8d26 100644 --- a/WordPress/Classes/ViewRelated/Blaze Campaigns/BlazeCampaignTableViewCell.swift +++ b/WordPress/Classes/ViewRelated/Blaze Campaigns/BlazeCampaignTableViewCell.swift @@ -77,7 +77,7 @@ final class BlazeCampaignTableViewCell: UITableViewCell, Reusable { }() private lazy var chevronView: UIImageView = { - let image = UIImage(systemName: "chevron.right")?.imageFlippedForRightToLeftLayoutDirection() + let image = UIImage(systemName: "chevron.forward") let imageView = UIImageView(image: image) imageView.translatesAutoresizingMaskIntoConstraints = false imageView.tintColor = .separator diff --git a/WordPress/Classes/ViewRelated/Blog/My Site/NoSitesView.swift b/WordPress/Classes/ViewRelated/Blog/My Site/NoSitesView.swift index 8e405a0e1eb8..cec681d6fcdc 100644 --- a/WordPress/Classes/ViewRelated/Blog/My Site/NoSitesView.swift +++ b/WordPress/Classes/ViewRelated/Blog/My Site/NoSitesView.swift @@ -59,7 +59,7 @@ struct NoSitesView: View { makeGravatarIcon(size: 40) accountAndSettingsStackView Spacer() - Image(systemName: "chevron.right") + Image(systemName: "chevron.forward") .tint(.secondary) } .padding(.horizontal, 16) diff --git a/WordPress/Classes/ViewRelated/Domains/Views/SiteDomainsView.swift b/WordPress/Classes/ViewRelated/Domains/Views/SiteDomainsView.swift index f4b5fea218f1..21456796e2d7 100644 --- a/WordPress/Classes/ViewRelated/Domains/Views/SiteDomainsView.swift +++ b/WordPress/Classes/ViewRelated/Domains/Views/SiteDomainsView.swift @@ -89,7 +89,7 @@ struct SiteDomainsView: View { Button(action: { showDetails(for: navigation) }) { HStack(alignment: .center) { AllDomainsListCardView(viewModel: row.viewModel, padding: 0) - Image(systemName: "chevron.right") + Image(systemName: "chevron.forward") .font(.subheadline.weight(.medium)) .foregroundColor(.secondary.opacity(0.5)) } diff --git a/WordPress/Classes/ViewRelated/Me/App Settings/DebugMenuViewController.swift b/WordPress/Classes/ViewRelated/Me/App Settings/DebugMenuViewController.swift index 0478d76a9bc5..99cbeb3076c7 100644 --- a/WordPress/Classes/ViewRelated/Me/App Settings/DebugMenuViewController.swift +++ b/WordPress/Classes/ViewRelated/Me/App Settings/DebugMenuViewController.swift @@ -86,7 +86,7 @@ struct DebugMenuView: View { HStack { Text(Strings.encryptedLogging) Spacer() - Image(systemName: "chevron.right") + Image(systemName: "chevron.forward") .font(.subheadline.weight(.semibold)) .foregroundStyle(.secondary.opacity(0.5)) } diff --git a/WordPress/Classes/ViewRelated/Post/Prepublishing/PublishButton.swift b/WordPress/Classes/ViewRelated/Post/Prepublishing/PublishButton.swift index e9cb2e1dfa15..dbcdbbcef882 100644 --- a/WordPress/Classes/ViewRelated/Post/Prepublishing/PublishButton.swift +++ b/WordPress/Classes/ViewRelated/Post/Prepublishing/PublishButton.swift @@ -87,7 +87,7 @@ struct PublishButton: View { } private var chevronUpView: some View { - Image(systemName: "chevron.right") + Image(systemName: "chevron.forward") .font(.subheadline.weight(.semibold)) .tint(Color.secondary) } diff --git a/WordPress/Classes/ViewRelated/Reader/Controllers/ReaderPostActions/ReaderPostMenu.swift b/WordPress/Classes/ViewRelated/Reader/Controllers/ReaderPostActions/ReaderPostMenu.swift index 4c7daee89be3..2d05fc714563 100644 --- a/WordPress/Classes/ViewRelated/Reader/Controllers/ReaderPostActions/ReaderPostMenu.swift +++ b/WordPress/Classes/ViewRelated/Reader/Controllers/ReaderPostActions/ReaderPostMenu.swift @@ -79,7 +79,7 @@ struct ReaderPostMenu { } private var goToBlog: UIAction { - UIAction(Strings.goToBlog, systemImage: "chevron.right") { + UIAction(Strings.goToBlog, systemImage: "chevron.forward") { guard let viewController else { return } ReaderHeaderAction().execute(post: post, origin: viewController) track(.goToBlog) diff --git a/WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarViewController.swift b/WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarViewController.swift index 8a0cfd2d3714..f44e3b7dd6a7 100644 --- a/WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarViewController.swift +++ b/WordPress/Classes/ViewRelated/Reader/Sidebar/ReaderSidebarViewController.swift @@ -74,7 +74,6 @@ private struct ReaderSidebarView: View { @State private var searchText = "" - @Environment(\.layoutDirection) var layoutDirection @Environment(\.editMode) var editMode var isEditing: Bool { editMode?.wrappedValue.isEditing == true } @@ -163,7 +162,7 @@ private struct ReaderSidebarView: View { .lineLimit(1) if viewModel.isCompact { Spacer() - Image(systemName: layoutDirection == .rightToLeft ? "chevron.left" : "chevron.right") + Image(systemName: "chevron.forward") .font(.system(size: 14).weight(.medium)) .foregroundStyle(.secondary.opacity(0.8)) } @@ -195,8 +194,6 @@ private struct ReaderSidebarSection: View { var isCompact: Bool @ViewBuilder var content: () -> Content - @Environment(\.layoutDirection) var layoutDirection - var body: some View { if isCompact { Button { @@ -207,7 +204,7 @@ private struct ReaderSidebarSection: View { .font(.subheadline.weight(.semibold)) .foregroundStyle(.secondary) Spacer() - Image(systemName: isExpanded ? "chevron.down" : (layoutDirection == .rightToLeft ? "chevron.left" : "chevron.right")) + Image(systemName: isExpanded ? "chevron.down" : "chevron.forward") .font(.system(size: 14).weight(.semibold)) .foregroundStyle(AppColor.brand) .frame(width: 14) From 2b4ff0543bdf1aba65f2d5516eab0628eb6142e3 Mon Sep 17 00:00:00 2001 From: kean Date: Fri, 3 Jan 2025 08:22:14 -0500 Subject: [PATCH 3/9] Update StatsBaseCell --- .../Stats/Insights/StatsBaseCell.swift | 41 +++++++------------ 1 file changed, 15 insertions(+), 26 deletions(-) diff --git a/WordPress/Classes/ViewRelated/Stats/Insights/StatsBaseCell.swift b/WordPress/Classes/ViewRelated/Stats/Insights/StatsBaseCell.swift index 0d8bc1dbc408..fb69f8bacf1f 100644 --- a/WordPress/Classes/ViewRelated/Stats/Insights/StatsBaseCell.swift +++ b/WordPress/Classes/ViewRelated/Stats/Insights/StatsBaseCell.swift @@ -1,5 +1,4 @@ import UIKit -import DesignSystem class StatsBaseCell: UITableViewCell { @@ -15,23 +14,16 @@ class StatsBaseCell: UITableViewCell { }() private lazy var showDetailsButton: UIButton = { - let button = UIButton() + var configuration = UIButton.Configuration.plain() + configuration.image = UIImage(systemName: "chevron.forward") + configuration.buttonSize = .small + configuration.imagePadding = 4 + configuration.baseForegroundColor = .secondaryLabel + configuration.imagePlacement = .trailing + + let button = UIButton(configuration: configuration) button.translatesAutoresizingMaskIntoConstraints = true button.addTarget(self, action: #selector(detailsButtonTapped), for: .touchUpInside) - button.titleLabel?.font = UIFont.preferredFont(forTextStyle: .callout) - button.titleLabel?.adjustsFontSizeToFitWidth = true - button.tintColor = .secondaryLabel - button.setTitleColor(.secondaryLabel, for: .normal) - button.setImage(UIImage.gridicon(.chevronRight).withTintColor(UIColor(color: WPStyleGuide.greyLighten20())), for: .normal) - - if UIApplication.shared.userInterfaceLayoutDirection == .rightToLeft { - button.semanticContentAttribute = .forceLeftToRight - button.titleEdgeInsets = Metrics.rtlButtonTitleInsets - } else { - button.semanticContentAttribute = .forceRightToLeft - button.titleEdgeInsets = Metrics.buttonTitleInsets - } - button.accessibilityHint = LocalizedText.buttonAccessibilityHint return button }() @@ -39,7 +31,7 @@ class StatsBaseCell: UITableViewCell { private let stackView: UIStackView = { let stackView = UIStackView() stackView.translatesAutoresizingMaskIntoConstraints = false - stackView.spacing = Metrics.stackSpacing + stackView.spacing = 8 stackView.axis = .horizontal stackView.alignment = .fill stackView.distribution = .equalSpacing @@ -79,7 +71,7 @@ class StatsBaseCell: UITableViewCell { NSLayoutConstraint.activate([ stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: Metrics.padding), - stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -Metrics.padding), + stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 0), stackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: Metrics.padding) ]) @@ -113,11 +105,11 @@ class StatsBaseCell: UITableViewCell { switch statSection { case .insightsViewsVisitors: - showDetailsButton.setTitle(LocalizedText.buttonTitleThisWeek, for: .normal) + showDetailsButton.configuration?.title = LocalizedText.buttonTitleThisWeek case .insightsFollowerTotals, .insightsCommentsTotals, .insightsLikesTotals: - showDetailsButton.setTitle(LocalizedText.buttonTitleViewMore, for: .normal) + showDetailsButton.configuration?.title = LocalizedText.buttonTitleViewMore default: - showDetailsButton.setTitle("", for: .normal) + showDetailsButton.configuration?.title = nil } headingWidthConstraint?.isActive = true @@ -179,11 +171,8 @@ class StatsBaseCell: UITableViewCell { } enum Metrics { - static let padding: CGFloat = .DS.Padding.double - static let bottomSpacing: CGFloat = .DS.Padding.split - static let stackSpacing: CGFloat = .DS.Padding.single - static let buttonTitleInsets = UIEdgeInsets(top: 0, left: -.DS.Padding.single, bottom: 0, right: .DS.Padding.single) - static let rtlButtonTitleInsets = UIEdgeInsets(top: 0, left: .DS.Padding.single, bottom: 0, right: -.DS.Padding.single) + static let padding: CGFloat = 16 + static let bottomSpacing: CGFloat = 12 } private enum LocalizedText { From c227ab48fc2108f0a79904a0fa174cef3f04c443 Mon Sep 17 00:00:00 2001 From: kean Date: Fri, 3 Jan 2025 08:48:29 -0500 Subject: [PATCH 4/9] Update SiteStatsTableHeaderView --- .../Stats/Insights/StatsBaseCell.swift | 1 + .../SiteStatsTableHeaderView.swift | 20 ++--- .../Date Chooser/SiteStatsTableHeaderView.xib | 73 +++---------------- .../System/Notices/NoticeView.swift | 2 +- 4 files changed, 25 insertions(+), 71 deletions(-) diff --git a/WordPress/Classes/ViewRelated/Stats/Insights/StatsBaseCell.swift b/WordPress/Classes/ViewRelated/Stats/Insights/StatsBaseCell.swift index fb69f8bacf1f..d4511ad1e02c 100644 --- a/WordPress/Classes/ViewRelated/Stats/Insights/StatsBaseCell.swift +++ b/WordPress/Classes/ViewRelated/Stats/Insights/StatsBaseCell.swift @@ -20,6 +20,7 @@ class StatsBaseCell: UITableViewCell { configuration.imagePadding = 4 configuration.baseForegroundColor = .secondaryLabel configuration.imagePlacement = .trailing + configuration.titleLineBreakMode = .byTruncatingTail let button = UIButton(configuration: configuration) button.translatesAutoresizingMaskIntoConstraints = true diff --git a/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.swift b/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.swift index 28eba0b8f5b3..f7f22165f566 100644 --- a/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.swift +++ b/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.swift @@ -16,8 +16,6 @@ class SiteStatsTableHeaderView: UIView, NibLoadable, Accessible { @IBOutlet weak var dateLabel: UILabel! @IBOutlet weak var timezoneLabel: UILabel! - @IBOutlet weak var backArrow: UIImageView! - @IBOutlet weak var forwardArrow: UIImageView! @IBOutlet weak var bottomSeparatorLine: UIView! { didSet { bottomSeparatorLine.isGhostableDisabled = true @@ -134,6 +132,9 @@ private extension SiteStatsTableHeaderView { func applyStyles() { backgroundColor = .secondarySystemGroupedBackground + backButton.configuration = makeNavigationButtonConfiguraiton(systemImage: "chevron.backward") + forwardButton.configuration = makeNavigationButtonConfiguraiton(systemImage: "chevron.forward") + Style.configureLabelAsCellRowTitle(dateLabel) dateLabel.font = Metrics.dateLabelFont dateLabel.adjustsFontForContentSizeCategory = true @@ -151,6 +152,14 @@ private extension SiteStatsTableHeaderView { bottomSeparatorLine.backgroundColor = .separator } + private func makeNavigationButtonConfiguraiton(systemImage: String) -> UIButton.Configuration { + var configuration = UIButton.Configuration.plain() + configuration.buttonSize = .small + configuration.baseForegroundColor = .label + configuration.image = UIImage(systemName: systemImage) + return configuration + } + func displayDate() -> String? { guard let components = displayDateComponents() else { return nil @@ -261,22 +270,15 @@ private extension SiteStatsTableHeaderView { guard let date, let period else { forwardButton.isEnabled = false backButton.isEnabled = false - updateArrowStates() return } let helper = StatsPeriodHelper() forwardButton.isEnabled = helper.dateAvailableAfterDate(date, period: period, mostRecentDate: mostRecentDate) backButton.isEnabled = helper.dateAvailableBeforeDate(date, period: period, backLimit: backLimit, mostRecentDate: mostRecentDate) - updateArrowStates() prepareForVoiceOver() } - func updateArrowStates() { - forwardArrow.image = Style.imageForGridiconType(.chevronRight, withTint: (forwardButton.isEnabled ? .darkGrey : .grey)) - backArrow.image = Style.imageForGridiconType(.chevronLeft, withTint: (backButton.isEnabled ? .darkGrey : .grey)) - } - func postAccessibilityPeriodLabel() { UIAccessibility.post(notification: .screenChanged, argument: dateLabel) } diff --git a/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.xib b/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.xib index d61c8fe00698..568893056aeb 100644 --- a/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.xib +++ b/WordPress/Classes/ViewRelated/Stats/Shared Views/Date Chooser/SiteStatsTableHeaderView.xib @@ -1,9 +1,9 @@ - + - + @@ -16,78 +16,38 @@ - + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -