From c3f70a641addc9a247273783eb4cb950f37314f7 Mon Sep 17 00:00:00 2001 From: Niels Andriesse Date: Mon, 1 Mar 2021 14:04:54 +1100 Subject: [PATCH] Show unread counts --- Session/Shared/ConversationCell.swift | 90 ++++++++++++++++++--------- 1 file changed, 59 insertions(+), 31 deletions(-) diff --git a/Session/Shared/ConversationCell.swift b/Session/Shared/ConversationCell.swift index 799ce6782..e6106a906 100644 --- a/Session/Shared/ConversationCell.swift +++ b/Session/Shared/ConversationCell.swift @@ -5,8 +5,8 @@ final class ConversationCell : UITableViewCell { static let reuseIdentifier = "ConversationCell" - // MARK: Components - private let accentView = UIView() + // MARK: UI Components + private let accentLineView = UIView() private lazy var profilePictureView = ProfilePictureView() @@ -18,6 +18,25 @@ final class ConversationCell : UITableViewCell { return result }() + private lazy var unreadCountView: UIView = { + let result = UIView() + result.backgroundColor = Colors.text.withAlphaComponent(Values.veryLowOpacity) + let size = ConversationCell.unreadCountViewSize + result.set(.width, to: size) + result.set(.height, to: size) + result.layer.masksToBounds = true + result.layer.cornerRadius = size / 2 + return result + }() + + private lazy var unreadCountLabel: UILabel = { + let result = UILabel() + result.font = .boldSystemFont(ofSize: Values.verySmallFontSize) + result.textColor = Colors.text + result.textAlignment = .center + return result + }() + private lazy var timestampLabel: UILabel = { let result = UILabel() result.font = .systemFont(ofSize: Values.smallFontSize) @@ -40,13 +59,14 @@ final class ConversationCell : UITableViewCell { private lazy var statusIndicatorView: UIImageView = { let result = UIImageView() result.contentMode = .scaleAspectFit - result.layer.cornerRadius = ConversationCell.conversationCellStatusIndicatorSize / 2 + result.layer.cornerRadius = ConversationCell.statusIndicatorSize / 2 result.layer.masksToBounds = true return result }() // MARK: Settings - private static let conversationCellStatusIndicatorSize: CGFloat = 14 + private static let unreadCountViewSize: CGFloat = 20 + private static let statusIndicatorSize: CGFloat = 14 // MARK: Initialization override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) { @@ -61,23 +81,27 @@ final class ConversationCell : UITableViewCell { private func setUpViewHierarchy() { let cellHeight: CGFloat = 68 - // Set the cell background color + // Background color backgroundColor = Colors.cellBackground - // Set up the highlight color + // Highlight color let selectedBackgroundView = UIView() selectedBackgroundView.backgroundColor = Colors.cellSelected self.selectedBackgroundView = selectedBackgroundView - // Set up the accent view - accentView.set(.width, to: Values.accentLineThickness) - accentView.set(.height, to: cellHeight) - // Set up the profile picture view + // Accent line view + accentLineView.set(.width, to: Values.accentLineThickness) + accentLineView.set(.height, to: cellHeight) + // Profile picture view let profilePictureViewSize = Values.mediumProfilePictureSize profilePictureView.set(.width, to: profilePictureViewSize) profilePictureView.set(.height, to: profilePictureViewSize) profilePictureView.size = profilePictureViewSize - // Set up the label stack view + // Unread count view + unreadCountView.addSubview(unreadCountLabel) + unreadCountLabel.pin(to: unreadCountView) + unreadCountLabel.text = "4" + // Label stack view let topLabelSpacer = UIView.hStretchingSpacer() - let topLabelStackView = UIStackView(arrangedSubviews: [ displayNameLabel, topLabelSpacer, timestampLabel ]) + let topLabelStackView = UIStackView(arrangedSubviews: [ displayNameLabel, unreadCountView, topLabelSpacer, timestampLabel ]) topLabelStackView.axis = .horizontal topLabelStackView.alignment = .center topLabelStackView.spacing = Values.smallSpacing / 2 // Effectively Values.smallSpacing because there'll be spacing before and after the invisible spacer @@ -92,42 +116,41 @@ final class ConversationCell : UITableViewCell { let labelContainerView = UIView() labelContainerView.addSubview(topLabelStackView) labelContainerView.addSubview(bottomLabelStackView) - // Set up the main stack view - let stackView = UIStackView(arrangedSubviews: [ accentView, profilePictureView, labelContainerView ]) + // Main stack view + let stackView = UIStackView(arrangedSubviews: [ accentLineView, profilePictureView, labelContainerView ]) stackView.axis = .horizontal stackView.alignment = .center stackView.spacing = Values.mediumSpacing contentView.addSubview(stackView) - // Set up the constraints - accentView.pin(.top, to: .top, of: contentView) - accentView.pin(.bottom, to: .bottom, of: contentView) - // The three lines below are part of a workaround for a weird layout bug - topLabelStackView.set(.width, to: UIScreen.main.bounds.width - Values.accentLineThickness - Values.mediumSpacing - profilePictureViewSize - Values.mediumSpacing - Values.mediumSpacing) + // Constraints + accentLineView.pin(.top, to: .top, of: contentView) + accentLineView.pin(.bottom, to: .bottom, of: contentView) + timestampLabel.setContentCompressionResistancePriority(.required, for: NSLayoutConstraint.Axis.horizontal) + // HACK: The six lines below are part of a workaround for a weird layout bug + topLabelStackView.set(.width, to: UIScreen.main.bounds.width - Values.accentLineThickness - profilePictureViewSize - 3 * Values.mediumSpacing) topLabelStackView.set(.height, to: 20) topLabelSpacer.set(.height, to: 20) - timestampLabel.setContentCompressionResistancePriority(.required, for: NSLayoutConstraint.Axis.horizontal) - // The three lines below are part of a workaround for a weird layout bug - bottomLabelStackView.set(.width, to: UIScreen.main.bounds.width - Values.accentLineThickness - Values.mediumSpacing - profilePictureViewSize - Values.mediumSpacing - Values.mediumSpacing) + bottomLabelStackView.set(.width, to: UIScreen.main.bounds.width - Values.accentLineThickness - profilePictureViewSize - 3 * Values.mediumSpacing) bottomLabelStackView.set(.height, to: 18) bottomLabelSpacer.set(.height, to: 18) - statusIndicatorView.set(.width, to: ConversationCell.conversationCellStatusIndicatorSize) - statusIndicatorView.set(.height, to: ConversationCell.conversationCellStatusIndicatorSize) + statusIndicatorView.set(.width, to: ConversationCell.statusIndicatorSize) + statusIndicatorView.set(.height, to: ConversationCell.statusIndicatorSize) snippetLabel.pin(to: snippetLabelContainer) typingIndicatorView.pin(.leading, to: .leading, of: snippetLabelContainer) typingIndicatorView.centerYAnchor.constraint(equalTo: snippetLabel.centerYAnchor).isActive = true - // Not using a stack view for this is part of a workaround for a weird layout bug + // HACK: Not using a stack view for this is part of a workaround for a weird layout bug topLabelStackView.pin(.leading, to: .leading, of: labelContainerView) topLabelStackView.pin(.top, to: .top, of: labelContainerView, withInset: 12) topLabelStackView.pin(.trailing, to: .trailing, of: labelContainerView) bottomLabelStackView.pin(.leading, to: .leading, of: labelContainerView) bottomLabelStackView.pin(.top, to: .bottom, of: topLabelStackView, withInset: 6) labelContainerView.pin(.bottom, to: .bottom, of: bottomLabelStackView, withInset: 12) - // The two lines below are part of a workaround for a weird layout bug + // HACK: The two lines below are part of a workaround for a weird layout bug labelContainerView.set(.width, to: UIScreen.main.bounds.width - Values.accentLineThickness - Values.mediumSpacing - profilePictureViewSize - Values.mediumSpacing - Values.mediumSpacing) labelContainerView.set(.height, to: cellHeight) stackView.pin(.leading, to: .leading, of: contentView) stackView.pin(.top, to: .top, of: contentView) - // The two lines below are part of a workaround for a weird layout bug + // HACK: The two lines below are part of a workaround for a weird layout bug stackView.set(.width, to: UIScreen.main.bounds.width - Values.mediumSpacing) stackView.set(.height, to: cellHeight) } @@ -144,12 +167,17 @@ final class ConversationCell : UITableViewCell { isBlocked = false } if isBlocked { - accentView.backgroundColor = Colors.destructive - accentView.alpha = 1 + accentLineView.backgroundColor = Colors.destructive + accentLineView.alpha = 1 } else { - accentView.backgroundColor = Colors.accent - accentView.alpha = threadViewModel.hasUnreadMessages ? 1 : 0.0001 // Setting the alpha to exactly 0 causes an issue on iOS 12 + accentLineView.backgroundColor = Colors.accent + accentLineView.alpha = threadViewModel.hasUnreadMessages ? 1 : 0.0001 // Setting the alpha to exactly 0 causes an issue on iOS 12 } + unreadCountView.isHidden = !threadViewModel.hasUnreadMessages + let unreadCount = threadViewModel.unreadCount + unreadCountLabel.text = unreadCount < 100 ? "\(unreadCount)" : "99+" + let fontSize = (unreadCount < 100) ? Values.verySmallFontSize : 8 + unreadCountLabel.font = .boldSystemFont(ofSize: fontSize) profilePictureView.update(for: thread) displayNameLabel.text = getDisplayName() timestampLabel.text = DateUtil.formatDateShort(threadViewModel.lastMessageDate)