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

Suggestions view design improvements (#1955)

Browse Source 
* snapshot tests

* making the padding of the composer internal

* setting the max width using the line fragment

* setting the max width using the line fragment

* Update ElementX/Sources/Screens/ComposerToolbar/View/CompletionSuggestionView.swift

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>

* updated tests and pr suggestions

* better stencil

---------

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>
This commit is contained in:
Mauro
2023-10-24 19:09:36 +02:00
committed by GitHub
parent f9ad44f96a
commit 1ba6fb0a60
18 changed files with 44 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Screens/ComposerToolbar/View/CompletionSuggestionView.swift
+9 -21
View File
@@ -23,19 +23,11 @@ struct CompletionSuggestionView: View {
private enum Constants {
static let topPadding: CGFloat = 8.0
static let listItemPadding: CGFloat = 4.0
static let lineSpacing: CGFloat = 10.0
static let maxHeight: CGFloat = 300.0
static let listItemPadding: CGFloat = 6.0
// added by the list itself when presenting the divider
static let listItemSpacing: CGFloat = 4.0
static let leadingPadding: CGFloat = 16.0
static let maxVisibleRows = 4
/*
As of iOS 16.0, SwiftUI's List uses `UICollectionView` instead
of `UITableView` internally, this value is an adjustment to apply
to the list items in order to be as close as possible as the
`UITableView` display.
*/
@available(iOS 16.0, *)
static let collectionViewPaddingCorrection: CGFloat = -5.0
}
// MARK: Public
@@ -73,16 +65,16 @@ struct CompletionSuggestionView: View {
}
}
.modifier(ListItemPaddingModifier(isFirst: items.first?.id == item.id))
.listRowInsets(.init(top: 0, leading: Constants.leadingPadding, bottom: 0, trailing: 0))
}
.listStyle(PlainListStyle())
.frame(height: min(Constants.maxHeight,
min(contentHeightForRowCount(Constants.maxVisibleRows),
contentHeightForRowCount(items.count))))
.frame(height: min(contentHeightForRowCount(Constants.maxVisibleRows),
contentHeightForRowCount(items.count)))
.background(Color.compound.bgCanvasDefault)
}
private func contentHeightForRowCount(_ count: Int) -> CGFloat {
(prototypeListItemFrame.height + (Constants.listItemPadding * 2) + Constants.lineSpacing) * CGFloat(count) + Constants.topPadding
(prototypeListItemFrame.height + Constants.listItemPadding * 2 + Constants.listItemSpacing) * CGFloat(count) - Constants.listItemSpacing / 2 + Constants.topPadding - Constants.listItemPadding
}
private struct ListItemPaddingModifier: ViewModifier {
@@ -93,12 +85,8 @@ struct CompletionSuggestionView: View {
}
func body(content: Content) -> some View {
var topPadding: CGFloat = isFirst ? Constants.listItemPadding + Constants.topPadding : Constants.listItemPadding
var topPadding: CGFloat = isFirst ? Constants.topPadding : Constants.listItemPadding
var bottomPadding: CGFloat = Constants.listItemPadding
if #available(iOS 16.0, *) {
topPadding += Constants.collectionViewPaddingCorrection
bottomPadding += Constants.collectionViewPaddingCorrection
}
return content
.padding(.top, topPadding)
ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift
+2
View File
@@ -46,6 +46,8 @@ struct ComposerToolbar: View {
bottomBar
}
}
.padding(.leading, 5)
.padding(.trailing, 8)
.background {
ViewFrameReader(frame: $frame)
}
ElementX/Sources/Screens/ComposerToolbar/View/MentionSuggestionItemView.swift
+3 -3
View File
@@ -21,13 +21,13 @@ struct MentionSuggestionItemView: View {
let item: MentionSuggestionItem
var body: some View {
HStack(alignment: .center) {
HStack(alignment: .center, spacing: 16) {
LoadableAvatarImage(url: item.avatarURL,
name: item.displayName,
contentID: item.id,
avatarSize: .custom(42),
avatarSize: .user(on: .suggestions),
imageProvider: imageProvider)
VStack(alignment: .leading) {
VStack(alignment: .leading, spacing: 0) {
Text(item.displayName ?? item.id)
.font(.compound.bodyLG)
.foregroundColor(.compound.textPrimary)
ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift
-2
View File
@@ -35,8 +35,6 @@ struct RoomScreen: View {
.background(Color.compound.bgCanvasDefault.ignoresSafeArea())
.safeAreaInset(edge: .bottom, spacing: 0) {
composerToolbar
.padding(.leading, 5)
.padding(.trailing, 8)
.padding(.bottom, composerToolbarContext.composerActionsEnabled ? 8 : 12)
.background {
if composerToolbarContext.composerActionsEnabled {