Show unread counts

pull/357/head
Niels Andriesse 3 years ago
parent 9acc48feb2
commit c3f70a641a

@ -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)

Loading…
Cancel
Save