spacing on shapes and text

This commit is contained in:
Trey t
2022-03-20 14:43:25 -05:00
parent 36a688084c
commit e226437e50
5 changed files with 79 additions and 39 deletions

View File

@@ -25,7 +25,16 @@ enum BGShape: Int, CaseIterable {
minHeight: 5, minHeight: 5,
maxHeight: 500, maxHeight: 500,
alignment: .center) alignment: .center)
.overlay(
text
.font(.title2)
.fontWeight(.bold)
.lineLimit(1)
.foregroundColor(textColor)
.minimumScaleFactor(0.2)
.padding(10)
.frame(maxWidth: .infinity, alignment: .center)
)
case .diamond: case .diamond:
Diamond() Diamond()
.fill(bgColor) .fill(bgColor)
@@ -34,7 +43,16 @@ enum BGShape: Int, CaseIterable {
minHeight: 5, minHeight: 5,
maxHeight: 500) maxHeight: 500)
.aspectRatio(contentMode: .fit) .aspectRatio(contentMode: .fit)
.overlay(
text
.font(.title2)
.fontWeight(.bold)
.lineLimit(1)
.foregroundColor(textColor)
.minimumScaleFactor(0.2)
.padding(10)
.frame(maxWidth: .infinity, alignment: .center)
)
case .rectangle: case .rectangle:
Rectangle() Rectangle()
.fill(bgColor) .fill(bgColor)
@@ -43,6 +61,16 @@ enum BGShape: Int, CaseIterable {
minHeight: 5, minHeight: 5,
maxHeight: 500, maxHeight: 500,
alignment: .center) alignment: .center)
.overlay(
text
.font(.title2)
.fontWeight(.bold)
.lineLimit(1)
.foregroundColor(textColor)
.minimumScaleFactor(0.2)
.padding(10)
.frame(maxWidth: .infinity, alignment: .center)
)
case .roundedRectangle: case .roundedRectangle:
RoundedRectangle(cornerRadius: 8, style: .continuous) RoundedRectangle(cornerRadius: 8, style: .continuous)
.fill(bgColor) .fill(bgColor)
@@ -51,15 +79,17 @@ enum BGShape: Int, CaseIterable {
minHeight: 5, minHeight: 5,
maxHeight: 500, maxHeight: 500,
alignment: .center) alignment: .center)
.overlay(
text
.font(.title2)
.fontWeight(.bold)
.lineLimit(1)
.foregroundColor(textColor)
.minimumScaleFactor(0.2)
.padding(10)
.frame(maxWidth: .infinity, alignment: .center)
)
} }
text
.font(.title2)
.fontWeight(.bold)
.lineLimit(1)
.foregroundColor(textColor)
.minimumScaleFactor(0.7)
.padding(10)
.frame(maxWidth: .infinity, alignment: .center)
}) })
} }
} }

View File

@@ -484,6 +484,7 @@ struct CustomizeView: View {
Text(String(localized: "customize_view_view_pick_shape")) Text(String(localized: "customize_view_view_pick_shape"))
.padding([.leading]) .padding([.leading])
.foregroundColor(textColor) .foregroundColor(textColor)
Divider() Divider()
HStack { HStack {

View File

@@ -9,7 +9,7 @@ import SwiftUI
enum PercViewType { enum PercViewType {
case text case text
case circular case shape
} }
struct HeaderPercView: View { struct HeaderPercView: View {
@@ -72,7 +72,7 @@ struct HeaderPercView: View {
} }
} }
private var circularViews: some View { private var shapeViews: some View {
VStack { VStack {
Spacer() Spacer()
HStack { HStack {
@@ -102,8 +102,9 @@ struct HeaderPercView: View {
switch self.type { switch self.type {
case .text: case .text:
textViews textViews
case .circular: case .shape:
circularViews shapeViews
.padding([.leading, .trailing])
} }
} }
} }
@@ -113,6 +114,6 @@ struct HeaderPercView_Previews: PreviewProvider {
static var previews: some View { static var previews: some View {
HeaderPercView(fakeData: true, backDays: 30, type: .text) HeaderPercView(fakeData: true, backDays: 30, type: .text)
HeaderPercView(fakeData: true, backDays: 30, type: .circular) HeaderPercView(fakeData: true, backDays: 30, type: .shape)
} }
} }

View File

@@ -196,11 +196,12 @@ extension MonthView {
} }
} }
Divider() Divider()
LazyVGrid(columns: columns, spacing: 25) { LazyVGrid(columns: columns, spacing: 15) {
ForEach(entries, id: \.self) { entry in ForEach(entries, id: \.self) { entry in
shape.view(withText: Text(""), bgColor: entry.mood == .placeholder ? .clear : moodTint.color(forMood: entry.mood), shape.view(withText: Text(""),
bgColor: entry.mood == .placeholder ? .clear : moodTint.color(forMood: entry.mood),
textColor: .clear) textColor: .clear)
.frame(minHeight: 5, idealHeight: 20, maxHeight: 50, alignment: .center) .frame(maxWidth: .infinity, maxHeight: .infinity)
} }
} }
} }

View File

@@ -40,31 +40,38 @@ struct SwitchableView: View {
self._viewType = viewType self._viewType = viewType
} }
private var mainViews: some View {
switch viewType {
case .total:
return AnyView(
HeaderStatsView(fakeData: false, backDays: daysBack, moodTint: [
moodTint.color(forMood: .great),
moodTint.color(forMood: .good),
moodTint.color(forMood: .average),
moodTint.color(forMood: .bad),
moodTint.color(forMood: .horrible)
], textColor: textColor))
.allowsHitTesting(false)
case .percentageShape:
return AnyView(
HeaderPercView(fakeData: false, backDays: daysBack, type: .shape))
.allowsHitTesting(false)
case .percentage:
return AnyView(
HeaderPercView(fakeData: false, backDays: daysBack, type: .text))
.allowsHitTesting(false)
}
}
var body: some View { var body: some View {
VStack { VStack {
ZStack { ZStack {
Text(String(customMoodTintUpdateNumber)) Text(String(customMoodTintUpdateNumber))
.hidden() .hidden()
switch viewType {
case .total: mainViews
HeaderStatsView(fakeData: false, backDays: daysBack, moodTint: [ .padding(.top)
moodTint.color(forMood: .great),
moodTint.color(forMood: .good),
moodTint.color(forMood: .average),
moodTint.color(forMood: .bad),
moodTint.color(forMood: .horrible)
], textColor: textColor)
.padding([.leading, .trailing], -15)
.padding([.top, .bottom], 8)
.allowsHitTesting(false)
case .percentageShape:
HeaderPercView(fakeData: false, backDays: daysBack, type: .circular)
.allowsHitTesting(false)
case .percentage:
HeaderPercView(fakeData: false, backDays: daysBack, type: .text)
.allowsHitTesting(false)
}
VStack { VStack {
HStack { HStack {
Spacer() Spacer()