-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Primary and Secondary button styles.
- Loading branch information
Showing
11 changed files
with
242 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| { | ||
| "colors" : [ | ||
| { | ||
| "color" : { | ||
| "color-space" : "srgb", | ||
| "components" : { | ||
| "alpha" : "1.000", | ||
| "blue" : "0.664", | ||
| "green" : "0.664", | ||
| "red" : "0.664" | ||
| } | ||
| }, | ||
| "idiom" : "universal" | ||
| }, | ||
| { | ||
| "appearances" : [ | ||
| { | ||
| "appearance" : "luminosity", | ||
| "value" : "dark" | ||
| } | ||
| ], | ||
| "color" : { | ||
| "color-space" : "srgb", | ||
| "components" : { | ||
| "alpha" : "1.000", | ||
| "blue" : "0.921", | ||
| "green" : "0.921", | ||
| "red" : "0.921" | ||
| } | ||
| }, | ||
| "idiom" : "universal" | ||
| } | ||
| ], | ||
| "info" : { | ||
| "author" : "xcode", | ||
| "version" : 1 | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| // | ||
| // ButtonStyles.swift | ||
| // MoreChess (iOS) | ||
| // | ||
| // Created by Richard Adem on 3/24/24. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| struct PrimaryButtonStyle: ButtonStyle { | ||
| @Environment(\.isEnabled) private var isEnabled | ||
|
|
||
| func makeBody(configuration: Configuration) -> some View { | ||
|
|
||
| var backgroundColor: Color { | ||
| if isEnabled == false { | ||
| // Disabled | ||
| Color.disabled | ||
| } else if configuration.isPressed { | ||
| // Highlighted, just the background changes. | ||
| Color.accentColor.opacity(StyleConstants.highlightedOpacity) | ||
| } else { | ||
| // Normal | ||
| Color.accentColor | ||
| } | ||
| } | ||
|
|
||
| configuration.label | ||
| .padding(12) | ||
| .font(StyleFont.button) | ||
| .strikethrough(isEnabled == false, color: Color.disabled) | ||
| .foregroundStyle(Color.background) | ||
| .background{ | ||
| RoundedRectangle(cornerRadius: StyleConstants.cornerRadius) | ||
| .fill(backgroundColor) | ||
| .animation(.easeOut(duration: StyleConstants.animationTime), | ||
| value: configuration.isPressed) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| struct SecondaryButtonStyle: ButtonStyle { | ||
| @Environment(\.isEnabled) private var isEnabled | ||
|
|
||
| func makeBody(configuration: Configuration) -> some View { | ||
|
|
||
| var backgroundColor: Color { | ||
| if isEnabled == false { | ||
| // Disabled | ||
| Color.disabled | ||
| } else if configuration.isPressed { | ||
| // Highlighted | ||
| Color.accentColor | ||
| } else { | ||
| // Normal | ||
| Color.accentColor | ||
| } | ||
| } | ||
|
|
||
| configuration.label | ||
| .padding(10) | ||
| .font(StyleFont.button) | ||
| .strikethrough(isEnabled == false, color: Color.disabled) | ||
| .foregroundStyle(Color.accentColor) | ||
| .background{ | ||
| RoundedRectangle(cornerRadius: StyleConstants.cornerRadius) | ||
| .stroke(backgroundColor, lineWidth: StyleConstants.lineWidth) | ||
| .animation(.easeOut(duration: StyleConstants.animationTime), | ||
| value: configuration.isPressed) | ||
| } | ||
| // Change whole button on pressed. | ||
| .opacity(configuration.isPressed ? StyleConstants.highlightedOpacity : 1.0) | ||
| } | ||
| } | ||
|
|
||
| struct SolidButtonStyle: ButtonStyle { | ||
| func makeBody(configuration: Configuration) -> some View { | ||
| configuration.label | ||
| .padding() | ||
| .background(Color.accentColor) | ||
| .foregroundStyle(Color.background) | ||
| .font(.headline) | ||
| .clipShape(Capsule()) | ||
| .scaleEffect(configuration.isPressed ? 1.2 : 1) | ||
| .animation(.easeOut(duration: StyleConstants.animationTime), value: configuration.isPressed) | ||
| } | ||
| } | ||
|
|
||
| struct FunkyButtonStyle: ButtonStyle { | ||
|
|
||
| @Environment(\.colorScheme) var colorScheme | ||
|
|
||
| fileprivate struct CurvedLine: Shape { | ||
| func path(in rect: CGRect) -> Path { | ||
| Path { path in | ||
| path.move(to: CGPoint(x: rect.minX, y: rect.minY)) | ||
| path.addQuadCurve(to: CGPoint(x: rect.maxX, y: rect.midY), | ||
| control: CGPoint(x: rect.width * 1.0, y: rect.height * -0.4)) | ||
|
|
||
| } | ||
| } | ||
| } | ||
|
|
||
| func makeBody(configuration: Configuration) -> some View { | ||
| let foregroundColor = colorScheme == .dark ? Color.foreground : Color.background | ||
|
|
||
| configuration.label | ||
| .padding() | ||
| .background(LinearGradient(gradient: Gradient(colors: [.accentColor, .black]), | ||
| startPoint: .top, | ||
| endPoint: .bottom)) | ||
| .overlay{ | ||
| VStack { | ||
| CurvedLine() | ||
| .stroke(.white, style: StrokeStyle(lineWidth: 4, lineCap: .round)) | ||
| .frame(height: 10) | ||
| .padding(.vertical, 6) | ||
| .padding(.leading, 19) | ||
| .padding(.trailing, 14) | ||
| Spacer() | ||
| } | ||
| } | ||
| .foregroundStyle(foregroundColor) | ||
| .font(.headline) | ||
| .clipShape(Capsule()) | ||
| .scaleEffect(configuration.isPressed ? 1.2 : 1) | ||
| .rotationEffect(.degrees(configuration.isPressed ? 30 : 0)) | ||
| .animation(.easeOut(duration: StyleConstants.animationTime), value: configuration.isPressed) | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| VStack { | ||
|
|
||
| Button("Button") { }.buttonStyle(PrimaryButtonStyle()) | ||
| Button("Disabled") { }.buttonStyle(PrimaryButtonStyle()) | ||
| .disabled(true) | ||
|
|
||
| Button("Button") { }.buttonStyle(SecondaryButtonStyle()) | ||
| Button("Disabled") { }.buttonStyle(SecondaryButtonStyle()) | ||
| .disabled(true) | ||
|
|
||
|
|
||
| Button("Press Me") { } | ||
| .buttonStyle(SolidButtonStyle()) | ||
|
|
||
| Button("Press Me") { } | ||
| .buttonStyle(FunkyButtonStyle()) | ||
|
|
||
| Button("Very long text for a button") { } | ||
| .buttonStyle(FunkyButtonStyle()) | ||
| } | ||
| .style() | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| // | ||
| // StyleConstants.swift | ||
| // MoreChess | ||
| // | ||
| // Created by Richard Adem on 3/26/24. | ||
| // | ||
|
|
||
| import Foundation | ||
|
|
||
| enum StyleConstants { | ||
| // Layout | ||
| static let lineWidth: CGFloat = 2 | ||
| static let highlightedOpacity: CGFloat = 0.25 | ||
| static let cornerRadius: CGFloat = 8 | ||
|
|
||
| // Animation | ||
| static let animationTime: TimeInterval = 0.2 | ||
| } |
Oops, something went wrong.