chore: update settings scene UI
|
@ -21,9 +21,9 @@ enum SettingsSection: Hashable {
|
||||||
|
|
||||||
var title: String {
|
var title: String {
|
||||||
switch self {
|
switch self {
|
||||||
case .appearance: return L10n.Scene.Settings.Section.Appearance.title
|
case .appearance: return L10n.Scene.Settings.Section.LookAndFeel.title
|
||||||
case .appearancePreference: return ""
|
case .appearancePreference: return ""
|
||||||
case .preference: return L10n.Scene.Settings.Section.Preference.title
|
case .preference: return ""
|
||||||
case .notifications: return L10n.Scene.Settings.Section.Notifications.title
|
case .notifications: return L10n.Scene.Settings.Section.Notifications.title
|
||||||
case .boringZone: return L10n.Scene.Settings.Section.BoringZone.title
|
case .boringZone: return L10n.Scene.Settings.Section.BoringZone.title
|
||||||
case .spicyZone: return L10n.Scene.Settings.Section.SpicyZone.title
|
case .spicyZone: return L10n.Scene.Settings.Section.SpicyZone.title
|
||||||
|
|
|
@ -38,7 +38,7 @@ class SettingsAppearanceTableViewCell: UITableViewCell {
|
||||||
}()
|
}()
|
||||||
|
|
||||||
let systemAppearanceView = AppearanceView(
|
let systemAppearanceView = AppearanceView(
|
||||||
image: Asset.Settings.darkAuto.image,
|
image: Asset.Settings.automatic.image,
|
||||||
title: L10n.Scene.Settings.Section.Appearance.automatic
|
title: L10n.Scene.Settings.Section.Appearance.automatic
|
||||||
)
|
)
|
||||||
let darkAppearanceView = AppearanceView(
|
let darkAppearanceView = AppearanceView(
|
||||||
|
@ -100,9 +100,9 @@ extension SettingsAppearanceTableViewCell {
|
||||||
contentView.addSubview(stackView)
|
contentView.addSubview(stackView)
|
||||||
NSLayoutConstraint.activate([
|
NSLayoutConstraint.activate([
|
||||||
stackView.topAnchor.constraint(equalTo: contentView.topAnchor),
|
stackView.topAnchor.constraint(equalTo: contentView.topAnchor),
|
||||||
stackView.leadingAnchor.constraint(equalTo: contentView.readableContentGuide.leadingAnchor),
|
stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
|
||||||
stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
|
stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
|
||||||
stackView.trailingAnchor.constraint(equalTo: contentView.readableContentGuide.trailingAnchor),
|
stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
|
||||||
])
|
])
|
||||||
|
|
||||||
stackView.addArrangedSubview(systemAppearanceView)
|
stackView.addArrangedSubview(systemAppearanceView)
|
||||||
|
|
|
@ -99,14 +99,8 @@ class SettingsViewController: UIViewController, NeedsDependency {
|
||||||
}()
|
}()
|
||||||
|
|
||||||
private(set) lazy var tableView: UITableView = {
|
private(set) lazy var tableView: UITableView = {
|
||||||
let style: UITableView.Style = {
|
|
||||||
switch UIDevice.current.userInterfaceIdiom {
|
|
||||||
case .phone: return .grouped
|
|
||||||
default: return .insetGrouped
|
|
||||||
}
|
|
||||||
}()
|
|
||||||
// init with a frame to fix a conflict ('UIView-Encapsulated-Layout-Width' UIStackView:0x7f8c2b6c0590.width == 0)
|
// init with a frame to fix a conflict ('UIView-Encapsulated-Layout-Width' UIStackView:0x7f8c2b6c0590.width == 0)
|
||||||
let tableView = UITableView(frame: CGRect(x: 0, y: 0, width: 320, height: 320), style: style)
|
let tableView = UITableView(frame: CGRect(x: 0, y: 0, width: 320, height: 320), style: .insetGrouped)
|
||||||
tableView.translatesAutoresizingMaskIntoConstraints = false
|
tableView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
tableView.delegate = self
|
tableView.delegate = self
|
||||||
tableView.rowHeight = UITableView.automaticDimension
|
tableView.rowHeight = UITableView.automaticDimension
|
||||||
|
@ -330,6 +324,8 @@ extension SettingsViewController: UITableViewDelegate {
|
||||||
switch sectionIdentifier {
|
switch sectionIdentifier {
|
||||||
case .appearancePreference:
|
case .appearancePreference:
|
||||||
return UIView()
|
return UIView()
|
||||||
|
case .preference:
|
||||||
|
return UIView()
|
||||||
case .notifications:
|
case .notifications:
|
||||||
header = SettingsSectionHeader(
|
header = SettingsSectionHeader(
|
||||||
frame: CGRect(x: 0, y: 0, width: 375, height: 66),
|
frame: CGRect(x: 0, y: 0, width: 375, height: 66),
|
||||||
|
|
|
@ -8,14 +8,16 @@
|
||||||
import UIKit
|
import UIKit
|
||||||
import MastodonAsset
|
import MastodonAsset
|
||||||
import MastodonLocalization
|
import MastodonLocalization
|
||||||
|
import MastodonUI
|
||||||
|
|
||||||
class AppearanceView: UIView {
|
class AppearanceView: UIView {
|
||||||
|
|
||||||
|
let imageViewShadowBackgroundContainer = ShadowBackgroundContainer()
|
||||||
lazy var imageView: UIImageView = {
|
lazy var imageView: UIImageView = {
|
||||||
let view = UIImageView()
|
let view = UIImageView()
|
||||||
view.contentMode = .scaleAspectFill
|
view.contentMode = .scaleAspectFill
|
||||||
view.layer.masksToBounds = true
|
view.layer.masksToBounds = true
|
||||||
view.layer.cornerRadius = 8
|
view.layer.cornerRadius = 4
|
||||||
view.layer.cornerCurve = .continuous
|
view.layer.cornerCurve = .continuous
|
||||||
// accessibility
|
// accessibility
|
||||||
view.accessibilityIgnoresInvertColors = true
|
view.accessibilityIgnoresInvertColors = true
|
||||||
|
@ -29,6 +31,17 @@ class AppearanceView: UIView {
|
||||||
label.textAlignment = .center
|
label.textAlignment = .center
|
||||||
return label
|
return label
|
||||||
}()
|
}()
|
||||||
|
|
||||||
|
lazy var checkmarkButton: UIButton = {
|
||||||
|
let button = UIButton()
|
||||||
|
button.isUserInteractionEnabled = false
|
||||||
|
button.setImage(UIImage(systemName: "circle"), for: .normal)
|
||||||
|
button.setImage(UIImage(systemName: "checkmark.circle.fill"), for: .selected)
|
||||||
|
button.imageView?.preferredSymbolConfiguration = UIImage.SymbolConfiguration(textStyle: .body)
|
||||||
|
button.imageView?.tintColor = Asset.Colors.Label.primary.color
|
||||||
|
button.imageView?.contentMode = .scaleAspectFill
|
||||||
|
return button
|
||||||
|
}()
|
||||||
|
|
||||||
lazy var stackView: UIStackView = {
|
lazy var stackView: UIStackView = {
|
||||||
let view = UIStackView()
|
let view = UIStackView()
|
||||||
|
@ -70,8 +83,19 @@ class AppearanceView: UIView {
|
||||||
extension AppearanceView {
|
extension AppearanceView {
|
||||||
|
|
||||||
private func setupUI() {
|
private func setupUI() {
|
||||||
stackView.addArrangedSubview(imageView)
|
imageView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
imageViewShadowBackgroundContainer.addSubview(imageView)
|
||||||
|
NSLayoutConstraint.activate([
|
||||||
|
imageView.topAnchor.constraint(equalTo: imageViewShadowBackgroundContainer.topAnchor),
|
||||||
|
imageView.leadingAnchor.constraint(equalTo: imageViewShadowBackgroundContainer.leadingAnchor),
|
||||||
|
imageView.trailingAnchor.constraint(equalTo: imageViewShadowBackgroundContainer.trailingAnchor),
|
||||||
|
imageView.bottomAnchor.constraint(equalTo: imageViewShadowBackgroundContainer.bottomAnchor),
|
||||||
|
])
|
||||||
|
imageViewShadowBackgroundContainer.cornerRadius = 4
|
||||||
|
|
||||||
|
stackView.addArrangedSubview(imageViewShadowBackgroundContainer)
|
||||||
stackView.addArrangedSubview(titleLabel)
|
stackView.addArrangedSubview(titleLabel)
|
||||||
|
stackView.addArrangedSubview(checkmarkButton)
|
||||||
|
|
||||||
addSubview(stackView)
|
addSubview(stackView)
|
||||||
translatesAutoresizingMaskIntoConstraints = false
|
translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
@ -81,20 +105,18 @@ extension AppearanceView {
|
||||||
stackView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
|
stackView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
|
||||||
stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
|
stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
|
||||||
stackView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
|
stackView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
|
||||||
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 120.0 / 90.0),
|
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 121.0 / 100.0), // height / width
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|
||||||
private func configureForSelection() {
|
private func configureForSelection() {
|
||||||
if selected {
|
if selected {
|
||||||
imageView.layer.borderWidth = 3
|
|
||||||
imageView.layer.borderColor = Asset.Colors.Label.primary.color.cgColor
|
|
||||||
accessibilityTraits.insert(.selected)
|
accessibilityTraits.insert(.selected)
|
||||||
} else {
|
} else {
|
||||||
imageView.layer.borderWidth = 1
|
|
||||||
imageView.layer.borderColor = Asset.Colors.Label.primaryReverse.color.cgColor
|
|
||||||
accessibilityTraits.remove(.selected)
|
accessibilityTraits.remove(.selected)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
checkmarkButton.isSelected = selected
|
||||||
}
|
}
|
||||||
|
|
||||||
override func layoutSubviews() {
|
override func layoutSubviews() {
|
||||||
|
|
23
MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/automatic.imageset/Contents.json
vendored
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"images" : [
|
||||||
|
{
|
||||||
|
"filename" : "automatic.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "1x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "automatic@2x.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "2x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "automatic@3x.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "3x"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"info" : {
|
||||||
|
"author" : "xcode",
|
||||||
|
"version" : 1
|
||||||
|
}
|
||||||
|
}
|
BIN
MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/automatic.imageset/automatic.png
vendored
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/automatic.imageset/automatic@2x.png
vendored
Normal file
After Width: | Height: | Size: 49 KiB |
BIN
MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/automatic.imageset/automatic@3x.png
vendored
Normal file
After Width: | Height: | Size: 97 KiB |
|
@ -1,12 +0,0 @@
|
||||||
{
|
|
||||||
"images" : [
|
|
||||||
{
|
|
||||||
"filename" : "Mixed_Black_Light.png",
|
|
||||||
"idiom" : "universal"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"info" : {
|
|
||||||
"author" : "xcode",
|
|
||||||
"version" : 1
|
|
||||||
}
|
|
||||||
}
|
|
Before Width: | Height: | Size: 379 KiB |
|
@ -1,12 +0,0 @@
|
||||||
{
|
|
||||||
"images" : [
|
|
||||||
{
|
|
||||||
"filename" : "Home Black.png",
|
|
||||||
"idiom" : "universal"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"info" : {
|
|
||||||
"author" : "xcode",
|
|
||||||
"version" : 1
|
|
||||||
}
|
|
||||||
}
|
|
Before Width: | Height: | Size: 3.0 MiB |
|
@ -1,12 +0,0 @@
|
||||||
{
|
|
||||||
"images" : [
|
|
||||||
{
|
|
||||||
"filename" : "Mixed_Dark_Light.png",
|
|
||||||
"idiom" : "universal"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"info" : {
|
|
||||||
"author" : "xcode",
|
|
||||||
"version" : 1
|
|
||||||
}
|
|
||||||
}
|
|
Before Width: | Height: | Size: 375 KiB |
|
@ -1,8 +1,19 @@
|
||||||
{
|
{
|
||||||
"images" : [
|
"images" : [
|
||||||
{
|
{
|
||||||
"filename" : "Home Dark.png",
|
"filename" : "dark.png",
|
||||||
"idiom" : "universal"
|
"idiom" : "universal",
|
||||||
|
"scale" : "1x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "dark@2x.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "2x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "dark@3x.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "3x"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"info" : {
|
"info" : {
|
||||||
|
|
Before Width: | Height: | Size: 2.8 MiB |
BIN
MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/dark.imageset/dark.png
vendored
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/dark.imageset/dark@2x.png
vendored
Normal file
After Width: | Height: | Size: 48 KiB |
BIN
MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/dark.imageset/dark@3x.png
vendored
Normal file
After Width: | Height: | Size: 95 KiB |
|
@ -1,8 +1,19 @@
|
||||||
{
|
{
|
||||||
"images" : [
|
"images" : [
|
||||||
{
|
{
|
||||||
"filename" : "Home Light.png",
|
"filename" : "light.png",
|
||||||
"idiom" : "universal"
|
"idiom" : "universal",
|
||||||
|
"scale" : "1x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "light@2x.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "2x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "light@3x.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "3x"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"info" : {
|
"info" : {
|
||||||
|
|
Before Width: | Height: | Size: 403 KiB |
BIN
MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/light.imageset/light.png
vendored
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/light.imageset/light@2x.png
vendored
Normal file
After Width: | Height: | Size: 48 KiB |
BIN
MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/light.imageset/light@3x.png
vendored
Normal file
After Width: | Height: | Size: 96 KiB |
|
@ -155,9 +155,7 @@ public enum Asset {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
public enum Settings {
|
public enum Settings {
|
||||||
public static let blackAuto = ImageAsset(name: "Settings/black.auto")
|
public static let automatic = ImageAsset(name: "Settings/automatic")
|
||||||
public static let black = ImageAsset(name: "Settings/black")
|
|
||||||
public static let darkAuto = ImageAsset(name: "Settings/dark.auto")
|
|
||||||
public static let dark = ImageAsset(name: "Settings/dark")
|
public static let dark = ImageAsset(name: "Settings/dark")
|
||||||
public static let light = ImageAsset(name: "Settings/light")
|
public static let light = ImageAsset(name: "Settings/light")
|
||||||
}
|
}
|
||||||
|
|