From 4ffea58f711ba0d8c419e44d6169dfb2662c9038 Mon Sep 17 00:00:00 2001 From: sunxiaojian Date: Thu, 8 Apr 2021 13:30:32 +0800 Subject: [PATCH] fix: SearchCard UI update, change follow button border width, add card border when DarkMode, add shadow --- Mastodon/Generated/Assets.swift | 6 +++ .../Colors/Border/Contents.json | 9 +++++ .../Border/searchCard.colorset/Contents.json | 38 +++++++++++++++++++ .../Colors/Shadow/Contents.json | 9 +++++ .../Shadow/SearchCard.colorset/Contents.json | 38 +++++++++++++++++++ ...hRecommendAccountsCollectionViewCell.swift | 31 +++++++++++---- ...earchRecommendTagsCollectionViewCell.swift | 16 ++++++-- 7 files changed, 136 insertions(+), 11 deletions(-) create mode 100644 Mastodon/Resources/Assets.xcassets/Colors/Border/Contents.json create mode 100644 Mastodon/Resources/Assets.xcassets/Colors/Border/searchCard.colorset/Contents.json create mode 100644 Mastodon/Resources/Assets.xcassets/Colors/Shadow/Contents.json create mode 100644 Mastodon/Resources/Assets.xcassets/Colors/Shadow/SearchCard.colorset/Contents.json diff --git a/Mastodon/Generated/Assets.swift b/Mastodon/Generated/Assets.swift index c8fccbfef..eb69bda10 100644 --- a/Mastodon/Generated/Assets.swift +++ b/Mastodon/Generated/Assets.swift @@ -51,6 +51,9 @@ internal enum Asset { internal static let tertiarySystemBackground = ColorAsset(name: "Colors/Background/tertiary.system.background") internal static let tertiarySystemGroupedBackground = ColorAsset(name: "Colors/Background/tertiary.system.grouped.background") } + internal enum Border { + internal static let searchCard = ColorAsset(name: "Colors/Border/searchCard") + } internal enum Button { internal static let actionToolbar = ColorAsset(name: "Colors/Button/action.toolbar") internal static let disabled = ColorAsset(name: "Colors/Button/disabled") @@ -66,6 +69,9 @@ internal enum Asset { internal static let primary = ColorAsset(name: "Colors/Label/primary") internal static let secondary = ColorAsset(name: "Colors/Label/secondary") } + internal enum Shadow { + internal static let searchCard = ColorAsset(name: "Colors/Shadow/SearchCard") + } internal enum Slider { internal static let bar = ColorAsset(name: "Colors/Slider/bar") } diff --git a/Mastodon/Resources/Assets.xcassets/Colors/Border/Contents.json b/Mastodon/Resources/Assets.xcassets/Colors/Border/Contents.json new file mode 100644 index 000000000..6e965652d --- /dev/null +++ b/Mastodon/Resources/Assets.xcassets/Colors/Border/Contents.json @@ -0,0 +1,9 @@ +{ + "info" : { + "author" : "xcode", + "version" : 1 + }, + "properties" : { + "provides-namespace" : true + } +} diff --git a/Mastodon/Resources/Assets.xcassets/Colors/Border/searchCard.colorset/Contents.json b/Mastodon/Resources/Assets.xcassets/Colors/Border/searchCard.colorset/Contents.json new file mode 100644 index 000000000..a0ce2efb8 --- /dev/null +++ b/Mastodon/Resources/Assets.xcassets/Colors/Border/searchCard.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.000", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.300", + "blue" : "213", + "green" : "213", + "red" : "213" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Mastodon/Resources/Assets.xcassets/Colors/Shadow/Contents.json b/Mastodon/Resources/Assets.xcassets/Colors/Shadow/Contents.json new file mode 100644 index 000000000..6e965652d --- /dev/null +++ b/Mastodon/Resources/Assets.xcassets/Colors/Shadow/Contents.json @@ -0,0 +1,9 @@ +{ + "info" : { + "author" : "xcode", + "version" : 1 + }, + "properties" : { + "provides-namespace" : true + } +} diff --git a/Mastodon/Resources/Assets.xcassets/Colors/Shadow/SearchCard.colorset/Contents.json b/Mastodon/Resources/Assets.xcassets/Colors/Shadow/SearchCard.colorset/Contents.json new file mode 100644 index 000000000..a28cf0793 --- /dev/null +++ b/Mastodon/Resources/Assets.xcassets/Colors/Shadow/SearchCard.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0", + "green" : "0", + "red" : "0" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.000", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Mastodon/Scene/Search/CollectionViewCell/SearchRecommendAccountsCollectionViewCell.swift b/Mastodon/Scene/Search/CollectionViewCell/SearchRecommendAccountsCollectionViewCell.swift index b4305eeff..b6eafb3f9 100644 --- a/Mastodon/Scene/Search/CollectionViewCell/SearchRecommendAccountsCollectionViewCell.swift +++ b/Mastodon/Scene/Search/CollectionViewCell/SearchRecommendAccountsCollectionViewCell.swift @@ -12,18 +12,23 @@ import UIKit class SearchRecommendAccountsCollectionViewCell: UICollectionViewCell { let avatarImageView: UIImageView = { let imageView = UIImageView() - imageView.layer.cornerRadius = 8 + imageView.layer.cornerRadius = 8.4 imageView.clipsToBounds = true return imageView }() let headerImageView: UIImageView = { let imageView = UIImageView() - imageView.layer.cornerRadius = 8 + imageView.contentMode = .scaleAspectFill + imageView.layer.cornerRadius = 10 imageView.clipsToBounds = true + imageView.layer.borderWidth = 2 + imageView.layer.borderColor = Asset.Colors.Border.searchCard.color.cgColor return imageView }() + let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .regular)) + let displayNameLabel: UILabel = { let label = UILabel() label.textColor = .white @@ -46,7 +51,7 @@ class SearchRecommendAccountsCollectionViewCell: UICollectionViewCell { button.setTitle(L10n.Scene.Search.Recommend.Accounts.follow, for: .normal) button.titleLabel?.font = .systemFont(ofSize: 14, weight: .semibold) button.layer.cornerRadius = 12 - button.layer.borderWidth = 3 + button.layer.borderWidth = 2 button.layer.borderColor = UIColor.white.cgColor return button }() @@ -55,6 +60,7 @@ class SearchRecommendAccountsCollectionViewCell: UICollectionViewCell { super.prepareForReuse() headerImageView.af.cancelImageRequest() avatarImageView.af.cancelImageRequest() + visualEffectView.removeFromSuperview() } override init(frame: CGRect) { @@ -69,11 +75,17 @@ class SearchRecommendAccountsCollectionViewCell: UICollectionViewCell { } extension SearchRecommendAccountsCollectionViewCell { + override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { + super.traitCollectionDidChange(previousTraitCollection) + headerImageView.layer.borderColor = Asset.Colors.Border.searchCard.color.cgColor + applyShadow(color: Asset.Colors.Shadow.searchCard.color, alpha: 0.1, x: 0, y: 3, blur: 12, spread: 0) + } + private func configure() { headerImageView.backgroundColor = Asset.Colors.brandBlue.color - layer.cornerRadius = 8 - clipsToBounds = true - + layer.cornerRadius = 10 + clipsToBounds = false + applyShadow(color: Asset.Colors.Shadow.searchCard.color, alpha: 0.1, x: 0, y: 3, blur: 12, spread: 0) contentView.addSubview(headerImageView) headerImageView.pin(top: 16, left: 0, bottom: 0, right: 0) @@ -115,8 +127,11 @@ extension SearchRecommendAccountsCollectionViewCell { headerImageView.af.setImage( withURL: URL(string: account.header)!, placeholderImage: UIImage.placeholder(color: .systemFill), - imageTransition: .crossDissolve(0.2) - ) + imageTransition: .crossDissolve(0.2)) { [weak self] _ in + guard let self = self else { return } + self.headerImageView.addSubview(self.visualEffectView) + self.visualEffectView.pin(top: 0, left: 0, bottom: 0, right: 0) + } } } diff --git a/Mastodon/Scene/Search/CollectionViewCell/SearchRecommendTagsCollectionViewCell.swift b/Mastodon/Scene/Search/CollectionViewCell/SearchRecommendTagsCollectionViewCell.swift index f7ff5f33e..813c8a34f 100644 --- a/Mastodon/Scene/Search/CollectionViewCell/SearchRecommendTagsCollectionViewCell.swift +++ b/Mastodon/Scene/Search/CollectionViewCell/SearchRecommendTagsCollectionViewCell.swift @@ -15,7 +15,7 @@ class SearchRecommendTagsCollectionViewCell: UICollectionViewCell { imageView.translatesAutoresizingMaskIntoConstraints = false return imageView }() - + let hashtagTitleLabel: UILabel = { let label = UILabel() label.textColor = .white @@ -58,10 +58,20 @@ class SearchRecommendTagsCollectionViewCell: UICollectionViewCell { } extension SearchRecommendTagsCollectionViewCell { + + override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { + super.traitCollectionDidChange(previousTraitCollection) + layer.borderColor = Asset.Colors.Border.searchCard.color.cgColor + applyShadow(color: Asset.Colors.Shadow.searchCard.color, alpha: 0.1, x: 0, y: 3, blur: 12, spread: 0) + } + private func configure() { backgroundColor = Asset.Colors.brandBlue.color - layer.cornerRadius = 8 - clipsToBounds = true + layer.cornerRadius = 10 + clipsToBounds = false + layer.borderWidth = 2 + layer.borderColor = Asset.Colors.Border.searchCard.color.cgColor + applyShadow(color: Asset.Colors.Shadow.searchCard.color, alpha: 0.1, x: 0, y: 3, blur: 12, spread: 0) contentView.addSubview(backgroundImageView) backgroundImageView.constrain(toSuperviewEdges: nil)