[iOS] LetterPicker - Dynamic Scaling (#1326)
* Get the Size from Parent * Use the Font for Sizing * Make Static for Padding * Using new sizing instead of a static 35
This commit is contained in:
parent
994e99d141
commit
34d64bca5d
|
@ -20,10 +20,12 @@ extension LetterPickerBar {
|
|||
private var isSelected
|
||||
|
||||
private let letter: ItemLetter
|
||||
private let size: CGFloat
|
||||
private let viewModel: FilterViewModel
|
||||
|
||||
init(letter: ItemLetter, viewModel: FilterViewModel) {
|
||||
init(letter: ItemLetter, size: CGFloat, viewModel: FilterViewModel) {
|
||||
self.letter = letter
|
||||
self.size = size
|
||||
self.viewModel = viewModel
|
||||
}
|
||||
|
||||
|
@ -37,15 +39,15 @@ extension LetterPickerBar {
|
|||
} label: {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 5)
|
||||
.frame(width: size, height: size)
|
||||
.foregroundStyle(isSelected ? accentColor : Color.clear)
|
||||
|
||||
Text(letter.value)
|
||||
.font(.headline)
|
||||
.foregroundStyle(isSelected ? accentColor.overlayColor : accentColor)
|
||||
.frame(width: size, height: size, alignment: .center)
|
||||
}
|
||||
.frame(width: 20, height: 20)
|
||||
}
|
||||
.frame(width: 50, height: 20)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -14,6 +14,8 @@ struct LetterPickerBar: View {
|
|||
@ObservedObject
|
||||
var viewModel: FilterViewModel
|
||||
|
||||
// MARK: - Body
|
||||
|
||||
@ViewBuilder
|
||||
var body: some View {
|
||||
VStack(spacing: 0) {
|
||||
|
@ -22,6 +24,7 @@ struct LetterPickerBar: View {
|
|||
ForEach(ItemLetter.allCases, id: \.hashValue) { filterLetter in
|
||||
LetterPickerButton(
|
||||
letter: filterLetter,
|
||||
size: LetterPickerBar.size,
|
||||
viewModel: viewModel
|
||||
)
|
||||
.environment(\.isSelected, viewModel.currentFilters.letter.contains(filterLetter))
|
||||
|
@ -30,6 +33,17 @@ struct LetterPickerBar: View {
|
|||
Spacer()
|
||||
}
|
||||
.scrollIfLargerThanContainer()
|
||||
.frame(width: 30, alignment: .center)
|
||||
.frame(width: LetterPickerBar.size, alignment: .center)
|
||||
}
|
||||
|
||||
// MARK: - Letter Button Size
|
||||
|
||||
static var size: CGFloat {
|
||||
String().height(
|
||||
withConstrainedWidth: CGFloat.greatestFiniteMagnitude,
|
||||
font: UIFont.preferredFont(
|
||||
forTextStyle: .headline
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -284,7 +284,7 @@ struct PagingLibraryView<Element: Poster>: View {
|
|||
if letterPickerEnabled, let filterViewModel = viewModel.filterViewModel {
|
||||
ZStack(alignment: letterPickerOrientation.alignment) {
|
||||
innerContent
|
||||
.padding(letterPickerOrientation.edge, 35)
|
||||
.padding(letterPickerOrientation.edge, LetterPickerBar.size + 10)
|
||||
.frame(maxWidth: .infinity)
|
||||
|
||||
LetterPickerBar(viewModel: filterViewModel)
|
||||
|
|
Loading…
Reference in New Issue