Backup Failed design updated
to the latest design smaller enhancements
This commit is contained in:
parent
675ef60647
commit
545df13602
22
secant/Assets.xcassets/Backgrounds/calloutBackupFailed.imageset/Contents.json
vendored
Normal file
22
secant/Assets.xcassets/Backgrounds/calloutBackupFailed.imageset/Contents.json
vendored
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"images" : [
|
||||||
|
{
|
||||||
|
"filename" : "calloutBackupFailed.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "1x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "calloutBackupFailed@2x.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "2x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "3x"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"info" : {
|
||||||
|
"author" : "xcode",
|
||||||
|
"version" : 1
|
||||||
|
}
|
||||||
|
}
|
BIN
secant/Assets.xcassets/Backgrounds/calloutBackupFailed.imageset/calloutBackupFailed.png
vendored
Normal file
BIN
secant/Assets.xcassets/Backgrounds/calloutBackupFailed.imageset/calloutBackupFailed.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 228 KiB |
BIN
secant/Assets.xcassets/Backgrounds/calloutBackupFailed.imageset/calloutBackupFailed@2x.png
vendored
Normal file
BIN
secant/Assets.xcassets/Backgrounds/calloutBackupFailed.imageset/calloutBackupFailed@2x.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 797 KiB |
|
@ -17,18 +17,18 @@ struct ValidationFailedView: View {
|
||||||
VStack {
|
VStack {
|
||||||
VStack(alignment: .center, spacing: 20) {
|
VStack(alignment: .center, spacing: 20) {
|
||||||
Text("validationFailed.title")
|
Text("validationFailed.title")
|
||||||
.font(.custom(FontFamily.Rubik.regular.name, size: 30))
|
.titleText()
|
||||||
.fixedSize(horizontal: false, vertical: true)
|
.multilineTextAlignment(.center)
|
||||||
}
|
}
|
||||||
.padding(.bottom, 20)
|
.padding(.bottom, 40)
|
||||||
|
|
||||||
CircularFrame()
|
CircularFrame()
|
||||||
.backgroundImage(
|
.backgroundImage(
|
||||||
Asset.Assets.Backgrounds.callout1.image
|
Asset.Assets.Backgrounds.calloutBackupFailed.image
|
||||||
)
|
)
|
||||||
.frame(
|
.frame(
|
||||||
width: proxy.size.width * 0.84,
|
width: circularFrameUniformSize(width: proxy.size.width, height: proxy.size.height),
|
||||||
height: proxy.size.width * 0.84
|
height: circularFrameUniformSize(width: proxy.size.width, height: proxy.size.height)
|
||||||
)
|
)
|
||||||
.badgeIcon(.error)
|
.badgeIcon(.error)
|
||||||
|
|
||||||
|
@ -37,12 +37,14 @@ struct ValidationFailedView: View {
|
||||||
VStack(alignment: .center, spacing: 40) {
|
VStack(alignment: .center, spacing: 40) {
|
||||||
VStack(alignment: .center, spacing: 20) {
|
VStack(alignment: .center, spacing: 20) {
|
||||||
Text("validationFailed.description")
|
Text("validationFailed.description")
|
||||||
.bodyText()
|
.paragraphText()
|
||||||
.fixedSize(horizontal: false, vertical: true)
|
.multilineTextAlignment(.center)
|
||||||
|
.padding(.horizontal, 30)
|
||||||
|
|
||||||
Text("validationFailed.incorrectBackupDescription")
|
Text("validationFailed.incorrectBackupDescription")
|
||||||
.bodyText()
|
.paragraphText()
|
||||||
.fixedSize(horizontal: false, vertical: true)
|
.multilineTextAlignment(.center)
|
||||||
|
.padding(.horizontal, 20)
|
||||||
}
|
}
|
||||||
|
|
||||||
Button(
|
Button(
|
||||||
|
@ -50,29 +52,64 @@ struct ValidationFailedView: View {
|
||||||
label: { Text("validationFailed.button.tryAgain") }
|
label: { Text("validationFailed.button.tryAgain") }
|
||||||
)
|
)
|
||||||
.activeButtonStyle
|
.activeButtonStyle
|
||||||
.frame(height: 60)
|
.frame(
|
||||||
|
minWidth: 0,
|
||||||
|
maxWidth: .infinity,
|
||||||
|
minHeight: 64,
|
||||||
|
maxHeight: .infinity,
|
||||||
|
alignment: .center
|
||||||
|
)
|
||||||
|
.fixedSize(horizontal: false, vertical: true)
|
||||||
|
.padding(.horizontal, 28)
|
||||||
}
|
}
|
||||||
.padding()
|
|
||||||
|
|
||||||
Spacer()
|
Spacer()
|
||||||
}
|
}
|
||||||
.frame(width: proxy.size.width)
|
|
||||||
.scrollableWhenScaledUp()
|
.scrollableWhenScaledUp()
|
||||||
}
|
}
|
||||||
.padding()
|
.padding()
|
||||||
.navigationBarBackButtonHidden(true)
|
.navigationBarHidden(true)
|
||||||
.applyErredScreenBackground()
|
.applyErredScreenBackground()
|
||||||
}
|
}
|
||||||
|
.preferredColorScheme(.light)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Following computations are necessary to handle properly sizing and positioning of elements
|
||||||
|
/// on different devices (apects). iPhone SE and iPhone 8 are similar aspect family devices
|
||||||
|
/// while iPhone X, 11, etc are different family devices, capable to use more of the space.
|
||||||
|
extension ValidationFailedView {
|
||||||
|
func circularFrameUniformSize(width: CGFloat, height: CGFloat) -> CGFloat {
|
||||||
|
var deviceMultiplier = 1.0
|
||||||
|
|
||||||
|
if width > 0.0 {
|
||||||
|
let aspect = height / width
|
||||||
|
deviceMultiplier = 1.0 + (((aspect / 1.51) - 1.0) * 2.0)
|
||||||
|
}
|
||||||
|
|
||||||
|
return width * 0.48 * deviceMultiplier
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
struct ValidationFailed_Previews: PreviewProvider {
|
struct ValidationFailed_Previews: PreviewProvider {
|
||||||
static var previews: some View {
|
static var previews: some View {
|
||||||
Group {
|
Group {
|
||||||
|
NavigationView {
|
||||||
ValidationFailedView(store: .demo)
|
ValidationFailedView(store: .demo)
|
||||||
|
}
|
||||||
|
|
||||||
|
ValidationFailedView(store: .demo)
|
||||||
|
.preferredColorScheme(.dark)
|
||||||
|
|
||||||
|
ValidationFailedView(store: .demo)
|
||||||
|
.previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
|
||||||
|
|
||||||
ValidationFailedView(store: .demo)
|
ValidationFailedView(store: .demo)
|
||||||
.environment(\.sizeCategory, .accessibilityLarge)
|
.environment(\.sizeCategory, .accessibilityLarge)
|
||||||
|
|
||||||
|
ValidationFailedView(store: .demo)
|
||||||
|
.environment(\.sizeCategory, .accessibilityLarge)
|
||||||
|
.previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,6 +30,7 @@ internal enum Asset {
|
||||||
internal static let callout3 = ImageAsset(name: "callout3")
|
internal static let callout3 = ImageAsset(name: "callout3")
|
||||||
internal static let callout4 = ImageAsset(name: "callout4")
|
internal static let callout4 = ImageAsset(name: "callout4")
|
||||||
internal static let calloutBackupFlow1 = ImageAsset(name: "calloutBackupFlow1")
|
internal static let calloutBackupFlow1 = ImageAsset(name: "calloutBackupFlow1")
|
||||||
|
internal static let calloutBackupFailed = ImageAsset(name: "calloutBackupFailed")
|
||||||
}
|
}
|
||||||
internal enum Icons {
|
internal enum Icons {
|
||||||
internal static let list = ImageAsset(name: "list")
|
internal static let list = ImageAsset(name: "list")
|
||||||
|
|
Loading…
Reference in New Issue