Skip to content

Instantly share code, notes, and snippets.

@benbacardi

benbacardi/EqualWidthIcons.swift

Last active February 2, 2023 14:36
Show Gist options
  • Save benbacardi/4df235736f03cd4cda5cc32d828a9298 to your computer and use it in GitHub Desktop.
Save benbacardi/4df235736f03cd4cda5cc32d828a9298 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. benbacardi revised this gist Feb 2, 2023. 1 changed file with 45 additions and 0 deletions.
    45 changes: 45 additions & 0 deletions EqualWidthIconsGrid.swift
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    struct WhatsNewGridRow: View {
    let icon: String
    let iconColor: Color
    let title: String
    let summary: String

    var body: some View {
    GridRow(alignment: .top) {
    Image(systemName: icon)
    .font(.title)
    .foregroundColor(iconColor)
    VStack(alignment: .leading) {
    Text(title)
    .font(.headline)
    Text(summary)
    }
    .fullWidth()
    }
    }

    }

    struct EqualWidthIconsGrid: View {
    var body: some View {
    VStack(spacing: 20) {
    VStack {
    Text("What's New!")
    .font(.largeTitle)
    .bold()
    Text("Version 2023.01")
    }
    .padding(.bottom)

    Grid(horizontalSpacing: 10, verticalSpacing: 10) {
    WhatsNewGridRow(icon: "star.circle.fill", iconColor: .yellow, title: "Star Ratings Toggle", summary: "If you believe all your pens are your favourite, you can now turn off star ratings via Settings.")
    WhatsNewGridRow(icon: "square.and.arrow.up.fill", iconColor: .green, title: "Share Sheet Fix", summary: "Fixed an issue where the date in your Currently Ink'd shared image would not display correctly.")
    WhatsNewGridRow(icon: "scroll.fill", iconColor: .blue, title: "Brand List Fix", summary: "Fixed issues with duplicate brands populating your Brand List.")
    WhatsNewGridRow(icon: "ladybug.fill", iconColor: .red, title: "Misc. Bug Fixes", summary: "Plenty of other minor improvements.")
    }

    Spacer()
    }
    .padding()
    }
    }
  2. benbacardi created this gist Feb 2, 2023.
    84 changes: 84 additions & 0 deletions EqualWidthIcons.swift
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    //
    // EqualWidthIcons.swift
    // From https://bencardy.co.uk/2023/02/02/swiftui-equal-width-icons/
    //
    // Created by Ben Cardy on 02/02/2023.
    //

    import SwiftUI

    struct WhatsNewSection: View {

    let icon: String
    let iconColor: Color
    let title: String
    let summary: String

    @Binding var iconWidth: CGFloat

    var body: some View {
    HStack(alignment: .top) {
    Image(systemName: icon)
    .font(.title)
    .foregroundColor(iconColor)
    .background {
    GeometryReader { geo in
    Color.clear.preference(key: EqualWidthIcons.IconWidthPreferenceKey.self, value: geo.size.width)
    }
    }
    .frame(width: iconWidth)
    VStack(alignment: .leading) {
    Text(title)
    .font(.headline)
    Text(summary)
    }
    .fullWidth()
    }
    }

    }

    struct EqualWidthIcons: View {

    @State private var iconWidth: CGFloat = 10

    var body: some View {
    VStack(spacing: 20) {

    VStack {
    Text("What's New!")
    .font(.largeTitle)
    .bold()
    Text("Version 2023.01")
    }
    .padding(.bottom)

    WhatsNewSection(icon: "star.circle.fill", iconColor: .yellow, title: "Star Ratings Toggle", summary: "If you believe all your pens are your favourite, you can now turn off star ratings via Settings.", iconWidth: $iconWidth)
    WhatsNewSection(icon: "square.and.arrow.up.fill", iconColor: .green, title: "Share Sheet Fix", summary: "Fixed an issue where the date in your Currently Ink'd shared image would not display correctly.", iconWidth: $iconWidth)
    WhatsNewSection(icon: "scroll.fill", iconColor: .blue, title: "Brand List Fix", summary: "Fixed issues with duplicate brands populating your Brand List.", iconWidth: $iconWidth)
    WhatsNewSection(icon: "ladybug.fill", iconColor: .red, title: "Misc. Bug Fixes", summary: "Plenty of other minor improvements.", iconWidth: $iconWidth)

    Spacer()

    }
    .padding()
    .onPreferenceChange(EqualWidthIcons.IconWidthPreferenceKey.self) { value in
    self.iconWidth = value
    }
    }
    }

    private extension EqualWidthIcons {
    struct IconWidthPreferenceKey: PreferenceKey {
    static let defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
    value = max(value, nextValue())
    }
    }
    }

    struct EqualWidthIcons_Previews: PreviewProvider {
    static var previews: some View {
    EqualWidthIcons()
    }
    }