feat: fine tune element toolbar

This commit is contained in:
dscyrescotti
2024-07-02 03:06:36 +07:00
parent cf08050103
commit dbe1c22c96
3 changed files with 32 additions and 27 deletions

View File

@@ -26,18 +26,20 @@ struct ElementToolbar: View {
if horizontalSizeClass == .regular {
regularToolbar
} else {
ZStack(alignment: .bottomLeading) {
compactToolbar
ZStack(alignment: .bottom) {
if tool.selection == .photo {
photoOption
.background {
RoundedRectangle(cornerRadius: 8)
.fill(.regularMaterial)
}
.frame(maxWidth: .infinity)
.padding(.bottom, 10)
.transition(.move(edge: .bottom).combined(with: .blurReplace))
} else {
compactToolbar
}
}
.padding(.bottom, 10)
}
}
.fullScreenCover(isPresented: $opensCamera) {
@@ -193,8 +195,8 @@ struct ElementToolbar: View {
RoundedRectangle(cornerRadius: 8)
.fill(.regularMaterial)
}
.transition(.move(edge: .bottom).combined(with: .blurReplace))
.padding(10)
.transition(.move(edge: .bottom).combined(with: .blurReplace))
}
var photoOption: some View {

View File

@@ -66,11 +66,11 @@ struct MemoView: View {
switch tool.selection {
case .pen:
PenDock(tool: tool, canvas: canvas, size: size)
.transition(.move(edge: .trailing))
.transition(.move(edge: .trailing).combined(with: .blurReplace))
case .photo:
if let photoItem = tool.selectedPhotoItem {
PhotoPreview(photoItem: photoItem, tool: tool)
.transition(.move(edge: .trailing))
.transition(.move(edge: .trailing).combined(with: .blurReplace))
}
default:
EmptyView()
@@ -88,7 +88,7 @@ struct MemoView: View {
switch tool.selection {
case .pen:
PenDock(tool: tool, canvas: canvas, size: size)
.transition(.move(edge: .bottom))
.transition(.move(edge: .bottom).combined(with: .blurReplace))
case .photo:
if let photoItem = tool.selectedPhotoItem {
PhotoPreview(photoItem: photoItem, tool: tool)
@@ -99,9 +99,27 @@ struct MemoView: View {
}
}
.overlay(alignment: .bottom) {
if tool.selection == .hand {
if tool.selection != .pen {
ElementToolbar(size: size, tool: tool, canvas: canvas)
.transition(.move(edge: .bottom))
.transition(.move(edge: .bottom).combined(with: .blurReplace))
}
}
.overlay(alignment: .bottom) {
if tool.selection != .hand {
Button {
withAnimation {
tool.selectTool(.hand)
}
} label: {
Image(systemName: "chevron.compact.down")
.font(.headline)
.frame(width: 80)
.padding(5)
.background(.regularMaterial)
.clipShape(.capsule)
.contentShape(.capsule)
}
.offset(y: 5)
}
}
}

View File

@@ -61,32 +61,17 @@ struct PenDock: View {
.fill(.regularMaterial)
.frame(height: height * factor - 18)
}
.padding([.horizontal, .bottom], 10)
.padding(.horizontal, 10)
.padding(.bottom, 20)
.frame(maxWidth: min(proxy.size.height, proxy.size.width), maxHeight: .infinity, alignment: .bottom)
.frame(maxWidth: .infinity)
}
.overlay(alignment: .bottom) {
Button {
withAnimation {
tool.selectTool(.hand)
}
} label: {
Image(systemName: "chevron.compact.down")
.font(.headline)
.frame(width: 80)
.padding(10)
.background(.regularMaterial)
.clipShape(.capsule)
.contentShape(.capsule)
}
.offset(y: 5)
}
.transition(.move(edge: .bottom).combined(with: .blurReplace))
}
lockButton
.frame(maxWidth: .infinity, alignment: .bottomTrailing)
.padding(10)
.offset(y: canvas.locksCanvas ? 0 : -(height * factor - size + 20))
.offset(y: canvas.locksCanvas ? 0 : -(height * factor - size + 30))
.transition(.move(edge: .trailing).combined(with: .blurReplace))
}
}