Add theming support, and support for other top level configuration to swiftui views with VectorHostingViewController, VectorContentModifier. Add VisibilityModifier. Move from List to VStack.

Riot/Modules/Room/NotificationSettings/SwiftUI/FormPickerItem.swift

@@ -1,59 +0,0 @@
-// 
-// 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
-
-@available(iOS 13.0, *)
-struct FormPickerItem: View {
-    
-    typealias ClickCallback = () -> Void
-    
-    @Environment(\.theme) var theme: Theme
-    
-    var title: String
-    var selected: Bool
-    var onClick: ClickCallback?
-    
-    var body: some View {
-        HStack {
-            Text(title)
-                .font(Font(theme.fonts.body))
-                .foregroundColor(Color(theme.textPrimaryColor))
-            Spacer()
-            if selected {
-                Image("checkmark")
-                    .foregroundColor(Color(theme.tintColor))
-            }
-        }
-        .listRowBackground(Color(theme.backgroundColor))
-        .contentShape(Rectangle())
-        .onTapGesture {
-            onClick?()
-        }
-    }
-}
-
-@available(iOS 13.0, *)
-struct FormPickerCell_Previews: PreviewProvider {
-    static var previews: some View {
-        List {
-            FormPickerItem(title: "Item 1", selected: true, onClick: nil)
-            FormPickerItem(title: "Item 2", selected: false, onClick: nil)
-            FormPickerItem(title: "Item 3", selected: false, onClick: nil)
-        }.listStyle(GroupedListStyle())
-        
-    }
-}

Riot/Modules/Room/NotificationSettings/SwiftUI/FormPickerItemView.swift

@@ -0,0 +1,66 @@
+//
+// 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
+
+@available(iOS 14.0, *)
+struct FormPickerItemView: View {
+    
+    typealias ClickCallback = () -> Void
+    
+    @Environment(\.theme) var theme: Theme
+    
+    var title: String
+    var selected: Bool
+    var onClick: ClickCallback?
+    
+    var body: some View {
+        Button {
+            onClick?()
+        } label: {
+            VStack {
+                Spacer()
+                HStack {
+                    Text(title)
+                    Spacer()
+                    Image("checkmark")
+                        .foregroundColor(Color(theme.tintColor))
+                        .gone(!selected)
+                }
+                .padding(.trailing)
+                Spacer()
+                Divider()
+            }
+            .padding(.leading)
+        }
+        .buttonStyle(VectorFormItemButtonStyle())
+        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, idealHeight: 44, alignment: .leading)
+        .fixedSize(horizontal: false, vertical: true)
+    }
+}
+
+@available(iOS 14.0, *)
+struct FormPickerCell_Previews: PreviewProvider {
+    static let items = ["Item 1", "Item 2", "Item 3"]
+    static var selected: String = items[0]
+    static var previews: some View {
+        VectorFormView {
+            ForEach(items, id: \.self) { item in
+                FormPickerItemView(title: item, selected: selected == item)
+            }
+        }
+    }
+}

Riot/Modules/Room/NotificationSettings/SwiftUI/FormSectionFooterView.swift

@@ -16,8 +16,8 @@
 
 import SwiftUI
 
-@available(iOS 13.0, *)
-struct FormSectionFooter: View {
+@available(iOS 14.0, *)
+struct FormSectionFooterView: View {
     
     @Environment(\.theme) var theme: Theme
     var text: String
@@ -26,19 +26,21 @@ struct FormSectionFooter: View {
         Text(text)
             .foregroundColor(Color(theme.textSecondaryColor))
             .padding(.top)
+            .padding(.leading)
+            .padding(.trailing)
             .font(Font(theme.fonts.callout))
     }
 }
 
-@available(iOS 13.0, *)
+@available(iOS 14.0, *)
 struct FormSectionFooter_Previews: PreviewProvider {
     static var previews: some View {
-        List {
-            SwiftUI.Section(footer: FormSectionFooter(text: "Footer Text")) {
-                Text("Item 1")
-                Text("Item 2")
-                Text("Item 3")
+        VectorFormView {
+            SwiftUI.Section(footer: FormSectionFooterView(text: "Please note that mentions & keyword notifications are not available in encrypted rooms on mobile.")) {
+                FormPickerItemView(title: "Item 1", selected: false)
+                FormPickerItemView(title: "Item 2", selected: false)
+                FormPickerItemView(title: "Item 3", selected: false)
             }
-        }.listStyle(GroupedListStyle())
+        }
     }
 }

Riot/Modules/Room/NotificationSettings/SwiftUI/FormSectionHeaderView.swift

@@ -16,8 +16,8 @@
 
 import SwiftUI
 
-@available(iOS 13.0, *)
-struct FormSectionHeader: View {
+@available(iOS 14.0, *)
+struct FormSectionHeaderView: View {
     
     @Environment(\.theme) var theme: Theme
     var text: String
@@ -26,19 +26,23 @@ struct FormSectionHeader: View {
         Text(text)
             .foregroundColor(Color(theme.textSecondaryColor))
             .padding(.top)
+            .padding(.leading)
+            .padding(.bottom, 8)
             .font(Font(theme.fonts.footnote))
+            .autocapitalization(.allCharacters)
+            .textCase(.uppercase)
     }
 }
 
-@available(iOS 13.0, *)
+@available(iOS 14.0, *)
 struct FormSectionHeader_Previews: PreviewProvider {
     static var previews: some View {
-        List {
-            SwiftUI.Section(header: FormSectionHeader(text: "Section Header")) {
-                Text("Item 1")
-                Text("Item 2")
-                Text("Item 3")
+        VectorFormView {
+            SwiftUI.Section(header: FormSectionHeaderView(text: "Section Header")) {
+                FormPickerItemView(title: "Item 1", selected: false)
+                FormPickerItemView(title: "Item 2", selected: false)
+                FormPickerItemView(title: "Item 3", selected: false)
             }
-        }.listStyle(GroupedListStyle())
+        }
     }
 }

Riot/Modules/Room/NotificationSettings/SwiftUI/RoomNotificationSettingsHeaderView.swift

@@ -0,0 +1,50 @@
+// 
+// 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
+
+@available(iOS 14.0, *)
+struct RoomNotificationSettingsHeaderView: View {
+    
+    @Environment(\.theme) var theme: Theme
+    var image: UIImage
+    var displayName: String?
+    
+    var body: some View {
+        HStack {
+            Spacer()
+            VStack(alignment: .center) {
+                VectorAvatarView(image: image, size: .xxLarge)
+                if let displayName = displayName {
+                    Text(displayName)
+                        .font(Font(theme.fonts.title3SB))
+                        .foregroundColor(Color(theme.textPrimaryColor))
+                        .textCase(nil)
+                }
+            }
+            Spacer()
+        }.padding(.top, 36)
+    }
+}
+
+@available(iOS 14.0, *)
+struct RoomNotificationSettingsHeaderView_Previews: PreviewProvider {
+    static let image = UIImage(imageLiteralResourceName: "app_symbol")
+    static let name = "Element"
+    static var previews: some View {
+        RoomNotificationSettingsHeaderView(image: image, displayName: name)
+    }
+}

Riot/Modules/Room/NotificationSettings/SwiftUI/RoomNotificationSettingsView.swift

@@ -16,32 +16,40 @@
 
 import SwiftUI
 
-@available(iOS 13.0.0, *)
+@available(iOS 14.0.0, *)
 struct RoomNotificationSettingsView: View {
     
     @Environment(\.theme) var theme: Theme
     @ObservedObject var viewModel: RoomNotificationSettingsViewModel
+    
     let presentedModally: Bool
     
-    @State var notificationState: RoomNotificationState = RoomNotificationState.all
-    
-    
-    var body: some View {
-        let leftButton = presentedModally ?
+    @ViewBuilder
+    var leftButton: some View {
+        if presentedModally {
             SwiftUI.Button(VectorL10n.cancel) {
                 viewModel.process(viewAction: .cancel)
             }
-            : nil
-        let rightButton = SwiftUI.Button(VectorL10n.save) {
+        }
+    }
+
+    var rightButton: some View {
+        Button(VectorL10n.save) {
             viewModel.process(viewAction: .save)
         }
-        VectorForm {
+    }
+    
+    var body: some View {
+        VectorFormView {
+            if let image = viewModel.viewState.avatar {
+                RoomNotificationSettingsHeaderView(image: image, displayName: viewModel.viewState.displayName)
+            }
             SwiftUI.Section(
-                header: FormSectionHeader(text: VectorL10n.roomNotifsSettingsNotifyMeFor),
-                footer: FormSectionFooter(text: viewModel.viewState.roomEncryptedString)
+                header: FormSectionHeaderView(text: VectorL10n.roomNotifsSettingsNotifyMeFor),
+                footer: FormSectionFooterView(text: viewModel.viewState.roomEncryptedString)
             ) {
                 ForEach(viewModel.viewState.notificationOptions) { option in
-                    FormPickerItem(title: option.title, selected: viewModel.viewState.notificationState == option) {
+                    FormPickerItemView(title: option.title, selected: viewModel.viewState.notificationState == option) {
                         viewModel.process(viewAction: .selectNotificationState(option))
                     }
                 }
@@ -56,8 +64,6 @@ struct RoomNotificationSettingsView: View {
         }
     }
 }
-    
-
 
 fileprivate extension RoomNotificationState {
     var title: String {
@@ -78,26 +84,27 @@ fileprivate extension RoomNotificationSettingsViewState {
     }
 }
 
-extension RoomNotificationState: Identifiable {
-    var id: String { UUID().uuidString }
-}
-
-
 @available(iOS 14.0, *)
 struct RoomNotificationSettingsView_Previews: PreviewProvider {
-    
+
     static let mockViewModel = RoomNotificationSettingsViewModel(
         roomNotificationService: MockRoomNotificationSettingsService.example,
-        roomEncrypted: true,
-        avatarViewData: nil
+        avatarService: MockAvatarService.example,
+        avatarData: .swiftUI(AvatarInput(mxContentUri: nil, itemId: "", displayName: "Alice")),
+        roomEncrypted: true
     )
-    
+
     static var previews: some View {
         Group {
             NavigationView {
                 RoomNotificationSettingsView(viewModel: mockViewModel, presentedModally: true)
                     .navigationBarTitleDisplayMode(.inline)
             }
+            NavigationView {
+                RoomNotificationSettingsView(viewModel: mockViewModel, presentedModally: true)
+                    .navigationBarTitleDisplayMode(.inline)
+                    .theme(ThemeIdentifier.dark.theme)
+            }
         }
     }
 }

Riot/Modules/Room/NotificationSettings/SwiftUI/VectorAvatarView.swift

@@ -0,0 +1,44 @@
+// 
+// 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
+import DesignKit
+
+@available(iOS 14.0, *)
+struct VectorAvatarView: View {
+    
+    var image: UIImage
+    var size: AvatarSize
+    
+    var body: some View {
+        Image(uiImage: image)
+            .resizable()
+            .frame(width: CGFloat(size.rawValue), height: CGFloat(size.rawValue), alignment: .center)
+            .clipShape(Circle())
+    }
+}
+
+@available(iOS 14.0, *)
+struct AvatarView_Previews: PreviewProvider {
+    static let image = UIImage(imageLiteralResourceName: "app_symbol")
+    static var previews: some View {
+        VStack {
+            VectorAvatarView(image: image, size: .xSmall)
+            VectorAvatarView(image: image, size: .medium)
+            VectorAvatarView(image: image, size: .xLarge)
+        }
+    }
+}

Riot/Modules/Room/NotificationSettings/SwiftUI/VectorForm.swift

@@ -1,47 +0,0 @@
-// 
-// 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
-
-@available(iOS 13.0, *)
-struct VectorForm<Content: View>: View {
-    
-    @Environment(\.theme) var theme: Theme
-    var content: () -> Content
-    
-    var body: some View {
-        List(content: content)
-        .listRowBackground(Color(theme.backgroundColor))
-        .listStyle(GroupedListStyle())
-        .onAppear {
-            UITableView.appearance().backgroundColor = theme.baseColor
-            UINavigationBar.appearance().barTintColor = theme.baseColor
-            UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: theme.textPrimaryColor]
-            UINavigationBar.appearance().isTranslucent = false
-            UINavigationBar.appearance().setBackgroundImage(UIImage(), for: UIBarMetrics.default)
-            UINavigationBar.appearance().shadowImage = UIImage()
-        }
-    }
-}
-
-@available(iOS 13.0, *)
-struct VectorForm_Previews: PreviewProvider {
-    static var previews: some View {
-        VectorForm {
-            Text("Item 1")
-        }
-    }
-}

Riot/Modules/Room/NotificationSettings/SwiftUI/VectorFormItemButtonStyle.swift

@@ -0,0 +1,29 @@
+// 
+// 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
+
+@available(iOS 14.0, *)
+struct VectorFormItemButtonStyle: ButtonStyle {
+    @Environment(\.theme) var theme: Theme
+    func makeBody(configuration: Self.Configuration) -> some View {
+        configuration.label
+            .background(configuration.isPressed ? Color(theme.selectedBackgroundColor) : Color(theme.backgroundColor))
+            .foregroundColor(Color(theme.textPrimaryColor))
+            .font(Font(theme.fonts.body))
+    }
+}

Riot/Modules/Room/NotificationSettings/SwiftUI/VectorFormView.swift

@@ -0,0 +1,63 @@
+// 
+// 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
+
+@available(iOS 14.0, *)
+struct VectorFormView<Content: View>: View {
+    
+    @Environment(\.theme) var theme: Theme
+    var content: () -> Content
+    
+    init(@ViewBuilder content: @escaping () -> Content) {
+        self.content = content
+    }
+    
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 0, content: content)
+        }
+        .frame(
+            minWidth: 0,
+            maxWidth: .infinity,
+            minHeight: 0,
+            maxHeight: .infinity,
+            alignment: .top
+        )
+        .background(Color(theme.baseColor))
+        .edgesIgnoringSafeArea(.bottom)
+        
+    }
+}
+
+@available(iOS 14.0, *)
+struct VectorForm_Previews: PreviewProvider {
+    
+    static var previews: some View {
+        Group {
+            VectorFormView {
+                SwiftUI.Section(header: FormSectionHeaderView(text: "Section Header")) {
+                    FormPickerItemView(title: "Item 1", selected: true)
+                    FormPickerItemView(title: "Item 2", selected: false)
+                    FormPickerItemView(title: "Item 3", selected: false)
+                }
+            }
+            VectorFormView {
+                FormPickerItemView(title: "Item 1", selected: true)
+            }.theme(ThemeIdentifier.dark.theme)
+        }
+    }
+}