Merge pull request #482 from ensan-hcl/feat/sf_symbols_picker

feat: SF Symbolsの選択が簡単になるPickerを追加
ensan-hcl · Oct 7, 2024 · 6c7236f · 6c7236f
2 parents 73c00b5 + f539fc5
commit 6c7236f
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 25 deletions.
diff --git a/MainApp/Customize/CustardInterfaceKeyEditor.swift b/MainApp/Customize/CustardInterfaceKeyEditor.swift
@@ -554,16 +554,14 @@ struct CustardInterfaceKeyEditor: View {
                     .textFieldStyle(.roundedBorder)
                     .submitLabel(.done)
                 case .systemImage:
-                    TextField("アイコンの名前", text: Binding(
-                                get: {
-                                    key[.custom][.labelImageName, position]
-                                },
-                                set: {
-                                    key[.custom][.labelImageName, position] = $0
-                                })
+                    SystemIconPicker(icon: Binding(
+                        get: {
+                            key[.custom][.labelImageName, position]
+                        },
+                        set: {
+                            key[.custom][.labelImageName, position] = $0
+                        })
                     )
-                    .textFieldStyle(.roundedBorder)
-                    .submitLabel(.done)
                 case .mainAndSub:
                     TextField("メインのラベル", text: Binding(
                                 get: {

diff --git a/MainApp/General/Pickers/SystemIconPicker.swift b/MainApp/General/Pickers/SystemIconPicker.swift
@@ -0,0 +1,90 @@
+//
+//  SystemIconPicker.swift
+//  azooKey
+//
+//  Created by miwa on 2024/10/07.
+//  Copyright © 2024 DevEn3. All rights reserved.
+//
+
+import SwiftUI
+
+struct SystemIconPicker: View {
+    init(
+        icon: Binding<String>,
+        recommendation: [String] = [
+            "doc.on.doc",
+            "doc.on.doc.fill",
+            "doc.on.clipboard",
+            "doc.on.clipboard.fill",
+            "scissors",
+            "delete.left",
+            "delete.left.fill",
+            "delete.right",
+            "delete.right.fill",
+            "heart",
+            "clear",
+            "clear.fill",
+            "arrowtriangle.left.and.line.vertical.and.arrowtriangle.right",
+            "arrowtriangle.left.and.line.vertical.and.arrowtriangle.right.fill",
+            "xmark",
+            "shift",
+            "shift.fill",
+            "capslock",
+            "capslock.fill",
+            "globe",
+            "keyboard.chevron.compact.down",
+            "keyboard.chevron.compact.down.fill",
+            "space",
+            "return",
+            "command",
+        ]
+    ) {
+        self._icon = icon
+        self.recommendation = recommendation
+    }
+
+    private var recommendation: [String]
+
+    @Binding var icon: String
+
+    var body: some View {
+        LazyVGrid(columns: Array(repeating: GridItem(), count: 5)) { // カラム数の指定
+            ForEach(recommendation.indices, id: \.self) { index in
+                Button {
+                    self.icon = self.recommendation[index]
+                } label: {
+                    if self.icon == self.recommendation[index] {
+                        Image(systemName: self.recommendation[index])
+                            .frame(width: 45, height: 45)
+                            .foregroundStyle(.white)
+                            .background(.tint)
+                            .cornerRadius(10)
+                    } else {
+                        Image(systemName: self.recommendation[index])
+                            .frame(width: 45, height: 45)
+                    }
+                }
+                .buttonStyle(.plain)
+            }
+        }
+        HStack {
+            TextField("ID", text: $icon, prompt: Text("SF SymbolsのIDを指定"))
+                .textFieldStyle(.roundedBorder)
+                .monospaced()
+                .keyboardType(.asciiCapable)
+                .submitLabel(.done)
+            Image(systemName: self.icon)
+                .frame(width: 45, height: 45)
+                .foregroundStyle(.white)
+                .background(.tint)
+                .cornerRadius(10)
+        }
+        .padding(.horizontal)
+    }
+}
+
+@available(iOS 17, *)
+#Preview {
+    @Previewable @State var icon = "star"
+    return SystemIconPicker(icon: $icon)
+}
diff --git a/Resources/Localizable.xcstrings b/Resources/Localizable.xcstrings
@@ -1333,6 +1333,16 @@
         }
       }
     },
+    "ID" : {
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "ID"
+          }
+        }
+      }
+    },
     "iOS15のサポートを終了します" : {
       "localizations" : {
         "en" : {
@@ -1468,6 +1478,16 @@
         }
       }
     },
+    "SF SymbolsのIDを指定" : {
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Specify SF Symbols ID"
+          }
+        }
+      }
+    },
     "unicode変換" : {
       "extractionState" : "manual",
       "localizations" : {
@@ -1629,22 +1649,6 @@
         }
       }
     },
-    "アイコンの名前" : {
-      "localizations" : {
-        "en" : {
-          "stringUnit" : {
-            "state" : "translated",
-            "value" : "Name of icon"
-          }
-        },
-        "ja" : {
-          "stringUnit" : {
-            "state" : "translated",
-            "value" : ""
-          }
-        }
-      }
-    },
     "アイテム" : {
       "localizations" : {
         "en" : {