From 2e49e0968dfab86aed8e5fd7017c79fd00a63a77 Mon Sep 17 00:00:00 2001 From: Francisco Gindre Date: Mon, 25 Oct 2021 12:15:02 -0300 Subject: [PATCH] Empty Chip + design guide tweaks Integrate design guide secret screen doc formatting latest tweaks remove commented code --- secant.xcodeproj/project.pbxproj | 24 ++++++ .../Background Colors/Contents.json | 6 ++ .../phraseGridDarkGray.colorset/Contents.json | 38 +++++++++ secant/Colors.xcassets/Shadow/Contents.json | 6 ++ .../buttonTextShadow.colorset/Contents.json | 29 +++++++ .../Contents.json | 38 +++++++++ secant/Generated/XCAssets+Generated.swift | 7 ++ secant/Routers/AppRouter.swift | 9 ++ secant/UI Components/Chips/BlueChip.swift | 38 +++++++++ secant/UI Components/Chips/EmptyChip.swift | 60 ++++++++++++++ .../UI Components/Chips/EnumeratedChip.swift | 83 +++++++++++++------ secant/UI Components/Chips/PhraseChip.swift | 54 ++++++++++++ secant/UI Components/DesignGuide.swift | 21 +++-- .../Extensions/View+InnerShadow.swift | 33 ++++++++ 14 files changed, 412 insertions(+), 34 deletions(-) create mode 100644 secant/Colors.xcassets/Background Colors/Contents.json create mode 100644 secant/Colors.xcassets/Background Colors/phraseGridDarkGray.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Shadow/Contents.json create mode 100644 secant/Colors.xcassets/Shadow/buttonTextShadow.colorset/Contents.json create mode 100644 secant/Colors.xcassets/Shadow/emptyChipInnerShadow.colorset/Contents.json create mode 100644 secant/UI Components/Chips/BlueChip.swift create mode 100644 secant/UI Components/Chips/EmptyChip.swift create mode 100644 secant/UI Components/Chips/PhraseChip.swift create mode 100644 secant/UI Components/Extensions/View+InnerShadow.swift diff --git a/secant.xcodeproj/project.pbxproj b/secant.xcodeproj/project.pbxproj index bac5186..9dde6e2 100644 --- a/secant.xcodeproj/project.pbxproj +++ b/secant.xcodeproj/project.pbxproj @@ -8,6 +8,8 @@ /* Begin PBXBuildFile section */ 0D170A7226BC802800EB6A46 /* Router.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D170A7126BC802800EB6A46 /* Router.swift */; }; + 0D185819272723FF0046B928 /* BlueChip.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D185818272723FF0046B928 /* BlueChip.swift */; }; + 0D18581B272728D60046B928 /* PhraseChip.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D18581A272728D60046B928 /* PhraseChip.swift */; }; 0D1922EA26BDD96A00052649 /* ViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D1922E926BDD96A00052649 /* ViewModel.swift */; }; 0D1922ED26BDE0C600052649 /* AppRouter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D1922EC26BDE0C600052649 /* AppRouter.swift */; }; 0D1922F226BDE29300052649 /* ZcashSDKStubs.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0D1922F126BDE29300052649 /* ZcashSDKStubs.swift */; }; @@ -68,6 +70,8 @@ 0DACFA9A27209FA70039EEA5 /* Roboto-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0DACFA8D27209FA70039EEA5 /* Roboto-Light.ttf */; }; 0DACFA9C27209FA70039EEA5 /* Roboto-ThinItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0DACFA8F27209FA70039EEA5 /* Roboto-ThinItalic.ttf */; }; 0DB8AA81271DC7520035BC9D /* DesignGuide.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DB8AA80271DC7520035BC9D /* DesignGuide.swift */; }; + 0DF2DC51272344E400FA31E2 /* EmptyChip.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DF2DC50272344E400FA31E2 /* EmptyChip.swift */; }; + 0DF2DC5427235E3E00FA31E2 /* View+InnerShadow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0DF2DC5327235E3E00FA31E2 /* View+InnerShadow.swift */; }; 660558E9270C7A54009D6954 /* Colors.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 660558E8270C7A54009D6954 /* Colors.xcassets */; }; 660558F7270C862F009D6954 /* Fonts+Generated.swift in Sources */ = {isa = PBXBuildFile; fileRef = 660558F5270C862F009D6954 /* Fonts+Generated.swift */; }; 660558F8270C862F009D6954 /* XCAssets+Generated.swift in Sources */ = {isa = PBXBuildFile; fileRef = 660558F6270C862F009D6954 /* XCAssets+Generated.swift */; }; @@ -103,6 +107,8 @@ /* Begin PBXFileReference section */ 0D170A7126BC802800EB6A46 /* Router.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Router.swift; sourceTree = ""; }; + 0D185818272723FF0046B928 /* BlueChip.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BlueChip.swift; sourceTree = ""; }; + 0D18581A272728D60046B928 /* PhraseChip.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PhraseChip.swift; sourceTree = ""; }; 0D1922E926BDD96A00052649 /* ViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewModel.swift; sourceTree = ""; }; 0D1922EC26BDE0C600052649 /* AppRouter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppRouter.swift; sourceTree = ""; }; 0D1922F126BDE29300052649 /* ZcashSDKStubs.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ZcashSDKStubs.swift; sourceTree = ""; }; @@ -169,6 +175,8 @@ 0DACFA8D27209FA70039EEA5 /* Roboto-Light.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Roboto-Light.ttf"; sourceTree = ""; }; 0DACFA8F27209FA70039EEA5 /* Roboto-ThinItalic.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Roboto-ThinItalic.ttf"; sourceTree = ""; }; 0DB8AA80271DC7520035BC9D /* DesignGuide.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DesignGuide.swift; sourceTree = ""; }; + 0DF2DC50272344E400FA31E2 /* EmptyChip.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EmptyChip.swift; sourceTree = ""; }; + 0DF2DC5327235E3E00FA31E2 /* View+InnerShadow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "View+InnerShadow.swift"; sourceTree = ""; }; 660558E8270C7A54009D6954 /* Colors.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Colors.xcassets; sourceTree = ""; }; 660558F5270C862F009D6954 /* Fonts+Generated.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "Fonts+Generated.swift"; sourceTree = ""; }; 660558F6270C862F009D6954 /* XCAssets+Generated.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "XCAssets+Generated.swift"; sourceTree = ""; }; @@ -415,6 +423,9 @@ isa = PBXGroup; children = ( 0D535FE1271F9476009A9E3E /* EnumeratedChip.swift */, + 0DF2DC50272344E400FA31E2 /* EmptyChip.swift */, + 0D185818272723FF0046B928 /* BlueChip.swift */, + 0D18581A272728D60046B928 /* PhraseChip.swift */, ); path = Chips; sourceTree = ""; @@ -457,6 +468,7 @@ 0DA13C9126C15E1900E3B610 /* UI Components */ = { isa = PBXGroup; children = ( + 0DF2DC5227235E1F00FA31E2 /* Extensions */, 0D535FE0271F945C009A9E3E /* Chips */, 663FAB9A271D873300E495F8 /* Buttons */, 66A0807A271993C500118B79 /* OnboardingProgressIndicator.swift */, @@ -529,6 +541,14 @@ path = Roboto; sourceTree = ""; }; + 0DF2DC5227235E1F00FA31E2 /* Extensions */ = { + isa = PBXGroup; + children = ( + 0DF2DC5327235E3E00FA31E2 /* View+InnerShadow.swift */, + ); + path = Extensions; + sourceTree = ""; + }; 660558F4270C85F7009D6954 /* Generated */ = { isa = PBXGroup; children = ( @@ -799,6 +819,7 @@ 0DA13C9826C186FF00E3B610 /* RestoreWalletScreenViewModel.swift in Sources */, 0D32283326C5877A00262533 /* BalanceScreenViewModel.swift in Sources */, 0D5D16F526E24CCF00AD33D1 /* AppError.swift in Sources */, + 0D18581B272728D60046B928 /* PhraseChip.swift in Sources */, 0DB8AA81271DC7520035BC9D /* DesignGuide.swift in Sources */, 0D32282326C586A800262533 /* HistoryScreen.swift in Sources */, 0D864A0A26E154FD00A61879 /* InitFailedScreenViewModel.swift in Sources */, @@ -811,13 +832,16 @@ 660558F7270C862F009D6954 /* Fonts+Generated.swift in Sources */, 0DA13C9726C186FF00E3B610 /* RestoreWalletScreen.swift in Sources */, 0DACFA8127208D940039EEA5 /* UInt+SuperscriptText.swift in Sources */, + 0DF2DC51272344E400FA31E2 /* EmptyChip.swift in Sources */, 0D1922EA26BDD96A00052649 /* ViewModel.swift in Sources */, 0D4E7A0926B364170058B01E /* SecantApp.swift in Sources */, 66DC733F271D88CC0053CBB6 /* StandardButtonStyle.swift in Sources */, 0D864A0926E154FD00A61879 /* InitFailedScreen.swift in Sources */, 663FABA0271D876200E495F8 /* PrimaryButton.swift in Sources */, 663FAB9C271D874D00E495F8 /* ActiveButton.swift in Sources */, + 0DF2DC5427235E3E00FA31E2 /* View+InnerShadow.swift in Sources */, 0D32281A26C5864B00262533 /* ProfileScreenViewModel.swift in Sources */, + 0D185819272723FF0046B928 /* BlueChip.swift in Sources */, 0D864A0F26E1583000A61879 /* LoadingScreenViewModel.swift in Sources */, 0DA13CA126C1955600E3B610 /* HomeScreen.swift in Sources */, 0DA13C9026C15D1D00E3B610 /* WelcomeScreenViewModel.swift in Sources */, diff --git a/secant/Colors.xcassets/Background Colors/Contents.json b/secant/Colors.xcassets/Background Colors/Contents.json new file mode 100644 index 0000000..73c0059 --- /dev/null +++ b/secant/Colors.xcassets/Background Colors/Contents.json @@ -0,0 +1,6 @@ +{ + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Background Colors/phraseGridDarkGray.colorset/Contents.json b/secant/Colors.xcassets/Background Colors/phraseGridDarkGray.colorset/Contents.json new file mode 100644 index 0000000..ecfc8c0 --- /dev/null +++ b/secant/Colors.xcassets/Background Colors/phraseGridDarkGray.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0xE3", + "green" : "0xD4", + "red" : "0xC3" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "1.000", + "green" : "1.000", + "red" : "1.000" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Shadow/Contents.json b/secant/Colors.xcassets/Shadow/Contents.json new file mode 100644 index 0000000..73c0059 --- /dev/null +++ b/secant/Colors.xcassets/Shadow/Contents.json @@ -0,0 +1,6 @@ +{ + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Shadow/buttonTextShadow.colorset/Contents.json b/secant/Colors.xcassets/Shadow/buttonTextShadow.colorset/Contents.json new file mode 100644 index 0000000..51b24ab --- /dev/null +++ b/secant/Colors.xcassets/Shadow/buttonTextShadow.colorset/Contents.json @@ -0,0 +1,29 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.200", + "blue" : "0x36", + "green" : "0x2C", + "red" : "0x27" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Colors.xcassets/Shadow/emptyChipInnerShadow.colorset/Contents.json b/secant/Colors.xcassets/Shadow/emptyChipInnerShadow.colorset/Contents.json new file mode 100644 index 0000000..0c229fb --- /dev/null +++ b/secant/Colors.xcassets/Shadow/emptyChipInnerShadow.colorset/Contents.json @@ -0,0 +1,38 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0xD6", + "green" : "0xC5", + "red" : "0xB6" + } + }, + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0xE6", + "green" : "0xE5", + "red" : "0xE0" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/secant/Generated/XCAssets+Generated.swift b/secant/Generated/XCAssets+Generated.swift index 6791c14..ebea796 100644 --- a/secant/Generated/XCAssets+Generated.swift +++ b/secant/Generated/XCAssets+Generated.swift @@ -30,6 +30,9 @@ internal enum Asset { } } internal enum Colors { + internal enum BackgroundColors { + internal static let phraseGridDarkGray = ColorAsset(name: "phraseGridDarkGray") + } internal enum Buttons { internal static let activeButton = ColorAsset(name: "ActiveButton") internal static let createButton = ColorAsset(name: "CreateButton") @@ -57,6 +60,10 @@ internal enum Asset { internal static let gradientEnd = ColorAsset(name: "gradientEnd") internal static let gradientStart = ColorAsset(name: "gradientStart") } + internal enum Shadow { + internal static let buttonTextShadow = ColorAsset(name: "buttonTextShadow") + internal static let emptyChipInnerShadow = ColorAsset(name: "emptyChipInnerShadow") + } internal enum Text { internal static let activeButtonText = ColorAsset(name: "ActiveButtonText") internal static let button = ColorAsset(name: "Button") diff --git a/secant/Routers/AppRouter.swift b/secant/Routers/AppRouter.swift index 9b0155b..246114b 100644 --- a/secant/Routers/AppRouter.swift +++ b/secant/Routers/AppRouter.swift @@ -13,6 +13,7 @@ enum AppRouterScreen { case createRestoreWallet case home case loadingFailed + case designGuide } class AppRouter: Router { @@ -28,6 +29,8 @@ class AppRouter: Router { // Add your content here NavigationView { AppRouterView(router: self) + }.onTapGesture(count: 10) { + self.screen = .designGuide } } @@ -49,6 +52,10 @@ class AppRouter: Router { @ViewBuilder func loadingFailedScreen() -> some View { Text("loading failed") } + + @ViewBuilder func designGuide() -> some View { + DesignGuide() + } } struct AppRouterView: View { @@ -56,6 +63,7 @@ struct AppRouterView: View { var body: some View { viewForScreen(router.screen) + .applyScreenBackground() } @ViewBuilder func viewForScreen(_ screen: AppRouterScreen) -> some View { @@ -64,6 +72,7 @@ struct AppRouterView: View { case .createRestoreWallet: router.createNew() case .home: router.home() case .loadingFailed: router.loadingFailedScreen() + case .designGuide: router.designGuide() } } } diff --git a/secant/UI Components/Chips/BlueChip.swift b/secant/UI Components/Chips/BlueChip.swift new file mode 100644 index 0000000..91a483e --- /dev/null +++ b/secant/UI Components/Chips/BlueChip.swift @@ -0,0 +1,38 @@ +// +// BlueChip.swift +// secant-testnet +// +// Created by Francisco Gindre on 10/25/21. +// + +import SwiftUI + +struct BlueChip: View { + var word: String + var body: some View { + Text(word) + .font(FontFamily.Rubik.regular.textStyle(.body)) + .frame( + minWidth: 0, + maxWidth: 120, + minHeight: 30, + idealHeight: 40 + ) + .foregroundColor( + Asset.Colors.Text.activeButtonText.color + ) + .padding(.horizontal, 4) + .padding(.vertical, 4) + .background( + Asset.Colors.Buttons.activeButton.color + ) + .cornerRadius(6) + } +} + +struct BlueChip_Previews: PreviewProvider { + static var previews: some View { + BlueChip(word: "negative") + .applyScreenBackground() + } +} diff --git a/secant/UI Components/Chips/EmptyChip.swift b/secant/UI Components/Chips/EmptyChip.swift new file mode 100644 index 0000000..8b7725e --- /dev/null +++ b/secant/UI Components/Chips/EmptyChip.swift @@ -0,0 +1,60 @@ +// +// EmptyChip.swift +// secant-testnet +// +// Created by Francisco Gindre on 10/22/21. +// + +import SwiftUI + +struct EmptyChip: View { + var body: some View { + RoundedRectangle(cornerRadius: 6, style: RoundedCornerStyle.continuous) + .stroke(Asset.Colors.Text.activeButtonText.color, lineWidth: 0.5) + .shadow( + color: Asset.Colors.Text.activeButtonText.color, + radius: -0.5, + x: -0.1, + y: -0.1 + ) + .innerShadow( + using: RoundedRectangle(cornerRadius: 6, style: RoundedCornerStyle.continuous), + angle: .degrees(180), + color: Asset.Colors.Shadow.emptyChipInnerShadow.color, + width: 4, + blur: 2 + ) + .frame( + minWidth: 0, + maxWidth: .infinity, + minHeight: 40, + idealHeight: 40, + maxHeight: .infinity, + alignment: .leading + ) + } +} + +struct EmptyChip_Previews: PreviewProvider { + static var previews: some View { + Group { + ZStack { + Asset.Colors.BackgroundColors.phraseGridDarkGray.color + EmptyChip() + .frame(width: 100, height: 40, alignment: .leading) + } + } + .previewLayout(.fixed(width: 200, height: 100)) + .preferredColorScheme(.light) + + Group { + ZStack { + ScreenBackground() + EmptyChip() + .frame(width: 100, height: 40, alignment: .leading) + } + } + .previewLayout(.fixed(width: 200, height: 100)) + .preferredColorScheme(.dark) + } +} diff --git a/secant/UI Components/Chips/EnumeratedChip.swift b/secant/UI Components/Chips/EnumeratedChip.swift index a3597ce..d37f76f 100644 --- a/secant/UI Components/Chips/EnumeratedChip.swift +++ b/secant/UI Components/Chips/EnumeratedChip.swift @@ -15,20 +15,20 @@ struct EnumeratedChip: View { var body: some View { NumberedText(number: index, text: text) - .frame( - minWidth: 0, - maxWidth: .infinity, - minHeight: 30, - idealHeight: 40, - maxHeight: .infinity, - alignment: .leading - ) - .padding(.horizontal, 16) - .padding(.vertical, 8) - .background( - Asset.Colors.Buttons.primaryButtonPressed.color - ) - .cornerRadius(6) + .frame( + minWidth: 0, + maxWidth: .infinity, + minHeight: 30, + idealHeight: 40, + maxHeight: .infinity, + alignment: .leading + ) + .padding(.horizontal, 16) + .padding(.vertical, 4) + .background( + Asset.Colors.Buttons.primaryButtonPressed.color + ) + .cornerRadius(6) } } @@ -43,8 +43,8 @@ struct NumberedText: View { ) .font( .custom( - FontFamily.Roboto.black.name, - size: 24 + FontFamily.Roboto.bold.name, + size: 20 ) ) + Text(" \(text)") @@ -53,14 +53,20 @@ struct NumberedText: View { ) .font( .custom( - FontFamily.Rubik.regular.name, - size: 15 + FontFamily.Rubik.medium.name, + size: 16 ) ) } var body: some View { numberedText + .shadow( + color: Asset.Colors.Shadow.buttonTextShadow.color, + radius: 1, + x: 0, + y: 1 + ) .layoutPriority(1) .fixedSize(horizontal: false, vertical: false) } @@ -78,7 +84,7 @@ struct EnumeratedChip_Previews: PreviewProvider { static var words = [ "pyramid", "negative", "page", - "crown", "secret", "zebra" + "crown", "", "zebra" ] @ViewBuilder static var grid: some View { @@ -88,44 +94,67 @@ struct EnumeratedChip_Previews: PreviewProvider { spacing: 15 ) { ForEach(Array(zip(words.indices, words)), id: \.1) { i, word in - EnumeratedChip(index: (i + 1), text: word) - .frame( - minWidth: 0, - maxWidth: .infinity, - minHeight: 30, - idealHeight: 40 - ) + if word.isEmpty { + EmptyChip() + .frame( + minWidth: 0, + maxWidth: .infinity, + minHeight: 30, + idealHeight: 40 + ) + } else { + EnumeratedChip(index: (i + 1), text: word) + .frame( + minWidth: 0, + maxWidth: .infinity, + minHeight: 30, + idealHeight: 40 + ) + } } } .padding() - .applyScreenBackground() } static var previews: some View { grid + .background(Asset.Colors.BackgroundColors.phraseGridDarkGray.color) + .previewLayout(.fixed(width: 428, height: 200)) + grid + .applyScreenBackground() + .previewLayout(.fixed(width: 428, height: 200)) + grid + .applyScreenBackground() .previewLayout(.fixed(width: 428, height: 200)) grid + .applyScreenBackground() .preferredColorScheme(.dark) .previewLayout(.fixed(width: 428, height: 200)) grid + .applyScreenBackground() .previewLayout(.fixed(width: 390, height: 200)) grid + .applyScreenBackground() .preferredColorScheme(.dark) .previewLayout(.fixed(width: 390, height: 200)) grid + .applyScreenBackground() .previewLayout(.fixed(width: 375, height: 200)) grid + .applyScreenBackground() .preferredColorScheme(.dark) .previewLayout(.fixed(width: 375, height: 200)) grid + .applyScreenBackground() .previewLayout(.fixed(width: 320, height: 200)) grid + .applyScreenBackground() .preferredColorScheme(.dark) .previewLayout(.fixed(width: 320, height: 200)) } diff --git a/secant/UI Components/Chips/PhraseChip.swift b/secant/UI Components/Chips/PhraseChip.swift new file mode 100644 index 0000000..826b456 --- /dev/null +++ b/secant/UI Components/Chips/PhraseChip.swift @@ -0,0 +1,54 @@ +// +// PhraseChip.swift +// secant-testnet +// +// Created by Francisco Gindre on 10/25/21. +// + +import SwiftUI + +struct PhraseChip: View { + enum Kind { + case empty + case unassigned(word: String) + case ordered(position: Int, word: String) + } + + @State var kind: Kind = .empty + + var body: some View { + chipFor(kind) + .frame( + minWidth: 0, + maxWidth: 120, + minHeight: 30, + idealHeight: 40 + ) + .animation(.easeIn) + } + + @ViewBuilder func chipFor(_ kind: Kind) -> some View { + switch kind { + case .empty: + EmptyChip() + case let .ordered(position, word): + EnumeratedChip(index: position, text: word) + case .unassigned(let word): + BlueChip(word: word) + } + } +} + +struct PhraseChip_Previews: PreviewProvider { + static var previews: some View { + VStack { + PhraseChip(kind: .unassigned(word: "negative")) + .frame(height: 40) + PhraseChip(kind: .empty) + .frame(height: 40) + PhraseChip(kind: .ordered(position: 23, word: "mutual")) + .frame(height: 40) + } + .applyScreenBackground() + } +} diff --git a/secant/UI Components/DesignGuide.swift b/secant/UI Components/DesignGuide.swift index 618e2fa..8f68769 100644 --- a/secant/UI Components/DesignGuide.swift +++ b/secant/UI Components/DesignGuide.swift @@ -8,12 +8,19 @@ import SwiftUI struct DesignGuide: View { + let columns: [GridItem] = [ + GridItem(.adaptive(minimum: 320, maximum: .infinity)) + ] var body: some View { - HStack { - TextAndPlaceholdersGuide() - SmallVisualElements() - ButtonGuide() + ScrollView { + LazyVGrid(columns: columns) { + TextAndPlaceholdersGuide() + SmallVisualElements() + ButtonGuide() + } } + .padding(30) + .navigationBarHidden(true) } } @@ -69,6 +76,8 @@ struct SmallVisualElements: View { .font(.caption) EnumeratedChip(index: 1, text: "Salami") .frame(width: 100, height: 40) + EmptyChip() + .frame(width: 100, height: 40) Text("shield icon") .frame(width: 76, height: 76) Text("profile icon") @@ -146,13 +155,11 @@ struct ButtonGuide: View { struct DesignGuide_Previews: PreviewProvider { static var previews: some View { DesignGuide() - .padding(30) .applyScreenBackground() .preferredColorScheme(.dark) - .previewLayout(.fixed(width: 1086, height: 1080)) + .previewLayout(.fixed(width: 420, height: 1080)) DesignGuide() - .padding(30) .applyScreenBackground() .preferredColorScheme(.light) .previewLayout(.fixed(width: 1086, height: 1080)) diff --git a/secant/UI Components/Extensions/View+InnerShadow.swift b/secant/UI Components/Extensions/View+InnerShadow.swift new file mode 100644 index 0000000..b18d8b4 --- /dev/null +++ b/secant/UI Components/Extensions/View+InnerShadow.swift @@ -0,0 +1,33 @@ +// +// View+InnerShadow.swift +// secant-testnet +// +// Created by Francisco Gindre on 10/22/21. +// + +import SwiftUI + +extension View { + /** + drops an inner shadow with the given shape in the receiving view. + Credits: https://www.hackingwithswift.com/plus/swiftui-special-effects/shadows-and-glows + */ + func innerShadow( + using shape: S, + angle: Angle = .degrees(0), + color: Color = .black, + width: CGFloat = 6, + blur: CGFloat = 6 + ) -> some View { + let finalX = CGFloat(cos(angle.radians - .pi / 2)) + let finalY = CGFloat(sin(angle.radians - .pi / 2)) + return self + .overlay( + shape + .stroke(color, lineWidth: width) + .offset(x: finalX * width * 0.6, y: finalY * width * 0.6) + .blur(radius: blur) + .mask(shape) + ) + } +}