improve layout for default small document chat message

deltachat-ios/MessageKit/Layout/FileMessageSizeCalculator.swift

@@ -3,14 +3,20 @@ import UIKit
 
 open class FileMessageSizeCalculator: MessageSizeCalculator {
 
-    let defaultFileMessageCellWidth = 250
-    let defaultFileMessageCellHeight = 100
+    var defaultFileMessageCellWidth: CGFloat {
+        switch UIApplication.shared.statusBarOrientation {
+        case .landscapeLeft, .landscapeRight:
+            return UIScreen.main.bounds.size.width * 0.66
+        default:
+            return UIScreen.main.bounds.size.width * 0.85
+        }
+    }
 
-    public var incomingMessageLabelInsets = UIEdgeInsets(top: FileMessageCell.insetTop,
+    public var incomingMessageLabelInsets = UIEdgeInsets(top: 0,
                                                          left: FileMessageCell.insetHorizontalBig,
                                                          bottom: FileMessageCell.insetBottom,
                                                          right: FileMessageCell.insetHorizontalSmall)
-    public var outgoingMessageLabelInsets = UIEdgeInsets(top: FileMessageCell.insetTop,
+    public var outgoingMessageLabelInsets = UIEdgeInsets(top: 0,
                                                          left: FileMessageCell.insetHorizontalSmall,
                                                          bottom: FileMessageCell.insetBottom,
                                                          right: FileMessageCell.insetHorizontalBig)
@@ -24,64 +30,27 @@ open class FileMessageSizeCalculator: MessageSizeCalculator {
     }
 
     open override func messageContainerSize(for message: MessageType) -> CGSize {
-
-
         let sizeForMediaItem = { (maxWidth: CGFloat, item: MediaItem) -> CGSize in
-            var maxMediaTextWidth: CGFloat = 0  // width of the attached text message
-            var maxMediaTitleWidth: CGFloat = 0 // width of the file name text & file size text
-            var mediaTitleHeight: CGFloat = 0
-            var mediaSubtitleHeight: CGFloat = 0
-            var messageTextHeight: CGFloat = 0
-            var itemWidth: CGFloat = 0
-
-            maxMediaTextWidth = maxWidth - self.messageLabelInsets(for: message).horizontal
-            if item.image == nil {
-                itemWidth = maxWidth
-                maxMediaTitleWidth = maxMediaTextWidth
+            if item.image != nil {
+                fatalError("not implemented yet")
             } else {
-                itemWidth = item.size.width
-                // the media title/subtitle and subtitle is right to the badge view
-                // the max width of the title/subtitle depends on the available cell
-                // width minus fixed paddings and the badge size
-                maxMediaTitleWidth = maxWidth - FileView.badgeSize - (3 * FileMessageCell.insetHorizontalSmall)
-            }
-
-            var imageHeight = item.size.height
-            if maxWidth < item.size.width {
-                // Maintain the ratio if width is too great
-                imageHeight = maxWidth * item.size.height / item.size.width
-                itemWidth = maxWidth
-            }
-
-            var messageContainerSize = CGSize(width: itemWidth, height: imageHeight)
-            switch message.kind {
-            case .fileText(let mediaItem):
-                if let mediaTitle = mediaItem.text?[MediaItemConstants.mediaTitle] {
-                    mediaTitleHeight = mediaTitle.height(withConstrainedWidth: maxMediaTitleWidth)
-                    messageContainerSize.height += mediaTitleHeight
-                }
-                if let mediaSubtitle = mediaItem.text?[MediaItemConstants.mediaSubtitle] {
-                    mediaSubtitleHeight = mediaSubtitle.height(withConstrainedWidth: maxMediaTitleWidth)
-                    messageContainerSize.height += mediaSubtitleHeight
-                }
-
-                if let messageText = mediaItem.text?[MediaItemConstants.messageText], !messageText.string.isEmpty {
-                    messageTextHeight = messageText.height(withConstrainedWidth: maxMediaTextWidth)
-                    messageContainerSize.height += messageTextHeight
-                    messageContainerSize.height +=  self.messageLabelInsets(for: message).vertical
+                var messageContainerSize = CGSize(width: maxWidth, height: FileView.defaultHeight)
+                switch message.kind {
+                case .fileText(let mediaItem):
+                    if let messageText = mediaItem.text?[MediaItemConstants.messageText], !messageText.string.isEmpty {
+                        let messageTextHeight = messageText.height(withConstrainedWidth: maxWidth - self.messageLabelInsets(for: message).horizontal)
+                        messageContainerSize.height += messageTextHeight + self.messageLabelInsets(for: message).bottom
+                    }
+                default:
+                    fatalError("only fileText types can be calculated by FileMessageSizeCalculator")
                 }
-
-            default:
-                fatalError("only fileText types can be calculated by FileMessageSizeCalculator")
+                return messageContainerSize
             }
-
-            return messageContainerSize
         }
 
         switch message.kind {
         case .fileText(let item):
-
-            let maxImageWidth = item.image != nil ? messageContainerMaxWidth(for: message) : 280
+            let maxImageWidth = item.image != nil ? messageContainerMaxWidth(for: message) : defaultFileMessageCellWidth
             return sizeForMediaItem(maxImageWidth, item)
         default:
             fatalError("messageContainerSize received unhandled MessageDataType: \(message.kind)")

deltachat-ios/MessageKit/Views/Cells/FileMessageCell.swift

@@ -3,11 +3,20 @@ import UIKit
 // A subclass of `MessageContentCell` used to display mixed media messages.
 open class FileMessageCell: MessageContentCell {
 
-    public static let insetTop: CGFloat = 12
     public static let insetBottom: CGFloat = 12
     public static let insetHorizontalBig: CGFloat = 23
     public static let insetHorizontalSmall: CGFloat = 12
 
+    var fileViewLeadingPadding: CGFloat = 0 {
+        didSet {
+            fileViewLeadingAlignment.constant = fileViewLeadingPadding
+        }
+    }
+
+    private lazy var fileViewLeadingAlignment: NSLayoutConstraint = {
+        return fileView.constraintAlignLeadingTo(messageContainerView, paddingLeading: 0)
+    }()
+
     private var mediaItem: MediaItem?
 
     // MARK: - Properties
@@ -32,17 +41,16 @@ open class FileMessageCell: MessageContentCell {
     /// Responsible for setting up the constraints of the cell's subviews.
     open func setupConstraints(for messageKind: MessageKind) {
         messageContainerView.removeConstraints(messageContainerView.constraints)
-        let fileViewHeight = messageContainerView.frame.height - getMessageLabelHeight()
 
-        let fileViewConstraints = [fileView.constraintHeightTo(fileViewHeight),
-                                    fileView.constraintAlignLeadingTo(messageContainerView),
+        let fileViewConstraints = [fileView.constraintHeightTo(FileView.defaultHeight),
+                                    fileViewLeadingAlignment,
                                     fileView.constraintAlignTrailingTo(messageContainerView),
                                     fileView.constraintAlignTopTo(messageContainerView),
                                     ]
         messageContainerView.addConstraints(fileViewConstraints)
 
         messageLabel.frame = CGRect(x: 0,
-                                    y: messageContainerView.frame.height - getMessageLabelHeight(),
+                                    y: FileView.defaultHeight,
                                     width: messageContainerView.frame.width,
                                     height: getMessageLabelHeight())
     }
@@ -53,7 +61,7 @@ open class FileMessageCell: MessageContentCell {
                 messageContainerView.frame.width -
                     FileMessageCell.insetHorizontalSmall -
                     FileMessageCell.insetHorizontalBig))
-            return height + FileMessageCell.insetBottom + FileMessageCell.insetTop
+            return height + FileMessageCell.insetBottom
         }
         return 0
     }
@@ -75,6 +83,7 @@ open class FileMessageCell: MessageContentCell {
         if let attributes = layoutAttributes as? MessagesCollectionViewLayoutAttributes {
             messageLabel.textInsets = attributes.messageLabelInsets
             messageLabel.messageLabelFont = attributes.messageLabelFont
+            fileViewLeadingPadding = attributes.messageLabelInsets.left
         }
     }
 
@@ -94,17 +103,12 @@ open class FileMessageCell: MessageContentCell {
                                              message: message,
                                              at: indexPath,
                                              in: messagesCollectionView)
-
         default:
             fatalError("Unexpected message kind in FileMessageCell")
         }
-
         setupConstraints(for: message.kind)
-
-        //displayDelegate.configureMediaMessageImageView(imageView, for: message, at: indexPath, in: messagesCollectionView)
     }
 
-
     func configureFileView(for mediaItem: MediaItem) {
         fileView.configureFor(mediaItem: mediaItem)
     }
@@ -132,5 +136,4 @@ open class FileMessageCell: MessageContentCell {
                                                    y: touchPoint.y - fileView.frame.height)
         return messageLabel.handleGesture(touchPointWithoutImageHeight)
     }
-
 }

deltachat-ios/MessageKit/Views/FileView.swift

@@ -4,13 +4,14 @@ import DcCore
 class FileView: UIView {
 
     static let badgeSize: CGFloat = 54
-    let defaultHeight: CGFloat = 100
-    let defaultWidth: CGFloat = 250
+    static let defaultHeight: CGFloat = 78
+    static let defaultWidth: CGFloat = 250
 
     private lazy var previewImageView: UIImageView = {
         let imageView = UIImageView()
         imageView.contentMode = .scaleAspectFill
         imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.isHidden = true
         return imageView
     }()
 
@@ -22,6 +23,9 @@ class FileView: UIView {
 
     private lazy var subtitleView: MessageLabel = {
         let label = MessageLabel()
+        label.numberOfLines = 1
+        label.adjustsFontSizeToFitWidth = false
+        label.lineBreakMode = .byTruncatingTail
         label.translatesAutoresizingMaskIntoConstraints = false
         return label
     }()
@@ -31,78 +35,53 @@ class FileView: UIView {
         let badge: InitialsBadge = InitialsBadge(image: defaultImage, size: FileView.badgeSize)
         badge.setColor(DcColors.middleGray)
         badge.isAccessibilityElement = false
+        badge.isHidden = false
         return badge
     }()
 
-    private lazy var stackView: UIStackView = {
+    private lazy var verticalStackView: UIStackView = {
         let stackView = UIStackView(arrangedSubviews: [titleView, subtitleView])
         stackView.translatesAutoresizingMaskIntoConstraints = false
         stackView.axis = .vertical
         stackView.alignment = .leading
+        stackView.isLayoutMarginsRelativeArrangement = true
+        stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: FileMessageCell.insetHorizontalSmall,
+                                                                     leading: FileMessageCell.insetHorizontalSmall,
+                                                                     bottom: FileMessageCell.insetHorizontalSmall,
+                                                                     trailing: FileMessageCell.insetHorizontalSmall)
         return stackView
     }()
 
     init() {
-        super.init(frame: CGRect(x: 0, y: 0, width: defaultWidth, height: defaultHeight))
+        super.init(frame: .zero)
         translatesAutoresizingMaskIntoConstraints = false
+        addSubview(fileBadgeView)
+        addSubview(verticalStackView)
     }
 
     func configureFor(mediaItem: MediaItem) {
         removeConstraints(self.constraints)
         previewImageView.removeFromSuperview()
-        //titleView.removeFromSuperview()
-        //subtitleView.removeFromSuperview()
-        fileBadgeView.removeFromSuperview()
-        setupSubviews(mediaItem: mediaItem)
-    }
-
-    private func setupSubviews(mediaItem: MediaItem) {
         if let previewImage = mediaItem.image {
             previewImageView.image = previewImage
             addSubview(previewImageView)
-            addSubview(stackView)
-            //addSubview(titleView)
-            //addSubview(subtitleView)
             addConstraints([
                 previewImageView.constraintAlignTopTo(self),
                 previewImageView.constraintAlignLeadingTo(self),
                 previewImageView.constraintAlignTrailingTo(self),
-                /*titleView.constraintAlignTopTo(previewImageView),
-                titleView.constraintAlignLeadingTo(self),
-                titleView.constraintAlignTrailingTo(self),
-                subtitleView.constraintAlignLeadingTo(self),
-                subtitleView.constraintAlignTrailingTo(self),
-                subtitleView.constraintAlignTopTo(titleView)*/
             ])
         } else {
-            fileBadgeView.setImage(mediaItem.placeholderImage)
-
-
-            addSubview(fileBadgeView)
             addConstraints([
-                fileBadgeView.constraintAlignLeadingTo(self, paddingLeading: FileMessageCell.insetHorizontalSmall),
+                fileBadgeView.constraintAlignLeadingTo(self),
                 fileBadgeView.constraintWidthTo(FileView.badgeSize),
                 fileBadgeView.constraintHeightTo(FileView.badgeSize),
                 fileBadgeView.constraintCenterYTo(self)
             ])
-            addSubview(stackView)
             addConstraints([
-                stackView.constraintCenterYTo(self),
-                stackView.constraintToTrailingOf(fileBadgeView, paddingLeading: FileMessageCell.insetHorizontalSmall),
-                stackView.constraintAlignTrailingTo(self, paddingTrailing: FileMessageCell.insetHorizontalSmall)
+                verticalStackView.constraintCenterYTo(self),
+                verticalStackView.constraintToTrailingOf(fileBadgeView),
+                verticalStackView.constraintAlignTrailingTo(self)
             ])
-            /*addSubview(titleView)
-            addConstraints([
-                titleView.constraintAlignTopTo(self, paddingTop: FileMessageCell.insetTop),
-                titleView.constraintToTrailingOf(fileBadgeView, paddingLeading: FileMessageCell.insetHorizontalSmall),
-                titleView.constraintAlignTrailingTo(self, paddingTrailing: FileMessageCell.insetHorizontalSmall),
-            ])
-            addSubview(subtitleView)
-            addConstraints([
-                subtitleView.constraintToTrailingOf(fileBadgeView, paddingLeading: FileMessageCell.insetHorizontalSmall),
-                subtitleView.constraintAlignTrailingTo(self, paddingTrailing: FileMessageCell.insetHorizontalSmall),
-                subtitleView.constraintToBottomOf(titleView)
-            ])*/
         }
         if let title = mediaItem.text?[MediaItemConstants.mediaTitle] {
             titleView.attributedText = title