ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-02 12:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
33 changed files with 152 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Generated/Strings+Untranslated.swift
+2
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.
ElementX/Sources/Screens/BugReport/View/BugReportScreen.swift
+48 -63
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
ElementX/Sources/Screens/Settings/View/SettingsScreen.swift
+20 -27
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 {