changeset 6:3d6f56b0d4ed

Implementing first UI layout
author Dennis Concepción Martín <dennisconcepcionmartin@gmail.com>
date Sun, 11 Jul 2021 18:03:56 +0100
parents 115fbbbee06f
children 8dad7eaac2c6
files Simoleon.xcodeproj/project.pbxproj Simoleon.xcodeproj/project.xcworkspace/xcuserdata/dennis.xcuserdatad/UserInterfaceState.xcuserstate Simoleon/Helpers/BigFlagsPair.swift Simoleon/Helpers/CurrencyRow.swift Simoleon/Helpers/FlagsPair.swift Simoleon/Helpers/MainCurrencyRow.swift Simoleon/Helpers/SearchBar.swift Simoleon/Helpers/SmallFlagsPair.swift Simoleon/Preview Content/CurrencyQuoteData.json
diffstat 9 files changed, 228 insertions(+), 84 deletions(-) [+]
line wrap: on
line diff
--- a/Simoleon.xcodeproj/project.pbxproj	Sun Jul 11 16:20:57 2021 +0100
+++ b/Simoleon.xcodeproj/project.pbxproj	Sun Jul 11 18:03:56 2021 +0100
@@ -7,13 +7,15 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
-		9555932C269B0390000FD726 /* FlagsPair.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9555932B269B0390000FD726 /* FlagsPair.swift */; };
+		9555932C269B0390000FD726 /* BigFlagsPair.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9555932B269B0390000FD726 /* BigFlagsPair.swift */; };
 		95559330269B08CE000FD726 /* MainCurrencyRow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9555932F269B08CE000FD726 /* MainCurrencyRow.swift */; };
 		95559333269B0965000FD726 /* CurrencyQuoteModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 95559332269B0965000FD726 /* CurrencyQuoteModel.swift */; };
 		95559337269B0A7B000FD726 /* CurrencyQuoteData.json in Resources */ = {isa = PBXBuildFile; fileRef = 95559336269B0A7B000FD726 /* CurrencyQuoteData.json */; };
 		9555933A269B0AB8000FD726 /* ParseJson.swift in Sources */ = {isa = PBXBuildFile; fileRef = 95559339269B0AB8000FD726 /* ParseJson.swift */; };
 		9555933D269B0E0A000FD726 /* Currencies.json in Resources */ = {isa = PBXBuildFile; fileRef = 9555933C269B0E0A000FD726 /* Currencies.json */; };
 		9555933F269B0E47000FD726 /* CurrencyModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9555933E269B0E47000FD726 /* CurrencyModel.swift */; };
+		956C28CA269B5893005A4595 /* CurrencyRow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 956C28C9269B5893005A4595 /* CurrencyRow.swift */; };
+		956C28CC269B58A0005A4595 /* SmallFlagsPair.swift in Sources */ = {isa = PBXBuildFile; fileRef = 956C28CB269B58A0005A4595 /* SmallFlagsPair.swift */; };
 		95C5B2282697752600941585 /* SimoleonApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 95C5B2272697752600941585 /* SimoleonApp.swift */; };
 		95C5B22A2697752600941585 /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 95C5B2292697752600941585 /* ContentView.swift */; };
 		95C5B22C2697752700941585 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 95C5B22B2697752700941585 /* Assets.xcassets */; };
@@ -44,13 +46,15 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
-		9555932B269B0390000FD726 /* FlagsPair.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FlagsPair.swift; sourceTree = "<group>"; };
+		9555932B269B0390000FD726 /* BigFlagsPair.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BigFlagsPair.swift; sourceTree = "<group>"; };
 		9555932F269B08CE000FD726 /* MainCurrencyRow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainCurrencyRow.swift; sourceTree = "<group>"; };
 		95559332269B0965000FD726 /* CurrencyQuoteModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CurrencyQuoteModel.swift; sourceTree = "<group>"; };
 		95559336269B0A7B000FD726 /* CurrencyQuoteData.json */ = {isa = PBXFileReference; lastKnownFileType = text.json; path = CurrencyQuoteData.json; sourceTree = "<group>"; };
 		95559339269B0AB8000FD726 /* ParseJson.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ParseJson.swift; sourceTree = "<group>"; };
 		9555933C269B0E0A000FD726 /* Currencies.json */ = {isa = PBXFileReference; lastKnownFileType = text.json; path = Currencies.json; sourceTree = "<group>"; };
 		9555933E269B0E47000FD726 /* CurrencyModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CurrencyModel.swift; sourceTree = "<group>"; };
+		956C28C9269B5893005A4595 /* CurrencyRow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CurrencyRow.swift; sourceTree = "<group>"; };
+		956C28CB269B58A0005A4595 /* SmallFlagsPair.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SmallFlagsPair.swift; sourceTree = "<group>"; };
 		95C5B2242697752600941585 /* Simoleon.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Simoleon.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		95C5B2272697752600941585 /* SimoleonApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SimoleonApp.swift; sourceTree = "<group>"; };
 		95C5B2292697752600941585 /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
@@ -197,8 +201,10 @@
 			isa = PBXGroup;
 			children = (
 				95FE659B269AFB54008745DE /* SearchBar.swift */,
-				9555932B269B0390000FD726 /* FlagsPair.swift */,
+				9555932B269B0390000FD726 /* BigFlagsPair.swift */,
+				956C28CB269B58A0005A4595 /* SmallFlagsPair.swift */,
 				9555932F269B08CE000FD726 /* MainCurrencyRow.swift */,
+				956C28C9269B5893005A4595 /* CurrencyRow.swift */,
 			);
 			path = Helpers;
 			sourceTree = "<group>";
@@ -335,11 +341,13 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				956C28CA269B5893005A4595 /* CurrencyRow.swift in Sources */,
+				956C28CC269B58A0005A4595 /* SmallFlagsPair.swift in Sources */,
 				9555933F269B0E47000FD726 /* CurrencyModel.swift in Sources */,
 				95559330269B08CE000FD726 /* MainCurrencyRow.swift in Sources */,
 				95C5B2312697752700941585 /* Persistence.swift in Sources */,
 				9555933A269B0AB8000FD726 /* ParseJson.swift in Sources */,
-				9555932C269B0390000FD726 /* FlagsPair.swift in Sources */,
+				9555932C269B0390000FD726 /* BigFlagsPair.swift in Sources */,
 				95C5B22A2697752600941585 /* ContentView.swift in Sources */,
 				95FE659C269AFB54008745DE /* SearchBar.swift in Sources */,
 				95559333269B0965000FD726 /* CurrencyQuoteModel.swift in Sources */,
Binary file Simoleon.xcodeproj/project.xcworkspace/xcuserdata/dennis.xcuserdatad/UserInterfaceState.xcuserstate has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Simoleon/Helpers/BigFlagsPair.swift	Sun Jul 11 18:03:56 2021 +0100
@@ -0,0 +1,44 @@
+//
+//  BigFlagsPair.swift
+//  Simoleon
+//
+//  Created by Dennis Concepción Martín on 11/07/2021.
+//
+
+import SwiftUI
+
+struct BigFlagsPair: View {
+    var mainCurrencyFlag: String
+    var secondaryCurrencyFlag: String
+    
+    var body: some View {
+        VStack {
+            Image(secondaryCurrencyFlag)
+                .flagModifier(80)
+            
+            Image(mainCurrencyFlag)
+                .flagModifier(80)
+                .offset(x: 40, y: -60)
+                .padding(.bottom, -60)
+                
+                
+        }
+        .padding(.trailing, 40)
+    }
+}
+extension Image {
+    func flagModifier(_ size: CGFloat) -> some View {
+        self
+            .resizable()
+            .aspectRatio(contentMode: .fill)
+            .clipShape(Circle())
+            .overlay(Circle().stroke(Color("FlagBorder"), lineWidth: 2))
+            .frame(width: size, height: size)
+    }
+}
+
+struct FlagsPair_Previews: PreviewProvider {
+    static var previews: some View {
+        BigFlagsPair(mainCurrencyFlag: "GB", secondaryCurrencyFlag: "US")
+    }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Simoleon/Helpers/CurrencyRow.swift	Sun Jul 11 18:03:56 2021 +0100
@@ -0,0 +1,68 @@
+//
+//  CurrencyRow.swift
+//  Simoleon
+//
+//  Created by Dennis Concepción Martín on 11/07/2021.
+//
+
+import SwiftUI
+
+struct CurrencyRow: View {
+    var currencyQuote: CurrencyQuoteModel
+    let currencies: [String: CurrencyModel] = parseJson("Currencies.json")
+    
+    var body: some View {
+        VStack {
+            RoundedRectangle(cornerRadius: 10)
+                .rectangleModifier(Color("Bone"), 100)
+            
+            RoundedRectangle(cornerRadius: 10)
+                .rectangleModifier(Color(.systemBackground), 100)
+                .overlay(
+                    HStack {
+                        let symbols = currencyQuote.symbol.split(separator: "/")
+                        let mainCurrencyFlag = currencies[String(symbols[0])]!.flag
+                        let SecondaryCurrencyFlag = currencies[String(symbols[1])]!.flag
+                        
+                        SmallFlagsPair(mainCurrencyFlag: mainCurrencyFlag, secondaryCurrencyFlag: SecondaryCurrencyFlag)
+                        
+                        VStack(alignment: .leading) {
+                            Text("\(String(symbols[0]))")
+                                .fontWeight(.semibold)
+                            
+                            Text("\(String(symbols[1]))")
+                                .fontWeight(.semibold)
+                        }
+                        .padding(.horizontal)
+                        
+                        VStack(alignment: .leading) {
+                            Text("Bid")
+                            Text("\(currencyQuote.bid, specifier: "%.4f")")
+                                .fontWeight(.semibold)
+                                
+                        }
+                        .padding(.trailing)
+                        
+                        VStack(alignment: .leading) {
+                            Text("Ask")
+                            Text("\(currencyQuote.ask, specifier: "%.4f")")
+                                .fontWeight(.semibold)
+                                
+                        }
+                    }
+                )
+                .offset(x: -10.0, y: -120.0)
+                .padding(.bottom, -120)
+        }
+        .padding(.leading, 10)
+        .padding(.horizontal)
+    }
+}
+
+struct CurrencyRow_Previews: PreviewProvider {
+    static var previews: some View {
+        let currencyQuote: CurrencyQuoteModel = parseJson("CurrencyQuoteData.json")
+        
+        CurrencyRow(currencyQuote: currencyQuote)
+    }
+}
--- a/Simoleon/Helpers/FlagsPair.swift	Sun Jul 11 16:20:57 2021 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,35 +0,0 @@
-//
-//  FlagsPair.swift
-//  Simoleon
-//
-//  Created by Dennis Concepción Martín on 11/07/2021.
-//
-
-import SwiftUI
-
-struct FlagsPair: View {
-    var mainCurrencyFlag: String
-    var secondaryCurrencyFlag: String
-    
-    var body: some View {
-        ZStack {
-            Image(secondaryCurrencyFlag)
-                .resizable()
-                .clipShape(Circle())
-                .overlay(Circle().stroke(Color("FlagBorder"), lineWidth: 2))
-            
-            Image(mainCurrencyFlag)
-                .resizable()
-                .clipShape(Circle())
-                .overlay(Circle().stroke(Color("FlagBorder"), lineWidth: 2))
-                .offset(x: 35.0, y: 25.0)
-        }
-    }
-}
-
-struct FlagsPair_Previews: PreviewProvider {
-    static var previews: some View {
-        FlagsPair(mainCurrencyFlag: "GB", secondaryCurrencyFlag: "US")
-            .frame(width: 100, height: 100)
-    }
-}
--- a/Simoleon/Helpers/MainCurrencyRow.swift	Sun Jul 11 16:20:57 2021 +0100
+++ b/Simoleon/Helpers/MainCurrencyRow.swift	Sun Jul 11 18:03:56 2021 +0100
@@ -12,47 +12,63 @@
     let currencies: [String: CurrencyModel] = parseJson("Currencies.json")
     
     var body: some View {
-        ZStack {
+        VStack {
             RoundedRectangle(cornerRadius: 10)
-                .strokeBorder(Color("Border"), lineWidth: 2)
-                .background(RoundedRectangle(cornerRadius: 10).foregroundColor(Color("Bone")))
-                .offset(x: 10, y: 10.0)
+                .rectangleModifier(Color("Bone"), 250)
             
             RoundedRectangle(cornerRadius: 10)
-                .strokeBorder(Color("Border"), lineWidth: 2)
-                .background(RoundedRectangle(cornerRadius: 10).foregroundColor(Color(.systemBackground)))
+                .rectangleModifier(Color(.systemBackground), 250)
                 .overlay(
                     VStack {
+                        let symbols = currencyQuote.symbol.split(separator: "/")
+                        let mainCurrencyFlag = currencies[String(symbols[0])]!.flag
+                        let SecondaryCurrencyFlag = currencies[String(symbols[1])]!.flag
                         HStack {
-                            let currencySymbols = currencyQuote.symbol.components(separatedBy: "/")
-                            let mainSymbol = currencySymbols[0]
-                            let secondarySymbol = currencySymbols[1]
-                            let mainCurrencyFlag = currencies[mainSymbol]!.flag
-                            let secondaryCurrencyFlag = currencies[secondarySymbol]!.flag
-                            FlagsPair(mainCurrencyFlag: mainCurrencyFlag, secondaryCurrencyFlag: secondaryCurrencyFlag)
-                                .frame(width: 80, height: 80)
+                        BigFlagsPair(mainCurrencyFlag: mainCurrencyFlag, secondaryCurrencyFlag: SecondaryCurrencyFlag)
                             
                             VStack(alignment: .leading) {
                                 Text("Bid")
+                                    .font(.title3)
+                                
                                 Text("\(currencyQuote.bid, specifier: "%.4f")")
+                                    .font(.title3)
                                     .fontWeight(.semibold)
                             }
-                            .padding(.leading, 55)
+                            .padding(.horizontal)
                             
                             VStack(alignment: .leading) {
                                 Text("Ask")
+                                    .font(.title3)
+                                
                                 Text("\(currencyQuote.ask, specifier: "%.4f")")
+                                    .font(.title3)
                                     .fontWeight(.semibold)
                             }
-                            .padding(.horizontal)
+                            .padding(.trailing)
                         }
+                        
+                        Text("100 \(String(symbols[0])) is worth \(currencyQuote.ask*100, specifier: "%.2f") \(String(symbols[1]))")
+                            .font(.title3)
+                            .fontWeight(.semibold)
+                            .padding()
                     }
                 )
+                .offset(x: -10, y: -270)
+                .padding(.bottom, -270)
         }
-        .frame(height: 250)
+        .padding(.leading, 10)
         .padding(.horizontal)
     }
 }
+extension RoundedRectangle {
+    func rectangleModifier(_ colour: Color, _ height: CGFloat) -> some View {
+        self
+            .strokeBorder(Color("Border"), lineWidth: 2)
+            .background(RoundedRectangle(cornerRadius: 10).foregroundColor(colour))
+            .frame(height: height)
+            
+    }
+}
 
 struct MainCurrencyRow_Previews: PreviewProvider {
     static var previews: some View {
--- a/Simoleon/Helpers/SearchBar.swift	Sun Jul 11 16:20:57 2021 +0100
+++ b/Simoleon/Helpers/SearchBar.swift	Sun Jul 11 18:03:56 2021 +0100
@@ -12,32 +12,40 @@
     @Binding var isEditing: Bool
     
     var body: some View {
-        ZStack(alignment: .leading) {
-            TextField("Search", text: $text)
-                .padding(.leading, 50)
-            
-            Image(systemName: "magnifyingglass.circle")
-                .padding(.leading)
-                .imageScale(.large)
-                .opacity(0.3)
-            
+        VStack {
+            Capsule()
+                .capsuleModifier(Color("Bone"))
+                
+            Capsule()
+                .capsuleModifier(Color(.systemBackground))
+                .overlay(
+                    ZStack(alignment: .leading) {
+                        TextField("Search", text: $text)
+                            .padding(.leading, 55)
+                            .padding(.trailing)
+                            .padding(.vertical, 25)  /// Expand tapable area
+                            .contentShape(Capsule())
+                        
+                        Image(systemName: "magnifyingglass.circle")
+                            .imageScale(.large)
+                            .opacity(0.3)
+                            .padding(.leading)
+                    }
+                )
+                .offset(x: -7, y: -90)
+                .padding(.bottom, -90)
         }
-        .padding()
-        .background(
-            ZStack {
-                Capsule()
-                    .strokeBorder(Color("Border"), lineWidth: 2)
-                    .background(Capsule().foregroundColor(Color("Bone")))
-                    .offset(x: 7.0, y: 10.0)
-                
-                Capsule()
-                    .strokeBorder(Color("Border"), lineWidth: 2)
-                    .background(Capsule().foregroundColor(Color(.systemBackground)))
-                
-                
-            }
-        )
-        .padding()
+        .padding(.leading, 7)
+        .padding(.horizontal)
+        
+    }
+}
+extension Capsule {
+    func capsuleModifier(_ colour: Color) -> some View {
+        self
+            .strokeBorder(Color("Border"), lineWidth: 2)
+            .background(Capsule().foregroundColor(colour))
+            .frame(height: 70)
     }
 }
 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Simoleon/Helpers/SmallFlagsPair.swift	Sun Jul 11 18:03:56 2021 +0100
@@ -0,0 +1,34 @@
+//
+//  SmallFlagsPair.swift
+//  Simoleon
+//
+//  Created by Dennis Concepción Martín on 11/07/2021.
+//
+
+import SwiftUI
+
+struct SmallFlagsPair: View {
+    var mainCurrencyFlag: String
+    var secondaryCurrencyFlag: String
+    
+    var body: some View {
+        VStack {
+            Image(secondaryCurrencyFlag)
+                .flagModifier(50)
+            
+            Image(mainCurrencyFlag)
+                .flagModifier(50)
+                .offset(x: 20, y: -40)
+                .padding(.bottom, -40)
+                
+                
+        }
+        .padding(.trailing, 20)
+    }
+}
+
+struct SmallFlagsPair_Previews: PreviewProvider {
+    static var previews: some View {
+        SmallFlagsPair(mainCurrencyFlag: "GB", secondaryCurrencyFlag: "US")
+    }
+}
--- a/Simoleon/Preview Content/CurrencyQuoteData.json	Sun Jul 11 16:20:57 2021 +0100
+++ b/Simoleon/Preview Content/CurrencyQuoteData.json	Sun Jul 11 18:03:56 2021 +0100
@@ -1,7 +1,8 @@
 {
-    "p": 1.18741,
-    "a": 1.18746,
-    "b": 1.18736,
+    "p": 1.39011,
+    "a": 1.39016,
+    "b": 1.39006,
     "s": "GBP/USD",
-    "t": 1625864399258
+    "t": 1625864399283
 }
+