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

Design: Forms, Login and Members screen. (#608)

Browse Source 
* Rename Settings styles to Form styles.

* Removed redundant FormPickerRow.

* Use the button style everywhere and fix icon shapes.
This commit is contained in:
Doug
2023-02-22 13:37:02 +00:00
committed by GitHub
parent 7d5d801d20
commit 246879f1bf
50 changed files with 338 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Other/SwiftUI/Form Styles/FormButtonStyles.swift
+122
View File
@@ -0,0 +1,122 @@
//
// Copyright 2023 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
/// A view to be added on the trailing edge of a form row.
enum FormRowAccessory: View {
case navigationLink
var body: some View {
switch self {
case .navigationLink:
return Image(systemName: "chevron.forward")
.font(.element.subheadlineBold)
.foregroundColor(.element.quaternaryContent)
}
}
}
/// Default button styling for form rows.
///
/// The primitive style is needed to set the list row insets to `0`. The inner style is then needed
/// to change the background colour depending on whether the button is currently pressed or not.
struct FormButtonStyle: PrimitiveButtonStyle {
/// An accessory to be added on the trailing side of the row.
var accessory: FormRowAccessory?
func makeBody(configuration: Configuration) -> some View {
Button(action: configuration.trigger) {
configuration.label
.frame(maxHeight: .infinity) // Make sure the label fills the cell vertically.
}
.buttonStyle(Style(accessory: accessory))
.listRowInsets(EdgeInsets()) // Remove insets so the background fills the cell.
}
/// Inner style used to set the pressed background colour.
struct Style: ButtonStyle {
var accessory: FormRowAccessory?
func makeBody(configuration: Configuration) -> some View {
HStack {
configuration.label
.labelStyle(FormRowLabelStyle())
.foregroundColor(.element.primaryContent)
.frame(maxWidth: .infinity, alignment: .leading)
accessory
}
.contentShape(Rectangle())
.padding(FormRow.insets) // Re-apply the normal insets using padding.
.background(configuration.isPressed ? Color.element.quinaryContent : .clear)
}
}
}
/// Small squared action button style for settings screens
struct FormActionButtonStyle: ButtonStyle {
let title: String
@ScaledMetric private var menuIconSize = 54.0
func makeBody(configuration: Configuration) -> some View {
VStack {
configuration.label
.buttonStyle(.plain)
.foregroundColor(.element.primaryContent)
.frame(width: menuIconSize, height: menuIconSize)
.background {
RoundedRectangle(cornerRadius: 16)
.fill(configuration.isPressed ? Color.element.quinaryContent : .element.formRowBackground)
}
Text(title)
.foregroundColor(.element.secondaryContent)
.font(.element.subheadline)
}
}
}
struct FormButtonStyles_Previews: PreviewProvider {
static var previews: some View {
Form {
Section {
Button { } label: {
Label("Hello world", systemImage: "globe")
}
.buttonStyle(FormButtonStyle())
Button { } label: {
Label("Show something", systemImage: "rectangle.portrait")
}
.buttonStyle(FormButtonStyle(accessory: .navigationLink))
ShareLink(item: "test")
.buttonStyle(FormButtonStyle())
}
.formSectionStyle()
Section {
Button { } label: {
Text("Hello world")
}
.buttonStyle(FormButtonStyle())
}
.formSectionStyle()
}
}
}
ElementX/Sources/Other/SwiftUI/Form Styles/FormRow.swift
+22
View File
@@ -0,0 +1,22 @@
//
// Copyright 2023 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
enum FormRow {
/// Element specific insets that are used for all our Form rows.
static let insets = EdgeInsets(top: 7, leading: 16, bottom: 7, trailing: 16)
}
ElementX/Sources/Other/SwiftUI/Views/SettingsRowLabelStyle.swift → ElementX/Sources/Other/SwiftUI/Form Styles/FormRowLabelStyle.swift
+21 -2
View File
@@ -16,7 +16,7 @@
import SwiftUI
struct SettingsRowLabelStyle: LabelStyle {
struct FormRowLabelStyle: LabelStyle {
@ScaledMetric private var menuIconSize = 30.0
var alignment: VerticalAlignment = .firstTextBaseline
@@ -26,12 +26,31 @@ struct SettingsRowLabelStyle: LabelStyle {
configuration.icon
.foregroundColor(.element.secondaryContent)
.padding(4)
.frame(width: menuIconSize, height: menuIconSize)
.background(Color.element.formBackground)
.clipShape(RoundedRectangle(cornerRadius: 8))
.frame(width: menuIconSize, height: menuIconSize)
configuration.title
.font(.element.body)
.foregroundColor(.element.primaryContent)
}
}
}
struct FormRowLabelStyle_Previews: PreviewProvider {
static var previews: some View {
VStack(alignment: .leading) {
Label("Person", systemImage: "person")
.labelStyle(FormRowLabelStyle())
Label("Help", systemImage: "questionmark.circle")
.labelStyle(FormRowLabelStyle())
Label("Camera", systemImage: "camera")
.labelStyle(FormRowLabelStyle())
Label("Help", systemImage: "questionmark")
.labelStyle(FormRowLabelStyle())
}
.padding()
}
}
ElementX/Sources/Other/SwiftUI/Views/FormSectionHeaderStyle.swift → ElementX/Sources/Other/SwiftUI/Form Styles/FormSection.swift
+15 -1
View File
@@ -16,7 +16,7 @@
import SwiftUI
/// Style for section header
/// Style for form section headers
struct FormSectionHeaderStyle: ViewModifier {
func body(content: Content) -> some View {
content
@@ -25,9 +25,23 @@ struct FormSectionHeaderStyle: ViewModifier {
}
}
/// Standard style for form sections
struct FormSectionStyle: ViewModifier {
func body(content: Content) -> some View {
content
.listRowSeparator(.hidden)
.listRowInsets(FormRow.insets)
.listRowBackground(Color.element.formRowBackground)
}
}
extension View {
/// Applies the `FormSectionHeaderStyle` modifier to the view
func formSectionHeader() -> some View {
modifier(FormSectionHeaderStyle())
}
func formSectionStyle() -> some View {
modifier(FormSectionStyle())
}
}
ElementX/Sources/Other/SwiftUI/Views/SettingsActionButtonStyle.swift
-41
View File
@@ -1,41 +0,0 @@
//
// Copyright 2023 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
/// Small squared action button style for settings screens
struct SettingsActionButtonStyle: ButtonStyle {
let title: String
@ScaledMetric private var menuIconSize = 54.0
func makeBody(configuration: Configuration) -> some View {
VStack {
configuration.label
.buttonStyle(.plain)
.foregroundColor(.element.primaryContent)
.frame(width: menuIconSize, height: menuIconSize)
.background {
RoundedRectangle(cornerRadius: 16)
.fill(Color.element.formRowBackground.opacity(configuration.isPressed ? 0.5 : 1))
}
Text(title)
.foregroundColor(.element.secondaryContent)
.font(.element.subheadline)
}
}
}
ElementX/Sources/Other/SwiftUI/Views/SettingsDefaultRow.swift
-53
View File
@@ -1,53 +0,0 @@
//
// Copyright 2023 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
/// Default row that can be reused for settings screens
struct SettingsDefaultRow: View {
// MARK: Public
let title: String
let image: Image
let action: () -> Void
// MARK: Private
private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
// MARK: Views
var body: some View {
Button(action: action) {
HStack(spacing: 16) {
Label(title: {
Text(title)
}, icon: {
image
})
.labelStyle(SettingsRowLabelStyle())
Spacer()
Image(systemName: "chevron.forward")
.foregroundColor(.element.tertiaryContent)
}
}
.listRowInsets(listRowInsets)
.listRowSeparator(.hidden)
.foregroundColor(.element.primaryContent)
}
}
ElementX/Sources/Other/SwiftUI/Views/SettingsPickerRow.swift
-53
View File
@@ -1,53 +0,0 @@
//
// Copyright 2023 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
/// Picker row that can be reused for settings screens
struct SettingsPickerRow<SelectionValue: Hashable, Content: View>: View {
// MARK: Public
let title: String
let image: Image
@Binding var selection: SelectionValue
let content: () -> Content
// MARK: Private
@ScaledMetric private var menuIconSize = 30.0
private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
// MARK: Views
var body: some View {
Picker(selection: $selection, content: content) {
HStack(spacing: 16) {
image
.foregroundColor(.element.systemGray)
.padding(4)
.background(Color.element.systemGray6)
.clipShape(RoundedRectangle(cornerRadius: 8))
.frame(width: menuIconSize, height: menuIconSize)
Text(title)
.font(.element.body)
.foregroundColor(.element.primaryContent)
}
}
.listRowInsets(listRowInsets)
.listRowSeparator(.hidden)
}
}