felixfoertsch/bundesmessenger-ios
1
0
Fork 0
mirror of https://gitlab.opencode.de/bwi/bundesmessenger/clients/bundesmessenger-ios.git synced 2026-04-23 10:02:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Chips, InputStyles, Service Implementation, swift-collections and UI cleanup.

Browse Source
This commit is contained in:
David Langley
2021-08-25 13:03:36 +01:00
parent a7d0fec95d
commit 7a4554f53d
27 changed files with 1076 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Riot/Modules/Settings/Notifications/SwiftUI/BorderedInputFieldStyle.swift
+127
View File
@@ -0,0 +1,127 @@
//
// Copyright 2021 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
import Foundation
import SwiftUI
/*
A bordered style of text input as defined in:
https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=2039%3A26415
*/
@available(iOS 14.0, *)
struct BorderedInputFieldStyle: TextFieldStyle {
@Environment(\.theme) var theme: Theme
var isEditing: Bool = false
var isError: Bool = false
var isEnabled: Bool = true
private var borderColor: Color {
if !isEnabled {
return Color(theme.colors.quinaryContent)
} else if isError {
return Color(theme.colors.alert)
} else if isEditing {
return Color(theme.colors.accent)
}
return Color(theme.colors.quarterlyContent)
}
private var accentColor: Color {
if isError {
return Color(theme.colors.alert)
}
return Color(theme.colors.accent)
}
private var textColor: Color {
if !isEnabled {
return Color(theme.colors.quarterlyContent)
}
return Color(theme.colors.primaryContent)
}
private var backgroundColor: Color {
if !isEnabled && (theme is DarkTheme) {
return Color(theme.colors.quinaryContent)
}
return Color(theme.colors.background)
}
private var borderWdith: CGFloat {
return isEditing || isError ? 2 : 1.5
}
func _body(configuration: TextField<_Label>) -> some View {
let rect = RoundedRectangle(cornerRadius: 8)
configuration
.font(Font(theme.fonts.callout))
.foregroundColor(textColor)
.accentColor(accentColor)
.frame(height: 48)
.padding(.horizontal, 8)
.background(backgroundColor)
.clipShape(rect)
.overlay(
rect
.stroke(borderColor, lineWidth: borderWdith)
)
}
}
@available(iOS 14.0, *)
struct BorderedInputFieldStyle_Previews: PreviewProvider {
static var previews: some View {
Group {
VStack {
TextField("Placeholder", text: .constant(""))
.textFieldStyle(BorderedInputFieldStyle())
TextField("Placeholder", text: .constant(""))
.textFieldStyle(BorderedInputFieldStyle(isEditing: true))
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(BorderedInputFieldStyle())
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(BorderedInputFieldStyle(isEditing: true))
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(BorderedInputFieldStyle(isEnabled: false))
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(BorderedInputFieldStyle(isEditing: true, isError: true))
}
.padding()
VStack {
TextField("Placeholder", text: .constant(""))
.textFieldStyle(BorderedInputFieldStyle())
TextField("Placeholder", text: .constant(""))
.textFieldStyle(BorderedInputFieldStyle(isEditing: true))
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(BorderedInputFieldStyle())
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(BorderedInputFieldStyle(isEditing: true))
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(BorderedInputFieldStyle(isEnabled: false))
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(BorderedInputFieldStyle(isEditing: true, isError: true))
}
.padding()
.theme(ThemeIdentifier.dark)
}
}
}
Riot/Modules/Settings/Notifications/SwiftUI/Chip.swift
+25 -7
View File
@@ -16,29 +16,47 @@
import SwiftUI
/**
A single rounded rect chip to be rendered within `Chips` collection
*/
@available(iOS 14.0, *)
struct Chip: View {
@Environment(\.isEnabled) var isEnabled
@Environment(\.theme) var theme: Theme
let titleKey: String
let onClose: () -> Void
let chip: String
let onDelete: () -> Void
var backgroundColor: Color {
if !isEnabled {
return Color(theme.colors.quinaryContent)
}
return Color(theme.colors.accent)
}
var foregroundColor: Color {
if !isEnabled {
return Color(theme.colors.tertiaryContent)
}
return Color(theme.colors.background)
}
var body: some View {
HStack {
Text(titleKey)
Text(chip)
.font(Font(theme.fonts.body))
.lineLimit(1)
Image(systemName: "xmark.circle.fill")
.frame(width: 16, height: 16, alignment: .center)
.onTapGesture(perform: onClose)
.onTapGesture(perform: onDelete)
}
.padding(.leading, 12)
.padding(.top, 6)
.padding(.bottom, 6)
.padding(.trailing, 8)
.background(Color(theme.tintColor))
.foregroundColor(Color.white)
.background(backgroundColor)
.foregroundColor(foregroundColor)
.cornerRadius(20)
}
@@ -47,6 +65,6 @@ struct Chip: View {
@available(iOS 14.0, *)
struct Chip_Previews: PreviewProvider {
static var previews: some View {
Chip(titleKey: "My great chip", onClose: { })
Chip(chip: "My great chip", onDelete: { })
}
}
Riot/Modules/Settings/Notifications/SwiftUI/Chips.swift
+56 -33
View File
@@ -16,52 +16,75 @@
import SwiftUI
/**
Renders multiple chips in a flow layout.
*/
@available(iOS 14.0, *)
struct Chips: View {
@State private var totalHeight: CGFloat = 0
var chips: [String]
var didDeleteChip: (String) -> Void
var verticalSpacing: CGFloat = 16
var horizontalSpacing: CGFloat = 12
var body: some View {
var width = CGFloat.zero
var height = CGFloat.zero
return GeometryReader { geo in
ZStack(alignment: .topLeading, content: {
ForEach(chips, id: \.self) { chip in
Chip(titleKey: chip) {
}
.padding(.all, 5)
.alignmentGuide(.leading) { dimension in
if abs(width - dimension.width) > geo.size.width {
width = 0
height -= dimension.height
}
let result = width
if chip == chips.last {
width = 0
} else {
width -= dimension.width
}
return result
}
.alignmentGuide(.top) { dimension in
let result = height
if chip == chips.last {
height = 0
}
return result
Group {
VStack {
var x = CGFloat.zero
var y = CGFloat.zero
GeometryReader { geo in
ZStack(alignment: .topLeading, content: {
ForEach(chips, id: \.self) { chip in
Chip(chip: chip) {
didDeleteChip(chip)
}
.alignmentGuide(.leading) { dimension in
if abs(x - dimension.width) > geo.size.width {
x = 0
y -= dimension.height + verticalSpacing
}
let result = x
if chip == chips.last {
x = 0
} else {
x -= dimension.width + horizontalSpacing
}
return result
}
.alignmentGuide(.top) { dimension in
let result = y
if chip == chips.last {
y = 0
}
return result
}
}
})
.background(viewHeightReader($totalHeight))
}
})
}.padding(.all, 10)
}
.frame(height: totalHeight)
}
}
private func viewHeightReader(_ binding: Binding<CGFloat>) -> some View {
return GeometryReader { geo -> Color in
DispatchQueue.main.async {
binding.wrappedValue = geo.frame(in: .local).size.height
}
return .clear
}
}
}
@available(iOS 14.0, *)
struct Chips_Previews: PreviewProvider {
static var chips: [String] = ["Chip1", "Chip2", "Chip3", "Chip4", "Chip5", "Chip6"]
static var previews: some View {
Chips(chips: ["Chip1", "Chip2", "Chip3", "Chip4", "Chip5", "Chip6"])
.frame(width: .infinity, height: 400, alignment: .leading)
Chips(chips: chips, didDeleteChip: { _ in })
}
}
Riot/Modules/Settings/Notifications/SwiftUI/ChipsInput.swift
+70
View File
@@ -0,0 +1,70 @@
//
// Copyright 2021 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
import SwiftUI
/*
Renders an input field and a collection of chips
with callbacks for addition and deletion.
*/
@available(iOS 14.0, *)
struct ChipsInput: View {
@Environment(\.theme) var theme: Theme
@Environment(\.isEnabled) var isEnabled
@State private var chipText: String = ""
@State private var isEditing: Bool = false
var chips: [String]
var placeholder: String = ""
var didAddChip: (String) -> Void
var didDeleteChip: (String) -> Void
var body: some View {
VStack(spacing: 16) {
TextField(placeholder, text: $chipText) { editing in
isEditing = editing
} onCommit: {
didAddChip(chipText)
chipText = ""
}
.disabled(!isEnabled)
.disableAutocorrection(true)
.autocapitalization(.none)
.textFieldStyle(FormInputFieldStyle())
Chips(chips: chips, didDeleteChip: didDeleteChip)
.padding(.horizontal)
}
}
}
@available(iOS 14.0, *)
struct ChipsInput_Previews: PreviewProvider {
static var chips = Set<String>(["Website", "Element", "Design", "Matrix/Element"])
static var previews: some View {
ChipsInput(chips: Array(chips)) { chip in
chips.insert(chip)
} didDeleteChip: { chip in
chips.remove(chip)
}
.disabled(true)
}
}
Riot/Modules/Settings/Notifications/SwiftUI/DefaultNotifications.swift → Riot/Modules/Settings/Notifications/SwiftUI/DefaultNotificationSettings.swift
+5 -7
View File
@@ -17,15 +17,12 @@
import SwiftUI
@available(iOS 14.0, *)
struct DefaultNotifications: View {
struct DefaultNotificationSettings: View {
@ObservedObject var viewModel: NotificationSettingsViewModel
var body: some View {
NotificationSettings(
viewModel: viewModel,
footer: EmptyView()
)
NotificationSettings(viewModel: viewModel)
.navigationBarTitle(VectorL10n.settingsDefault)
}
}
@@ -34,9 +31,10 @@ struct DefaultNotifications: View {
struct DefaultNotifications_Previews: PreviewProvider {
static var previews: some View {
NavigationView {
DefaultNotifications(
DefaultNotificationSettings(
viewModel: NotificationSettingsViewModel(
rules: NotificationSettingsScreen.defaultNotificaitons.pushRules
notificationSettingsService: MockNotificationSettingsService.example,
ruleIds: NotificationSettingsScreen.defaultNotificaitons.pushRules
)
)
.navigationBarTitleDisplayMode(.inline)
Riot/Modules/Settings/Notifications/SwiftUI/FormInputFieldStyle.swift
+91
View File
@@ -0,0 +1,91 @@
//
// Copyright 2021 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
import Foundation
import SwiftUI
/**
An input field for forms.
*/
@available(iOS 14.0, *)
struct FormInputFieldStyle: TextFieldStyle {
@Environment(\.theme) var theme: Theme
var isEditing: Bool = false
var isEnabled: Bool = true
private var textColor: Color {
if !isEnabled {
return Color(theme.colors.quarterlyContent)
}
return Color(theme.colors.primaryContent)
}
private var backgroundColor: Color {
if !isEnabled && (theme is DarkTheme) {
return Color(theme.colors.quinaryContent)
}
return Color(theme.colors.background)
}
func _body(configuration: TextField<_Label>) -> some View {
configuration
.font(Font(theme.fonts.callout))
.foregroundColor(textColor)
.frame(minHeight: 48)
.padding(.horizontal)
.background(backgroundColor)
}
}
@available(iOS 14.0, *)
struct FormInputFieldStyle_Previews: PreviewProvider {
static var previews: some View {
Group {
VectorForm {
TextField("Placeholder", text: .constant(""))
.textFieldStyle(FormInputFieldStyle())
TextField("Placeholder", text: .constant(""))
.textFieldStyle(FormInputFieldStyle(isEditing: true))
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(FormInputFieldStyle())
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(FormInputFieldStyle(isEditing: true))
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(FormInputFieldStyle(isEnabled: false))
}
.padding()
VectorForm {
TextField("Placeholder", text: .constant(""))
.textFieldStyle(FormInputFieldStyle())
TextField("Placeholder", text: .constant(""))
.textFieldStyle(FormInputFieldStyle(isEditing: true))
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(FormInputFieldStyle())
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(FormInputFieldStyle(isEditing: true))
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(FormInputFieldStyle(isEnabled: false))
}
.padding()
.theme(ThemeIdentifier.dark)
}
}
}
Riot/Modules/Settings/Notifications/SwiftUI/Keywords.swift
+17 -9
View File
@@ -16,23 +16,31 @@
import SwiftUI
/*
Renders the keywords input, driven by 'NotificationSettingsViewModel'.
*/
@available(iOS 14.0, *)
struct Keywords: View {
@ObservedObject var viewModel: KeywordsViewModel
@State var keywordText: String = ""
@ObservedObject var viewModel: NotificationSettingsViewModel
var body: some View {
VStack {
TextField("New Keyword", text: $keywordText)
Chips(chips: viewModel.keywords)
}
ChipsInput(
chips: viewModel.viewState.keywords,
placeholder: VectorL10n.settingsNewKeyword,
didAddChip: viewModel.add(keyword:),
didDeleteChip: viewModel.remove(keyword:)
)
.disabled(!(viewModel.viewState.selectionState[.keywords] ?? false))
}
}
@available(iOS 14.0, *)
struct Keywords_Previews: PreviewProvider {
static let viewModel = NotificationSettingsViewModel(
notificationSettingsService: MockNotificationSettingsService.example,
ruleIds: NotificationSettingsScreen.mentionsAndKeywords.pushRules
)
static var previews: some View {
Keywords(viewModel: KeywordsViewModel())
Keywords(viewModel: viewModel)
}
}
Riot/Modules/Settings/Notifications/SwiftUI/MentionsAndKeywords.swift → Riot/Modules/Settings/Notifications/SwiftUI/MentionsAndKeywordNotificationSettings.swift
+13 -6
View File
@@ -17,15 +17,22 @@
import SwiftUI
@available(iOS 14.0, *)
struct MentionsAndKeywords: View {
struct MentionsAndKeywordNotificationSettings: View {
@ObservedObject var keywordsViewModel: KeywordsViewModel
@ObservedObject var viewModel: NotificationSettingsViewModel
var keywordSection: some View {
SwiftUI.Section(
header: FormSectionHeader(text: VectorL10n.settingsYourKeywords),
footer: FormSectionFooter(text: VectorL10n.settingsMentionsAndKeywordsEncryptionNotice)
) {
Keywords(viewModel: viewModel)
}
}
var body: some View {
NotificationSettings(
viewModel: viewModel,
footer: Keywords(viewModel: keywordsViewModel)
bottomSection: keywordSection
)
.navigationTitle(VectorL10n.settingsMentionsAndKeywords)
}
@@ -35,10 +42,10 @@ struct MentionsAndKeywords: View {
struct MentionsAndKeywords_Previews: PreviewProvider {
static var previews: some View {
NavigationView {
MentionsAndKeywords(
keywordsViewModel: KeywordsViewModel(),
MentionsAndKeywordNotificationSettings(
viewModel: NotificationSettingsViewModel(
rules: NotificationSettingsScreen.mentionsAndKeywords.pushRules
notificationSettingsService: MockNotificationSettingsService.example,
ruleIds: NotificationSettingsScreen.mentionsAndKeywords.pushRules
)
)
.navigationBarTitleDisplayMode(.inline)
Riot/Modules/Settings/Notifications/SwiftUI/NotificationSettings.swift
+21 -22
View File
@@ -16,40 +16,40 @@
import SwiftUI
/*
Renders the push rule settings that can enabled/disable.
Also renders an optional bottom section
(Used in the case of keywords for the keyword chips and input).
*/
@available(iOS 14.0, *)
struct NotificationSettings<Footer: View>: View {
struct NotificationSettings<BottomSection: View>: View {
@ObservedObject var viewModel: NotificationSettingsViewModel
var footer: Footer
@ViewBuilder
private var rightButton: some View {
Button(VectorL10n.save) {
viewModel.process(viewAction: .save)
}
}
var bottomSection: BottomSection?
var body: some View {
VectorForm {
SwiftUI.Section(
header: FormSectionHeader(text: VectorL10n.roomNotifsSettingsNotifyMeFor),
footer: footer
header: FormSectionHeader(text: VectorL10n.settingsNotifyMeFor)
) {
ForEach(viewModel.viewState.selectionState) { item in
FormPickerItem(title: item.title ?? "", selected: item.selected) {
viewModel.process(viewAction: .selectNotification(item.ruleId, !item.selected))
ForEach(viewModel.viewState.ruleIds) { ruleId in
let checked = viewModel.viewState.selectionState[ruleId] ?? false
FormPickerItem(title: ruleId.title, selected: checked) {
viewModel.check(ruleID: ruleId, checked: !checked)
}
}
}
bottomSection
}
.activityIndicator(show: viewModel.viewState.saving)
.navigationBarItems(
trailing: rightButton
)
.onAppear {
viewModel.process(viewAction: .load)
}
}
}
@available(iOS 14.0, *)
extension NotificationSettings where BottomSection == EmptyView {
init(viewModel: NotificationSettingsViewModel) {
self.init(viewModel: viewModel, bottomSection: nil)
}
}
@@ -60,8 +60,7 @@ struct NotificationSettings_Previews: PreviewProvider {
ForEach(NotificationSettingsScreen.allCases) { screen in
NavigationView {
NotificationSettings(
viewModel: NotificationSettingsViewModel(rules: screen.pushRules),
footer: EmptyView()
viewModel: NotificationSettingsViewModel(notificationSettingsService: MockNotificationSettingsService.example, ruleIds: screen.pushRules)
)
.navigationBarTitleDisplayMode(.inline)
}
Riot/Modules/Settings/Notifications/SwiftUI/OtherNotifications.swift → Riot/Modules/Settings/Notifications/SwiftUI/OtherNotificationSettings.swift
+4 -7
View File
@@ -17,14 +17,11 @@
import SwiftUI
@available(iOS 14.0, *)
struct OtherNotifications: View {
struct OtherNotificationSettings: View {
@ObservedObject var viewModel: NotificationSettingsViewModel
var body: some View {
NotificationSettings(
viewModel: viewModel,
footer: EmptyView()
)
NotificationSettings(viewModel: viewModel)
.navigationTitle(VectorL10n.settingsOther)
}
}
@@ -33,9 +30,9 @@ struct OtherNotifications: View {
struct OtherNotifications_Previews: PreviewProvider {
static var previews: some View {
NavigationView {
DefaultNotifications(
DefaultNotificationSettings(
viewModel: NotificationSettingsViewModel(
rules: NotificationSettingsScreen.other.pushRules
notificationSettingsService: MockNotificationSettingsService.example, ruleIds: NotificationSettingsScreen.other.pushRules
)
)
.navigationBarTitleDisplayMode(.inline)