mirror of
https://github.com/Dimillian/IceCubesApp.git
synced 2024-06-02 13:29:41 +00:00
Add expanded sidebar layout
This commit is contained in:
parent
9c42a3d7cc
commit
e21ec0bd1f
|
@ -35,15 +35,23 @@ struct SideBarView<Content: View>: View {
|
||||||
}
|
}
|
||||||
|
|
||||||
private func makeIconForTab(tab: Tab) -> some View {
|
private func makeIconForTab(tab: Tab) -> some View {
|
||||||
ZStack(alignment: .topTrailing) {
|
HStack {
|
||||||
SideBarIcon(systemIconName: tab.iconName,
|
ZStack(alignment: .topTrailing) {
|
||||||
isSelected: tab == selectedTab)
|
SideBarIcon(systemIconName: tab.iconName,
|
||||||
let badge = badgeFor(tab: tab)
|
isSelected: tab == selectedTab)
|
||||||
if badge > 0 {
|
let badge = badgeFor(tab: tab)
|
||||||
makeBadgeView(count: badge)
|
if badge > 0 {
|
||||||
|
makeBadgeView(count: badge)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if userPreferences.isSidebarExpanded {
|
||||||
|
Text(tab.title)
|
||||||
|
.font(.headline)
|
||||||
|
.foregroundColor(tab == selectedTab ? theme.tintColor : theme.labelColor)
|
||||||
|
.frame(maxWidth: .infinity, alignment: .leading)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.frame(width: .sidebarWidth - 24, height: 50)
|
.frame(width: (userPreferences.isSidebarExpanded ? .sidebarWidthExpanded : .sidebarWidth) - 24, height: 50)
|
||||||
.background(tab == selectedTab ? theme.secondaryBackgroundColor : .clear,
|
.background(tab == selectedTab ? theme.secondaryBackgroundColor : .clear,
|
||||||
in: RoundedRectangle(cornerRadius: 8))
|
in: RoundedRectangle(cornerRadius: 8))
|
||||||
}
|
}
|
||||||
|
@ -92,8 +100,17 @@ struct SideBarView<Content: View>: View {
|
||||||
}
|
}
|
||||||
} label: {
|
} label: {
|
||||||
ZStack(alignment: .topTrailing) {
|
ZStack(alignment: .topTrailing) {
|
||||||
AppAccountView(viewModel: .init(appAccount: account, isCompact: true),
|
if userPreferences.isSidebarExpanded {
|
||||||
isParentPresented: .constant(false))
|
AppAccountView(viewModel: .init(appAccount: account,
|
||||||
|
isCompact: false,
|
||||||
|
isInSettings: false),
|
||||||
|
isParentPresented: .constant(false))
|
||||||
|
} else {
|
||||||
|
AppAccountView(viewModel: .init(appAccount: account,
|
||||||
|
isCompact: true,
|
||||||
|
isInSettings: false),
|
||||||
|
isParentPresented: .constant(false))
|
||||||
|
}
|
||||||
if showBadge,
|
if showBadge,
|
||||||
let token = account.oauthToken,
|
let token = account.oauthToken,
|
||||||
let notificationsCount = userPreferences.notificationsCount[token],
|
let notificationsCount = userPreferences.notificationsCount[token],
|
||||||
|
@ -102,9 +119,10 @@ struct SideBarView<Content: View>: View {
|
||||||
makeBadgeView(count: notificationsCount)
|
makeBadgeView(count: notificationsCount)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.padding(.leading, userPreferences.isSidebarExpanded ? 16 : 0)
|
||||||
}
|
}
|
||||||
.help(accountButtonTitle(accountName: account.accountName))
|
.help(accountButtonTitle(accountName: account.accountName))
|
||||||
.frame(width: .sidebarWidth, height: 50)
|
.frame(width: userPreferences.isSidebarExpanded ? .sidebarWidthExpanded : .sidebarWidth, height: 50)
|
||||||
.padding(.vertical, 8)
|
.padding(.vertical, 8)
|
||||||
.background(selectedTab == .profile && account.id == appAccounts.currentAccount.id ?
|
.background(selectedTab == .profile && account.id == appAccounts.currentAccount.id ?
|
||||||
theme.secondaryBackgroundColor : .clear)
|
theme.secondaryBackgroundColor : .clear)
|
||||||
|
@ -166,15 +184,22 @@ struct SideBarView<Content: View>: View {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.frame(width: .sidebarWidth)
|
.frame(width: userPreferences.isSidebarExpanded ? .sidebarWidthExpanded : .sidebarWidth)
|
||||||
.scrollContentBackground(.hidden)
|
.scrollContentBackground(.hidden)
|
||||||
.background(.thinMaterial)
|
.background(.thinMaterial)
|
||||||
.safeAreaInset(edge: .bottom, content: {
|
.safeAreaInset(edge: .bottom, content: {
|
||||||
HStack {
|
HStack(spacing: 16) {
|
||||||
postButton
|
postButton
|
||||||
.padding(.vertical, 24)
|
.padding(.vertical, 24)
|
||||||
|
.padding(.leading, userPreferences.isSidebarExpanded ? 18 : 0)
|
||||||
|
if userPreferences.isSidebarExpanded {
|
||||||
|
Text("menu.new-post")
|
||||||
|
.font(.subheadline)
|
||||||
|
.foregroundColor(theme.labelColor)
|
||||||
|
.frame(maxWidth: .infinity, alignment: .leading)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.frame(width: .sidebarWidth)
|
.frame(width: userPreferences.isSidebarExpanded ? .sidebarWidthExpanded : .sidebarWidth)
|
||||||
.background(.thinMaterial)
|
.background(.thinMaterial)
|
||||||
})
|
})
|
||||||
Divider().edgesIgnoringSafeArea(.all)
|
Divider().edgesIgnoringSafeArea(.all)
|
||||||
|
@ -207,6 +232,7 @@ private struct SideBarIcon: View {
|
||||||
self.isHovered = isHovered
|
self.isHovered = isHovered
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.frame(width: 50, height: 40)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,21 @@ struct ToolbarTab: ToolbarContent {
|
||||||
|
|
||||||
var body: some ToolbarContent {
|
var body: some ToolbarContent {
|
||||||
if !isSecondaryColumn {
|
if !isSecondaryColumn {
|
||||||
|
ToolbarItem(placement: .topBarLeading) {
|
||||||
|
if UIDevice.current.userInterfaceIdiom == .pad || UIDevice.current.userInterfaceIdiom == .mac {
|
||||||
|
Button {
|
||||||
|
withAnimation {
|
||||||
|
userPreferences.isSidebarExpanded.toggle()
|
||||||
|
}
|
||||||
|
} label: {
|
||||||
|
if userPreferences.isSidebarExpanded {
|
||||||
|
Image(systemName: "sidebar.squares.left")
|
||||||
|
} else {
|
||||||
|
Image(systemName: "sidebar.left")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
statusEditorToolbarItem(routerPath: routerPath,
|
statusEditorToolbarItem(routerPath: routerPath,
|
||||||
visibility: userPreferences.postVisibility)
|
visibility: userPreferences.postVisibility)
|
||||||
if UIDevice.current.userInterfaceIdiom != .pad ||
|
if UIDevice.current.userInterfaceIdiom != .pad ||
|
||||||
|
|
|
@ -9,5 +9,6 @@ public extension CGFloat {
|
||||||
static let statusComponentSpacing: CGFloat = 6
|
static let statusComponentSpacing: CGFloat = 6
|
||||||
static let secondaryColumnWidth: CGFloat = 400
|
static let secondaryColumnWidth: CGFloat = 400
|
||||||
static let sidebarWidth: CGFloat = 90
|
static let sidebarWidth: CGFloat = 90
|
||||||
|
static let sidebarWidthExpanded: CGFloat = 220
|
||||||
static let pollBarHeight: CGFloat = 30
|
static let pollBarHeight: CGFloat = 30
|
||||||
}
|
}
|
||||||
|
|
|
@ -60,6 +60,8 @@ import SwiftUI
|
||||||
@AppStorage("show_reply_indentation") public var showReplyIndentation: Bool = true
|
@AppStorage("show_reply_indentation") public var showReplyIndentation: Bool = true
|
||||||
|
|
||||||
@AppStorage("show_account_popover") public var showAccountPopover: Bool = true
|
@AppStorage("show_account_popover") public var showAccountPopover: Bool = true
|
||||||
|
|
||||||
|
@AppStorage("sidebar_expanded") public var isSidebarExpanded: Bool = false
|
||||||
|
|
||||||
init() {}
|
init() {}
|
||||||
}
|
}
|
||||||
|
@ -326,6 +328,12 @@ import SwiftUI
|
||||||
storage.showAccountPopover = showAccountPopover
|
storage.showAccountPopover = showAccountPopover
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public var isSidebarExpanded: Bool {
|
||||||
|
didSet {
|
||||||
|
storage.isSidebarExpanded = isSidebarExpanded
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public func getRealMaxIndent() -> UInt {
|
public func getRealMaxIndent() -> UInt {
|
||||||
showReplyIndentation ? maxReplyIndentation : 0
|
showReplyIndentation ? maxReplyIndentation : 0
|
||||||
|
@ -501,6 +509,7 @@ import SwiftUI
|
||||||
showReplyIndentation = storage.showReplyIndentation
|
showReplyIndentation = storage.showReplyIndentation
|
||||||
showAccountPopover = storage.showAccountPopover
|
showAccountPopover = storage.showAccountPopover
|
||||||
muteVideo = storage.muteVideo
|
muteVideo = storage.muteVideo
|
||||||
|
isSidebarExpanded = storage.isSidebarExpanded
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue