feat: update to new UI tint style
This commit is contained in:
parent
b1f3729f56
commit
c6fc5cc09d
|
@ -262,7 +262,7 @@ extension ComposeToolbarView {
|
||||||
}
|
}
|
||||||
|
|
||||||
private static func configureToolbarButtonAppearance(button: UIButton) {
|
private static func configureToolbarButtonAppearance(button: UIButton) {
|
||||||
button.tintColor = Asset.Colors.brandBlue.color
|
button.tintColor = ThemeService.tintColor
|
||||||
button.setBackgroundImage(.placeholder(size: ComposeToolbarView.toolbarButtonSize, color: .systemFill), for: .highlighted)
|
button.setBackgroundImage(.placeholder(size: ComposeToolbarView.toolbarButtonSize, color: .systemFill), for: .highlighted)
|
||||||
button.layer.masksToBounds = true
|
button.layer.masksToBounds = true
|
||||||
button.layer.cornerRadius = 5
|
button.layer.cornerRadius = 5
|
||||||
|
|
|
@ -24,7 +24,7 @@ class HashtagTimelineViewController: UIViewController, NeedsDependency, MediaPre
|
||||||
|
|
||||||
let composeBarButtonItem: UIBarButtonItem = {
|
let composeBarButtonItem: UIBarButtonItem = {
|
||||||
let barButtonItem = UIBarButtonItem()
|
let barButtonItem = UIBarButtonItem()
|
||||||
barButtonItem.tintColor = Asset.Colors.brandBlue.color
|
// barButtonItem.tintColor = Asset.Colors.brandBlue.color
|
||||||
barButtonItem.image = UIImage(systemName: "square.and.pencil")?.withRenderingMode(.alwaysTemplate)
|
barButtonItem.image = UIImage(systemName: "square.and.pencil")?.withRenderingMode(.alwaysTemplate)
|
||||||
return barButtonItem
|
return barButtonItem
|
||||||
}()
|
}()
|
||||||
|
|
|
@ -46,14 +46,14 @@ final class HomeTimelineViewController: UIViewController, NeedsDependency, Media
|
||||||
|
|
||||||
let settingBarButtonItem: UIBarButtonItem = {
|
let settingBarButtonItem: UIBarButtonItem = {
|
||||||
let barButtonItem = UIBarButtonItem()
|
let barButtonItem = UIBarButtonItem()
|
||||||
barButtonItem.tintColor = Asset.Colors.brandBlue.color
|
barButtonItem.tintColor = ThemeService.tintColor
|
||||||
barButtonItem.image = UIImage(systemName: "gear")?.withRenderingMode(.alwaysTemplate)
|
barButtonItem.image = UIImage(systemName: "gear")?.withRenderingMode(.alwaysTemplate)
|
||||||
return barButtonItem
|
return barButtonItem
|
||||||
}()
|
}()
|
||||||
|
|
||||||
let composeBarButtonItem: UIBarButtonItem = {
|
let composeBarButtonItem: UIBarButtonItem = {
|
||||||
let barButtonItem = UIBarButtonItem()
|
let barButtonItem = UIBarButtonItem()
|
||||||
barButtonItem.tintColor = Asset.Colors.brandBlue.color
|
barButtonItem.tintColor = ThemeService.tintColor
|
||||||
barButtonItem.image = UIImage(systemName: "square.and.pencil")?.withRenderingMode(.alwaysTemplate)
|
barButtonItem.image = UIImage(systemName: "square.and.pencil")?.withRenderingMode(.alwaysTemplate)
|
||||||
return barButtonItem
|
return barButtonItem
|
||||||
}()
|
}()
|
||||||
|
|
|
@ -251,7 +251,7 @@ class ReportViewController: UIViewController, NeedsDependency {
|
||||||
= UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.cancel,
|
= UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.cancel,
|
||||||
target: self,
|
target: self,
|
||||||
action: #selector(doneButtonDidClick))
|
action: #selector(doneButtonDidClick))
|
||||||
navigationItem.rightBarButtonItem?.tintColor = Asset.Colors.brandBlue.color
|
navigationItem.rightBarButtonItem?.tintColor = ThemeService.tintColor
|
||||||
|
|
||||||
// fetch old mastodon user
|
// fetch old mastodon user
|
||||||
let beReportedUser: MastodonUser? = {
|
let beReportedUser: MastodonUser? = {
|
||||||
|
|
|
@ -51,15 +51,9 @@ extension SidebarListCollectionViewCell {
|
||||||
newConfiguration.item = item
|
newConfiguration.item = item
|
||||||
contentConfiguration = newConfiguration
|
contentConfiguration = newConfiguration
|
||||||
|
|
||||||
|
// remove background
|
||||||
var newBackgroundConfiguration = UIBackgroundConfiguration.listSidebarCell().updated(for: state)
|
var newBackgroundConfiguration = UIBackgroundConfiguration.listSidebarCell().updated(for: state)
|
||||||
// Customize the background color to use the tint color when the cell is highlighted or selected.
|
newBackgroundConfiguration.backgroundColor = .clear
|
||||||
if state.isSelected || state.isHighlighted {
|
|
||||||
newBackgroundConfiguration.backgroundColor = Asset.Colors.brandBlue.color
|
|
||||||
}
|
|
||||||
if state.isHighlighted {
|
|
||||||
newBackgroundConfiguration.backgroundColorTransformer = .init { $0.withAlphaComponent(0.8) }
|
|
||||||
}
|
|
||||||
|
|
||||||
backgroundConfiguration = newBackgroundConfiguration
|
backgroundConfiguration = newBackgroundConfiguration
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -71,8 +71,6 @@ extension SidebarListContentView {
|
||||||
|
|
||||||
imageView.contentMode = .scaleAspectFit
|
imageView.contentMode = .scaleAspectFit
|
||||||
avatarButton.contentMode = .scaleAspectFit
|
avatarButton.contentMode = .scaleAspectFit
|
||||||
imageView.tintColor = Asset.Colors.brandBlue.color
|
|
||||||
avatarButton.tintColor = Asset.Colors.brandBlue.color
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private func apply(configuration: ContentConfiguration) {
|
private func apply(configuration: ContentConfiguration) {
|
||||||
|
@ -84,8 +82,9 @@ extension SidebarListContentView {
|
||||||
guard let item = configuration.item else { return }
|
guard let item = configuration.item else { return }
|
||||||
|
|
||||||
// configure state
|
// configure state
|
||||||
imageView.tintColor = item.isSelected ? .white : Asset.Colors.brandBlue.color
|
let tintColor = item.isHighlighted ? ThemeService.tintColor.withAlphaComponent(0.5) : ThemeService.tintColor
|
||||||
avatarButton.tintColor = item.isSelected ? .white : Asset.Colors.brandBlue.color
|
imageView.tintColor = tintColor
|
||||||
|
avatarButton.tintColor = tintColor
|
||||||
|
|
||||||
// configure model
|
// configure model
|
||||||
imageView.isHidden = item.imageURL != nil
|
imageView.isHidden = item.imageURL != nil
|
||||||
|
@ -96,9 +95,6 @@ extension SidebarListContentView {
|
||||||
placeholder: avatarButton.avatarImageView.image ?? .placeholder(color: .systemFill), // reuse to avoid blink
|
placeholder: avatarButton.avatarImageView.image ?? .placeholder(color: .systemFill), // reuse to avoid blink
|
||||||
scaleToSize: nil
|
scaleToSize: nil
|
||||||
)
|
)
|
||||||
avatarButton.layer.masksToBounds = true
|
|
||||||
avatarButton.layer.cornerCurve = .continuous
|
|
||||||
avatarButton.layer.cornerRadius = 4
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -106,6 +102,7 @@ extension SidebarListContentView {
|
||||||
struct Item: Hashable {
|
struct Item: Hashable {
|
||||||
// state
|
// state
|
||||||
var isSelected: Bool = false
|
var isSelected: Bool = false
|
||||||
|
var isHighlighted: Bool = false
|
||||||
|
|
||||||
// model
|
// model
|
||||||
let title: String
|
let title: String
|
||||||
|
@ -114,6 +111,7 @@ extension SidebarListContentView {
|
||||||
|
|
||||||
static func == (lhs: SidebarListContentView.Item, rhs: SidebarListContentView.Item) -> Bool {
|
static func == (lhs: SidebarListContentView.Item, rhs: SidebarListContentView.Item) -> Bool {
|
||||||
return lhs.isSelected == rhs.isSelected
|
return lhs.isSelected == rhs.isSelected
|
||||||
|
&& lhs.isHighlighted == rhs.isHighlighted
|
||||||
&& lhs.title == rhs.title
|
&& lhs.title == rhs.title
|
||||||
&& lhs.image == rhs.image
|
&& lhs.image == rhs.image
|
||||||
&& lhs.imageURL == rhs.imageURL
|
&& lhs.imageURL == rhs.imageURL
|
||||||
|
@ -121,6 +119,7 @@ extension SidebarListContentView {
|
||||||
|
|
||||||
func hash(into hasher: inout Hasher) {
|
func hash(into hasher: inout Hasher) {
|
||||||
hasher.combine(isSelected)
|
hasher.combine(isSelected)
|
||||||
|
hasher.combine(isHighlighted)
|
||||||
hasher.combine(title)
|
hasher.combine(title)
|
||||||
hasher.combine(image)
|
hasher.combine(image)
|
||||||
imageURL.flatMap { hasher.combine($0) }
|
imageURL.flatMap { hasher.combine($0) }
|
||||||
|
@ -143,9 +142,11 @@ extension SidebarListContentView {
|
||||||
|
|
||||||
if let state = state as? UICellConfigurationState {
|
if let state = state as? UICellConfigurationState {
|
||||||
updatedConfiguration.item?.isSelected = state.isHighlighted || state.isSelected
|
updatedConfiguration.item?.isSelected = state.isHighlighted || state.isSelected
|
||||||
|
updatedConfiguration.item?.isHighlighted = state.isHighlighted
|
||||||
} else {
|
} else {
|
||||||
assertionFailure()
|
assertionFailure()
|
||||||
updatedConfiguration.item?.isSelected = false
|
updatedConfiguration.item?.isSelected = false
|
||||||
|
updatedConfiguration.item?.isHighlighted = false
|
||||||
}
|
}
|
||||||
|
|
||||||
return updatedConfiguration
|
return updatedConfiguration
|
||||||
|
|
|
@ -126,7 +126,7 @@ final class StatusView: UIView {
|
||||||
let revealContentWarningButton: UIButton = {
|
let revealContentWarningButton: UIButton = {
|
||||||
let button = HighlightDimmableButton()
|
let button = HighlightDimmableButton()
|
||||||
button.setImage(UIImage(systemName: "eye", withConfiguration: UIImage.SymbolConfiguration(pointSize: 17, weight: .medium)), for: .normal)
|
button.setImage(UIImage(systemName: "eye", withConfiguration: UIImage.SymbolConfiguration(pointSize: 17, weight: .medium)), for: .normal)
|
||||||
button.tintColor = Asset.Colors.brandBlue.color
|
// button.tintColor = Asset.Colors.brandBlue.color
|
||||||
return button
|
return button
|
||||||
}()
|
}()
|
||||||
|
|
||||||
|
|
|
@ -23,8 +23,8 @@ final class ThreadMetaView: UIView {
|
||||||
let button = UIButton()
|
let button = UIButton()
|
||||||
button.titleLabel?.font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: .systemFont(ofSize: 15, weight: .semibold))
|
button.titleLabel?.font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: .systemFont(ofSize: 15, weight: .semibold))
|
||||||
button.setTitle("0 reblog", for: .normal)
|
button.setTitle("0 reblog", for: .normal)
|
||||||
button.setTitleColor(Asset.Colors.brandBlue.color, for: .normal)
|
button.setTitleColor(ThemeService.tintColor, for: .normal)
|
||||||
button.setTitleColor(Asset.Colors.brandBlue.color.withAlphaComponent(0.5), for: .highlighted)
|
button.setTitleColor(ThemeService.tintColor.withAlphaComponent(0.5), for: .highlighted)
|
||||||
return button
|
return button
|
||||||
}()
|
}()
|
||||||
|
|
||||||
|
@ -32,8 +32,8 @@ final class ThreadMetaView: UIView {
|
||||||
let button = UIButton()
|
let button = UIButton()
|
||||||
button.titleLabel?.font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: .systemFont(ofSize: 15, weight: .semibold))
|
button.titleLabel?.font = UIFontMetrics(forTextStyle: .headline).scaledFont(for: .systemFont(ofSize: 15, weight: .semibold))
|
||||||
button.setTitle("0 favorite", for: .normal)
|
button.setTitle("0 favorite", for: .normal)
|
||||||
button.setTitleColor(Asset.Colors.brandBlue.color, for: .normal)
|
button.setTitleColor(ThemeService.tintColor, for: .normal)
|
||||||
button.setTitleColor(Asset.Colors.brandBlue.color.withAlphaComponent(0.5), for: .highlighted)
|
button.setTitleColor(ThemeService.tintColor.withAlphaComponent(0.5), for: .highlighted)
|
||||||
return button
|
return button
|
||||||
}()
|
}()
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,7 @@ final class ThreadReplyLoaderTableViewCell: UITableViewCell {
|
||||||
let loadMoreButton: UIButton = {
|
let loadMoreButton: UIButton = {
|
||||||
let button = HighlightDimmableButton()
|
let button = HighlightDimmableButton()
|
||||||
button.titleLabel?.font = TimelineLoaderTableViewCell.labelFont
|
button.titleLabel?.font = TimelineLoaderTableViewCell.labelFont
|
||||||
button.setTitleColor(Asset.Colors.brandBlue.color, for: .normal)
|
button.setTitleColor(ThemeService.tintColor, for: .normal)
|
||||||
button.setTitle(L10n.Common.Controls.Timeline.Loader.showMoreReplies, for: .normal)
|
button.setTitle(L10n.Common.Controls.Timeline.Loader.showMoreReplies, for: .normal)
|
||||||
return button
|
return button
|
||||||
}()
|
}()
|
||||||
|
|
|
@ -24,7 +24,7 @@ class TimelineLoaderTableViewCell: UITableViewCell {
|
||||||
let loadMoreButton: UIButton = {
|
let loadMoreButton: UIButton = {
|
||||||
let button = HighlightDimmableButton()
|
let button = HighlightDimmableButton()
|
||||||
button.titleLabel?.font = TimelineLoaderTableViewCell.labelFont
|
button.titleLabel?.font = TimelineLoaderTableViewCell.labelFont
|
||||||
button.setTitleColor(Asset.Colors.brandBlue.color, for: .normal)
|
button.setTitleColor(ThemeService.tintColor, for: .normal)
|
||||||
button.setTitle(L10n.Common.Controls.Timeline.Loader.loadMissingPosts, for: .normal)
|
button.setTitle(L10n.Common.Controls.Timeline.Loader.loadMissingPosts, for: .normal)
|
||||||
button.setTitle("", for: .disabled)
|
button.setTitle("", for: .disabled)
|
||||||
return button
|
return button
|
||||||
|
@ -68,7 +68,7 @@ class TimelineLoaderTableViewCell: UITableViewCell {
|
||||||
func stopAnimating() {
|
func stopAnimating() {
|
||||||
activityIndicatorView.stopAnimating()
|
activityIndicatorView.stopAnimating()
|
||||||
self.loadMoreButton.isEnabled = true
|
self.loadMoreButton.isEnabled = true
|
||||||
self.loadMoreLabel.textColor = Asset.Colors.brandBlue.color
|
self.loadMoreLabel.textColor = ThemeService.tintColor
|
||||||
self.loadMoreLabel.text = ""
|
self.loadMoreLabel.text = ""
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -26,7 +26,7 @@ struct MastodonTheme: Theme {
|
||||||
let sidebarBackgroundColor = Asset.Theme.Mastodon.sidebarBackground.color
|
let sidebarBackgroundColor = Asset.Theme.Mastodon.sidebarBackground.color
|
||||||
|
|
||||||
let tabBarBackgroundColor = Asset.Theme.Mastodon.tabBarBackground.color
|
let tabBarBackgroundColor = Asset.Theme.Mastodon.tabBarBackground.color
|
||||||
let tabBarItemSelectedIconColor = Asset.Colors.brandBlue.color
|
let tabBarItemSelectedIconColor = ThemeService.tintColor
|
||||||
let tabBarItemFocusedIconColor = Asset.Theme.Mastodon.tabBarItemInactiveIconColor.color
|
let tabBarItemFocusedIconColor = Asset.Theme.Mastodon.tabBarItemInactiveIconColor.color
|
||||||
let tabBarItemNormalIconColor = Asset.Theme.Mastodon.tabBarItemInactiveIconColor.color
|
let tabBarItemNormalIconColor = Asset.Theme.Mastodon.tabBarItemInactiveIconColor.color
|
||||||
let tabBarItemDisabledIconColor = Asset.Theme.Mastodon.tabBarItemInactiveIconColor.color
|
let tabBarItemDisabledIconColor = Asset.Theme.Mastodon.tabBarItemInactiveIconColor.color
|
||||||
|
|
|
@ -26,7 +26,7 @@ struct SystemTheme: Theme {
|
||||||
let sidebarBackgroundColor = Asset.Theme.System.sidebarBackground.color
|
let sidebarBackgroundColor = Asset.Theme.System.sidebarBackground.color
|
||||||
|
|
||||||
let tabBarBackgroundColor = Asset.Theme.System.tabBarBackground.color
|
let tabBarBackgroundColor = Asset.Theme.System.tabBarBackground.color
|
||||||
let tabBarItemSelectedIconColor = Asset.Colors.brandBlue.color
|
let tabBarItemSelectedIconColor = ThemeService.tintColor
|
||||||
let tabBarItemFocusedIconColor = Asset.Theme.System.tabBarItemInactiveIconColor.color
|
let tabBarItemFocusedIconColor = Asset.Theme.System.tabBarItemInactiveIconColor.color
|
||||||
let tabBarItemNormalIconColor = Asset.Theme.System.tabBarItemInactiveIconColor.color
|
let tabBarItemNormalIconColor = Asset.Theme.System.tabBarItemInactiveIconColor.color
|
||||||
let tabBarItemDisabledIconColor = Asset.Theme.System.tabBarItemInactiveIconColor.color
|
let tabBarItemDisabledIconColor = Asset.Theme.System.tabBarItemInactiveIconColor.color
|
||||||
|
|
|
@ -46,7 +46,7 @@ extension ThemeService {
|
||||||
tabBarAppearance.compactInlineLayoutAppearance = tabBarItemAppearance
|
tabBarAppearance.compactInlineLayoutAppearance = tabBarItemAppearance
|
||||||
|
|
||||||
tabBarAppearance.backgroundColor = theme.tabBarBackgroundColor
|
tabBarAppearance.backgroundColor = theme.tabBarBackgroundColor
|
||||||
tabBarAppearance.selectionIndicatorTintColor = Asset.Colors.brandBlue.color
|
tabBarAppearance.selectionIndicatorTintColor = ThemeService.tintColor
|
||||||
UITabBar.appearance().standardAppearance = tabBarAppearance
|
UITabBar.appearance().standardAppearance = tabBarAppearance
|
||||||
if #available(iOS 15.0, *) {
|
if #available(iOS 15.0, *) {
|
||||||
UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
|
UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
|
||||||
|
@ -61,9 +61,9 @@ extension ThemeService {
|
||||||
UITableViewCell.appearance().selectionColor = theme.tableViewCellSelectionBackgroundColor
|
UITableViewCell.appearance().selectionColor = theme.tableViewCellSelectionBackgroundColor
|
||||||
|
|
||||||
// set search bar appearance
|
// set search bar appearance
|
||||||
UISearchBar.appearance().tintColor = Asset.Colors.brandBlue.color
|
UISearchBar.appearance().tintColor = ThemeService.tintColor
|
||||||
UISearchBar.appearance().barTintColor = theme.navigationBarBackgroundColor
|
UISearchBar.appearance().barTintColor = theme.navigationBarBackgroundColor
|
||||||
let cancelButtonAttributes: [NSAttributedString.Key : Any] = [NSAttributedString.Key.foregroundColor: Asset.Colors.brandBlue.color]
|
let cancelButtonAttributes: [NSAttributedString.Key : Any] = [NSAttributedString.Key.foregroundColor: ThemeService.tintColor]
|
||||||
UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes(cancelButtonAttributes, for: .normal)
|
UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self]).setTitleTextAttributes(cancelButtonAttributes, for: .normal)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,8 @@ import Combine
|
||||||
|
|
||||||
// ref: https://zamzam.io/protocol-oriented-themes-for-ios-apps/
|
// ref: https://zamzam.io/protocol-oriented-themes-for-ios-apps/
|
||||||
final class ThemeService {
|
final class ThemeService {
|
||||||
|
|
||||||
|
static let tintColor: UIColor = .label
|
||||||
|
|
||||||
// MARK: - Singleton
|
// MARK: - Singleton
|
||||||
public static let shared = ThemeService()
|
public static let shared = ThemeService()
|
||||||
|
|
|
@ -37,7 +37,7 @@ class SceneDelegate: UIResponder, UIWindowSceneDelegate {
|
||||||
self.window = window
|
self.window = window
|
||||||
|
|
||||||
// set tint color
|
// set tint color
|
||||||
window.tintColor = Asset.Colors.brandBlue.color
|
window.tintColor = UIColor.label
|
||||||
|
|
||||||
ThemeService.shared.currentTheme
|
ThemeService.shared.currentTheme
|
||||||
.receive(on: RunLoop.main)
|
.receive(on: RunLoop.main)
|
||||||
|
|
|
@ -190,7 +190,7 @@ extension ComposeToolbarView {
|
||||||
extension ComposeToolbarView {
|
extension ComposeToolbarView {
|
||||||
|
|
||||||
private static func configureToolbarButtonAppearance(button: UIButton) {
|
private static func configureToolbarButtonAppearance(button: UIButton) {
|
||||||
button.tintColor = Asset.Colors.brandBlue.color
|
button.tintColor = ThemeService.tintColor
|
||||||
button.setBackgroundImage(.placeholder(size: ComposeToolbarView.toolbarButtonSize, color: .systemFill), for: .highlighted)
|
button.setBackgroundImage(.placeholder(size: ComposeToolbarView.toolbarButtonSize, color: .systemFill), for: .highlighted)
|
||||||
button.layer.masksToBounds = true
|
button.layer.masksToBounds = true
|
||||||
button.layer.cornerRadius = 5
|
button.layer.cornerRadius = 5
|
||||||
|
|
Loading…
Reference in New Issue