From d8262466fe729ea0dba08654be6234f5ee46007c Mon Sep 17 00:00:00 2001 From: Valentin Perignon Date: Thu, 14 Sep 2023 09:47:55 +0200 Subject: [PATCH] feat: Smaller buttons --- Mail/Components/Buttons/MailButton.swift | 22 ++++++++------- Mail/Components/Buttons/MailButtonStyle.swift | 27 ++++++++++++++++++- Mail/Utils/FloatingActionButtonModifier.swift | 2 +- Mail/Views/Onboarding/OnboardingView.swift | 1 + .../UpdateMailboxPasswordView.swift | 1 + 5 files changed, 41 insertions(+), 12 deletions(-) diff --git a/Mail/Components/Buttons/MailButton.swift b/Mail/Components/Buttons/MailButton.swift index 45e694d33..b4bf81c3f 100644 --- a/Mail/Components/Buttons/MailButton.swift +++ b/Mail/Components/Buttons/MailButton.swift @@ -30,7 +30,7 @@ struct MailButtonFullWidthKey: EnvironmentKey { static var defaultValue = false } -struct MailButtonFloatingActionButtonKey: EnvironmentKey { +struct MailButtonMinimizeHeightKey: EnvironmentKey { static var defaultValue = false } @@ -53,9 +53,9 @@ extension EnvironmentValues { set { self[MailButtonFullWidthKey.self] = newValue } } - var mailButtonFloatingActionButton: Bool { - get { self[MailButtonFloatingActionButtonKey.self] } - set { self[MailButtonFloatingActionButtonKey.self] = newValue } + var mailButtonMinimizeHeight: Bool { + get { self[MailButtonMinimizeHeightKey.self] } + set { self[MailButtonMinimizeHeightKey.self] = newValue } } var mailButtonIconSize: CGFloat { @@ -78,8 +78,8 @@ extension View { environment(\.mailButtonFullWidth, fullWidth) } - func mailButtonFloatingActionButton(_ floatingActionButton: Bool) -> some View { - environment(\.mailButtonFloatingActionButton, floatingActionButton) + func mailButtonMinimizeHeight(_ minimize: Bool) -> some View { + environment(\.mailButtonMinimizeHeight, minimize) } func mailButtonIconSize(_ size: CGFloat) -> some View { @@ -98,7 +98,6 @@ struct MailButton: View { @Environment(\.mailButtonStyle) private var style: Style @Environment(\.mailButtonFullWidth) private var fullWidth: Bool - @Environment(\.mailButtonFloatingActionButton) private var floatingActionButton: Bool @Environment(\.mailButtonIconSize) private var iconSize: CGFloat @Environment(\.mailButtonLoading) private var loading: Bool @@ -108,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 { @@ -131,10 +134,9 @@ struct MailButton: View { .opacity(loading ? 1 : 0) } .frame(maxWidth: fullWidth ? UIConstants.componentsMaxWidth : nil) - .frame(height: fullWidth || floatingActionButton ? 56 : 40) } .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/Buttons/MailButtonStyle.swift b/Mail/Components/Buttons/MailButtonStyle.swift index 1cf031d8c..3e231709a 100644 --- a/Mail/Components/Buttons/MailButtonStyle.swift +++ b/Mail/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) @@ -39,6 +62,7 @@ struct MailButtonStyle: ButtonStyle { configuration.label .textStyle(isEnabled ? .bodyMediumOnAccent : .bodyMediumOnDisabled) .padding(.horizontal, value: .medium) + .frame(width: buttonWidth, height: buttonHeight) .background(largeBackground(configuration: configuration)) .clipShape(RoundedRectangle(cornerRadius: UIConstants.buttonsRadius)) .brightness(largeBrightness(configuration: configuration)) @@ -48,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/Utils/FloatingActionButtonModifier.swift b/Mail/Utils/FloatingActionButtonModifier.swift index 441866ed5..90a34c4ca 100644 --- a/Mail/Utils/FloatingActionButtonModifier.swift +++ b/Mail/Utils/FloatingActionButtonModifier.swift @@ -34,7 +34,7 @@ struct FloatingActionButtonModifier: ViewModifier { if isEnabled { MailButton(icon: icon, label: title, action: action) - .mailButtonFloatingActionButton(true) + .mailButtonStyle(.floatingActionButton) .padding(.trailing, value: .medium) .padding(.bottom, UIPadding.floatingButtonBottom) .modifier(snackBarAwareModifier) diff --git a/Mail/Views/Onboarding/OnboardingView.swift b/Mail/Views/Onboarding/OnboardingView.swift index 00eb5ebda..1f7896dbb 100644 --- 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/Unavailable Mailbox/UpdateMailboxPasswordView.swift b/Mail/Views/Unavailable Mailbox/UpdateMailboxPasswordView.swift index 2b753fc11..edeb297b4 100644 --- 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) }