widget design

Revises design to give articles more vertical space

Widget/Resources/Localizable.stringsdict

@@ -56,5 +56,21 @@
 			<string>+ %u more recent unread articles</string>
 		</dict>
 	</dict>
+	<key>LocalizedCount</key>
+	<dict>
+		<key>NSStringLocalizedFormatKey</key>
+		<string>%#@localized_count@</string>
+		<key>localized_count</key>
+		<dict>
+			<key>NSStringFormatSpecTypeKey</key>
+			<string>NSStringPluralRuleType</string>
+			<key>NSStringFormatValueTypeKey</key>
+			<string>u</string>
+			<key>zero</key>
+			<string>0</string>
+			<key>other</key>
+			<string>%u</string>
+		</dict>
+	</dict>
 </dict>
 </plist>

Widget/Resources/Localized.swift

@@ -10,6 +10,10 @@ import Foundation
 // swiftlint:disable explicit_type_interface function_parameter_count identifier_name line_length
 // swiftlint:disable nesting type_body_length type_name vertical_whitespace_opening_braces
 internal enum L10n {
+  /// Plural format key: "%#@localized_count@"
+  internal static func localizedCount(_ p1: Int) -> String {
+    return L10n.tr("Localizable", "LocalizedCount", p1)
+  }
   /// Your smart feeds, summarized.
   internal static let smartFeedSummaryWidgetDescription = L10n.tr("Localizable", "SmartFeedSummary_Widget_Description")
   /// Your Smart Feed Summary

Widget/Shared Views/ArticleItemView.swift

@@ -44,7 +44,7 @@ struct ArticleItemView: View {
 					}
 				}
 			})
-		}).padding(.bottom, 4)
+		})
 	}
 	
 	func thumbnail(_ data: Data?) -> UIImage {

Widget/Widget Views/StarredWidget.swift

@@ -20,28 +20,36 @@ struct StarredWidgetView : View {
 			inboxZero
 		}
 		else {
-			VStack(alignment: .leading) {
+			GeometryReader { metrics in
-				HStack(alignment: .top, spacing: 8) {
+				HStack(alignment: .top, spacing: 4) {
-					VStack {
+					VStack(alignment: .leading) {
 						starredImage
 						Spacer()
-						nnwImage
+						Text(L10n.localizedCount(entry.widgetData.currentStarredCount)).bold().font(Font.system(.footnote, design: .rounded))
+						Text(L10n.starred.lowercased()).bold().font(Font.system(.footnote).lowercaseSmallCaps()).minimumScaleFactor(0.5).lineLimit(1)
 					}
-					VStack(alignment:.leading, spacing: 2) {
+					.frame(width: metrics.size.width * 0.15)
+					.padding(.trailing, 4)
+					
+					Divider()
+					
+					VStack(alignment:.leading, spacing: 0) {
 						ForEach(0..<maxCount(), content: { i in
-							ArticleItemView(article: entry.widgetData.starredArticles[i],
+							if i != 0 {
-											deepLink: WidgetDeepLink.starredArticle(id: entry.widgetData.starredArticles[i].id).url)
+								ArticleItemView(article: entry.widgetData.starredArticles[i],
+												deepLink: WidgetDeepLink.starredArticle(id: entry.widgetData.todayArticles[i].id).url)
+									.padding(.vertical, 4)
+							} else {
+								ArticleItemView(article: entry.widgetData.unreadArticles[i],
+												deepLink: WidgetDeepLink.starredArticle(id: entry.widgetData.starredArticles[i].id).url)
+									.padding(.bottom, 4)
+							}
+							
 						})
 						Spacer()
-						HStack {
+					}.padding(.leading, 4)
-							Spacer()
+				}.padding()
-							countText
-						}
-					}
-				}
 			}
-			.padding()
-			.widgetURL(WidgetDeepLink.starred.url)
 			
 		}
 	}
@@ -61,21 +69,6 @@ struct StarredWidgetView : View {
 			.cornerRadius(4)
 	}
 	
-	var countText: some View {
-		var count = entry.widgetData.currentStarredCount
-		if family == .systemLarge {
-			count = count - 8
-		} else {
-			count = count - 3
-		}
-		if count < 0 { count = 0 }
-		let str = L10n.starredCount(count)
-		return Text(str)
-			.font(.caption2)
-			.bold()
-			.foregroundColor(.accentColor)
-	}
-	
 	func maxCount() -> Int {
 		if family == .systemLarge {
 			return entry.widgetData.currentStarredCount > 8 ? 8 : entry.widgetData.currentStarredCount

Widget/Widget Views/TodayWidget.swift

@@ -20,29 +20,36 @@ struct TodayWidgetView : View {
 			inboxZero
 		}
 		else {
-			VStack(alignment: .leading) {
+			GeometryReader { metrics in
-				HStack(alignment: .top, spacing: 8) {
+				HStack(alignment: .top, spacing: 4) {
-					VStack {
+					VStack(alignment: .leading) {
 						todayImage
 						Spacer()
-						nnwImage
+						Text(L10n.localizedCount(entry.widgetData.currentTodayCount)).bold().font(Font.system(.footnote, design: .rounded))
+						Text(L10n.today.lowercased()).bold().font(Font.system(.footnote).lowercaseSmallCaps()).minimumScaleFactor(0.5).lineLimit(1)
 					}
-					VStack(alignment:.leading, spacing: 2) {
+					.frame(width: metrics.size.width * 0.15)
+					.padding(.trailing, 4)
+					
+					Divider()
+					
+					VStack(alignment:.leading, spacing: 0) {
 						ForEach(0..<maxCount(), content: { i in
-							ArticleItemView(article: entry.widgetData.todayArticles[i],
+							if i != 0 {
-											deepLink: WidgetDeepLink.todayArticle(id: entry.widgetData.todayArticles[i].id).url)
+								ArticleItemView(article: entry.widgetData.todayArticles[i],
+												deepLink: WidgetDeepLink.todayArticle(id: entry.widgetData.todayArticles[i].id).url)
+									.padding(.vertical, 4)
+							} else {
+								ArticleItemView(article: entry.widgetData.unreadArticles[i],
+												deepLink: WidgetDeepLink.todayArticle(id: entry.widgetData.todayArticles[i].id).url)
+									.padding(.bottom, 4)
+							}
+							
 						})
 						Spacer()
-						HStack {
+					}.padding(.leading, 4)
-							Spacer()
+				}.padding()
-							countText
-						}
-					}
-				}
 			}
-			.padding()
-			.widgetURL(WidgetDeepLink.today.url)
-			
 		}
 	}
 	
@@ -61,21 +68,6 @@ struct TodayWidgetView : View {
 			.cornerRadius(4)
 	}
 	
-	var countText: some View {
-		var count = entry.widgetData.currentTodayCount
-		if family == .systemLarge {
-			count = count - 8
-		} else {
-			count = count - 3
-		}
-		if count < 0 { count = 0 }
-		let str = L10n.todayCount(count)
-		return Text(str)
-			.font(.caption2)
-			.bold()
-			.foregroundColor(.accentColor)
-	}
-	
 	func maxCount() -> Int {
 		if family == .systemLarge {
 			return entry.widgetData.todayArticles.count > 8 ? 8 : entry.widgetData.todayArticles.count

Widget/Widget Views/UnreadWidget.swift

@@ -20,28 +20,36 @@ struct UnreadWidgetView : View {
 			inboxZero
 		}
 		else {
-			VStack(alignment: .leading) {
+			GeometryReader { metrics in
-				HStack(alignment: .top, spacing: 8) {
+				HStack(alignment: .top, spacing: 4) {
-					VStack {
+					VStack(alignment: .leading) {
 						unreadImage
 						Spacer()
-						nnwImage
+						Text(L10n.localizedCount(entry.widgetData.currentUnreadCount)).bold().font(Font.system(.footnote, design: .rounded))
+						Text(L10n.unread.lowercased()).bold().font(Font.system(.footnote).lowercaseSmallCaps()).minimumScaleFactor(0.5).lineLimit(1)
 					}
-					VStack(alignment:.leading, spacing: 2) {
+					.frame(width: metrics.size.width * 0.15)
+					.padding(.trailing, 4)
+					
+					Divider()
+					
+					VStack(alignment:.leading, spacing: 0) {
 						ForEach(0..<maxCount(), content: { i in
-							ArticleItemView(article: entry.widgetData.unreadArticles[i],
+							if i != 0 {
-											deepLink: WidgetDeepLink.unreadArticle(id: entry.widgetData.unreadArticles[i].id).url)
+								ArticleItemView(article: entry.widgetData.unreadArticles[i],
+												deepLink: WidgetDeepLink.unreadArticle(id: entry.widgetData.unreadArticles[i].id).url)
+									.padding(.vertical, 4)
+							} else {
+								ArticleItemView(article: entry.widgetData.unreadArticles[i],
+												deepLink: WidgetDeepLink.unreadArticle(id: entry.widgetData.unreadArticles[i].id).url)
+									.padding(.bottom, 4)
+							}
+							
 						})
 						Spacer()
-						HStack {
+					}.padding(.leading, 4)
-							Spacer()
+				}.padding()
-							countText
-						}
-					}
-				}
 			}
-			.padding()
-			.widgetURL(WidgetDeepLink.unread.url)
 		}
 	}
 	
@@ -60,21 +68,6 @@ struct UnreadWidgetView : View {
 			.cornerRadius(4)
 	}
 	
-	var countText: some View {
-		var count = entry.widgetData.currentUnreadCount
-		if family == .systemLarge {
-			count = count - 8
-		} else {
-			count = count - 3
-		}
-		if count < 0 { count = 0 }
-		let str = L10n.unreadCount(count)
-		return Text(str)
-			.font(.caption2)
-			.bold()
-			.foregroundColor(.accentColor)
-	}
-	
 	func maxCount() -> Int {
 		if family == .systemLarge {
 			return entry.widgetData.unreadArticles.count > 8 ? 8 : entry.widgetData.unreadArticles.count