mirror of
https://github.com/dscyrescotti/Memola.git
synced 2026-07-09 14:25:18 +02:00
feat: make pen dock compact
This commit is contained in:
@@ -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 = "";
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user