[iOS] LetterPicker - Dynamic Scaling (jellyfin#1326)

* Get the Size from Parent * Use the Font for Sizing * Make Static for Padding * Using new sizing instead of a static 35
chickdan · Nov 24, 2024 · 34d64bc · 34d64bc
1 parent 994e99d
commit 34d64bc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/Swiftfin/Components/LetterPickerBar/Components/LetterPickerButton.swift b/Swiftfin/Components/LetterPickerBar/Components/LetterPickerButton.swift
@@ -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)
         }
     }
 }
diff --git a/Swiftfin/Components/LetterPickerBar/LetterPickerBar.swift b/Swiftfin/Components/LetterPickerBar/LetterPickerBar.swift
@@ -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
+            )
+        )
     }
 }
diff --git a/Swiftfin/Views/PagingLibraryView/PagingLibraryView.swift b/Swiftfin/Views/PagingLibraryView/PagingLibraryView.swift
@@ -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)