oxen-io
/
session-ios
mirror of https://github.com/oxen-io/session-ios.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Media message text UI improvement

This commit is contained in:
ryanzhao 2021-10-15 12:29:38 +11:00
parent 5553d4e068
commit b81bdf71a4
2 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
Session/Conversations/Message Cells/Content Views/MediaTextOverlayView.swift
View File

@ -1,19 +1,22 @@
import UIKit
/// Shown over a media message if it has a message body. /// Shown over a media message if it has a message body.
final class MediaTextOverlayView : UIView { final class MediaTextOverlayView : UIView {
private let viewItem: ConversationViewItem private let viewItem: ConversationViewItem
private let albumViewWidth: CGFloat private let albumViewWidth: CGFloat
private let delegate: MessageCellDelegate private let delegate: MessageCellDelegate
private let textColor: UIColor
var readMoreButton: UIButton? var readMoreButton: UIButton?
// MARK: Settings // MARK: Settings
private static let maxHeight: CGFloat = 88; private static let maxHeight: CGFloat = 88;
// MARK: Lifecycle // MARK: Lifecycle
init(viewItem: ConversationViewItem, albumViewWidth: CGFloat, delegate: MessageCellDelegate) { init(viewItem: ConversationViewItem, albumViewWidth: CGFloat, textColor: UIColor, delegate: MessageCellDelegate) {
self.viewItem = viewItem self.viewItem = viewItem
self.albumViewWidth = albumViewWidth self.albumViewWidth = albumViewWidth
self.delegate = delegate self.delegate = delegate
self.textColor = textColor
super.init(frame: CGRect.zero) super.init(frame: CGRect.zero)
setUpViewHierarchy() setUpViewHierarchy()
} }
@ -28,29 +31,21 @@ final class MediaTextOverlayView : UIView {
private func setUpViewHierarchy() { private func setUpViewHierarchy() {
guard let message = viewItem.interaction as? TSMessage, let body = message.body, body.count > 0 else { return } guard let message = viewItem.interaction as? TSMessage, let body = message.body, body.count > 0 else { return }
// Shadow
let shadowView = GradientView(from: .clear, to: UIColor.black.withAlphaComponent(0.7))
addSubview(shadowView)
shadowView.pin(to: self)
// Line
let lineView = UIView()
lineView.backgroundColor = Colors.accent
lineView.set(.width, to: Values.accentLineThickness)
// Body label // Body label
let bodyLabel = UILabel() let bodyLabel = UILabel()
bodyLabel.numberOfLines = 0 bodyLabel.numberOfLines = 0
bodyLabel.lineBreakMode = .byTruncatingTail bodyLabel.lineBreakMode = .byTruncatingTail
bodyLabel.text = given(body) { MentionUtilities.highlightMentions(in: $0, threadID: viewItem.interaction.uniqueThreadId) } bodyLabel.text = given(body) { MentionUtilities.highlightMentions(in: $0, threadID: viewItem.interaction.uniqueThreadId) }
bodyLabel.textColor = .white bodyLabel.textColor = self.textColor
bodyLabel.font = .systemFont(ofSize: Values.smallFontSize) bodyLabel.font = .systemFont(ofSize: Values.mediumFontSize)
// Content stack view // Content stack view
let contentStackView = UIStackView(arrangedSubviews: [ lineView, bodyLabel ]) let contentStackView = UIStackView(arrangedSubviews: [ bodyLabel ])
contentStackView.axis = .horizontal contentStackView.axis = .horizontal
contentStackView.spacing = Values.smallSpacing contentStackView.spacing = Values.smallSpacing
addSubview(contentStackView) addSubview(contentStackView)
let inset = Values.mediumSpacing let inset: CGFloat = 12
contentStackView.pin(.left, to: .left, of: self, withInset: inset) contentStackView.pin(.left, to: .left, of: self, withInset: inset)
contentStackView.pin(.top, to: .top, of: self, withInset: 3 * inset) contentStackView.pin(.top, to: .top, of: self)
contentStackView.pin(.right, to: .right, of: self, withInset: -inset) contentStackView.pin(.right, to: .right, of: self, withInset: -inset)
// Max height // Max height
bodyLabel.heightAnchor.constraint(lessThanOrEqualToConstant: MediaTextOverlayView.maxHeight).isActive = true bodyLabel.heightAnchor.constraint(lessThanOrEqualToConstant: MediaTextOverlayView.maxHeight).isActive = true

16
Session/Conversations/Message Cells/VisibleMessageCell.swift
View File

@ -354,6 +354,11 @@ final class VisibleMessageCell : MessageCell, LinkPreviewViewDelegate {
showMediaPlaceholder() showMediaPlaceholder()
} else { } else {
guard let cache = delegate?.getMediaCache() else { preconditionFailure() } guard let cache = delegate?.getMediaCache() else { preconditionFailure() }
// Stack view
let stackView = UIStackView(arrangedSubviews: [])
stackView.axis = .vertical
stackView.spacing = Values.smallSpacing
// Album view
let maxMessageWidth = VisibleMessageCell.getMaxWidth(for: viewItem) let maxMessageWidth = VisibleMessageCell.getMaxWidth(for: viewItem)
let albumView = MediaAlbumView(mediaCache: cache, items: viewItem.mediaAlbumItems!, isOutgoing: isOutgoing, maxMessageWidth: maxMessageWidth) let albumView = MediaAlbumView(mediaCache: cache, items: viewItem.mediaAlbumItems!, isOutgoing: isOutgoing, maxMessageWidth: maxMessageWidth)
self.albumView = albumView self.albumView = albumView
@ -361,17 +366,20 @@ final class VisibleMessageCell : MessageCell, LinkPreviewViewDelegate {
let size = getSize(for: viewItem) let size = getSize(for: viewItem)
albumView.set(.width, to: size.width) albumView.set(.width, to: size.width)
albumView.set(.height, to: size.height) albumView.set(.height, to: size.height)
albumView.pin(to: snContentView)
albumView.loadMedia() albumView.loadMedia()
albumView.layer.mask = bubbleViewMaskLayer albumView.layer.mask = bubbleViewMaskLayer
stackView.addArrangedSubview(albumView)
// Body text view
if let message = viewItem.interaction as? TSMessage, let body = message.body, body.count > 0, if let message = viewItem.interaction as? TSMessage, let body = message.body, body.count > 0,
let delegate = delegate { // delegate should always be set at this point let delegate = delegate { // delegate should always be set at this point
let overlayView = MediaTextOverlayView(viewItem: viewItem, albumViewWidth: size.width, delegate: delegate) let overlayView = MediaTextOverlayView(viewItem: viewItem, albumViewWidth: size.width, textColor: bodyLabelTextColor, delegate: delegate)
self.mediaTextOverlayView = overlayView self.mediaTextOverlayView = overlayView
snContentView.addSubview(overlayView) stackView.addArrangedSubview(overlayView)
overlayView.pin([ UIView.HorizontalEdge.left, UIView.VerticalEdge.bottom, UIView.HorizontalEdge.right ], to: snContentView)
} }
unloadContent = { albumView.unloadMedia() } unloadContent = { albumView.unloadMedia() }
// Constraints
snContentView.addSubview(stackView)
stackView.pin(to: snContentView)
} }
case .audio: case .audio:
if viewItem.interaction is TSIncomingMessage, if viewItem.interaction is TSIncomingMessage,