Adopt Compound for the settings and bug report screens. (#708)

* Use compound tokens for Settings and Bug Report.
This commit is contained in:
Doug 2023-03-21 14:52:10 +00:00 committed by GitHub
parent 60214f3ccf
commit 8c89b06f3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 152 additions and 180 deletions

View File

@ -25,9 +25,9 @@ public extension Color {
}
public struct ElementColors {
// MARK: - Compound
// MARK: - Legacy Compound
private let compound = CompoundColors()
private let compound = DesignTokens.CompoundColors()
public var accent: Color { systemPrimaryLabel }
public var alert: Color { compound.alert }
@ -44,23 +44,6 @@ public struct ElementColors {
public var contentAndAvatars: [Color] { compound.contentAndAvatars }
// MARK: - System
public var systemPrimaryLabel: Color { .primary }
public var systemSecondaryLabel: Color { .secondary }
public var systemTertiaryLabel: Color { Color(.tertiaryLabel) }
public var systemQuaternaryLabel: Color { Color(.quaternaryLabel) }
public var systemPrimaryBackground: Color { Color(.systemBackground) }
public var systemSecondaryBackground: Color { Color(.secondarySystemBackground) }
public var systemGray: Color { Color(.systemGray) }
public var systemGray2: Color { Color(.systemGray2) }
public var systemGray3: Color { Color(.systemGray3) }
public var systemGray4: Color { Color(.systemGray4) }
public var systemGray5: Color { Color(.systemGray5) }
public var systemGray6: Color { Color(.systemGray6) }
public func avatarBackground(for contentId: String) -> Color {
let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))
return contentAndAvatars[colorIndex % contentAndAvatars.count]
@ -68,17 +51,22 @@ public struct ElementColors {
// MARK: - Temp
public var systemPrimaryLabel: Color { .primary }
public var systemPrimaryBackground: Color { Color(.systemBackground) }
public var systemGray4: Color { Color(.systemGray4) }
public var systemGray6: Color { Color(.systemGray6) }
public var bubblesYou: Color {
Color(UIColor { collection in
// Note: Light colour doesn't currently match Figma.
collection.userInterfaceStyle == .light ? .element.systemGray5 : UIColor(red: 0.16, green: 0.18, blue: 0.21, alpha: 1)
collection.userInterfaceStyle == .light ? .systemGray5 : UIColor(red: 0.16, green: 0.18, blue: 0.21, alpha: 1)
})
}
public var bubblesNotYou: Color {
Color(UIColor { collection in
// Note: Light colour doesn't currently match Figma.
collection.userInterfaceStyle == .light ? .element.systemGray6 : .element.system
collection.userInterfaceStyle == .light ? .systemGray6 : .element.system
})
}
@ -87,7 +75,6 @@ public struct ElementColors {
/// This colour is a special case as it uses `system` in light mode and `background` in dark mode.
public var formBackground: Color {
Color(UIColor { collection in
// Note: Light colour doesn't currently match Figma.
collection.userInterfaceStyle == .light ? .element.system : .element.background
})
}
@ -97,7 +84,6 @@ public struct ElementColors {
/// This colour is a special case as it uses `background` in light mode and `system` in dark mode.
public var formRowBackground: Color {
Color(UIColor { collection in
// Note: Light colour doesn't currently match Figma.
collection.userInterfaceStyle == .light ? .element.background : .element.system
})
}
@ -113,9 +99,9 @@ public extension UIColor {
@objcMembers public class ElementUIColors: NSObject {
// MARK: - Compound
private let compound = CompoundUIColors()
private let compound = DesignTokens.CompoundUIColors()
public var accent: UIColor { systemPrimaryLabel }
public var accent: UIColor { .label }
public var alert: UIColor { compound.alert }
public var links: UIColor { compound.links }
public var primaryContent: UIColor { compound.primaryContent }
@ -127,23 +113,6 @@ public extension UIColor {
public var background: UIColor { compound.background }
public var contentAndAvatars: [UIColor] { compound.contentAndAvatars }
// MARK: - System
public var systemPrimaryLabel: UIColor { .label }
public var systemSecondaryLabel: UIColor { .secondaryLabel }
public var systemTertiaryLabel: UIColor { .tertiaryLabel }
public var systemQuaternaryLabel: UIColor { .quaternaryLabel }
public var systemPrimaryBackground: UIColor { .systemBackground }
public var systemSecondaryBackground: UIColor { .secondarySystemBackground }
public var systemGray: UIColor { .systemGray }
public var systemGray2: UIColor { .systemGray2 }
public var systemGray3: UIColor { .systemGray3 }
public var systemGray4: UIColor { .systemGray4 }
public var systemGray5: UIColor { .systemGray5 }
public var systemGray6: UIColor { .systemGray6 }
public func avatarBackground(for contentId: String) -> UIColor {
let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))

View File

@ -9,6 +9,22 @@
"version" : "1.6.0"
}
},
{
"identity" : "compound-design-tokens",
"kind" : "remoteSourceControl",
"location" : "https://github.com/vector-im/compound-design-tokens.git",
"state" : {
"revision" : "342145ff8044b58b967186b0efe34477e1f7c3ca"
}
},
{
"identity" : "compound-ios",
"kind" : "remoteSourceControl",
"location" : "https://github.com/vector-im/compound-ios",
"state" : {
"revision" : "0b1c62f9a9efac3d9ac06c51531392d55057a0eb"
}
},
{
"identity" : "devicekit",
"kind" : "remoteSourceControl",

View File

@ -87,6 +87,7 @@
// Bug report
"bug_report_screen_title" = "Report a bug";
"bug_report_screen_editor_placeholder" = "Describe the bug…";
"bug_report_screen_description" = "Please describe the bug. What did you do? What did you expect to happen? What actually happened. Please go into as much detail as you can.";
"bug_report_screen_include_logs" = "Send logs to help";
"bug_report_screen_logs_description" = "To check things work as intended, logs will be sent with your message. These will be private. To just send your message, turn off this setting.";

View File

@ -22,6 +22,8 @@ extension ElementL10n {
public static let bugReportScreenDescription = ElementL10n.tr("Untranslated", "bug_report_screen_description")
/// Edit Screenshot
public static let bugReportScreenEditScreenshot = ElementL10n.tr("Untranslated", "bug_report_screen_edit_screenshot")
/// Describe the bug
public static let bugReportScreenEditorPlaceholder = ElementL10n.tr("Untranslated", "bug_report_screen_editor_placeholder")
/// Send logs to help
public static let bugReportScreenIncludeLogs = ElementL10n.tr("Untranslated", "bug_report_screen_include_logs")
/// To check things work as intended, logs will be sent with your message. These will be private. To just send your message, turn off this setting.

View File

@ -14,28 +14,25 @@
// limitations under the License.
//
import Compound
import PhotosUI
import SwiftUI
struct BugReportScreen: View {
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
private var horizontalPadding: CGFloat {
horizontalSizeClass == .regular ? 50 : 16
}
@State private var selectedScreenshot: PhotosPickerItem?
@ObservedObject var context: BugReportViewModel.Context
var body: some View {
ScrollView {
mainContent
.padding(.top, 50)
.padding(.horizontal, horizontalPadding)
Form {
textFieldSection
attachScreenshotSection
sendLogsSection
}
.scrollDismissesKeyboard(.immediately)
.background(Color.element.formBackground.ignoresSafeArea())
.compoundForm()
.navigationTitle(ElementL10n.bugReportScreenTitle)
.navigationBarTitleDisplayMode(.inline)
.toolbar { toolbar }
@ -51,77 +48,65 @@ struct BugReportScreen: View {
}
}
}
/// The main content of the view to be shown in a scroll view.
var mainContent: some View {
VStack(alignment: .leading, spacing: 24) {
descriptionTextEditor
attachScreenshot
sendLogsToggle
private var textFieldSection: some View {
Section {
TextField(ElementL10n.bugReportScreenEditorPlaceholder,
text: $context.reportText,
prompt: Text(ElementL10n.bugReportScreenEditorPlaceholder).compoundFormTextFieldPlaceholder(),
axis: .vertical)
.lineLimit(4, reservesSpace: true)
.textFieldStyle(.compoundForm)
.accessibilityIdentifier(A11yIdentifiers.bugReportScreen.report)
} footer: {
Text(ElementL10n.bugReportScreenDescription)
.compoundFormSectionFooter()
}
.compoundFormSection()
}
private var descriptionTextEditor: some View {
FormTextEditor(text: $context.reportText,
placeholder: ElementL10n.bugReportScreenDescription,
editorAccessibilityIdentifier: A11yIdentifiers.bugReportScreen.report)
}
@ViewBuilder
private var sendLogsToggle: some View {
VStack(spacing: 8) {
private var sendLogsSection: some View {
Section {
Toggle(ElementL10n.bugReportScreenIncludeLogs, isOn: $context.sendingLogsEnabled)
.foregroundColor(.element.primaryContent)
.tint(Color.element.brand)
.toggleStyle(.compoundForm)
.accessibilityIdentifier(A11yIdentifiers.bugReportScreen.sendLogs)
.padding(.horizontal, 16)
.padding(.vertical, 6.5)
.background {
RoundedRectangle(cornerRadius: 14)
.fill(Color.element.formRowBackground)
}
} footer: {
Text(ElementL10n.bugReportScreenLogsDescription)
.font(.element.caption1)
.foregroundColor(Color.element.secondaryContent)
.padding(.horizontal, -8)
.compoundFormSectionFooter()
}
.compoundFormSection()
}
@ViewBuilder
private var attachScreenshot: some View {
VStack(alignment: .leading, spacing: 16) {
private var attachScreenshotSection: some View {
Section {
PhotosPicker(selection: $selectedScreenshot,
matching: .screenshots,
photoLibrary: .shared()) {
HStack(spacing: 16) {
Label(context.viewState.screenshot == nil ? ElementL10n.bugReportScreenAttachScreenshot : ElementL10n.bugReportScreenEditScreenshot, systemImage: "camera")
.labelStyle(FormRowLabelStyle())
Spacer()
}
Label(context.viewState.screenshot == nil ? ElementL10n.bugReportScreenAttachScreenshot : ElementL10n.bugReportScreenEditScreenshot, systemImage: "camera")
}
.buttonStyle(FormButtonStyle())
.background(Color.element.formRowBackground)
.cornerRadius(14)
.buttonStyle(.compoundForm())
.accessibilityIdentifier(A11yIdentifiers.bugReportScreen.attachScreenshot)
} footer: {
if let screenshot = context.viewState.screenshot {
ZStack(alignment: .topTrailing) {
Image(uiImage: screenshot)
.resizable()
.scaledToFit()
.frame(width: 100)
.cornerRadius(4)
.accessibilityIdentifier(A11yIdentifiers.bugReportScreen.screenshot)
Button { context.send(viewAction: .removeScreenshot) } label: {
Image(Asset.Images.closeCircle.name)
Image(uiImage: screenshot)
.resizable()
.scaledToFit()
.frame(width: 100)
.cornerRadius(4)
.accessibilityIdentifier(A11yIdentifiers.bugReportScreen.screenshot)
.overlay(alignment: .topTrailing) {
Button { context.send(viewAction: .removeScreenshot) } label: {
Image(Asset.Images.closeCircle.name)
}
.offset(x: 10, y: -10)
.accessibilityIdentifier(A11yIdentifiers.bugReportScreen.removeScreenshot)
}
.offset(x: 10, y: -10)
.accessibilityIdentifier(A11yIdentifiers.bugReportScreen.removeScreenshot)
}
.padding(.vertical, 16)
.padding(.horizontal, 16)
.padding(.vertical, 16)
.padding(.horizontal, 16)
}
}
.compoundFormSection()
}
@ToolbarContentBuilder

View File

@ -14,12 +14,11 @@
// limitations under the License.
//
import Compound
import SwiftUI
struct SettingsScreen: View {
@State private var showingLogoutConfirmation = false
@ScaledMetric private var avatarSize = AvatarSize.user(on: .settings).value
@ObservedObject var context: SettingsScreenViewModel.Context
@ -39,8 +38,7 @@ struct SettingsScreen: View {
signOutSection
}
.scrollContentBackground(.hidden)
.background(Color.element.formBackground.ignoresSafeArea())
.compoundForm()
.navigationTitle(ElementL10n.settings)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
@ -56,7 +54,7 @@ struct SettingsScreen: View {
private var userSection: some View {
Section {
HStack(spacing: 13) {
HStack(spacing: 12) {
LoadableAvatarImage(url: context.viewState.userAvatarURL,
name: context.viewState.userDisplayName,
contentID: context.viewState.userID,
@ -64,18 +62,18 @@ struct SettingsScreen: View {
imageProvider: context.imageProvider)
.accessibilityHidden(true)
VStack(alignment: .leading, spacing: 4) {
VStack(alignment: .leading, spacing: 2) {
Text(context.viewState.userDisplayName ?? "")
.font(.element.title3)
.foregroundColor(.element.primaryContent)
.font(.compound.headingMD)
.foregroundColor(.compound.textPrimary)
Text(context.viewState.userID)
.font(.element.subheadline)
.foregroundColor(.element.primaryContent)
.font(.compound.bodySM)
.foregroundColor(.compound.textSecondary)
}
.accessibilityElement(children: .combine)
}
}
.formSectionStyle()
.compoundFormSection()
}
private var sessionVerificationSection: some View {
@ -83,9 +81,9 @@ struct SettingsScreen: View {
Button { context.send(viewAction: .sessionVerification) } label: {
Label(ElementL10n.settingsSessionVerification, systemImage: "checkmark.shield")
}
.buttonStyle(FormButtonStyle())
.buttonStyle(.compoundForm())
}
.formSectionStyle()
.compoundFormSection()
}
private var developerOptionsSection: some View {
@ -93,10 +91,10 @@ struct SettingsScreen: View {
Button { context.send(viewAction: .developerOptions) } label: {
Label(ElementL10n.settingsDeveloperOptions, systemImage: "hammer.circle")
}
.buttonStyle(FormButtonStyle(accessory: .navigationLink))
.buttonStyle(.compoundForm(accessory: .navigationLink))
.accessibilityIdentifier("sessionVerificationButton")
}
.formSectionStyle()
.compoundFormSection()
}
private var simplifiedSection: some View {
@ -108,8 +106,8 @@ struct SettingsScreen: View {
}
} label: {
Label(ElementL10n.settingsTimelineStyle, systemImage: "rectangle.grid.1x2")
.labelStyle(FormRowLabelStyle())
}
.labelStyle(.compoundFormRow())
.accessibilityIdentifier("timelineStylePicker")
.onChange(of: context.timelineStyle) { _ in
context.send(viewAction: .changedTimelineStyle)
@ -118,10 +116,10 @@ struct SettingsScreen: View {
Button { context.send(viewAction: .reportBug) } label: {
Label(ElementL10n.sendBugReport, systemImage: "questionmark.circle")
}
.buttonStyle(FormButtonStyle(accessory: .navigationLink))
.buttonStyle(.compoundForm(accessory: .navigationLink))
.accessibilityIdentifier("reportBugButton")
}
.formSectionStyle()
.compoundFormSection()
}
private var signOutSection: some View {
@ -129,7 +127,7 @@ struct SettingsScreen: View {
Button { showingLogoutConfirmation = true } label: {
Label(ElementL10n.actionSignOut, systemImage: "rectangle.portrait.and.arrow.right")
}
.buttonStyle(FormButtonStyle())
.buttonStyle(.compoundForm())
.accessibilityIdentifier("logoutButton")
.alert(ElementL10n.actionSignOut, isPresented: $showingLogoutConfirmation) {
Button(ElementL10n.actionSignOut,
@ -141,19 +139,14 @@ struct SettingsScreen: View {
} footer: {
VStack {
versionText
.font(.element.caption1)
.foregroundColor(.element.tertiaryContent)
.frame(maxWidth: .infinity)
if let deviceId = context.viewState.deviceID {
Text(deviceId)
.font(.element.caption1)
.foregroundColor(.element.tertiaryContent)
}
context.viewState.deviceID.map(Text.init)
}
.compoundFormSectionFooter()
.padding(.top, 24)
}
.formSectionStyle()
.compoundFormSection()
}
private var doneButton: some View {

View File

@ -127,6 +127,7 @@ targets:
- target: NSE
- package: MatrixRustSDK
- package: DesignKit
- package: Compound
- package: Algorithms
- package: AnalyticsEvents
- package: AppAuth

1
changelog.d/43.feature Normal file
View File

@ -0,0 +1 @@
Adopt compound-ios on the Settings and Bug Report screens.

View File

@ -46,6 +46,10 @@ packages:
# path: ../matrix-rust-sdk
DesignKit:
path: DesignKit
Compound:
url: https://github.com/vector-im/compound-ios
revision: 0b1c62f9a9efac3d9ac06c51531392d55057a0eb
# path: ../compound-ios
Algorithms:
url: https://github.com/apple/swift-algorithms
majorVersion: 1.0.0