Skip to content

Commit

Permalink
Update iconography in Reader (#24128)
Browse files Browse the repository at this point in the history 
* Update Reader stream to use the same icons as web

* Update the tint color

* Update reader details toolbar to show number of likes

* Reduce bottom inset for actions as it was now out of balance
  • Loading branch information
@kean
kean authored Feb 27, 2025
1 parent 4a77151 commit ea35b7d
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 35 deletions.
34 changes: 21 additions & 13 deletions WordPress/Classes/ViewRelated/Reader/Cards/ReaderPostCell.swift
View file
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
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

0 comments on commit ea35b7d

Please sign in to comment.