From dbe1c22c96ca43ede39532b3c1b39d5124e56326 Mon Sep 17 00:00:00 2001
From: dscyrescotti <dscyrescotti@gmail.com>
Date: Tue, 2 Jul 2024 03:06:36 +0700
Subject: [PATCH] feat: fine tune element toolbar

---
 .../Memo/ElementToolbar/ElementToolbar.swift  | 10 ++++---
 Memola/Features/Memo/Memo/MemoView.swift      | 28 +++++++++++++++----
 Memola/Features/Memo/PenDock/PenDock.swift    | 21 ++------------
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/Memola/Features/Memo/ElementToolbar/ElementToolbar.swift b/Memola/Features/Memo/ElementToolbar/ElementToolbar.swift
index 7db9ff4..9d9047d 100644
--- a/Memola/Features/Memo/ElementToolbar/ElementToolbar.swift
+++ b/Memola/Features/Memo/ElementToolbar/ElementToolbar.swift
@@ -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 {
diff --git a/Memola/Features/Memo/Memo/MemoView.swift b/Memola/Features/Memo/Memo/MemoView.swift
index 5fd21d8..47dbb68 100644
--- a/Memola/Features/Memo/Memo/MemoView.swift
+++ b/Memola/Features/Memo/Memo/MemoView.swift
@@ -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)
                 }
             }
     }
diff --git a/Memola/Features/Memo/PenDock/PenDock.swift b/Memola/Features/Memo/PenDock/PenDock.swift
index 52ddbee..8624221 100644
--- a/Memola/Features/Memo/PenDock/PenDock.swift
+++ b/Memola/Features/Memo/PenDock/PenDock.swift
@@ -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))
             }
         }