From 5f0a6fa8b9cd80ddc3727baf74a6cf0822e4c026 Mon Sep 17 00:00:00 2001 From: Valentin Perignon Date: Wed, 13 Sep 2023 14:53:21 +0200 Subject: [PATCH 1/3] feat: Set button correct height --- Mail/Components/{ => Buttons}/MailButton.swift | 16 +++++++++++++++- .../{ => Buttons}/MailButtonStyle.swift | 3 +-- .../{ => Buttons}/ModalButtonsView.swift | 0 Mail/Utils/FloatingActionButtonModifier.swift | 3 ++- 4 files changed, 18 insertions(+), 4 deletions(-) rename Mail/Components/{ => Buttons}/MailButton.swift (89%) rename Mail/Components/{ => Buttons}/MailButtonStyle.swift (97%) rename Mail/Components/{ => Buttons}/ModalButtonsView.swift (100%) diff --git a/Mail/Components/MailButton.swift b/Mail/Components/Buttons/MailButton.swift similarity index 89% rename from Mail/Components/MailButton.swift rename to Mail/Components/Buttons/MailButton.swift index db6681ef1..45e694d33 100644 --- a/Mail/Components/MailButton.swift +++ b/Mail/Components/Buttons/MailButton.swift @@ -30,6 +30,10 @@ struct MailButtonFullWidthKey: EnvironmentKey { static var defaultValue = false } +struct MailButtonFloatingActionButtonKey: 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 mailButtonFloatingActionButton: Bool { + get { self[MailButtonFloatingActionButtonKey.self] } + set { self[MailButtonFloatingActionButtonKey.self] = newValue } + } + var mailButtonIconSize: CGFloat { get { self[MailButtonIconSizeKey.self] } set { self[MailButtonIconSizeKey.self] = newValue } @@ -69,6 +78,10 @@ extension View { environment(\.mailButtonFullWidth, fullWidth) } + func mailButtonFloatingActionButton(_ floatingActionButton: Bool) -> some View { + environment(\.mailButtonFloatingActionButton, floatingActionButton) + } + func mailButtonIconSize(_ size: CGFloat) -> some View { environment(\.mailButtonIconSize, size) } @@ -85,6 +98,7 @@ 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 @@ -106,7 +120,6 @@ struct MailButton: View { .resizable() .scaledToFit() .frame(width: iconSize, height: iconSize) - .padding(.vertical, 2) } if let label { Text(label) @@ -118,6 +131,7 @@ 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)) diff --git a/Mail/Components/MailButtonStyle.swift b/Mail/Components/Buttons/MailButtonStyle.swift similarity index 97% rename from Mail/Components/MailButtonStyle.swift rename to Mail/Components/Buttons/MailButtonStyle.swift index 47d3c51a6..1cf031d8c 100644 --- a/Mail/Components/MailButtonStyle.swift +++ b/Mail/Components/Buttons/MailButtonStyle.swift @@ -38,8 +38,7 @@ 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) .background(largeBackground(configuration: configuration)) .clipShape(RoundedRectangle(cornerRadius: UIConstants.buttonsRadius)) .brightness(largeBrightness(configuration: configuration)) diff --git a/Mail/Components/ModalButtonsView.swift b/Mail/Components/Buttons/ModalButtonsView.swift similarity index 100% rename from Mail/Components/ModalButtonsView.swift rename to Mail/Components/Buttons/ModalButtonsView.swift diff --git a/Mail/Utils/FloatingActionButtonModifier.swift b/Mail/Utils/FloatingActionButtonModifier.swift index 2883d9cee..441866ed5 100644 --- 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) + .mailButtonFloatingActionButton(true) + .padding(.trailing, value: .medium) .padding(.bottom, UIPadding.floatingButtonBottom) .modifier(snackBarAwareModifier) .accessibilityLabel(title) From da619e3779b511fd081cb01d89d4951666cd8028 Mon Sep 17 00:00:00 2001 From: Valentin Perignon Date: Wed, 13 Sep 2023 15:21:32 +0200 Subject: [PATCH 2/3] feat: Update buttons padding bottom --- Mail/Views/Switch User/AccountView.swift | 2 +- Mail/Views/Switch User/AddMailboxView.swift | 3 ++- Mail/Views/Switch User/CreateAccountView.swift | 2 +- MailCore/UI/UIPadding.swift | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/Mail/Views/Switch User/AccountView.swift b/Mail/Views/Switch User/AccountView.swift index 287ccd733..dc3ca1789 100644 --- 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 index 368b1cecf..4adde259e 100644 --- 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 index c15fb0975..2872898e5 100644 --- 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/MailCore/UI/UIPadding.swift b/MailCore/UI/UIPadding.swift index d2d9619e9..9f4461311 100644 --- 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 From d8262466fe729ea0dba08654be6234f5ee46007c Mon Sep 17 00:00:00 2001 From: Valentin Perignon Date: Thu, 14 Sep 2023 09:47:55 +0200 Subject: [PATCH 3/3] 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) }