Updated the RecordingButtonStyle button style in the Recording feature target to tint the round background color.
This commit is contained in:
@@ -2,20 +2,13 @@ import SwiftUI
|
||||
|
||||
/// The button style for the controls of a ``RecordingView``.
|
||||
///
|
||||
/// The style renders the button's label, filled with the background color of the label's color scheme, over a padded, circular red Liquid Glass
|
||||
/// background that reacts fluidly to presses, and dims the button while disabled. Both the label and its padding scale relative to the current
|
||||
/// dynamic type size.
|
||||
///
|
||||
/// By default, the label's color scheme is inverted from the environment's, so its fill contrasts with the surroundings; this behavior can be turned off
|
||||
/// through the ``init(invertStyle:)`` initializer.
|
||||
/// The style renders the button's label in the primary foreground color over a padded, circular Liquid Glass background — tinted by
|
||||
/// the color given at initialization — that reacts fluidly to presses. The whole button dims while disabled, and both the label and its
|
||||
/// padding scale relative to the current dynamic type size.
|
||||
struct RecordingButtonStyle: ButtonStyle {
|
||||
|
||||
// MARK: Properties
|
||||
|
||||
/// The color scheme of the environment.
|
||||
@Environment(\.colorScheme)
|
||||
private var colorScheme
|
||||
|
||||
/// Whether the button allows user interaction.
|
||||
@Environment(\.isEnabled)
|
||||
private var isEnabled
|
||||
@@ -28,18 +21,18 @@ struct RecordingButtonStyle: ButtonStyle {
|
||||
@ScaledMetric
|
||||
private var size = Constant.Size.button
|
||||
|
||||
/// Whether the color scheme of the button's label should be inverted from the environment's.
|
||||
private let invertStyle: Bool
|
||||
/// The color tinting the button's circular Liquid Glass background.
|
||||
private let tintColor: Color
|
||||
|
||||
// MARK: Initializers
|
||||
|
||||
/// Creates a recording button style.
|
||||
/// Creates a recording button style tinting the button's background with the given color.
|
||||
///
|
||||
/// - Parameter invertStyle: Whether the foreground style of the button's label should be inverted from the environment's.
|
||||
init(
|
||||
invertStyle: Bool = false
|
||||
/// - Parameter tintColor: The color tinting the button's circular background.
|
||||
fileprivate init(
|
||||
tintColor: Color
|
||||
) {
|
||||
self.invertStyle = invertStyle
|
||||
self.tintColor = tintColor
|
||||
}
|
||||
|
||||
// MARK: Methods
|
||||
@@ -58,14 +51,10 @@ struct RecordingButtonStyle: ButtonStyle {
|
||||
.scaledToFit()
|
||||
.padding(padding)
|
||||
.scaledToFit()
|
||||
.foregroundStyle(.windowBackground.opacity(opacity))
|
||||
.environment(
|
||||
\.colorScheme,
|
||||
colorSchemeLabel
|
||||
)
|
||||
.foregroundStyle(.primary.opacity(opacity))
|
||||
.glassEffect(
|
||||
.regular
|
||||
.tint(.red)
|
||||
.tint(tintColor)
|
||||
.interactive(),
|
||||
in: .circle
|
||||
)
|
||||
@@ -80,17 +69,6 @@ private extension RecordingButtonStyle {
|
||||
|
||||
// MARK: Computed
|
||||
|
||||
/// The color scheme for the button's label: the opposite of the environment's when ``invertStyle`` is set, the environment's otherwise.
|
||||
var colorSchemeLabel: ColorScheme {
|
||||
guard invertStyle else {
|
||||
return colorScheme
|
||||
}
|
||||
|
||||
return colorScheme == .dark
|
||||
? .light
|
||||
: .dark
|
||||
}
|
||||
|
||||
/// The opacity of the button: dimmed while disabled, fully opaque otherwise.
|
||||
var opacity: Double {
|
||||
isEnabled
|
||||
@@ -104,19 +82,18 @@ private extension RecordingButtonStyle {
|
||||
|
||||
extension ButtonStyle where Self == RecordingButtonStyle {
|
||||
|
||||
/// The button style for the controls of a ``RecordingView``, inverting the color scheme of the button's label.
|
||||
/// The button style for the controls of a ``RecordingView``, tinted red.
|
||||
static var recording: RecordingButtonStyle {
|
||||
.init()
|
||||
.init(tintColor: .red)
|
||||
}
|
||||
|
||||
/// The button style for the controls of a ``RecordingView``.
|
||||
/// The button style for the controls of a ``RecordingView``, tinted by the given color.
|
||||
///
|
||||
/// - Parameter invertStyle: Whether the color scheme of the button's label should be inverted from the environment's.
|
||||
/// - Returns: A recording button style with the given color scheme behavior.
|
||||
/// - Parameter tintColor: The color tinting the button's circular background.
|
||||
static func recording(
|
||||
invertStyle: Bool
|
||||
tintColor: Color
|
||||
) -> RecordingButtonStyle {
|
||||
.init(invertStyle: invertStyle)
|
||||
.init(tintColor: tintColor)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -154,26 +131,16 @@ private enum Constant {
|
||||
@Previewable @State
|
||||
var isDisabled: Bool = false
|
||||
|
||||
@Previewable @State
|
||||
var isStyleInverted: Bool = false
|
||||
|
||||
Button {
|
||||
// Button action closure.
|
||||
} label: {
|
||||
Image(.Icon.record)
|
||||
.resizable()
|
||||
}
|
||||
.buttonStyle(.recording(
|
||||
invertStyle: isStyleInverted
|
||||
))
|
||||
.buttonStyle(.recording)
|
||||
.disabled(isDisabled)
|
||||
.safeAreaInset(edge: .bottom) {
|
||||
VStack {
|
||||
Toggle(
|
||||
"Style inverted",
|
||||
isOn: $isStyleInverted
|
||||
)
|
||||
|
||||
Toggle(
|
||||
"Button disabled",
|
||||
isOn: $isDisabled
|
||||
|
||||
Reference in New Issue
Block a user