From 48f212abcd87d7942b53325c745126f182b2d773 Mon Sep 17 00:00:00 2001 From: Rizwan Mohamed Ibrahim Date: Wed, 8 Jul 2020 14:40:14 +0530 Subject: [PATCH 1/5] Add settings account header image view --- .../Accounts/AccountHeaderImageView.swift | 32 +++++++++++ .../Accounts/SettingsFeedbinAccountView.swift | 57 ++++++++----------- .../Accounts/SettingsLocalAccountView.swift | 43 ++++++-------- NetNewsWire.xcodeproj/project.pbxproj | 4 ++ 4 files changed, 75 insertions(+), 61 deletions(-) create mode 100644 Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift diff --git a/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift b/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift new file mode 100644 index 000000000..55e7683cf --- /dev/null +++ b/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift @@ -0,0 +1,32 @@ +// +// AccountHeaderImageView.swift +// Multiplatform iOS +// +// Created by Rizwan on 08/07/20. +// Copyright © 2020 Ranchero Software. All rights reserved. +// + +import SwiftUI +import RSCore + +struct AccountHeaderImageView: View { + var image: RSImage + + var body: some View { + HStack { + Spacer() + Image(rsImage: image) + .resizable() + .aspectRatio(1, contentMode: .fit) + .frame(height: 48, alignment: .center) + .padding() + Spacer() + } + } +} + +struct AccountHeaderImageView_Previews: PreviewProvider { + static var previews: some View { + AccountHeaderImageView(image: AppAssets.image(for: .onMyMac)!) + } +} diff --git a/Multiplatform/iOS/Settings/Accounts/SettingsFeedbinAccountView.swift b/Multiplatform/iOS/Settings/Accounts/SettingsFeedbinAccountView.swift index 9d320f41c..8baaec9e8 100644 --- a/Multiplatform/iOS/Settings/Accounts/SettingsFeedbinAccountView.swift +++ b/Multiplatform/iOS/Settings/Accounts/SettingsFeedbinAccountView.swift @@ -18,37 +18,39 @@ struct SettingsFeedbinAccountView: View { var body: some View { NavigationView { - List { - Section { - imageView - TextField("Email", text: $settingsModel.email).textContentType(.emailAddress) - SecureField("Password", text: $settingsModel.password) - } - Section(footer: errorFooter) { - HStack { - Spacer() - Button(action: { settingsModel.addAccount() }) { - if settingsModel.isUpdate { - Text("Update Account") - } else { - Text("Add Account") + VStack { + AccountHeaderImageView(image: AppAssets.image(for: .feedbin)!) + List { + Section { + TextField("Email", text: $settingsModel.email).textContentType(.emailAddress) + SecureField("Password", text: $settingsModel.password) + } + Section(footer: errorFooter) { + HStack { + Spacer() + Button(action: { settingsModel.addAccount() }) { + if settingsModel.isUpdate { + Text("Update Account") + } else { + Text("Add Account") + } + } + .disabled(!settingsModel.isValid) + Spacer() + if settingsModel.busy { + ProgressView() } - } - .disabled(!settingsModel.isValid) - Spacer() - if settingsModel.busy { - ProgressView() } } } + .listStyle(InsetGroupedListStyle()) + .disabled(settingsModel.busy) } .onReceive(settingsModel.$shouldDismiss, perform: { dismiss in if dismiss == true { presentationMode.wrappedValue.dismiss() } }) - .listStyle(InsetGroupedListStyle()) - .disabled(settingsModel.busy) .navigationBarTitle(Text(verbatim: "Feedbin"), displayMode: .inline) .navigationBarItems(leading: Button(action: { self.dismiss() }) { Text("Cancel") } @@ -56,19 +58,6 @@ struct SettingsFeedbinAccountView: View { } } - var imageView: some View { - HStack { - Spacer() - Image(rsImage: AppAssets.image(for: .feedbin)!) - .resizable() - .aspectRatio(1, contentMode: .fit) - .frame(height: 48, alignment: .center) - .padding() - Spacer() - } - .listRowBackground(Color.clear) - } - var errorFooter: some View { HStack { Spacer() diff --git a/Multiplatform/iOS/Settings/Accounts/SettingsLocalAccountView.swift b/Multiplatform/iOS/Settings/Accounts/SettingsLocalAccountView.swift index 40d1dc9a6..e60b52a63 100644 --- a/Multiplatform/iOS/Settings/Accounts/SettingsLocalAccountView.swift +++ b/Multiplatform/iOS/Settings/Accounts/SettingsLocalAccountView.swift @@ -15,42 +15,31 @@ struct SettingsLocalAccountView: View { var body: some View { NavigationView { - List { - Section { - imageView - HStack { - TextField("Name", text: $name) - } - } - Section { - HStack { - Spacer() - Button(action: { self.addAccount() }) { - Text("Add Account") + VStack(spacing: 0) { + AccountHeaderImageView(image: AppAssets.image(for: .onMyMac)!) + List { + Section { + HStack { + TextField("Name", text: $name) + } + } + Section { + HStack { + Spacer() + Button(action: { self.addAccount() }) { + Text("Add Account") + } + Spacer() } - Spacer() } } + .listStyle(InsetGroupedListStyle()) } - .listStyle(InsetGroupedListStyle()) .navigationBarTitle(Text(verbatim: Account.defaultLocalAccountName), displayMode: .inline) .navigationBarItems(leading: Button(action: { self.dismiss() }) { Text("Cancel") } ) } } - var imageView: some View { - HStack { - Spacer() - Image(rsImage: AppAssets.image(for: .onMyMac)!) - .resizable() - .aspectRatio(1, contentMode: .fit) - .frame(height: 48, alignment: .center) - .padding() - Spacer() - } - .listRowBackground(Color.clear) - } - private func addAccount() { let account = AccountManager.shared.createAccount(type: .onMyMac) account.name = name diff --git a/NetNewsWire.xcodeproj/project.pbxproj b/NetNewsWire.xcodeproj/project.pbxproj index e3b842e08..207079af8 100644 --- a/NetNewsWire.xcodeproj/project.pbxproj +++ b/NetNewsWire.xcodeproj/project.pbxproj @@ -670,6 +670,7 @@ 6581C74020CED60100F4AD34 /* netnewswire-subscribe-to-feed.js in Resources */ = {isa = PBXBuildFile; fileRef = 6581C73F20CED60100F4AD34 /* netnewswire-subscribe-to-feed.js */; }; 6581C74220CED60100F4AD34 /* ToolbarItemIcon.pdf in Resources */ = {isa = PBXBuildFile; fileRef = 6581C74120CED60100F4AD34 /* ToolbarItemIcon.pdf */; }; 6591720E24B59C5100B638E8 /* SettingsFeedbinAccountModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6591720D24B59C5100B638E8 /* SettingsFeedbinAccountModel.swift */; }; + 6591723124B5C35400B638E8 /* AccountHeaderImageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6591723024B5C35400B638E8 /* AccountHeaderImageView.swift */; }; 6594CA3B24AF6F2A005C7D7C /* OPMLExporter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8444C8F11FED81840051386C /* OPMLExporter.swift */; }; 65ACE48424B4779B003AE06A /* SettingsAddAccountView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65ACE48324B4779B003AE06A /* SettingsAddAccountView.swift */; }; 65ACE48624B477C9003AE06A /* SettingsAccountLabelView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65ACE48524B477C9003AE06A /* SettingsAccountLabelView.swift */; }; @@ -2085,6 +2086,7 @@ 6581C74120CED60100F4AD34 /* ToolbarItemIcon.pdf */ = {isa = PBXFileReference; lastKnownFileType = image.pdf; path = ToolbarItemIcon.pdf; sourceTree = ""; }; 6581C74320CED60100F4AD34 /* Subscribe_to_Feed.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = Subscribe_to_Feed.entitlements; sourceTree = ""; }; 6591720D24B59C5100B638E8 /* SettingsFeedbinAccountModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsFeedbinAccountModel.swift; sourceTree = ""; }; + 6591723024B5C35400B638E8 /* AccountHeaderImageView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AccountHeaderImageView.swift; sourceTree = ""; }; 65ACE48324B4779B003AE06A /* SettingsAddAccountView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsAddAccountView.swift; sourceTree = ""; }; 65ACE48524B477C9003AE06A /* SettingsAccountLabelView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsAccountLabelView.swift; sourceTree = ""; }; 65ACE48724B48020003AE06A /* SettingsLocalAccountView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsLocalAccountView.swift; sourceTree = ""; }; @@ -3145,6 +3147,7 @@ 65ACE48724B48020003AE06A /* SettingsLocalAccountView.swift */, 65ACE48924B4C2D8003AE06A /* SettingsFeedbinAccountView.swift */, 6591720D24B59C5100B638E8 /* SettingsFeedbinAccountModel.swift */, + 6591723024B5C35400B638E8 /* AccountHeaderImageView.swift */, ); path = Accounts; sourceTree = ""; @@ -4964,6 +4967,7 @@ 51E4992F24A8676400B667CB /* ArticleArray.swift in Sources */, 5177471C24B387AC00EB0F74 /* ImageScrollView.swift in Sources */, 51E498F824A8085D00B667CB /* UnreadFeed.swift in Sources */, + 6591723124B5C35400B638E8 /* AccountHeaderImageView.swift in Sources */, FF64D0E724AF53EE0084080A /* RefreshProgressModel.swift in Sources */, 51E4996A24A8762D00B667CB /* ExtractedArticle.swift in Sources */, 51919FF124AB864A00541E64 /* TimelineModel.swift in Sources */, From ea3149d5bc809681071ae788a1c301efcf57e258 Mon Sep 17 00:00:00 2001 From: Rizwan Mohamed Ibrahim Date: Wed, 8 Jul 2020 14:44:27 +0530 Subject: [PATCH 2/5] Add simplified Account Header image view without stacks --- .../Accounts/AccountHeaderImageView.swift | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift b/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift index 55e7683cf..568c012bf 100644 --- a/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift +++ b/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift @@ -11,22 +11,19 @@ import RSCore struct AccountHeaderImageView: View { var image: RSImage - - var body: some View { - HStack { - Spacer() - Image(rsImage: image) - .resizable() - .aspectRatio(1, contentMode: .fit) - .frame(height: 48, alignment: .center) - .padding() - Spacer() - } - } + + var body: some View { + Image(rsImage: image) + .resizable() + .aspectRatio(1, contentMode: .fit) + .frame(height: 48, alignment: .center) + .padding() + + } } struct AccountHeaderImageView_Previews: PreviewProvider { - static var previews: some View { + static var previews: some View { AccountHeaderImageView(image: AppAssets.image(for: .onMyMac)!) - } + } } From 8fb95f7900b48bedd7478aa02e070290d9740be4 Mon Sep 17 00:00:00 2001 From: Rizwan Mohamed Ibrahim Date: Wed, 8 Jul 2020 15:13:10 +0530 Subject: [PATCH 3/5] Fix issues with account image being stretched --- .../Accounts/AccountHeaderImageView.swift | 22 +++++++++------ .../Accounts/SettingsAccountLabelView.swift | 27 ++++++++++++++----- 2 files changed, 34 insertions(+), 15 deletions(-) diff --git a/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift b/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift index 568c012bf..5fb6b5578 100644 --- a/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift +++ b/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift @@ -11,19 +11,25 @@ import RSCore struct AccountHeaderImageView: View { var image: RSImage - + var body: some View { - Image(rsImage: image) - .resizable() - .aspectRatio(1, contentMode: .fit) - .frame(height: 48, alignment: .center) - .padding() - + HStack(alignment: .center) { + Image(rsImage: image) + .resizable() + .scaledToFit() + .frame(height: 48, alignment: .center) + .padding() + } } } struct AccountHeaderImageView_Previews: PreviewProvider { static var previews: some View { - AccountHeaderImageView(image: AppAssets.image(for: .onMyMac)!) + Group { + AccountHeaderImageView(image: AppAssets.image(for: .onMyMac)!) + AccountHeaderImageView(image: AppAssets.image(for: .feedbin)!) + AccountHeaderImageView(image: AppAssets.accountLocalPadImage) + } + } } diff --git a/Multiplatform/iOS/Settings/Accounts/SettingsAccountLabelView.swift b/Multiplatform/iOS/Settings/Accounts/SettingsAccountLabelView.swift index 39c963480..29e3faa16 100644 --- a/Multiplatform/iOS/Settings/Accounts/SettingsAccountLabelView.swift +++ b/Multiplatform/iOS/Settings/Accounts/SettingsAccountLabelView.swift @@ -17,8 +17,8 @@ struct SettingsAccountLabelView: View { HStack { Image(rsImage: accountImage!) .resizable() - .aspectRatio(1, contentMode: .fit) - .frame(height: 32) + .scaledToFit() + .frame(width: 32, height: 32) Text(verbatim: accountLabel).font(.title) } .foregroundColor(.primary).padding(4.0) @@ -27,10 +27,23 @@ struct SettingsAccountLabelView: View { struct SettingsAccountLabelView_Previews: PreviewProvider { static var previews: some View { - SettingsAccountLabelView( - accountImage: AppAssets.image(for: .onMyMac), - accountLabel: "On My Device" - ) - .previewLayout(.fixed(width: 300, height: 44)) + List { + SettingsAccountLabelView( + accountImage: AppAssets.image(for: .onMyMac), + accountLabel: "On My Device" + ) + SettingsAccountLabelView( + accountImage: AppAssets.image(for: .feedbin), + accountLabel: "Feedbin" + ) + SettingsAccountLabelView( + accountImage: AppAssets.accountLocalPadImage, + accountLabel: "On My iPad" + ) + SettingsAccountLabelView( + accountImage: AppAssets.accountLocalPhoneImage, + accountLabel: "On My iPhone" + ) + } } } From 57dbe2b8ab62d73ce5bc92e7e3187a7f8cf61d4c Mon Sep 17 00:00:00 2001 From: Rizwan Mohamed Ibrahim Date: Wed, 8 Jul 2020 16:09:49 +0530 Subject: [PATCH 4/5] Fix header image white background --- .../Accounts/SettingsFeedbinAccountView.swift | 43 +++++++++---------- .../Accounts/SettingsLocalAccountView.swift | 31 ++++++------- 2 files changed, 34 insertions(+), 40 deletions(-) diff --git a/Multiplatform/iOS/Settings/Accounts/SettingsFeedbinAccountView.swift b/Multiplatform/iOS/Settings/Accounts/SettingsFeedbinAccountView.swift index 8baaec9e8..8d9f236ff 100644 --- a/Multiplatform/iOS/Settings/Accounts/SettingsFeedbinAccountView.swift +++ b/Multiplatform/iOS/Settings/Accounts/SettingsFeedbinAccountView.swift @@ -18,34 +18,31 @@ struct SettingsFeedbinAccountView: View { var body: some View { NavigationView { - VStack { - AccountHeaderImageView(image: AppAssets.image(for: .feedbin)!) - List { - Section { - TextField("Email", text: $settingsModel.email).textContentType(.emailAddress) - SecureField("Password", text: $settingsModel.password) - } - Section(footer: errorFooter) { - HStack { - Spacer() - Button(action: { settingsModel.addAccount() }) { - if settingsModel.isUpdate { - Text("Update Account") - } else { - Text("Add Account") - } - } - .disabled(!settingsModel.isValid) - Spacer() - if settingsModel.busy { - ProgressView() + List { + Section(header: AccountHeaderImageView(image: AppAssets.image(for: .feedbin)!)) { + TextField("Email", text: $settingsModel.email).textContentType(.emailAddress) + SecureField("Password", text: $settingsModel.password) + } + Section(footer: errorFooter) { + HStack { + Spacer() + Button(action: { settingsModel.addAccount() }) { + if settingsModel.isUpdate { + Text("Update Account") + } else { + Text("Add Account") } } + .disabled(!settingsModel.isValid) + Spacer() + if settingsModel.busy { + ProgressView() + } } } - .listStyle(InsetGroupedListStyle()) - .disabled(settingsModel.busy) } + .listStyle(InsetGroupedListStyle()) + .disabled(settingsModel.busy) .onReceive(settingsModel.$shouldDismiss, perform: { dismiss in if dismiss == true { presentationMode.wrappedValue.dismiss() diff --git a/Multiplatform/iOS/Settings/Accounts/SettingsLocalAccountView.swift b/Multiplatform/iOS/Settings/Accounts/SettingsLocalAccountView.swift index e60b52a63..c7753d6ac 100644 --- a/Multiplatform/iOS/Settings/Accounts/SettingsLocalAccountView.swift +++ b/Multiplatform/iOS/Settings/Accounts/SettingsLocalAccountView.swift @@ -15,26 +15,23 @@ struct SettingsLocalAccountView: View { var body: some View { NavigationView { - VStack(spacing: 0) { - AccountHeaderImageView(image: AppAssets.image(for: .onMyMac)!) - List { - Section { - HStack { - TextField("Name", text: $name) - } - } - Section { - HStack { - Spacer() - Button(action: { self.addAccount() }) { - Text("Add Account") - } - Spacer() - } + List { + Section(header: AccountHeaderImageView(image: AppAssets.image(for: .onMyMac)!)) { + HStack { + TextField("Name", text: $name) + } + } + Section { + HStack { + Spacer() + Button(action: { self.addAccount() }) { + Text("Add Account") + } + Spacer() } } - .listStyle(InsetGroupedListStyle()) } + .listStyle(InsetGroupedListStyle()) .navigationBarTitle(Text(verbatim: Account.defaultLocalAccountName), displayMode: .inline) .navigationBarItems(leading: Button(action: { self.dismiss() }) { Text("Cancel") } ) } From 6958abb4ece3f0a43e5ccd78755c342e1a384d92 Mon Sep 17 00:00:00 2001 From: Rizwan Mohamed Ibrahim Date: Wed, 8 Jul 2020 16:10:34 +0530 Subject: [PATCH 5/5] Fix account header image alignment and foreground color --- .../iOS/Settings/Accounts/AccountHeaderImageView.swift | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift b/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift index 5fb6b5578..028df300f 100644 --- a/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift +++ b/Multiplatform/iOS/Settings/Accounts/AccountHeaderImageView.swift @@ -14,12 +14,15 @@ struct AccountHeaderImageView: View { var body: some View { HStack(alignment: .center) { + Spacer() Image(rsImage: image) .resizable() .scaledToFit() .frame(height: 48, alignment: .center) - .padding() + .foregroundColor(Color.primary) + Spacer() } + .padding(16) } } @@ -30,6 +33,5 @@ struct AccountHeaderImageView_Previews: PreviewProvider { AccountHeaderImageView(image: AppAssets.image(for: .feedbin)!) AccountHeaderImageView(image: AppAssets.accountLocalPadImage) } - } }