Merge pull request #1099 from Infomaniak/fab-scroll

feat(ThreadListView): Shrink FAB on scroll

Mail/Components/Buttons/Custom Buttons/ExtendedFAB.swift

@@ -0,0 +1,55 @@
+/*
+ Infomaniak Mail - iOS App
+ Copyright (C) 2022 Infomaniak Network SA
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import MailResources
+import SwiftUI
+
+struct ExtendedFAB: View {
+    /// Trigger a sensory feedback each time the value changes
+    @State private var didTapButton = false
+
+    let title: String
+    let icon: MailResourcesImages
+    let isExtended: Bool
+    let action: () -> Void
+
+    var body: some View {
+        Button {
+            didTapButton.toggle()
+            action()
+        } label: {
+            HStack(spacing: 0) {
+                IKIcon(size: .medium, image: icon, shapeStyle: HierarchicalShapeStyle.primary)
+
+                Text(title)
+                    .lineLimit(1)
+                    .padding(.leading, value: .small)
+                    .frame(width: isExtended ? nil : 0)
+                    .clipped()
+            }
+        }
+        .buttonStyle(.ikFloatingAppButton(isExtended: isExtended))
+        .ikSensoryFeedback(.impact(weight: .heavy), trigger: didTapButton)
+    }
+}
+
+#Preview {
+    ExtendedFAB(title: MailResourcesStrings.Localizable.buttonNewMessage, icon: MailResourcesAsset.pencil, isExtended: true) {
+        /* Preview */
+    }
+}

Mail/Components/Buttons/LoadMoreButton.swift → Mail/Components/Buttons/Custom Buttons/LoadMoreButton.swift

@@ -43,7 +43,7 @@ struct LoadMoreButton: View {
                     .id(UUID())
                     .frame(maxWidth: .infinity)
             } else if shouldDisplay {
-                MailButton(label: MailResourcesStrings.Localizable.buttonLoadMore) {
+                Button(MailResourcesStrings.Localizable.buttonLoadMore) {
                     withAnimation {
                         isLoadingMore = true
                     }
@@ -59,11 +59,11 @@ struct LoadMoreButton: View {
                         }
                     }
                 }
-                .mailButtonStyle(.smallLink)
-                .frame(alignment: .leading)
+                .buttonStyle(.ikLink())
+                .controlSize(.small)
             }
         }
-        .padding(value: .small)
+        .padding(.vertical, value: .small)
         .threadListCellAppearance()
     }
 }

Mail/Components/Buttons/ModalButtonsView.swift → Mail/Components/Buttons/Custom Buttons/ModalButtonsView.swift

@@ -32,25 +32,26 @@ struct ModalButtonsView: View {
     var secondaryButtonAction: (() -> Void)?
 
     var body: some View {
-        HStack(spacing: UIPadding.medium) {
+        HStack(spacing: 0) {
             if let secondaryButtonTitle {
-                MailButton(label: secondaryButtonTitle) {
+                Button(secondaryButtonTitle) {
                     secondaryButtonAction?()
                     dismiss()
                 }
-                .mailButtonStyle(.link)
+                .buttonStyle(.ikLink())
             }
 
-            MailButton(label: primaryButtonTitle) {
+            Button(primaryButtonTitle) {
                 Task {
                     isButtonLoading = true
                     await primaryButtonAction()
                     isButtonLoading = false
                     dismiss()
                 }
             }
+            .buttonStyle(.ikPlain)
             .disabled(!primaryButtonEnabled)
-            .mailButtonLoading(isButtonLoading)
+            .ikButtonLoading(isButtonLoading)
         }
         .frame(maxWidth: .infinity, alignment: .trailing)
     }

Mail/Components/Buttons/IKButton/ButtonStyle+Extension.swift

@@ -0,0 +1,43 @@
+/*
+ Infomaniak Mail - iOS App
+ Copyright (C) 2022 Infomaniak Network SA
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import SwiftUI
+
+extension ButtonStyle where Self == IKLinkButtonStyle {
+    static func ikLink(isInlined: Bool = false) -> IKLinkButtonStyle {
+        return IKLinkButtonStyle(isInlined: isInlined)
+    }
+}
+
+extension ButtonStyle where Self == IKPlainButtonStyle {
+    static var ikPlain: IKPlainButtonStyle {
+        return IKPlainButtonStyle()
+    }
+}
+
+extension ButtonStyle where Self == IKFloatingAppButtonStyle {
+    static func ikFloatingAppButton(isExtended: Bool) -> IKFloatingAppButtonStyle {
+        return IKFloatingAppButtonStyle(isExtended: isExtended)
+    }
+}
+
+extension ButtonStyle where Self == IKSquareButtonStyle {
+    static var ikSquare: IKSquareButtonStyle {
+        return IKSquareButtonStyle()
+    }
+}

Mail/Components/Buttons/IKButton/ButtonStyle/IKFloatingAppButtonStyle.swift

@@ -0,0 +1,117 @@
+/*
+ Infomaniak Mail - iOS App
+ Copyright (C) 2022 Infomaniak Network SA
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import MailCore
+import MailResources
+import SwiftUI
+
+struct IKFloatingAppButtonStyle: ButtonStyle {
+    @Environment(\.controlSize) private var controlSize
+    @Environment(\.ikButtonLoading) private var isLoading: Bool
+
+    let isExtended: Bool
+
+    private var size: CGFloat {
+        if controlSize == .large {
+            return UIConstants.buttonExtraLargeHeight
+        } else {
+            return UIConstants.buttonLargeHeight
+        }
+    }
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .labelStyle(.ikLabel)
+            .modifier(IKButtonLoadingModifier(isPlain: true))
+            .font(MailTextStyle.bodyMedium.font)
+            .padding(.horizontal, UIPadding.regular)
+            .frame(width: isExtended ? nil : size, height: size)
+            .modifier(IKButtonFilledModifier())
+            .modifier(IKButtonScaleAnimationModifier(isPressed: configuration.isPressed))
+            .allowsHitTesting(!isLoading)
+    }
+}
+
+#Preview {
+    NavigationView {
+        List {
+            Section("Standard Button") {
+                Button {
+                    /* Preview */
+                } label: {
+                    IKIcon(size: .medium, image: MailResourcesAsset.pencilPlain, shapeStyle: HierarchicalShapeStyle.primary)
+                }
+                .buttonStyle(.ikFloatingAppButton(isExtended: false))
+            }
+
+            Section("Extended Button") {
+                Button {
+                    /* Preview */
+                } label: {
+                    Label { Text("Lorem Ipsum") } icon: {
+                        IKIcon(size: .medium, image: MailResourcesAsset.pencilPlain, shapeStyle: .primary)
+                    }
+                }
+            }
+
+            Section("Large FAB") {
+                Button {
+                    /* Preview */
+                } label: {
+                    IKIcon(size: .medium, image: MailResourcesAsset.pencilPlain, shapeStyle: HierarchicalShapeStyle.primary)
+                }
+                .buttonStyle(.ikFloatingAppButton(isExtended: false))
+                .controlSize(.large)
+            }
+
+            Section("Loading Button") {
+                Button {
+                    /* Preview */
+                } label: {
+                    IKIcon(size: .medium, image: MailResourcesAsset.pencilPlain, shapeStyle: HierarchicalShapeStyle.primary)
+                }
+                .buttonStyle(.ikFloatingAppButton(isExtended: false))
+                .ikButtonLoading(true)
+            }
+
+            Section("Loading Extended Button") {
+                Button {
+                    /* Preview */
+                } label: {
+                    Label { Text("Lorem Ipsum") } icon: {
+                        IKIcon(size: .medium, image: MailResourcesAsset.pencilPlain, shapeStyle: .primary)
+                    }
+                }
+                .ikButtonLoading(true)
+            }
+
+            Section("Disabled Button") {
+                Button {
+                    /* Preview */
+                } label: {
+                    Label { Text("Lorem Ipsum") } icon: {
+                        IKIcon(size: .medium, image: MailResourcesAsset.pencilPlain, shapeStyle: .primary)
+                    }
+                }
+                .disabled(true)
+            }
+        }
+        .navigationTitle("Floating Action Button")
+        .buttonStyle(.ikFloatingAppButton(isExtended: true))
+    }
+}