feat: fine tune navigation title

This commit is contained in:
dscyrescotti
2024-06-30 01:25:27 +07:00
parent 542d3ea9d6
commit 53a0993ab3
4 changed files with 124 additions and 123 deletions
@@ -8,23 +8,25 @@
import SwiftUI import SwiftUI
struct Placeholder: View { struct Placeholder: View {
@Environment(\.horizontalSizeClass) var horizontalSizeClass
let info: Info let info: Info
var body: some View { var body: some View {
VStack(spacing: 15) { VStack(spacing: 15) {
let iconSize: CGFloat = horizontalSizeClass == .compact ? 40 : 50
Image(systemName: info.icon) Image(systemName: info.icon)
.font(.system(size: 50)) .font(.system(size: iconSize))
.frame(width: 55, height: 55) .frame(width: iconSize * 1.1, height: iconSize * 1.1)
VStack(spacing: 3) { VStack(spacing: 3) {
Text(info.title) Text(info.title)
.font(.title2) .font(horizontalSizeClass == .compact ? .headline : .title2)
.fontWeight(.bold) .fontWeight(.bold)
.foregroundStyle(.primary) .foregroundStyle(.primary)
Text(info.description) Text(info.description)
.font(.callout) .font(horizontalSizeClass == .compact ? .caption : .callout)
.lineLimit(.none) .lineLimit(.none)
.fontWeight(.regular) .fontWeight(.regular)
.frame(minHeight: 50, alignment: .top)
} }
} }
.foregroundStyle(.secondary) .foregroundStyle(.secondary)
@@ -43,66 +43,37 @@ struct MemosView: View {
var body: some View { var body: some View {
MemoGrid(memoObjects: memoObjects, placeholder: placeholder) { memoObject in MemoGrid(memoObjects: memoObjects, placeholder: placeholder) { memoObject in
memoCard(memoObject) memoCard(memoObject)
} }
.navigationBarTitleDisplayMode(.inline) .navigationTitle(horizontalSizeClass == .compact ? "Memos" : "")
.searchable(text: $query, placement: .toolbar, prompt: Text("Search")) .navigationBarTitleDisplayMode(.inline)
.toolbar { .searchable(text: $query, placement: .toolbar, prompt: Text("Search"))
if horizontalSizeClass == .compact { .toolbar {
ToolbarItem(placement: .principal) { if horizontalSizeClass == .regular {
Text("Memos") ToolbarItem(placement: .topBarLeading) {
.font(.title3) Text("Memola")
.fontWeight(.bold) .font(.title3)
} .fontWeight(.bold)
} else {
ToolbarItem(placement: .topBarLeading) {
Text("Memola")
.font(.title3)
.fontWeight(.bold)
}
} }
ToolbarItemGroup(placement: .topBarTrailing) { }
HStack(spacing: 5) { ToolbarItemGroup(placement: .topBarTrailing) {
Button { HStack(spacing: 5) {
createMemo(title: "Untitled") Button {
} label: { createMemo(title: "Untitled")
Image(systemName: "square.and.pencil") } label: {
} Image(systemName: "square.and.pencil")
.hoverEffect(.lift) }
if horizontalSizeClass == .compact { .hoverEffect(.lift)
Menu { if horizontalSizeClass == .compact {
VStack { Menu {
Picker("", selection: $sort) { VStack {
ForEach(Sort.all) { sort in
Text(sort.name)
.tag(sort)
}
}
.pickerStyle(.automatic)
Picker("", selection: $filter) {
ForEach(Filter.all) { filter in
Text(filter.name)
.tag(filter)
}
}
.pickerStyle(.automatic)
}
} label: {
Image(systemName: "ellipsis.circle")
}
} else {
Menu {
Picker("", selection: $sort) { Picker("", selection: $sort) {
ForEach(Sort.all) { sort in ForEach(Sort.all) { sort in
Text(sort.name) Text(sort.name)
.tag(sort) .tag(sort)
} }
} }
} label: { .pickerStyle(.automatic)
Image(systemName: "arrow.up.arrow.down.circle")
}
.hoverEffect(.lift)
Menu {
Picker("", selection: $filter) { Picker("", selection: $filter) {
ForEach(Filter.all) { filter in ForEach(Filter.all) { filter in
Text(filter.name) Text(filter.name)
@@ -110,29 +81,53 @@ struct MemosView: View {
} }
} }
.pickerStyle(.automatic) .pickerStyle(.automatic)
} label: {
Image(systemName: "line.3.horizontal.decrease.circle")
} }
} label: {
Image(systemName: "ellipsis.circle")
}
} else {
Menu {
Picker("", selection: $sort) {
ForEach(Sort.all) { sort in
Text(sort.name)
.tag(sort)
}
}
} label: {
Image(systemName: "arrow.up.arrow.down.circle")
}
.hoverEffect(.lift)
Menu {
Picker("", selection: $filter) {
ForEach(Filter.all) { filter in
Text(filter.name)
.tag(filter)
}
}
.pickerStyle(.automatic)
} label: {
Image(systemName: "line.3.horizontal.decrease.circle")
} }
} }
} }
} }
.onChange(of: sort) { oldValue, newValue in }
memoObjects.sortDescriptors = newValue.memoSortDescriptors .onChange(of: sort) { oldValue, newValue in
} memoObjects.sortDescriptors = newValue.memoSortDescriptors
.onChange(of: query) { oldValue, newValue in }
updatePredicate() .onChange(of: query) { oldValue, newValue in
} updatePredicate()
.onChange(of: filter) { oldValue, newValue in }
updatePredicate() .onChange(of: filter) { oldValue, newValue in
} updatePredicate()
.onReceive(timer) { date in }
currentDate = date .onReceive(timer) { date in
} currentDate = date
.onAppear { }
memoObjects.sortDescriptors = sort.memoSortDescriptors .onAppear {
updatePredicate() memoObjects.sortDescriptors = sort.memoSortDescriptors
} updatePredicate()
}
} }
func memoCard(_ memoObject: MemoObject) -> some View { func memoCard(_ memoObject: MemoObject) -> some View {
@@ -45,51 +45,46 @@ struct TrashView: View {
MemoGrid(memoObjects: memoObjects, placeholder: placeholder) { memoObject in MemoGrid(memoObjects: memoObjects, placeholder: placeholder) { memoObject in
memoCard(memoObject) memoCard(memoObject)
} }
.navigationBarTitleDisplayMode(.inline) .navigationTitle(horizontalSizeClass == .compact ? "Trash" : "")
.searchable(text: $query, placement: .toolbar, prompt: Text("Search")) .navigationBarTitleDisplayMode(.inline)
.toolbar { .searchable(text: $query, placement: .toolbar, prompt: Text("Search"))
if horizontalSizeClass == .compact { .toolbar {
ToolbarItem(placement: .principal) { if horizontalSizeClass == .regular {
Text("Trash") ToolbarItem(placement: .topBarLeading) {
.font(.title3) Text("Memola")
.fontWeight(.bold) .font(.title3)
} .fontWeight(.bold)
} else {
ToolbarItem(placement: .topBarLeading) {
Text("Memola")
.font(.title3)
.fontWeight(.bold)
}
} }
} }
.onChange(of: query) { oldValue, newValue in }
updatePredicate() .onChange(of: query) { oldValue, newValue in
updatePredicate()
}
.alert("Restore Memo", isPresented: restoresMemo) {
Button {
restoreMemo(for: restoredMemo)
} label: {
Text("Restore")
} }
.alert("Restore Memo", isPresented: restoresMemo) { Button {
Button { restoreAndOpenMemo(for: restoredMemo)
restoreMemo(for: restoredMemo) } label: {
} label: { Text("Restore and Open")
Text("Restore")
}
Button {
restoreAndOpenMemo(for: restoredMemo)
} label: {
Text("Restore and Open")
}
Button("Cancel", role: .cancel) { }
} message: {
Text("Would you like to restore this memo or restore and open it?")
} }
.alert("Delete Memo Permanently", isPresented: deletesMemo) { Button("Cancel", role: .cancel) { }
Button(role: .destructive) { } message: {
deleteMemo(for: deletedMemo) Text("Would you like to restore this memo or restore and open it?")
} label: { }
Text("Delete") .alert("Delete Memo Permanently", isPresented: deletesMemo) {
} Button(role: .destructive) {
Button("Cancel", role: .cancel) { } deleteMemo(for: deletedMemo)
} message: { } label: {
Text("Are you sure you want to permanently delete this memo? This action cannot be undone.") Text("Delete")
} }
Button("Cancel", role: .cancel) { }
} message: {
Text("Are you sure you want to permanently delete this memo? This action cannot be undone.")
}
} }
func memoCard(_ memoObject: MemoObject) -> some View { func memoCard(_ memoObject: MemoObject) -> some View {
@@ -16,14 +16,23 @@ struct Sidebar: View {
var body: some View { var body: some View {
List(selection: $sidebarItem) { List(selection: $sidebarItem) {
ForEach(sidebarItems) { item in ForEach(sidebarItems) { item in
Button { if horizontalSizeClass == .compact {
sidebarItem = item Button {
} label: { sidebarItem = item
Label(item.title, systemImage: item.icon) } label: {
.foregroundColor(.primary) Label(item.title, systemImage: item.icon)
.foregroundColor(.primary)
}
} else {
Button {
sidebarItem = item
} label: {
Label(item.title, systemImage: item.icon)
.foregroundColor(.primary)
}
.buttonStyle(sidebarItem == item ? .selected : .unselected)
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
} }
.buttonStyle(sidebarItem == item ? .selected : .unselected)
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
} }
} }
.listStyle(.sidebar) .listStyle(.sidebar)