Merge pull request #1143 from mastodon/ios-130-badge-verified-links

Update design for verified links in profile (IOS-130)

Mastodon/Diffable/Profile/ProfileFieldSection.swift

@@ -35,28 +35,26 @@ extension ProfileFieldSection {
         let fieldCellRegistration = UICollectionView.CellRegistration<ProfileFieldCollectionViewCell, ProfileFieldItem> { cell, indexPath, item in
             let key, value: String
             let emojiMeta: MastodonContent.Emojis
-            let verified: Bool
 
             switch item {
-            case .field(field: let field):
-                key = field.name.value
-                value = field.value.value
-                emojiMeta = field.emojiMeta
-                verified = field.verifiedAt.value != nil
-            case .createdAt(date: let date):
-                key = L10n.Scene.Profile.Fields.joined
-                let formatter = DateFormatter()
-                formatter.dateStyle = .medium
-                formatter.timeStyle = .none
-                formatter.timeZone = TimeZone(identifier: "UTC")
-                value = formatter.string(from: date)
-                emojiMeta = [:]
-                verified = false
-            default: return
+                case .field(field: let field):
+                    key = field.name.value
+                    value = field.value.value
+                    emojiMeta = field.emojiMeta
+
+                case .createdAt(date: let date):
+                    key = L10n.Scene.Profile.Fields.joined
+                    let formatter = DateFormatter()
+                    formatter.dateStyle = .medium
+                    formatter.timeStyle = .none
+                    formatter.timeZone = TimeZone(identifier: "UTC")
+                    value = formatter.string(from: date)
+                    emojiMeta = [:]
+                case .addEntry, .editField(_): return
             }
 
             // set key
-            let keyColor = verified ? Asset.Scene.Profile.About.bioAboutFieldVerifiedText.color : Asset.Colors.Label.secondary.color
+            let keyColor = Asset.Colors.Label.secondary.color
             do {
                 let mastodonContent = MastodonContent(content: key, emojis: emojiMeta)
                 let metaContent = try MastodonMetaContent.convert(document: mastodonContent)
@@ -69,7 +67,7 @@ extension ProfileFieldSection {
             }
 
             // set value
-            let linkColor = verified ? Asset.Scene.Profile.About.bioAboutFieldVerifiedText.color : Asset.Colors.Brand.blurple.color
+            let linkColor = Asset.Colors.Brand.blurple.color
             do {
                 let mastodonContent = MastodonContent(content: value, emojis: emojiMeta)
                 let metaContent = try MastodonMetaContent.convert(document: mastodonContent)
@@ -83,7 +81,7 @@ extension ProfileFieldSection {
 
             // set background
             var backgroundConfiguration = UIBackgroundConfiguration.listPlainCell()
-            backgroundConfiguration.backgroundColor = verified ? Asset.Scene.Profile.About.bioAboutFieldVerifiedBackground.color : UIColor.secondarySystemBackground
+            backgroundConfiguration.backgroundColor = UIColor.secondarySystemBackground
             cell.backgroundConfiguration = backgroundConfiguration
 
             // set checkmark and edit menu label

Mastodon/Scene/Profile/About/Cell/ProfileFieldCollectionViewCell.swift

@@ -25,7 +25,7 @@ final class ProfileFieldCollectionViewCell: UICollectionViewCell {
     let keyMetaLabel = MetaLabel(style: .profileFieldName)
     let valueMetaLabel = MetaLabel(style: .profileFieldValue)
 
-    let checkmark = UIImageView(image: Asset.Editing.checkmark.image.withRenderingMode(.alwaysTemplate))
+    let checkmark: UIImageView
     var checkmarkPopoverString: String? = nil;
     let tapGesture = UITapGestureRecognizer();
     var editMenuInteraction: UIEditMenuInteraction!
@@ -37,26 +37,16 @@ final class ProfileFieldCollectionViewCell: UICollectionViewCell {
     }
 
     override init(frame: CGRect) {
-        super.init(frame: frame)
-        _init()
-    }
-
-    required init?(coder: NSCoder) {
-        super.init(coder: coder)
-        _init()
-    }
-
-}
 
-extension ProfileFieldCollectionViewCell {
-
-    private func _init() {
+        // Setup colors
+        checkmark = UIImageView(image: Asset.Scene.Profile.About.verifiedCheckmark.image.withRenderingMode(.alwaysTemplate))
+        checkmark.tintColor = Asset.Colors.Brand.blurple.color
+        checkmark.translatesAutoresizingMaskIntoConstraints = false
+
+        super.init(frame: frame)
 
         editMenuInteraction = UIEditMenuInteraction(delegate: self)
 
-        // Setup colors
-        checkmark.tintColor = Asset.Scene.Profile.About.bioAboutFieldVerifiedText.color;
-
         // Setup gestures
         tapGesture.addTarget(self, action: #selector(ProfileFieldCollectionViewCell.didTapCheckmark(_:)))
         checkmark.addGestureRecognizer(tapGesture)
@@ -76,36 +66,45 @@ extension ProfileFieldCollectionViewCell {
         containerStackView.preservesSuperviewLayoutMargins = true
         containerStackView.isLayoutMarginsRelativeArrangement = true
         containerStackView.translatesAutoresizingMaskIntoConstraints = false
-        addSubview(containerStackView)
+        contentView.addSubview(containerStackView)
         NSLayoutConstraint.activate([
-            containerStackView.topAnchor.constraint(equalTo: topAnchor, constant: 11),
-            containerStackView.leadingAnchor.constraint(equalTo: leadingAnchor),
-            containerStackView.trailingAnchor.constraint(equalTo: trailingAnchor),
-            bottomAnchor.constraint(equalTo: containerStackView.bottomAnchor, constant: 11),
+            containerStackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
+            containerStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
+            contentView.trailingAnchor.constraint(equalTo: containerStackView.trailingAnchor),
+            contentView.bottomAnchor.constraint(equalTo: containerStackView.bottomAnchor, constant: 8),
+            checkmark.heightAnchor.constraint(equalToConstant: 22),
+            checkmark.widthAnchor.constraint(equalTo: checkmark.heightAnchor),
         ])
 
-        // metaContainer: V - [ keyMetaLabel | valueContainer ]
+        // metaContainer: h - [ keyValueContainer | checkmark ]
         let metaContainer = UIStackView()
-        metaContainer.axis = .vertical
+        metaContainer.axis = .horizontal
         metaContainer.spacing = 2
+        metaContainer.alignment = .center
+
+        // valueContainer: v - [ keyMetaLabel | valueMetaLabel ]
+        let keyValueContainer = UIStackView()
+        keyValueContainer.axis = .vertical
+        keyValueContainer.alignment = .leading
+        keyValueContainer.spacing = 2
+
         containerStackView.addArrangedSubview(metaContainer)
-
-        // valueContainer: H - [ valueMetaLabel | checkmark ]
-        let valueContainer = UIStackView()
-        valueContainer.axis = .horizontal
-        valueContainer.spacing = 2
-
-        metaContainer.addArrangedSubview(keyMetaLabel)
-        valueContainer.addArrangedSubview(valueMetaLabel)
-        valueContainer.addArrangedSubview(checkmark)
-        metaContainer.addArrangedSubview(valueContainer)
-
+        keyValueContainer.addArrangedSubview(keyMetaLabel)
+        keyValueContainer.addArrangedSubview(valueMetaLabel)
+
+        metaContainer.addArrangedSubview(keyValueContainer)
+        metaContainer.addArrangedSubview(checkmark)
+
         keyMetaLabel.linkDelegate = self
         valueMetaLabel.linkDelegate = self
 
         isAccessibilityElement = true
     }
-
+
+    required init?(coder: NSCoder) { fatalError("Just ... don't.") }
+
+    //MARK: - Actions
+
     @objc public func didTapCheckmark(_ recognizer: UITapGestureRecognizer) {
         editMenuInteraction?.presentEditMenu(with: UIEditMenuConfiguration(identifier: nil, sourcePoint: recognizer.location(in: checkmark)))
     }
@@ -120,6 +119,7 @@ extension ProfileFieldCollectionViewCell {
         return result
     }
 
+    //MARK: - Accessibility
     override func accessibilityActivate() -> Bool {
         if let (_, meta) = valueMetas.first {
             delegate?.profileFieldCollectionViewCell(self, metaLabel: valueMetaLabel, didSelectMeta: meta)
@@ -143,23 +143,10 @@ extension ProfileFieldCollectionViewCell {
         }
         set {}
     }
-}
 
-// UIMenuController boilerplate
-@available(iOS, deprecated: 16, message: "Can be removed when target version is >=16 -- boilerplate to maintain compatibility with UIMenuController")
-extension ProfileFieldCollectionViewCell {
-    override var canBecomeFirstResponder: Bool { true }
-
-    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
-        if action == #selector(dismissVerifiedMenu) {
-            return true
-        }
-
-        return super.canPerformAction(action, withSender: sender)
-    }
-
-    @objc public func dismissVerifiedMenu() {
-        UIMenuController.shared.hideMenu()
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+        checkmark.image = Asset.Scene.Profile.About.verifiedCheckmark.image.withRenderingMode(.alwaysTemplate)
     }
 }
 

Mastodon/Scene/Profile/Header/View/ProfileFieldCollectionViewHeaderFooterView.swift

@@ -14,18 +14,7 @@ final class ProfileFieldCollectionViewHeaderFooterView: UICollectionReusableView
 
     override init(frame: CGRect) {
         super.init(frame: frame)
-        _init()
     }
 
-    required init?(coder: NSCoder) {
-        super.init(coder: coder)
-        _init()
-    }
-
-}
-
-extension ProfileFieldCollectionViewHeaderFooterView {
-    private func _init() {
-
-    }
+    required init?(coder: NSCoder) { fatalError("Not implemented") }
 }

MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Scene/Profile/About/verified_checkmark.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "checkmark.seal.svg",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "checkmark.seal.fill.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

MastodonSDK/Sources/MastodonAsset/Generated/Assets.swift

@@ -119,7 +119,6 @@ public enum Asset {
   }
   public enum Editing {
     public static let checkmark20 = ImageAsset(name: "Editing/checkmark.20")
-    public static let checkmark = ImageAsset(name: "Editing/checkmark")
     public static let xmark = ImageAsset(name: "Editing/xmark")
   }
   public enum Human {
@@ -181,8 +180,7 @@ public enum Asset {
     }
     public enum Profile {
       public enum About {
-        public static let bioAboutFieldVerifiedBackground = ColorAsset(name: "Scene/Profile/About/bio.about.field.verified.background")
-        public static let bioAboutFieldVerifiedText = ColorAsset(name: "Scene/Profile/About/bio.about.field.verified.text")
+        public static let verifiedCheckmark = ImageAsset(name: "Scene/Profile/About/verified_checkmark")
       }
       public enum Banner {
         public static let bioEditBackgroundGray = ColorAsset(name: "Scene/Profile/Banner/bio.edit.background.gray")

MastodonSDK/Sources/MastodonUI/Extension/MetaLabel.swift

@@ -78,11 +78,11 @@ extension MetaLabel {
             textColor = Asset.Colors.Label.secondary.color
 
         case .profileFieldName:
-            font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: .systemFont(ofSize: 13, weight: .semibold))
+            font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: .systemFont(ofSize: 12, weight: .regular))
             textColor = Asset.Colors.Label.secondary.color
 
         case .profileFieldValue:
-            font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: .systemFont(ofSize: 17, weight: .regular))
+            font = UIFontMetrics(forTextStyle: .body).scaledFont(for: .systemFont(ofSize: 17, weight: .regular))
             textColor = Asset.Colors.Label.primary.color
 
         case .profileCardName: