Minor UI-fixes (IOS-20)

- Improve Image Download and add a placeholderimage
- Fix dark mode colors
- calculate header/footer-size based on the width of the table view (TIL!)
- Remove some old assets

Mastodon/Scene/Settings/Server Details/AboutInstanceViewController.swift

@@ -86,12 +86,14 @@ class AboutInstanceViewController: UIViewController {
         super.viewWillLayoutSubviews()
 
         if let tableHeaderView = tableView.tableHeaderView {
-            tableHeaderView.frame.size = tableHeaderView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+            let size = tableHeaderView.systemLayoutSizeFitting(.init(width: self.tableView.frame.width, height: 10_000))
+            tableHeaderView.frame.size = size
             tableView.tableHeaderView = tableHeaderView
         }
 
         if let tableFooterView = tableView.tableFooterView {
-            tableFooterView.frame.size = tableFooterView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+            let size = tableFooterView.systemLayoutSizeFitting(.init(width: self.tableView.frame.width, height: 10_000))
+            tableFooterView.frame.size = size
             tableView.tableFooterView = tableFooterView
         }
 
@@ -119,11 +121,10 @@ class AboutInstanceViewController: UIViewController {
         DispatchQueue.main.async {
             self.headerView.updateImage(with: thumbnailUrl) { [weak self] in
                 DispatchQueue.main.async {
-                    if self?.tableView.tableHeaderView == nil {
+                    guard let self else { return }
 
-                        self?.headerView.setNeedsLayout()
-                        self?.headerView.layoutIfNeeded()
-                    }
+                    self.view.setNeedsLayout()
+                    self.view.layoutIfNeeded()
                 }
             }
         }
@@ -132,10 +133,9 @@ class AboutInstanceViewController: UIViewController {
     func updateFooter(with extendedDescription: Mastodon.Entity.ExtendedDescription) {
         DispatchQueue.main.async {
             self.footerView.update(with: extendedDescription)
-            if let tableFooterView = self.tableView.tableFooterView {
-                tableFooterView.frame.size = tableFooterView.systemLayoutSizeFitting(UIView.layoutFittingExpandedSize)
-                self.tableView.tableFooterView = tableFooterView
-            }
+
+            self.view.setNeedsLayout()
+            self.view.layoutIfNeeded()
         }
     }
 }

Mastodon/Scene/Settings/Server Details/Table View Components/AboutInstanceTableFooterView.swift

@@ -33,29 +33,34 @@ class AboutInstanceTableFooterView: UIView {
     private func setupConstraints() {
 
         let horizontalMargin = 16.0
+        let verticalMargin = 24.0
 
         let constraints = [
-            headlineLabel.topAnchor.constraint(equalTo: topAnchor, constant: 24),
+            headlineLabel.topAnchor.constraint(equalTo: topAnchor, constant: verticalMargin),
             headlineLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalMargin),
             trailingAnchor.constraint(equalTo: headlineLabel.trailingAnchor, constant: horizontalMargin),
 
             contentLabel.topAnchor.constraint(equalTo: headlineLabel.bottomAnchor, constant: 8),
             contentLabel.leadingAnchor.constraint(equalTo: headlineLabel.leadingAnchor),
             contentLabel.trailingAnchor.constraint(equalTo: headlineLabel.trailingAnchor),
-//            contentLabel.heightAnchor.constraint(greaterThanOrEqualToConstant: 3000),
-            bottomAnchor.constraint(equalTo: contentLabel.bottomAnchor),
+            bottomAnchor.constraint(equalTo: contentLabel.bottomAnchor, constant: verticalMargin),
         ]
 
         NSLayoutConstraint.activate(constraints)
     }
 
     func update(with extendedDescription: Mastodon.Entity.ExtendedDescription) {
         headlineLabel.text = "A legal notice"
-
-        if let metaContent = try? MastodonMetaContent.convert(document: MastodonContent(content: extendedDescription.content, emojis: [:])) {
+
+        let content = extendedDescription.content
+            .replacingOccurrences(of: "<br>", with: "\n")
+            .replacingOccurrences(of: "\n\n", with: "\n")
+
+
+        if let metaContent = try? MastodonMetaContent.convert(document: MastodonContent(content: content, emojis: [:])) {
             contentLabel.configure(content: metaContent)
         } else {
-            let content = PlaintextMetaContent(string: extendedDescription.content)
+            let content = PlaintextMetaContent(string: content)
             contentLabel.configure(content: content)
         }
     }

Mastodon/Scene/Settings/Server Details/Table View Components/AboutInstanceTableViewHeader.swift

@@ -1,13 +1,15 @@
 // Copyright © 2023 Mastodon gGmbH. All rights reserved.
 
 import UIKit
+import MastodonAsset
 import AlamofireImage
 
 class AboutInstanceTableHeaderView: UIView {
     let thumbnailImageView: UIImageView
 
     init() {
-        thumbnailImageView = UIImageView()
+        thumbnailImageView = UIImageView(image: Asset.Settings.aboutInstancePlaceholder.image)
+        thumbnailImageView.contentMode = .scaleAspectFill
         thumbnailImageView.translatesAutoresizingMaskIntoConstraints = false
 
         super.init(frame: .zero)
@@ -24,14 +26,15 @@ class AboutInstanceTableHeaderView: UIView {
             thumbnailImageView.topAnchor.constraint(equalTo: topAnchor),
             thumbnailImageView.leadingAnchor.constraint(equalTo: leadingAnchor),
             trailingAnchor.constraint(equalTo: thumbnailImageView.trailingAnchor),
-            bottomAnchor.constraint(equalTo: thumbnailImageView.bottomAnchor),
-            thumbnailImageView.heightAnchor.constraint(equalToConstant: 188),
+            bottomAnchor.constraint(equalTo: thumbnailImageView.bottomAnchor, constant: 16),
         ]
 
         NSLayoutConstraint.activate(constraints)
     }
 
     func updateImage(with thumbnailURL: URL, completion: (() -> Void)? = nil) {
-        thumbnailImageView.af.setImage(withURL: thumbnailURL)
+        thumbnailImageView.af.setImage(withURL: thumbnailURL, placeholderImage: Asset.Settings.aboutInstancePlaceholder.image, completion: { _ in
+            completion?()
+        })
     }
 }

Mastodon/Scene/Settings/Server Details/Table View Components/ContactAdminTableViewCell.swift

@@ -15,6 +15,7 @@ class ContactAdminTableViewCell: UITableViewCell {
         configuration.image = UIImage(systemName: "envelope")
         configuration.imageProperties.tintColor = Asset.Colors.Brand.blurple.color
         configuration.text = L10n.Scene.Settings.ServerDetails.AboutInstance.messageAdmin
+        backgroundColor = .secondarySystemGroupedBackground
 
         contentConfiguration = configuration
     }

MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/dark.imageset/Contents.json → MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/about_instance_placeholder.imageset/Contents.json

@@ -1,17 +1,15 @@
 {
   "images" : [
     {
-      "filename" : "dark.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "dark@2x.png",
+      "filename" : "about_instance_placeholder@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "[email protected]",
       "idiom" : "universal",
       "scale" : "3x"
     }

MastodonSDK/Sources/MastodonAsset/Generated/Assets.swift

@@ -219,9 +219,7 @@ public enum Asset {
     }
   }
   public enum Settings {
-    public static let automatic = ImageAsset(name: "Settings/automatic")
-    public static let dark = ImageAsset(name: "Settings/dark")
-    public static let light = ImageAsset(name: "Settings/light")
+    public static let aboutInstancePlaceholder = ImageAsset(name: "Settings/about_instance_placeholder")
   }
   public enum Theme {
     public enum System {