Add secondary column when screen is wide enough

This commit is contained in:
Thomas Ricouard 2023-01-29 16:45:58 +01:00
parent 243cbcbc41
commit 497c2a1fe1
5 changed files with 57 additions and 42 deletions

View file

@ -94,22 +94,32 @@ struct IceCubesApp: App {
popToRootTab: $popToRootTab, popToRootTab: $popToRootTab,
tabs: availableTabs, tabs: availableTabs,
routerPath: sidebarRouterPath) { routerPath: sidebarRouterPath) {
ZStack { GeometryReader { proxy in
if selectedTab == .profile { HStack(spacing: 0) {
ProfileTab(popToRootTab: $popToRootTab) ZStack {
} if selectedTab == .profile {
ForEach(availableTabs) { tab in ProfileTab(popToRootTab: $popToRootTab)
if tab == selectedTab || sideBarLoadedTabs.contains(tab) { }
tab ForEach(availableTabs) { tab in
.makeContentView(popToRootTab: $popToRootTab) if tab == selectedTab || sideBarLoadedTabs.contains(tab) {
.opacity(tab == selectedTab ? 1 : 0) tab
.transition(.opacity) .makeContentView(popToRootTab: $popToRootTab)
.id("\(tab)\(appAccountsManager.currentAccount.id)") .opacity(tab == selectedTab ? 1 : 0)
.onAppear { .transition(.opacity)
sideBarLoadedTabs.insert(tab) .id("\(tab)\(appAccountsManager.currentAccount.id)")
.onAppear {
sideBarLoadedTabs.insert(tab)
}
} else {
EmptyView()
} }
} else { }
EmptyView() }
if proxy.frame(in: .global).width > (.maxColumnWidth + .secondaryColumnWidth),
currentAccount.account?.id != nil {
Divider().edgesIgnoringSafeArea(.all)
NotificationsTab(popToRootTab: $popToRootTab, lockedType: nil, isSecondaryColumn: true)
.frame(maxWidth: 360)
} }
} }
} }

View file

@ -18,6 +18,7 @@ struct NotificationsTab: View {
@Binding var popToRootTab: Tab @Binding var popToRootTab: Tab
let lockedType: Models.Notification.NotificationType? let lockedType: Models.Notification.NotificationType?
let isSecondaryColumn: Bool
var body: some View { var body: some View {
NavigationStack(path: $routerPath.path) { NavigationStack(path: $routerPath.path) {
@ -25,11 +26,13 @@ struct NotificationsTab: View {
.withAppRouter() .withAppRouter()
.withSheetDestinations(sheetDestinations: $routerPath.presentedSheet) .withSheetDestinations(sheetDestinations: $routerPath.presentedSheet)
.toolbar { .toolbar {
statusEditorToolbarItem(routerPath: routerPath, if !isSecondaryColumn {
visibility: userPreferences.postVisibility) statusEditorToolbarItem(routerPath: routerPath,
if UIDevice.current.userInterfaceIdiom != .pad { visibility: userPreferences.postVisibility)
ToolbarItem(placement: .navigationBarLeading) { if UIDevice.current.userInterfaceIdiom != .pad {
AppAccountsSelectorView(routerPath: routerPath) ToolbarItem(placement: .navigationBarLeading) {
AppAccountsSelectorView(routerPath: routerPath)
}
} }
} }
} }

View file

@ -37,9 +37,9 @@ enum Tab: Int, Identifiable, Hashable {
case .federated: case .federated:
TimelineTab(popToRootTab: popToRootTab, timeline: .federated) TimelineTab(popToRootTab: popToRootTab, timeline: .federated)
case .notifications: case .notifications:
NotificationsTab(popToRootTab: popToRootTab, lockedType: nil) NotificationsTab(popToRootTab: popToRootTab, lockedType: nil, isSecondaryColumn: false)
case .mentions: case .mentions:
NotificationsTab(popToRootTab: popToRootTab, lockedType: .mention) NotificationsTab(popToRootTab: popToRootTab, lockedType: .mention, isSecondaryColumn: false)
case .explore: case .explore:
ExploreTab(popToRootTab: popToRootTab) ExploreTab(popToRootTab: popToRootTab)
case .messages: case .messages:

View file

@ -5,6 +5,7 @@ public extension CGFloat {
static let dividerPadding: CGFloat = 2 static let dividerPadding: CGFloat = 2
static let statusColumnsSpacing: CGFloat = 8 static let statusColumnsSpacing: CGFloat = 8
static let maxColumnWidth: CGFloat = 650 static let maxColumnWidth: CGFloat = 650
static let secondaryColumnWidth: CGFloat = 360
static let sidebarWidth: CGFloat = 80 static let sidebarWidth: CGFloat = 80
static let pollBarHeight: CGFloat = 30 static let pollBarHeight: CGFloat = 30
} }

View file

@ -319,6 +319,7 @@ public struct StatusRowView: View {
Text("status.action.translate") Text("status.action.translate")
} }
} }
.buttonStyle(.borderless)
} }
if let translation = viewModel.translation, !viewModel.isLoadingTranslation { if let translation = viewModel.translation, !viewModel.isLoadingTranslation {