feat: make pen dock compact

This commit is contained in:
dscyrescotti
2024-05-19 21:30:08 +07:00
parent e70af36235
commit 3b0d93477e
3 changed files with 23 additions and 23 deletions
+4
View File
@@ -645,6 +645,8 @@
dependencies = ( dependencies = (
); );
name = Memola; name = Memola;
packageProductDependencies = (
);
productName = Memola; productName = Memola;
productReference = EC7F6BE82BE5E6E300A34A7B /* Memola.app */; productReference = EC7F6BE82BE5E6E300A34A7B /* Memola.app */;
productType = "com.apple.product-type.application"; productType = "com.apple.product-type.application";
@@ -673,6 +675,8 @@
Base, Base,
); );
mainGroup = EC7F6BDF2BE5E6E300A34A7B; mainGroup = EC7F6BDF2BE5E6E300A34A7B;
packageReferences = (
);
productRefGroup = EC7F6BE92BE5E6E300A34A7B /* Products */; productRefGroup = EC7F6BE92BE5E6E300A34A7B /* Products */;
projectDirPath = ""; projectDirPath = "";
projectRoot = ""; projectRoot = "";
-2
View File
@@ -29,8 +29,6 @@ struct MemoView: View {
.ignoresSafeArea() .ignoresSafeArea()
.overlay(alignment: .trailing) { .overlay(alignment: .trailing) {
PenDock() PenDock()
.frame(maxHeight: .infinity)
.padding()
} }
.disabled(textFieldState) .disabled(textFieldState)
.overlay(alignment: .top) { .overlay(alignment: .top) {
+19 -21
View File
@@ -12,7 +12,7 @@ struct PenDock: View {
let width: CGFloat = 90 let width: CGFloat = 90
let height: CGFloat = 30 let height: CGFloat = 30
let factor: CGFloat = 0.95 let factor: CGFloat = 0.9
@State var refreshScrollId: UUID = UUID() @State var refreshScrollId: UUID = UUID()
@State var opensColorPicker: Bool = false @State var opensColorPicker: Bool = false
@@ -23,6 +23,8 @@ struct PenDock: View {
penItemList penItemList
} }
.fixedSize() .fixedSize()
.frame(maxHeight: .infinity)
.padding(10)
} }
var penItemList: some View { var penItemList: some View {
@@ -53,11 +55,11 @@ struct PenDock: View {
.frame(maxHeight:( (height * factor + 10) * 6) + 20) .frame(maxHeight:( (height * factor + 10) * 6) + 20)
.fixedSize() .fixedSize()
.background(alignment: .trailing) { .background(alignment: .trailing) {
RoundedRectangle(cornerRadius: 20) RoundedRectangle(cornerRadius: 8)
.fill(.regularMaterial) .fill(.regularMaterial)
.frame(width: width * factor - 18) .frame(width: width * factor - 18)
} }
.clipShape(.rect(cornerRadii: .init(bottomTrailing: 20, topTrailing: 20))) .clipShape(.rect(cornerRadii: .init(bottomTrailing: 8, topTrailing: 8)))
.overlay(alignment: .bottomLeading) { .overlay(alignment: .bottomLeading) {
newPenButton newPenButton
.offset(x: 60, y: 10) .offset(x: 60, y: 10)
@@ -143,13 +145,15 @@ struct PenDock: View {
var penPropertyTool: some View { var penPropertyTool: some View {
if let pen = tool.selectedPen { if let pen = tool.selectedPen {
VStack(spacing: 5) { VStack(spacing: 5) {
penColorPicker(pen) if pen.strokeStyle == .marker {
penColorPicker(pen)
}
penThicknessPicker(pen) penThicknessPicker(pen)
} }
.padding(10) .padding(10)
.frame(width: width * factor - 18) .frame(width: width * factor - 18)
.background { .background {
RoundedRectangle(cornerRadius: 20) RoundedRectangle(cornerRadius: 8)
.fill(.regularMaterial) .fill(.regularMaterial)
} }
.transition(.move(edge: .trailing).combined(with: .opacity)) .transition(.move(edge: .trailing).combined(with: .opacity))
@@ -179,14 +183,13 @@ struct PenDock: View {
} }
} }
.background(baseColor) .background(baseColor)
.clipShape(RoundedRectangle(cornerRadius: 10)) .clipShape(.rect(cornerRadius: 8))
.frame(height: 28) .frame(height: 25)
.overlay { .overlay {
RoundedRectangle(cornerRadius: 10) RoundedRectangle(cornerRadius: 8)
.stroke(Color.gray, lineWidth: 0.4) .stroke(Color.gray, lineWidth: 0.4)
} }
.padding(0.2) .padding(0.2)
.padding(.top, 4)
.drawingGroup() .drawingGroup()
} }
.hoverEffect(.lift) .hoverEffect(.lift)
@@ -207,8 +210,8 @@ struct PenDock: View {
func penThicknessPicker(_ pen: Pen) -> some View { func penThicknessPicker(_ pen: Pen) -> some View {
let minimum: CGFloat = pen.style.thickness.min let minimum: CGFloat = pen.style.thickness.min
let maximum: CGFloat = pen.style.thickness.max let maximum: CGFloat = pen.style.thickness.max
let start: CGFloat = 5 let start: CGFloat = 4
let end: CGFloat = 15 let end: CGFloat = 10
let selection = Binding( let selection = Binding(
get: { pen.thickness }, get: { pen.thickness },
set: { set: {
@@ -219,19 +222,14 @@ struct PenDock: View {
Picker("", selection: selection) { Picker("", selection: selection) {
ForEach(pen.style.thicknessSteps, id: \.self) { step in ForEach(pen.style.thicknessSteps, id: \.self) { step in
let size = ((step - minimum) * (end - start) / (maximum - minimum)) + start - (1 / step) let size = ((step - minimum) * (end - start) / (maximum - minimum)) + start - (1 / step)
if pen.thickness == step { Circle()
Circle() .fill(.black)
.fill(.black) .frame(width: size, height: size)
.frame(width: size, height: size) .frame(width: size + 2, height: size + 2)
} else {
Circle()
.stroke(Color.black, lineWidth: 1)
.frame(width: size, height: size)
}
} }
} }
.pickerStyle(.wheel) .pickerStyle(.wheel)
.frame(width: width * factor - 18, height: 40) .frame(width: width * factor - 18, height: 35)
} }
var newPenButton: some View { var newPenButton: some View {