starred/Memola
1
0
Fork 0
mirror of https://github.com/dscyrescotti/Memola.git synced 2026-05-17 13:17:03 +02:00
Code Issues 5 Packages Projects Releases 3 Wiki Activity

feat: enhance element tool bar animation

Browse Source
This commit is contained in:
dscyrescotti
2024-06-24 20:38:40 +07:00
parent bd1196ec41
commit f267271062
1 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Memola/Features/Memo/Toolbar/Toolbar.swift
+30 -3
View File
@@ -25,6 +25,8 @@ struct Toolbar: View {
@FocusState var textFieldState: Bool @FocusState var textFieldState: Bool
@Namespace var namespace
let size: CGFloat let size: CGFloat
init(size: CGFloat, memo: MemoObject, tool: Tool, canvas: Canvas, history: History) { init(size: CGFloat, memo: MemoObject, tool: Tool, canvas: Canvas, history: History) {
@@ -140,10 +142,17 @@ struct Toolbar: View {
.fontWeight(.heavy) .fontWeight(.heavy)
.contentShape(.circle) .contentShape(.circle)
.frame(width: size, height: size) .frame(width: size, height: size)
.background(tool.selection == .hand ? Color.accentColor : Color.clear)
.foregroundStyle(tool.selection == .hand ? Color.white : Color.accentColor) .foregroundStyle(tool.selection == .hand ? Color.white : Color.accentColor)
.clipShape(.rect(cornerRadius: 8)) .clipShape(.rect(cornerRadius: 8))
} }
.hoverEffect(.lift)
.background {
if tool.selection == .hand {
Color.accentColor
.clipShape(.rect(cornerRadius: 8))
.matchedGeometryEffect(id: "element.toolbar.bg", in: namespace)
}
}
Button { Button {
withAnimation { withAnimation {
tool.selectTool(.pen) tool.selectTool(.pen)
@@ -153,11 +162,17 @@ struct Toolbar: View {
.fontWeight(.heavy) .fontWeight(.heavy)
.contentShape(.circle) .contentShape(.circle)
.frame(width: size, height: size) .frame(width: size, height: size)
.background(tool.selection == .pen ? Color.accentColor : Color.clear)
.foregroundStyle(tool.selection == .pen ? Color.white : Color.accentColor) .foregroundStyle(tool.selection == .pen ? Color.white : Color.accentColor)
.clipShape(.rect(cornerRadius: 8)) .clipShape(.rect(cornerRadius: 8))
} }
.hoverEffect(.lift) .hoverEffect(.lift)
.background {
if tool.selection == .pen {
Color.accentColor
.clipShape(.rect(cornerRadius: 8))
.matchedGeometryEffect(id: "element.toolbar.bg", in: namespace)
}
}
HStack(spacing: 0) { HStack(spacing: 0) {
Button { Button {
withAnimation { withAnimation {
@@ -167,11 +182,21 @@ struct Toolbar: View {
Image(systemName: "photo") Image(systemName: "photo")
.contentShape(.circle) .contentShape(.circle)
.frame(width: size, height: size) .frame(width: size, height: size)
.background(tool.selection == .photo ? Color.accentColor : Color.clear)
.foregroundStyle(tool.selection == .photo ? Color.white : Color.accentColor) .foregroundStyle(tool.selection == .photo ? Color.white : Color.accentColor)
.clipShape(.rect(cornerRadius: 8)) .clipShape(.rect(cornerRadius: 8))
} }
.hoverEffect(.lift) .hoverEffect(.lift)
.background {
if tool.selection == .photo {
Color.accentColor
.clipShape(.rect(cornerRadius: 8))
.matchedGeometryEffect(id: "element.toolbar.bg", in: namespace)
}
if tool.selection != .photo {
Color.clear
.matchedGeometryEffect(id: "element.toolbar.photo.options", in: namespace)
}
}
if tool.selection == .photo { if tool.selection == .photo {
HStack(spacing: 0) { HStack(spacing: 0) {
Button { Button {
@@ -191,6 +216,8 @@ struct Toolbar: View {
} }
.hoverEffect(.lift) .hoverEffect(.lift)
} }
.matchedGeometryEffect(id: "element.toolbar.photo.options", in: namespace)
.transition(.opacity.animation(.easeIn(duration: 0.1)))
} }
} }
.background { .background {