customize eye, mouth, face outline colors for custom icon

This commit is contained in:
Trey t
2022-02-14 09:34:11 -06:00
parent b8e1198c5b
commit 14aec1222e
20 changed files with 142 additions and 34 deletions

View File

@@ -28,7 +28,11 @@ struct CreateIconView: View {
background: CreateIconView.iconViewBGs,
bgColor: .red,
innerColor: .green,
bgOverlayColor: .black)
bgOverlayColor: .black,
rightEyeColor: .orange,
leftEyeColor: .yellow,
mouthColor: .green,
circleStrokeColor: .pink)
private var randomElements: [AnyView] = [
AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
.resizable()
@@ -113,51 +117,83 @@ struct CreateIconView: View {
Spacer()
VStack {
ColorPicker("Set the background color", selection: $customIcon.bgColor)
.padding([.leading, .trailing])
ColorPicker("Set the inner color", selection: $customIcon.innerColor)
.padding([.leading, .trailing])
ZStack {
Color(theme.currentTheme.secondaryBGColor)
HStack {
Spacer()
VStack(alignment: .center) {
Text("background")
ColorPicker("", selection: $customIcon.bgColor)
.labelsHidden()
}
Spacer()
VStack(alignment: .center) {
Text("Inner")
ColorPicker("", selection: $customIcon.innerColor)
.labelsHidden()
}
Spacer()
VStack(alignment: .center) {
Text("Face Outline")
ColorPicker("", selection: $customIcon.circleStrokeColor)
.labelsHidden()
}
Spacer()
}
}
.frame(height: 75)
.frame(minWidth: 0, maxWidth: .infinity)
ZStack {
Color(theme.currentTheme.secondaryBGColor)
HStack {
Spacer()
Menu("Left Eye") {
ForEach(EyeOptions.allCases, id: \.self) { option in
Button(action: {
update(eye: .left, eyeOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
VStack {
Menu("Left Eye") {
ForEach(EyeOptions.allCases, id: \.self) { option in
Button(action: {
update(eye: .left, eyeOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
}
}
ColorPicker("", selection: $customIcon.leftEyeColor)
.labelsHidden()
}
Spacer()
Menu("Right Eye") {
ForEach(EyeOptions.allCases, id: \.self) { option in
Button(action: {
update(eye: .right, eyeOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
VStack {
Menu("Right Eye") {
ForEach(EyeOptions.allCases, id: \.self) { option in
Button(action: {
update(eye: .right, eyeOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
}
}
ColorPicker("", selection: $customIcon.rightEyeColor)
.labelsHidden()
}
Spacer()
Menu("Mouth") {
ForEach(MouthOptions.allCases, id: \.self) { option in
Button(action: {
update(mouthOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
VStack {
Menu("Mouth") {
ForEach(MouthOptions.allCases, id: \.self) { option in
Button(action: {
update(mouthOption: option)
}, label: {
Label(option.rawValue, image: option.rawValue)
})
}
}
ColorPicker("", selection: $customIcon.mouthColor)
.labelsHidden()
}
Spacer()
}
}
.frame(height: 44)
.padding(.top, 10)
.frame(height: 75)
.frame(minWidth: 0, maxWidth: .infinity)
ZStack {
Color(theme.currentTheme.secondaryBGColor)
@@ -185,9 +221,8 @@ struct CreateIconView: View {
.padding([.leading, .trailing])
}
}
.frame(height: 88)
.frame(height: 75)
.frame(minWidth: 0, maxWidth: .infinity)
.padding(.top, 10)
ZStack {
VStack{

View File

@@ -70,7 +70,7 @@ struct IconView: View {
)
Circle()
.strokeBorder(Color.black, lineWidth: geo.size.width * 0.045)
.strokeBorder(customIcon.circleStrokeColor, lineWidth: geo.size.width * 0.045)
.background(Circle().fill(customIcon.innerColor))
.frame(width: geo.size.width*facePercSize,
height: geo.size.height*facePercSize,
@@ -85,6 +85,7 @@ struct IconView: View {
alignment: .center)
.position(x: geo.size.width*0.4,
y: geo.size.height*0.4)
.foregroundColor(customIcon.leftEyeColor)
customIcon.rightEye
.resizable()
@@ -94,6 +95,7 @@ struct IconView: View {
alignment: .center)
.position(x: geo.size.width*0.6,
y: geo.size.height*0.4)
.foregroundColor(customIcon.rightEyeColor)
customIcon.mouth
.resizable()
@@ -103,6 +105,7 @@ struct IconView: View {
alignment: .center)
.position(x: geo.size.width*0.5,
y: geo.size.height*0.59)
.foregroundColor(customIcon.mouthColor)
}
.position(x: geo.size.width/2,
y: geo.size.height/2 - entireFuckingViewOffset)
@@ -127,7 +130,11 @@ struct IconView_Previews: PreviewProvider {
background: IconView_Previews.backgrounds,
bgColor: .red,
innerColor: .green,
bgOverlayColor: .orange),
bgOverlayColor: .orange,
rightEyeColor: .orange,
leftEyeColor: .yellow,
mouthColor: .green,
circleStrokeColor: .pink),
isPreview: true)
.frame(width: 256, height: 256, alignment: .center)