feat: Implement more obvious account switcher

This commit is contained in:
Marcus Kida 2022-11-15 11:34:03 +01:00
parent 1928b1b8d5
commit 8fd37c8362
No known key found for this signature in database
GPG Key ID: 19FF64E08013CA40
3 changed files with 29 additions and 3 deletions

View File

@ -43,6 +43,7 @@ class MainTabBarController: UITabBarController {
static let avatarButtonSize = CGSize(width: 25, height: 25)
let avatarButton = CircleAvatarButton()
let accountSwitcherChevron = UIImageView(image: UIImage(systemName: "chevron.up.chevron.down"))
@Published var currentTab: Tab = .home
@ -506,13 +507,20 @@ extension MainTabBarController {
}
anchorImageView.alpha = 0
accountSwitcherChevron.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(accountSwitcherChevron)
self.avatarButton.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(self.avatarButton)
NSLayoutConstraint.activate([
self.avatarButton.centerXAnchor.constraint(equalTo: anchorImageView.centerXAnchor),
self.avatarButton.centerXAnchor.constraint(equalTo: anchorImageView.centerXAnchor, constant: -16),
self.avatarButton.centerYAnchor.constraint(equalTo: anchorImageView.centerYAnchor),
self.avatarButton.widthAnchor.constraint(equalToConstant: MainTabBarController.avatarButtonSize.width).priority(.required - 1),
self.avatarButton.heightAnchor.constraint(equalToConstant: MainTabBarController.avatarButtonSize.height).priority(.required - 1),
accountSwitcherChevron.widthAnchor.constraint(equalToConstant: 10),
accountSwitcherChevron.heightAnchor.constraint(equalToConstant: 18),
accountSwitcherChevron.leadingAnchor.constraint(equalTo: avatarButton.trailingAnchor, constant: 8),
accountSwitcherChevron.centerYAnchor.constraint(equalTo: avatarButton.centerYAnchor)
])
self.avatarButton.setContentHuggingPriority(.required - 1, for: .horizontal)
self.avatarButton.setContentHuggingPriority(.required - 1, for: .vertical)
@ -520,6 +528,7 @@ extension MainTabBarController {
}
private func updateAvatarButtonAppearance() {
accountSwitcherChevron.tintColor = currentTab == .me ? .label : .secondaryLabel
avatarButton.borderColor = currentTab == .me ? .label : .systemFill
avatarButton.setNeedsLayout()
}

View File

@ -80,6 +80,7 @@ extension SidebarViewModel {
}()
cell.item = SidebarListContentView.Item(
isActive: false,
showAccountSwitcher: item == .me,
title: item.title,
image: item.image,
activeImage: item.selectedImage,
@ -157,6 +158,7 @@ extension SidebarViewModel {
case .setting:
let item = SidebarListContentView.Item(
isActive: false,
showAccountSwitcher: false,
title: L10n.Common.Controls.Actions.settings,
image: Asset.ObjectsAndTools.gear.image.withRenderingMode(.alwaysTemplate),
activeImage: Asset.ObjectsAndTools.gear.image.withRenderingMode(.alwaysTemplate),
@ -166,6 +168,7 @@ extension SidebarViewModel {
case .compose:
let item = SidebarListContentView.Item(
isActive: false,
showAccountSwitcher: self.currentTab == .me,
title: L10n.Common.Controls.Actions.compose,
image: Asset.ObjectsAndTools.squareAndPencil.image.withRenderingMode(.alwaysTemplate),
activeImage: Asset.ObjectsAndTools.squareAndPencil.image.withRenderingMode(.alwaysTemplate),
@ -213,6 +216,7 @@ extension SidebarViewModel {
let item = SidebarListContentView.Item(
isActive: false,
showAccountSwitcher: false,
title: L10n.Common.Controls.Actions.compose,
image: Asset.ObjectsAndTools.squareAndPencil.image.withRenderingMode(.alwaysTemplate),
activeImage: Asset.ObjectsAndTools.squareAndPencil.image.withRenderingMode(.alwaysTemplate),

View File

@ -23,6 +23,7 @@ final class SidebarListContentView: UIView, UIContentView {
button.borderColor = UIColor.label
return button
}()
let accountSwitcherChevron = UIImageView(image: UIImage(systemName: "chevron.up.chevron.down"))
private var currentConfiguration: ContentConfiguration!
var configuration: UIContentConfiguration {
@ -61,6 +62,9 @@ extension SidebarListContentView {
imageView.heightAnchor.constraint(equalToConstant: 40).priority(.required - 1),
])
accountSwitcherChevron.translatesAutoresizingMaskIntoConstraints = false
addSubview(accountSwitcherChevron)
avatarButton.translatesAutoresizingMaskIntoConstraints = false
addSubview(avatarButton)
NSLayoutConstraint.activate([
@ -68,6 +72,10 @@ extension SidebarListContentView {
avatarButton.centerYAnchor.constraint(equalTo: imageView.centerYAnchor),
avatarButton.widthAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 1.0).priority(.required - 2),
avatarButton.heightAnchor.constraint(equalTo: imageView.heightAnchor, multiplier: 1.0).priority(.required - 2),
accountSwitcherChevron.widthAnchor.constraint(equalToConstant: 12),
accountSwitcherChevron.heightAnchor.constraint(equalToConstant: 22),
accountSwitcherChevron.leadingAnchor.constraint(equalTo: avatarButton.trailingAnchor, constant: 4),
accountSwitcherChevron.centerYAnchor.constraint(equalTo: avatarButton.centerYAnchor)
])
avatarButton.setContentHuggingPriority(.defaultLow - 10, for: .vertical)
avatarButton.setContentHuggingPriority(.defaultLow - 10, for: .horizontal)
@ -96,6 +104,8 @@ extension SidebarListContentView {
imageView.isHidden = item.imageURL != nil
avatarButton.isHidden = item.imageURL == nil
imageView.image = item.isActive ? item.activeImage.withRenderingMode(.alwaysTemplate) : item.image.withRenderingMode(.alwaysTemplate)
accountSwitcherChevron.isHidden = !item.showAccountSwitcher
accountSwitcherChevron.tintColor = item.isActive ? .label : .secondaryLabel
avatarButton.avatarImageView.setImage(
url: item.imageURL,
placeholder: avatarButton.avatarImageView.image ?? .placeholder(color: .systemFill), // reuse to avoid blink
@ -112,6 +122,7 @@ extension SidebarListContentView {
var isSelected: Bool = false
var isHighlighted: Bool = false
var isActive: Bool
var showAccountSwitcher: Bool
// model
let title: String
@ -124,6 +135,7 @@ extension SidebarListContentView {
return lhs.isSelected == rhs.isSelected
&& lhs.isHighlighted == rhs.isHighlighted
&& lhs.isActive == rhs.isActive
&& lhs.showAccountSwitcher == rhs.showAccountSwitcher
&& lhs.title == rhs.title
&& lhs.image == rhs.image
&& lhs.activeImage == rhs.activeImage
@ -134,6 +146,7 @@ extension SidebarListContentView {
hasher.combine(isSelected)
hasher.combine(isHighlighted)
hasher.combine(isActive)
hasher.combine(showAccountSwitcher)
hasher.combine(title)
hasher.combine(image)
hasher.combine(activeImage)