arrow animation & fix for section title (#209)

* fix: contains next fixes: * on tap on current element in dropdown view hide the dropdown view without refreshing of content * added rotation animation for expandable cell arrow and for dropdown title arrow * set line limit for courseDropdownTitle to 1 line and added paddings * fix: hide dropdown when user is scrolling
openedx · Dec 18, 2023 · f81aefa · f81aefa
1 parent e58a7cd
commit f81aefa
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 27 deletions.
diff --git a/Course/Course/Presentation/Outline/CourseExpandableContentView.swift b/Course/Course/Presentation/Outline/CourseExpandableContentView.swift
@@ -50,14 +50,9 @@ struct CourseExpandableContentView: View {
                 .lineLimit(1)
                 .foregroundColor(Theme.Colors.textPrimary)
             Spacer()
-            if isExpanded {
-                Image(systemName: "chevron.right")
-                    .foregroundColor(Theme.Colors.accentColor)
-                    .rotationEffect(.degrees(90))
-            } else {
-                Image(systemName: "chevron.right")
-                    .foregroundColor(Theme.Colors.accentColor)
-            }
+            Image(systemName: "chevron.right")
+                .foregroundColor(Theme.Colors.accentColor)
+                .dropdownArrowRotationAnimation(value: isExpanded)
         }
         .padding(.horizontal, 30)
         .padding(.vertical, 15)

diff --git a/Course/Course/Presentation/Unit/CourseUnitView.swift b/Course/Course/Presentation/Unit/CourseUnitView.swift
@@ -296,21 +296,26 @@ public struct CourseUnitView: View {
                             }
                         }
                         VStack {
-                            NavigationBar(
-                                title: isDropdownActive ? sequenceTitle : "",
-                                leftButtonAction: {
-                                    viewModel.router.back()
-                                    playerStateSubject.send(VideoPlayerState.kill)
-                                }).padding(.top, isHorizontal ? 10 : 0)
+                            Group {
+                                NavigationBar(
+                                    title: isDropdownActive ? sequenceTitle : "",
+                                    leftButtonAction: {
+                                        viewModel.router.back()
+                                        playerStateSubject.send(VideoPlayerState.kill)
+                                    })
+                                .padding(.top, isHorizontal ? 10 : 0)
                                 .padding(.leading, isHorizontal ? -16 : 0)
-                            if isDropdownActive {
-                                CourseUnitDropDownTitle(
-                                    title: unitTitle,
-                                    isAvailable: isDropdownAvailable,
-                                    showDropdown: $showDropdown)
-                                .padding(.top, 0)
-                                .offset(y: -25)
+                                if isDropdownActive {
+                                    CourseUnitDropDownTitle(
+                                        title: unitTitle,
+                                        isAvailable: isDropdownAvailable,
+                                        showDropdown: $showDropdown)
+                                    .padding(.top, 0)
+                                    .padding(.horizontal, 48)
+                                    .offset(y: -25)
+                                }
                             }
+                            .padding(.trailing, isHorizontal ? 215 : 0)
                             Spacer()
                         }
                         HStack(alignment: .center) {

diff --git a/Course/Course/Presentation/Unit/Subviews/DropdownList/CourseUnitDropDownTitle.swift b/Course/Course/Presentation/Unit/Subviews/DropdownList/CourseUnitDropDownTitle.swift
@@ -22,19 +22,17 @@ struct CourseUnitDropDownTitle: View {
                 HStack {
                     Text(title)
                         .opacity(showDropdown ? 0.7 : 1.0)
+                        .lineLimit(1)
                     if isAvailable {
-                        if showDropdown {
-                            Image(systemName: "chevron.right")
-                                .rotationEffect(.degrees(90))
-                        } else {
-                            Image(systemName: "chevron.right")
-                        }
+                        Image(systemName: "chevron.right")
+                            .dropdownArrowRotationAnimation(value: showDropdown)
                     }
                 }
             }
             .buttonStyle(.plain)
         } else {
             Text(title)
+                .lineLimit(1)
         }
     }
 }

diff --git a/Course/Course/Presentation/Unit/Subviews/DropdownList/CourseUnitVerticalsDropdownView.swift b/Course/Course/Presentation/Unit/Subviews/DropdownList/CourseUnitVerticalsDropdownView.swift
@@ -22,6 +22,12 @@ struct CourseUnitVerticalsDropdownView: View {
                 .onTapGesture {
                     showDropdown.toggle()
                 }
+                .simultaneousGesture(
+                    DragGesture()
+                        .onChanged { _ in
+                            if showDropdown { showDropdown.toggle() }
+                        }
+                )
             CourseUnitDropDownList(content: {
                 ForEach(verticals, id: \.id) { vertical in
                     let isLast = verticals.last?.id == vertical.id
@@ -31,6 +37,10 @@ struct CourseUnitVerticalsDropdownView: View {
                         isLast: isLast,
                         isSelected: isSelected
                     ) {
+                        if isSelected {
+                            showDropdown.toggle()
+                            return
+                        }
                         action(vertical)
                     }
                 }

diff --git a/Course/Course/Presentation/Unit/Subviews/DropdownList/DropdownAnimationModifier.swift b/Course/Course/Presentation/Unit/Subviews/DropdownList/DropdownAnimationModifier.swift
@@ -20,8 +20,21 @@ struct DropdownAnimationModifier<V>: ViewModifier where V: Equatable {
     }
 }
 
+struct DropdownArrowRotationModifier: ViewModifier {
+    var value: Bool
+    func body(content: Content) -> some View {
+        content
+            .rotationEffect(value ? .degrees(90) : .degrees(0))
+            .animation(.easeOut(duration: 0.2), value: value)
+    }
+}
+
 extension View {
     func dropdownAnimation<V>(isActive: Bool, value: V) -> some View where V: Equatable {
         modifier(DropdownAnimationModifier(isActive: isActive, value: value))
     }
+
+    func dropdownArrowRotationAnimation(value: Bool) -> some View {
+        modifier(DropdownArrowRotationModifier(value: value))
+    }
 }