Added layout constants

This commit is contained in:
Aleksandrs Proskurins
2022-09-16 14:34:00 +03:00
parent 066f179b60
commit bb40ab1e08
2 changed files with 36 additions and 17 deletions
@@ -27,6 +27,12 @@ struct UserSessionDetailsItemView: View {
// MARK: Public
let viewData: UserSessionDetailsSectionItemViewData
let horizontalPadding: CGFloat
init(viewData: UserSessionDetailsSectionItemViewData, horizontalPadding: CGFloat = 20) {
self.viewData = viewData
self.horizontalPadding = horizontalPadding
}
var body: some View {
HStack() {
@@ -47,7 +53,7 @@ struct UserSessionDetailsItemView: View {
Label("Copy", systemImage: "doc.on.doc")
}
}
.padding([.leading, .trailing], 20)
.padding([.leading, .trailing], horizontalPadding)
.padding([.top, .bottom], 12)
}
}
@@ -58,18 +64,26 @@ struct UserSessionDetailsItemView_Previews: PreviewProvider {
static var previews: some View {
Group {
List {
UserSessionDetailsItemView(viewData: UserSessionDetailsSectionItemViewData(title: "Session name", value: "123"))
.theme(.light)
.preferredColorScheme(.light)
.listRowInsets(EdgeInsets())
UserSessionDetailsItemView(viewData: UserSessionDetailsSectionItemViewData(title: "Session name",
value: "Element Web: Firefox on macOS"))
.listRowInsets(EdgeInsets())
UserSessionDetailsItemView(viewData: UserSessionDetailsSectionItemViewData(title: "Session ID",
value: "76c95352559d-react-7c57680b93db-js-b64dbdce74b0"))
.listRowInsets(EdgeInsets())
}
.preferredColorScheme(.light)
.listStyle(.grouped)
List {
UserSessionDetailsItemView(viewData: UserSessionDetailsSectionItemViewData(title: "Session name", value: "123"))
.theme(.dark)
.preferredColorScheme(.dark)
.listRowInsets(EdgeInsets())
UserSessionDetailsItemView(viewData: UserSessionDetailsSectionItemViewData(title: "Session name",
value: "Element Web: Firefox on macOS"))
.listRowInsets(EdgeInsets())
UserSessionDetailsItemView(viewData: UserSessionDetailsSectionItemViewData(title: "Session ID",
value: "76c95352559d-react-7c57680b93db-js-b64dbdce74b0"))
.listRowInsets(EdgeInsets())
}
.preferredColorScheme(.dark)
.theme(.dark)
.listStyle(.grouped)
}
}
@@ -1,4 +1,4 @@
//
//
// Copyright 2022 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
@@ -22,6 +22,11 @@ struct UserSessionDetailsView: View {
// MARK: Private
private enum LayoutConstants {
static let listItemHorizontalPadding: CGFloat = 20
static let sectionVerticalPadding: CGFloat = 8
}
@Environment(\.theme) private var theme: ThemeSwiftUI
// MARK: Public
@@ -33,30 +38,30 @@ struct UserSessionDetailsView: View {
ForEach(viewModel.viewState.sections) { section in
SwiftUI.Section {
ForEach(section.items) { item in
UserSessionDetailsItemView(viewData: item)
UserSessionDetailsItemView(viewData: item, horizontalPadding: LayoutConstants.listItemHorizontalPadding)
.listRowInsets(EdgeInsets())
}
} header: {
Text(section.header)
.foregroundColor(theme.colors.secondaryContent)
.font(theme.fonts.footnote)
.padding([.leading, .trailing], 20)
.padding([.top, .bottom], 8)
.padding([.leading, .trailing], LayoutConstants.listItemHorizontalPadding)
.padding(.top, 32)
.padding(.bottom, LayoutConstants.sectionVerticalPadding)
} footer: {
if let footer = section.footer {
Text(footer)
.foregroundColor(theme.colors.secondaryContent)
.font(theme.fonts.footnote)
.padding([.leading, .trailing], 20)
.padding(.top, 8)
.padding(.bottom, 32)
.padding([.leading, .trailing], LayoutConstants.listItemHorizontalPadding)
.padding(.top, LayoutConstants.sectionVerticalPadding)
}
}
.listRowInsets(EdgeInsets())
}
}
.listStyle(.grouped)
.navigationBarTitle("Session details", displayMode: .inline)
.navigationBarTitle("Session details")
}
}