Merge pull request #979 from Infomaniak/update-buttons-style

feat: Update MailButton with fixed height
Infomaniak · Sep 14, 2023 · 8d1e975 · 8d1e975
2 parents eb1ed03 + d826246
commit 8d1e975
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 11 deletions.
diff --git a/Mail/Components/MailButton.swift → Mail/Components/Buttons/MailButton.swift b/Mail/Components/MailButton.swift → Mail/Components/Buttons/MailButton.swift
@@ -30,6 +30,10 @@ struct MailButtonFullWidthKey: EnvironmentKey {
     static var defaultValue = false
 }
 
+struct MailButtonMinimizeHeightKey: EnvironmentKey {
+    static var defaultValue = false
+}
+
 struct MailButtonIconSizeKey: EnvironmentKey {
     static var defaultValue: CGFloat = UIConstants.buttonsIconSize
 }
@@ -49,6 +53,11 @@ extension EnvironmentValues {
         set { self[MailButtonFullWidthKey.self] = newValue }
     }
 
+    var mailButtonMinimizeHeight: Bool {
+        get { self[MailButtonMinimizeHeightKey.self] }
+        set { self[MailButtonMinimizeHeightKey.self] = newValue }
+    }
+
     var mailButtonIconSize: CGFloat {
         get { self[MailButtonIconSizeKey.self] }
         set { self[MailButtonIconSizeKey.self] = newValue }
@@ -69,6 +78,10 @@ extension View {
         environment(\.mailButtonFullWidth, fullWidth)
     }
 
+    func mailButtonMinimizeHeight(_ minimize: Bool) -> some View {
+        environment(\.mailButtonMinimizeHeight, minimize)
+    }
+
     func mailButtonIconSize(_ size: CGFloat) -> some View {
         environment(\.mailButtonIconSize, size)
     }
@@ -94,7 +107,11 @@ struct MailButton: View {
     let action: () -> Void
 
     enum Style {
-        case large, link, smallLink, destructive
+        case floatingActionButton, large, link, smallLink, destructive
+    }
+
+    private var iconOnlyButton: Bool {
+        return label == nil
     }
 
     var body: some View {
@@ -106,7 +123,6 @@ struct MailButton: View {
                             .resizable()
                             .scaledToFit()
                             .frame(width: iconSize, height: iconSize)
-                            .padding(.vertical, 2)
                     }
                     if let label {
                         Text(label)
@@ -120,7 +136,7 @@ struct MailButton: View {
             .frame(maxWidth: fullWidth ? UIConstants.componentsMaxWidth : nil)
         }
         .disabled(loading || !isEnabled)
-        .buttonStyle(MailButtonStyle(style: style))
+        .buttonStyle(MailButtonStyle(style: style, iconOnlyButton: iconOnlyButton))
         .animation(.easeOut(duration: 0.25), value: isEnabled)
     }
 }

diff --git a/Mail/Components/MailButtonStyle.swift → .../Components/Buttons/MailButtonStyle.swift b/Mail/Components/MailButtonStyle.swift → .../Components/Buttons/MailButtonStyle.swift
@@ -24,11 +24,34 @@ struct MailButtonStyle: ButtonStyle {
     @Environment(\.colorScheme) private var colorScheme
     @Environment(\.isEnabled) private var isEnabled
 
+    @Environment(\.mailButtonFullWidth) private var fullWidth: Bool
+    @Environment(\.mailButtonMinimizeHeight) private var minimizeHeight: Bool
+
     let style: MailButton.Style
+    let iconOnlyButton: Bool
+
+    private var buttonHeight: CGFloat? {
+        guard !minimizeHeight else { return nil }
+
+        if style == .floatingActionButton {
+            return iconOnlyButton ? 64 : 56
+        } else if fullWidth {
+            return 56
+        } else {
+            return 40
+        }
+    }
+
+    private var buttonWidth: CGFloat? {
+        if style == .floatingActionButton && iconOnlyButton {
+            return 64
+        }
+        return nil
+    }
 
     func makeBody(configuration: Configuration) -> some View {
         switch style {
-        case .large:
+        case .large, .floatingActionButton:
             largeStyle(configuration: configuration)
         case .link, .smallLink, .destructive:
             linkStyle(configuration: configuration)
@@ -38,8 +61,8 @@ struct MailButtonStyle: ButtonStyle {
     @ViewBuilder private func largeStyle(configuration: Configuration) -> some View {
         configuration.label
             .textStyle(isEnabled ? .bodyMediumOnAccent : .bodyMediumOnDisabled)
-            .padding(.vertical, 18)
-            .padding(.horizontal, 20)
+            .padding(.horizontal, value: .medium)
+            .frame(width: buttonWidth, height: buttonHeight)
             .background(largeBackground(configuration: configuration))
             .clipShape(RoundedRectangle(cornerRadius: UIConstants.buttonsRadius))
             .brightness(largeBrightness(configuration: configuration))
@@ -49,6 +72,7 @@ struct MailButtonStyle: ButtonStyle {
         configuration.label
             .textStyle(linkTextStyle())
             .opacity(configuration.isPressed ? 0.7 : 1)
+            .frame(width: buttonWidth, height: buttonHeight)
     }
 
     private func largeBackground(configuration: Configuration) -> Color {

diff --git a/Mail/Components/ModalButtonsView.swift → ...Components/Buttons/ModalButtonsView.swift b/Mail/Components/ModalButtonsView.swift → ...Components/Buttons/ModalButtonsView.swift
diff --git a/Mail/Utils/FloatingActionButtonModifier.swift b/Mail/Utils/FloatingActionButtonModifier.swift
@@ -34,7 +34,8 @@ struct FloatingActionButtonModifier: ViewModifier {
 
             if isEnabled {
                 MailButton(icon: icon, label: title, action: action)
-                    .padding(.trailing, 24)
+                    .mailButtonStyle(.floatingActionButton)
+                    .padding(.trailing, value: .medium)
                     .padding(.bottom, UIPadding.floatingButtonBottom)
                     .modifier(snackBarAwareModifier)
                     .accessibilityLabel(title)

diff --git a/Mail/Views/Onboarding/OnboardingView.swift b/Mail/Views/Onboarding/OnboardingView.swift
@@ -222,6 +222,7 @@ struct OnboardingView: View {
                         }
                     }
                     .mailButtonIconSize(24)
+                    .mailButtonStyle(.floatingActionButton)
                 }
             }
             .padding(.horizontal, value: .medium)

diff --git a/Mail/Views/Switch User/AccountView.swift b/Mail/Views/Switch User/AccountView.swift
@@ -106,7 +106,7 @@ struct AccountView: View {
                 .mailButtonStyle(.destructive)
             }
             .padding(.horizontal, value: .medium)
-            .padding(.bottom, value: .medium)
+            .padding(.bottom, value: .regular)
         }
         .navigationBarTitle(MailResourcesStrings.Localizable.titleMyAccount, displayMode: .inline)
         .backButtonDisplayMode(.minimal)

diff --git a/Mail/Views/Switch User/AddMailboxView.swift b/Mail/Views/Switch User/AddMailboxView.swift
@@ -117,7 +117,8 @@ struct AddMailboxView: View {
             .mailButtonLoading(isButtonLoading)
             .mailButtonFullWidth(true)
             .disabled(buttonDisabled)
-            .padding(value: .medium)
+            .padding(.horizontal, value: .medium)
+            .padding(.bottom, value: .regular)
         }
         .navigationBarTitle(MailResourcesStrings.Localizable.attachMailboxTitle, displayMode: .inline)
     }

diff --git a/Mail/Views/Switch User/CreateAccountView.swift b/Mail/Views/Switch User/CreateAccountView.swift
@@ -77,7 +77,7 @@ struct CreateAccountView: View {
             }
             .mailButtonFullWidth(true)
             .mailButtonLoading(loginHandler.isLoading)
-            .padding(.bottom, value: .medium)
+            .padding(.bottom, value: .regular)
         }
         .padding(.horizontal, value: .medium)
         .sheet(isPresented: $isPresentingCreateAccount) {

diff --git a/Mail/Views/Unavailable Mailbox/UpdateMailboxPasswordView.swift b/Mail/Views/Unavailable Mailbox/UpdateMailboxPasswordView.swift
@@ -56,6 +56,7 @@ struct UpdateMailboxPasswordView: View {
                         isShowingDetachMailboxAlertView = true
                     }
                     .mailButtonStyle(.link)
+                    .mailButtonMinimizeHeight(true)
                     .disabled(isLoading)
                 }
 

diff --git a/MailCore/UI/UIPadding.swift b/MailCore/UI/UIPadding.swift
@@ -52,7 +52,7 @@ public extension UIPadding {
     // MARK: OnBoarding
 
     static let onBoardingLogoTop = medium
-    static let onBoardingBottomButtons = medium
+    static let onBoardingBottomButtons = regular
 
     // MARK: Menu