From da3bb201f9681cb5abb420838e719d7d37800ab2 Mon Sep 17 00:00:00 2001 From: Nathan Mattes Date: Wed, 19 Jun 2024 14:36:41 +0200 Subject: [PATCH] Prototype UI for Author-profile in cards It's just a quick prototype without any real functionality. We'd have to make the StatusCardControl a ... UIView-subclass, too --- .../View/Content/StatusCardControl.swift | 52 ++++++++++++++++++- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/MastodonSDK/Sources/MastodonUI/View/Content/StatusCardControl.swift b/MastodonSDK/Sources/MastodonUI/View/Content/StatusCardControl.swift index 2796549c2..dc8944fe8 100644 --- a/MastodonSDK/Sources/MastodonUI/View/Content/StatusCardControl.swift +++ b/MastodonSDK/Sources/MastodonUI/View/Content/StatusCardControl.swift @@ -48,12 +48,20 @@ public final class StatusCardControl: UIControl { }() private var html = "" + private let authorDivider: UIView + + private let mastodonLogoImageView: UIImageView + private let byLabel: UILabel + private let authorAccountButton: UIButton + private let authorStackView: UIStackView + private static let cardContentPool = WKProcessPool() private var webView: WKWebView? private var layout: Layout? private var layoutConstraints: [NSLayoutConstraint] = [] private var dividerConstraint: NSLayoutConstraint? + private var authorDividerConstraint: NSLayoutConstraint? public override var isHighlighted: Bool { didSet { @@ -68,6 +76,31 @@ public final class StatusCardControl: UIControl { } public override init(frame: CGRect) { + + let mastodonLogo = Asset.Scene.Sidebar.logo.image.withRenderingMode(.alwaysTemplate) + mastodonLogoImageView = UIImageView(image: mastodonLogo) + mastodonLogoImageView.tintColor = .gray + mastodonLogoImageView.translatesAutoresizingMaskIntoConstraints = false + + byLabel = UILabel() + byLabel.text = "by" + byLabel.numberOfLines = 1 + + var buttonConfiguration = UIButton.Configuration.filled() + buttonConfiguration.background.cornerRadius = 10 + buttonConfiguration.background.backgroundColor = Asset.Colors.Button.userFollowing.color + buttonConfiguration.baseForegroundColor = Asset.Colors.Brand.blurple.color + + authorAccountButton = UIButton(configuration: buttonConfiguration) + + authorStackView = UIStackView(arrangedSubviews: [mastodonLogoImageView, byLabel, authorAccountButton, UIView()]) + authorStackView.alignment = .firstBaseline + authorStackView.layoutMargins = .init(top: 10, left: 10, bottom: 10, right: 10) + authorStackView.isLayoutMarginsRelativeArrangement = true + authorStackView.spacing = 8 + + authorDivider = UIView.separatorLine + super.init(frame: frame) applyBranding() @@ -82,7 +115,7 @@ public final class StatusCardControl: UIControl { titleLabel.numberOfLines = 2 titleLabel.textColor = Asset.Colors.Label.primary.color - titleLabel.font = .preferredFont(forTextStyle: .body) + titleLabel.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: .systemFont(ofSize: 17, weight: .bold)) linkLabel.numberOfLines = 1 linkLabel.textColor = Asset.Colors.Label.secondary.color @@ -106,6 +139,9 @@ public final class StatusCardControl: UIControl { containerStackView.addArrangedSubview(imageView) containerStackView.addArrangedSubview(dividerView) containerStackView.addArrangedSubview(labelStackView) + containerStackView.addArrangedSubview(authorDivider) + containerStackView.addArrangedSubview(authorStackView) + containerStackView.setCustomSpacing(5, after: authorDivider) containerStackView.isUserInteractionEnabled = false containerStackView.distribution = .fill @@ -143,6 +179,8 @@ public final class StatusCardControl: UIControl { accessibilityLabel = title } + authorAccountButton.configuration?.title = card.authorAccount?.displayName + titleLabel.text = title linkLabel.text = url?.host imageView.contentMode = .center @@ -178,9 +216,10 @@ public final class StatusCardControl: UIControl { public override func didMoveToWindow() { super.didMoveToWindow() - if let window = window { + if let window { layer.borderWidth = window.screen.pixelSize dividerConstraint?.constant = window.screen.pixelSize + authorDividerConstraint?.constant = window.screen.pixelSize } } @@ -190,6 +229,7 @@ public final class StatusCardControl: UIControl { NSLayoutConstraint.deactivate(layoutConstraints) dividerConstraint?.deactivate() + authorDividerConstraint?.deactivate() let pixelSize = (window?.screen.pixelSize ?? 1) switch layout { @@ -209,6 +249,7 @@ public final class StatusCardControl: UIControl { .constraint(lessThanOrEqualToConstant: 400), ] dividerConstraint = dividerView.heightAnchor.constraint(equalToConstant: pixelSize).activate() + authorDividerConstraint = authorDivider.heightAnchor.constraint(equalToConstant: pixelSize).activate() case .compact: containerStackView.alignment = .center containerStackView.axis = .horizontal @@ -218,10 +259,17 @@ public final class StatusCardControl: UIControl { heightAnchor.constraint(equalToConstant: 85).priority(.defaultLow - 1), heightAnchor.constraint(greaterThanOrEqualToConstant: 85), dividerView.heightAnchor.constraint(equalTo: containerStackView.heightAnchor), + authorDivider.heightAnchor.constraint(equalTo: containerStackView.heightAnchor), ] dividerConstraint = dividerView.widthAnchor.constraint(equalToConstant: pixelSize).activate() + authorDividerConstraint = authorDivider.widthAnchor.constraint(equalToConstant: pixelSize).activate() } + layoutConstraints.append(contentsOf: [ + mastodonLogoImageView.widthAnchor.constraint(equalToConstant: 20), + mastodonLogoImageView.heightAnchor.constraint(equalTo: mastodonLogoImageView.widthAnchor), + ]) + NSLayoutConstraint.activate(layoutConstraints) }