Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update iconography in Reader #24128

Merged
merged 4 commits into from
Feb 27, 2025
+32 −35
Merged

Update iconography in Reader #24128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
96b2e50
Update Reader stream to use the same icons as web
kean Feb 27, 2025
1540802
Update the tint color
kean Feb 27, 2025
293f833
Update reader details toolbar to show number of likes
kean Feb 27, 2025
176b579
Reduce bottom inset for actions as it was now out of balance
kean Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 21 additions & 13 deletions WordPress/Classes/ViewRelated/Reader/Cards/ReaderPostCell.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ private final class ReaderPostCellView: UIView {
let buttonAuthor = makeAuthorButton()
let timeLabel = UILabel()
let seenCheckmark = UIImageView()
let buttonMore = makeButton(systemImage: "ellipsis", font: .systemFont(ofSize: 13))
let buttonMore = makeButton(image: UIImage(systemName: "ellipsis"), font: .systemFont(ofSize: 13))

// Content
let titleLabel = UILabel()
Expand Down Expand Up @@ -337,22 +337,30 @@ private final class ReaderPostCellView: UIView {
private func configureToolbar(with viewModel: ReaderPostToolbarViewModel) {
buttons.bookmark.configuration = {
var configuration = buttons.bookmark.configuration ?? .plain()
configuration.image = UIImage(systemName: viewModel.isBookmarked ? "bookmark.fill" : "bookmark")
configuration.image = viewModel.isBookmarked ? WPStyleGuide.ReaderDetail.saveSelectedToolbarIcon : WPStyleGuide.ReaderDetail.saveToolbarIcon
configuration.baseForegroundColor = viewModel.isBookmarked ? UIAppColor.primary : .secondaryLabel
return configuration
}()

let font = UIFont.preferredFont(forTextStyle: .footnote).withWeight(.medium)

buttons.comment.isHidden = !viewModel.isCommentsEnabled
if viewModel.isCommentsEnabled {
buttons.comment.configuration?.attributedTitle = AttributedString(kFormatted(viewModel.commentCount), attributes: Self.toolbarAttributes)
buttons.comment.configuration?.attributedTitle = AttributedString(kFormatted(viewModel.commentCount), attributes: AttributeContainer([
.font: font,
.foregroundColor: UIColor.secondaryLabel
]))
}
buttons.like.isHidden = !viewModel.isLikesEnabled
if viewModel.isLikesEnabled {
buttons.like.configuration = {
var configuration = buttons.like.configuration ?? .plain()
configuration.attributedTitle = AttributedString(kFormatted(viewModel.likeCount), attributes: Self.toolbarAttributes)
configuration.image = UIImage(systemName: viewModel.isLiked ? "star.fill" : "star")
configuration.baseForegroundColor = viewModel.isLiked ? .systemYellow : .secondaryLabel
configuration.attributedTitle = AttributedString(kFormatted(viewModel.likeCount), attributes: AttributeContainer([
.font: font,
.foregroundColor: viewModel.isLiked ? UIAppColor.primary : UIColor.secondaryLabel
]))
configuration.image = viewModel.isLiked ? WPStyleGuide.ReaderDetail.likeSelectedToolbarIcon : WPStyleGuide.ReaderDetail.likeToolbarIcon
configuration.baseForegroundColor = viewModel.isLiked ? UIAppColor.primary : .secondaryLabel
return configuration
}()
}
Expand Down Expand Up @@ -395,10 +403,10 @@ private final class ReaderPostCellView: UIView {
// MARK: - Helpers

private struct ReaderPostToolbarButtons {
let bookmark = makeButton(systemImage: "bookmark")
let reblog = makeButton(systemImage: "arrow.2.squarepath")
let comment = makeButton(systemImage: "message")
let like = makeButton(systemImage: "star")
let bookmark = makeButton()
let reblog = makeButton(image: WPStyleGuide.ReaderDetail.reblogToolbarIcon)
let comment = makeButton(image: WPStyleGuide.ReaderDetail.commentToolbarIcon)
let like = makeButton()

var allButtons: [UIButton] { [bookmark, reblog, comment, like] }
}
Expand All @@ -410,13 +418,13 @@ private func makeAuthorButton() -> UIButton {
return UIButton(configuration: configuration)
}

private func makeButton(systemImage: String, font: UIFont = UIFont.preferredFont(forTextStyle: .footnote)) -> UIButton {
private func makeButton(image: UIImage? = nil, font: UIFont = UIFont.preferredFont(forTextStyle: .footnote)) -> UIButton {
var configuration = UIButton.Configuration.plain()
configuration.image = UIImage(systemName: systemImage)
configuration.image = image
configuration.imagePadding = 6
configuration.preferredSymbolConfigurationForImage = UIImage.SymbolConfiguration(font: font)
configuration.baseForegroundColor = .secondaryLabel
configuration.contentInsets = .init(top: 16, leading: 12, bottom: 16, trailing: 12)
configuration.contentInsets = .init(top: 12, leading: 12, bottom: 14, trailing: 12)

let button = UIButton(configuration: configuration)
if #available(iOS 17.0, *) {
Expand Down
33 changes: 11 additions & 22 deletions WordPress/Classes/ViewRelated/Reader/Detail/Views/ReaderDetailToolbar.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,11 @@ class ReaderDetailToolbar: UIView, NibLoadable {
}
}

private var likeButtonTitle: String {
guard let post else {
return likeLabel(count: likeCount)
private func likeButtonTitle(likeCount: Int) -> String {
if likeCount > 0 {
return likeCount.formatted(.number.notation(.compactName))
}
return post.isLiked ? Constants.likedButtonTitle : Constants.likeButtonTitle
return Constants.likeButtonTitle
}

private var likeCount: Int {
Expand Down Expand Up @@ -119,7 +119,7 @@ class ReaderDetailToolbar: UIView, NibLoadable {
return
}
if !post.isLiked {
likeButton.setTitle(Constants.likedButtonTitle, for: [])
likeButton.setTitle(likeButtonTitle(likeCount: likeCount + 1), for: [])
likeButton.isSelected = true
UINotificationFeedbackGenerator().notificationOccurred(.success)
likeButton.imageView?.fadeInWithRotationAnimation { _ in
Expand Down Expand Up @@ -250,7 +250,7 @@ class ReaderDetailToolbar: UIView, NibLoadable {

configureActionButton(
likeButton,
title: likeButtonTitle,
title: likeButtonTitle(likeCount: likeCount),
image: WPStyleGuide.ReaderDetail.likeToolbarIcon,
highlightedImage: WPStyleGuide.ReaderDetail.likeSelectedToolbarIcon,
selected: selected
Expand All @@ -271,6 +271,11 @@ class ReaderDetailToolbar: UIView, NibLoadable {
}

private func configureCommentActionButton() {
commentButton.setTitle({
let count = post?.commentCount.intValue ?? 0
return count == 0 ? Constants.commentButtonTitle : count.formatted(.number.notation(.compactName))
}(), for: [])

commentButton.isEnabled = shouldShowCommentActionButton

commentButton.setImage(WPStyleGuide.ReaderDetail.commentToolbarIcon, for: .normal)
Expand Down Expand Up @@ -312,26 +317,10 @@ class ReaderDetailToolbar: UIView, NibLoadable {
}

fileprivate func configureButtonTitles() {
let commentTitle = Constants.commentButtonTitle

likeButton.setTitle(likeButtonTitle, for: .normal)
likeButton.setTitle(likeButtonTitle, for: .highlighted)

commentButton.setTitle(commentTitle, for: .normal)
commentButton.setTitle(commentTitle, for: .highlighted)

WPStyleGuide.applyReaderSaveForLaterButtonTitles(saveForLaterButton, showTitle: true)
WPStyleGuide.applyReaderReblogActionButtonTitle(reblogButton, showTitle: true)
}

private func likeLabel(count: Int) -> String {
if traitCollection.horizontalSizeClass == .compact {
return count > 0 ? String(count) : ""
} else {
return WPStyleGuide.likeCountForDisplay(count)
}
}

// MARK: - Analytics

private func trackArticleDetailsLikedOrUnliked() {
Expand Down