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
This commit is contained in:
parent
aeccee1398
commit
da3bb201f9
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue