diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift b/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift index fc530d3f1..f9c45cc71 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/Components/FeedCardNavigationLink.swift @@ -66,6 +66,7 @@ struct GridCardNavigationLink: View { viewModel.itemAppeared(item: item, searchQuery: searchQuery, dataService: dataService) } } + .aspectRatio(2.1, contentMode: .fill) .scaleEffect(scale) } } diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift b/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift index 62181c412..2be7ba9a5 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/HomeView.swift @@ -24,8 +24,8 @@ struct HomeView: View { } .accentColor(.appGrayTextContrast) } else { - GeometryReader { geo in - HomeFeedContainerView(isCompact: geo.size.width < 500, viewModel: viewModel) + GeometryReader { _ in + HomeFeedContainerView(isCompact: UIDevice.isIPhone, viewModel: viewModel) } } #elseif os(macOS) diff --git a/apple/OmnivoreKit/Sources/App/Views/LinkItemDetailView.swift b/apple/OmnivoreKit/Sources/App/Views/LinkItemDetailView.swift index 36b19523f..0d0234d29 100644 --- a/apple/OmnivoreKit/Sources/App/Views/LinkItemDetailView.swift +++ b/apple/OmnivoreKit/Sources/App/Views/LinkItemDetailView.swift @@ -186,6 +186,7 @@ struct LinkItemDetailView: View { } } + @available(macOS 12.0, *) @available(iOS 15.0, *) var navBar: some View { HStack(alignment: .center) { diff --git a/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift b/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift index f8ca2f10d..a77048444 100644 --- a/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift +++ b/apple/OmnivoreKit/Sources/App/Views/PrimaryContentView.swift @@ -4,40 +4,60 @@ import SwiftUI import Views public struct PrimaryContentView: View { + let categories = [ + PrimaryContentCategory.feed, + PrimaryContentCategory.profile + ] + public var body: some View { #if os(iOS) if UIDevice.isIPad { - regularView + splitView } else { HomeView() } #elseif os(macOS) - regularView + splitView #endif } - // ipad and mac view container - private var regularView: some View { - let categories = [ - PrimaryContentCategory.feed, - PrimaryContentCategory.profile - ] + #if os(macOS) + private var splitView: some View { + NavigationView { + // The first column is the sidebar. + PrimaryContentSidebar(categories: categories) + .navigationTitle("Categories") - return NavigationView { - // The first column is the sidebar. - PrimaryContentSidebar(categories: categories) - .navigationTitle("Categories") + // Second column is the Primary Nav Stack + PrimaryContentCategory.feed.destinationView - // Second column is the Primary Nav Stack - PrimaryContentCategory.feed.destinationView - - // Add a third column for macOS only - #if os(macOS) + // Third column is the detail view Text("Select a link from the feed") - #endif + } + .accentColor(.appGrayTextContrast) } - .accentColor(.appGrayTextContrast) - } + #endif + + #if os(iOS) + private var splitView: some View { + NavigationView { + // The first column is the sidebar. + PrimaryContentSidebar(categories: categories) + + // Second column is the Primary Nav Stack + PrimaryContentCategory.feed.destinationView + } + .accentColor(.appGrayTextContrast) + .introspectSplitViewController { + $0.preferredSplitBehavior = .tile + $0.preferredPrimaryColumnWidth = 200 + if #available(iOS 14.5, *) { + $0.presentsWithGesture = false + $0.displayModeButtonVisibility = .always + } + } + } + #endif } struct PrimaryContentSidebar: View { diff --git a/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift b/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift index 17f1c1c49..4fcb7bfea 100644 --- a/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift +++ b/apple/OmnivoreKit/Sources/Views/FeedItem/GridCard.swift @@ -59,108 +59,112 @@ public struct GridCard: View { } public var body: some View { - VStack(alignment: .leading, spacing: 16) { - // Progress Bar - Group { - // Remove os check when dropping macOS 11 - #if os(iOS) - if #available(iOS 15.0, *) { - ProgressView(value: min(abs(item.readingProgress) / 100, 1)) - .tint(.appYellow48) - .frame(maxWidth: .infinity, alignment: .leading) - } else { + GeometryReader { geo in + VStack(alignment: .leading, spacing: 16) { + // Progress Bar + Group { + // Remove os check when dropping macOS 11 + #if os(iOS) + if #available(iOS 15.0, *) { + ProgressView(value: min(abs(item.readingProgress) / 100, 1)) + .tint(.appYellow48) + .frame(maxWidth: .infinity, alignment: .leading) + } else { + ProgressView(value: max(abs(item.readingProgress) / 100, 1)) + .frame(maxWidth: .infinity, alignment: .leading) + } + #else ProgressView(value: max(abs(item.readingProgress) / 100, 1)) .frame(maxWidth: .infinity, alignment: .leading) - } - #else - ProgressView(value: max(abs(item.readingProgress) / 100, 1)) - .frame(maxWidth: .infinity, alignment: .leading) - #endif - } - .onTapGesture { tapHandler() } - - // Title, Subtitle, Menu Button - VStack(alignment: .leading, spacing: 4) { - HStack { - Text(item.title) - .font(.appHeadline) - .foregroundColor(.appGrayTextContrast) - .lineLimit(1) - .onTapGesture { tapHandler() } - Spacer() - - Menu( - content: { contextMenuView }, - label: { Image.profile } - ) - .onTapGesture { isContextMenuOpen = true } - } - - HStack { - if let author = item.author { - Text("by \(author)") - .font(.appCaptionTwo) - .foregroundColor(.appGrayText) - .lineLimit(1) - } - - if let publisherURL = item.publisherHostname { - Text(publisherURL) - .font(.appCaptionTwo) - .foregroundColor(.appGrayText) - .underline() - .lineLimit(1) - } - - Spacer() + #endif } .onTapGesture { tapHandler() } - } - .frame(height: 30) - .padding(.horizontal) - // Link description and image - HStack(alignment: .top) { - Text(item.description ?? item.title) - .font(.appFootnote) - .foregroundColor(.appGrayTextContrast) - .lineLimit(nil) - .multilineTextAlignment(.leading) - - Spacer() - - if let imageURL = item.imageURL { - AsyncImage(url: imageURL, isResizable: true) - .aspectRatio(1, contentMode: .fill) - .frame(width: 135, height: 90) - .cornerRadius(3) - } - } - .frame(height: 95) - .padding(.horizontal) - .onTapGesture { tapHandler() } - - // Category Labels - if FeatureFlag.showFeedItemTags { - ScrollView(.horizontal, showsIndicators: false) { + // Title, Subtitle, Menu Button + VStack(alignment: .leading, spacing: 4) { HStack { - TextChip(text: "label", color: .red) - TextChip(text: "longer label", color: .blue) + Text(item.title) + .font(.appHeadline) + .foregroundColor(.appGrayTextContrast) + .lineLimit(1) + .onTapGesture { tapHandler() } + Spacer() + + Menu( + content: { contextMenuView }, + label: { Image.dotsThree } + ) + .frame(width: 16, height: 16, alignment: .center) + .onTapGesture { isContextMenuOpen = true } + } + + HStack { + if let author = item.author { + Text("by \(author)") + .font(.appCaptionTwo) + .foregroundColor(.appGrayText) + .lineLimit(1) + } + + if let publisherURL = item.publisherHostname { + Text(publisherURL) + .font(.appCaptionTwo) + .foregroundColor(.appGrayText) + .underline() + .lineLimit(1) + } + Spacer() } - .frame(height: 30) - .padding(.horizontal) - .padding(.bottom, 8) + .onTapGesture { tapHandler() } } - } else { - Spacer(minLength: 8) - } - } - .background( - Color.secondarySystemGroupedBackground + .frame(height: 30) + .padding(.horizontal) + + // Link description and image + HStack(alignment: .top) { + Text(item.description ?? item.title) + .font(.appSubheadline) + .foregroundColor(.appGrayTextContrast) + .lineLimit(nil) + .multilineTextAlignment(.leading) + .frame(height: (geo.size.width * 2) / 9, alignment: .top) + + Spacer() + + if let imageURL = item.imageURL { + AsyncImage(url: imageURL, isResizable: true) + .aspectRatio(contentMode: .fill) + .frame(width: geo.size.width / 3, height: (geo.size.width * 2) / 9) + .cornerRadius(3) + } + } + .padding(.horizontal) + .padding(.bottom, 5) .onTapGesture { tapHandler() } - ) - .cornerRadius(6) - .contextMenu { contextMenuView } + + // Category Labels + if FeatureFlag.showFeedItemTags { + ScrollView(.horizontal, showsIndicators: false) { + HStack { + TextChip(text: "label", color: .red) + TextChip(text: "longer label", color: .blue) + Spacer() + } + .frame(height: 30) + .padding(.horizontal) + .padding(.bottom, 8) + } + } else { + Spacer(minLength: 8) + } + } + .background( + Color.secondarySystemGroupedBackground + .onTapGesture { tapHandler() } + ) + .cornerRadius(6) + .contextMenu { contextMenuView } + } } } diff --git a/apple/OmnivoreKit/Sources/Views/Images/Images.swift b/apple/OmnivoreKit/Sources/Views/Images/Images.swift index e612a4afa..9fbd99fe2 100644 --- a/apple/OmnivoreKit/Sources/Views/Images/Images.swift +++ b/apple/OmnivoreKit/Sources/Views/Images/Images.swift @@ -17,4 +17,5 @@ public extension Image { static var profileTab: Image { Image("_profileTab", bundle: .module) } static var profile: Image { Image("_profile", bundle: .module) } static var profileTabSelected: Image { Image("_profileTabSelected", bundle: .module) } + static var dotsThree: Image { Image("_dots-three", bundle: .module) } } diff --git a/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/Contents.json b/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/Contents.json new file mode 100644 index 000000000..aa1900a0f --- /dev/null +++ b/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/Contents.json @@ -0,0 +1,15 @@ +{ + "images" : [ + { + "filename" : "dots-three.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + }, + "properties" : { + "template-rendering-intent" : "template" + } +} diff --git a/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/dots-three.svg b/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/dots-three.svg new file mode 100644 index 000000000..f4fd68b87 --- /dev/null +++ b/apple/OmnivoreKit/Sources/Views/Images/Images.xcassets/_dots-three.imageset/dots-three.svg @@ -0,0 +1,8 @@ + + + + + + + +