fix(PlantUMLKeyboard): dark mode support

update keyboard colours depending on current color schema issue #13
bsorrentino · Jan 26, 2023 · 5922a0a · 5922a0a
1 parent 39219cd
commit 5922a0a
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 60 deletions.
diff --git a/PlantUML/PlantUMLContentView.swift b/PlantUML/PlantUMLContentView.swift
@@ -298,23 +298,26 @@ myactor -> participant1
 
 """
     static var previews: some View {
-
-        Group {
-            NavigationView {
-                PlantUMLContentView( document: PlantUMLDocumentProxy( document: .constant(PlantUMLDocument())))
-                    .previewDevice(PreviewDevice(rawValue: "iPad mini (6th generation)"))
-                    .environment(\.editMode, Binding.constant(EditMode.inactive))
-            }
-            .navigationViewStyle(.stack)
-            .previewInterfaceOrientation(.landscapeRight)
-
-            NavigationView {
-                PlantUMLContentView( document: PlantUMLDocumentProxy( document:  .constant(PlantUMLDocument())))
-                    .previewDevice(PreviewDevice(rawValue: "iPad mini (6th generation)"))
-                    .environment(\.editMode, Binding.constant(EditMode.inactive))
+        ForEach(ColorScheme.allCases, id: \.self) {
+            Group {
+                NavigationView {
+                    PlantUMLContentView( document: PlantUMLDocumentProxy( document: .constant(PlantUMLDocument())))
+                        .previewDevice(PreviewDevice(rawValue: "iPad mini (6th generation)"))
+                        .environment(\.editMode, Binding.constant(EditMode.inactive))
+                }
+                .navigationViewStyle(.stack)
+                .previewInterfaceOrientation(.landscapeRight)
+
+                NavigationView {
+                    PlantUMLContentView( document: PlantUMLDocumentProxy( document:  .constant(PlantUMLDocument())))
+                        .previewDevice(PreviewDevice(rawValue: "iPad mini (6th generation)"))
+                        .environment(\.editMode, Binding.constant(EditMode.inactive))
+                }
+                .navigationViewStyle(.stack)
+                .previewInterfaceOrientation(.portrait)
+
             }
-            .navigationViewStyle(.stack)
-            .previewInterfaceOrientation(.portrait)
+            .preferredColorScheme($0)
         }
     }
 }

diff --git a/PlantUMLKeyboard/Sources/PlantUMLKeyboard/PlantUMLKeyboard+Color.swift b/PlantUMLKeyboard/Sources/PlantUMLKeyboard/PlantUMLKeyboard+Color.swift
@@ -60,6 +60,7 @@ extension Color {
 
 
 struct ColorKeyButton : UIViewRepresentable {
+    @Environment(\.colorScheme) var colorScheme
 
     var symbol:Symbol
     var onPressSymbol: (Symbol) -> Void
@@ -81,9 +82,13 @@ struct ColorKeyButton : UIViewRepresentable {
         // title
         //
         button.setTitle(symbol.id, for: .normal)
-        button.setTitleColor(UIColor.black, for: .normal)
+        button.layer.backgroundColor = (colorScheme == .dark) ? UIColor.black.cgColor : UIColor.white.cgColor
+
+        button.setTitleColor( (colorScheme == .dark) ? UIColor.white : UIColor.black, for: .normal)
         if let label = button.titleLabel {
-            label.font = UIFont.systemFont(ofSize: 16, weight: .bold)
+            label.font = (colorScheme == .dark) ?
+                UIFont.systemFont(ofSize: 16, weight: .regular) :
+                UIFont.systemFont(ofSize: 16, weight: .bold)
         }
 
         //
@@ -99,7 +104,7 @@ struct ColorKeyButton : UIViewRepresentable {
         //
         // Border
         //
-        button.layer.borderColor = UIColor.black.cgColor
+        button.layer.borderColor = (colorScheme == .dark) ? UIColor.white.cgColor : UIColor.black.cgColor
         button.layer.borderWidth = 1
         button.layer.cornerRadius = 5
 
@@ -212,6 +217,15 @@ struct ColorKeyView: View {
 // MARK: Preview
 struct ColorKeyButton_Previews: PreviewProvider {
     static var previews: some View {
-        ColorKeyButton( symbol:Symbol( id: "test" ), onPressSymbol: { _ in } )
+
+        ForEach(ColorScheme.allCases, id: \.self) {
+            VStack {
+
+                ColorKeyButton( symbol:Symbol( id: "test" ), onPressSymbol: { _ in } )
+                    .frame( width: 130, height: 60)
+
+            }
+            .preferredColorScheme($0)
+        }
     }
 }
diff --git a/PlantUMLKeyboard/Sources/PlantUMLKeyboard/PlantUMLKeyboard.swift b/PlantUMLKeyboard/Sources/PlantUMLKeyboard/PlantUMLKeyboard.swift
@@ -3,6 +3,7 @@ import UIKit
 import LineEditor
 
 public struct PlantUMLKeyboardView: View {
+    @Environment(\.colorScheme) var colorScheme
 
     @Binding var selectedTab:String
     var onHide:() -> Void
@@ -14,7 +15,7 @@ public struct PlantUMLKeyboardView: View {
         self.onPressSymbol = onPressSymbol
     }
 
-    public var body : some View{
+    public var body : some View {
 
         ZStack(alignment: .topLeading) {
 
@@ -26,22 +27,19 @@ public struct PlantUMLKeyboardView: View {
                             Label( group.name, systemImage: "list.dash")
                                 .labelStyle(.titleOnly)
                         }
-                        tag( group.name )
+                        .tag( group.name )
+                        //.background(Color.gray.opacity(0.7))
+
 
                 }
             }
             .frame(maxWidth: .infinity )
-            .background(Color.gray.opacity(0.1))
+            //.background(Color.gray.opacity(0.7))
             .cornerRadius(25)
 
-            HStack {
-                Button(action: onHide) {
-                    Image(systemName: "xmark").foregroundColor(.black)
-                }
-                Spacer()
-            }
-
+            HideButton()
         }
+
         .padding()
     }
 
@@ -59,18 +57,12 @@ public struct PlantUMLKeyboardView: View {
 
                             VStack {
                               if symbol.type == "color" {
-//                                  ColorKeyView( symbol: symbol, onPressSymbol: onPressSymbol )
                                   ColorKeyButton( symbol: symbol, onPressSymbol: onPressSymbol )
                                       .frame( maxWidth: 100)
 
                                 }
                                 else {
-                                    Button {
-                                        onPressSymbol(symbol)
-                                    } label: {
-                                        ButtonLabel( for: group, row: rowIndex, cell: cellIndex, symbol: symbol )
-                                    }
-                                    .buttonStyle( KeyButtonStyle() )
+                                    TextKeyButton( symbol: symbol)
                                 }
                             }
 
@@ -88,47 +80,57 @@ public struct PlantUMLKeyboardView: View {
 
 // MARK: Plain Button Extension
 extension PlantUMLKeyboardView {
-
-    fileprivate struct KeyButtonStyle: ButtonStyle {
+
+    fileprivate struct TextKeyButtonStyle: ButtonStyle {
+        @Environment(\.colorScheme) var colorScheme
 
+        // [Button border with corner radius in Swift UI](https://stackoverflow.com/a/62544642/521197)
         func makeBody(configuration: Configuration) -> some View {
             configuration.label
                 .padding(5)
-                .background( .white )
-//                .border( .black, width: 1)
+                .foregroundColor( (colorScheme == .dark) ? .white : .black )
+                .background( (colorScheme == .dark) ? .black : .white )
+                .cornerRadius(5)
                 .overlay {
                     RoundedRectangle(cornerRadius: 5)
-                        .stroke(.black, lineWidth: 1)
+                        .stroke((colorScheme == .dark) ? .white : .black, lineWidth: 1)
                 }
         }
     }
 
-    func ButtonLabel( for group: PlantUMLSymbolGroup, row: Int, cell: Int, symbol: Symbol ) -> some View  {
+    func TextKeyButton( symbol: Symbol ) -> some View {
 
-        Text(symbol.id).font(.system(size: 16).bold())
+        Button {
+            onPressSymbol(symbol)
+        } label: {
+            Text(symbol.id)
+                .font( (colorScheme == .dark) ? .system(size: 16) : .system(size: 16).bold() )
+        }
+        .buttonStyle( TextKeyButtonStyle() )
+    }
+
+    func HideButton() -> some View  {
+        HStack {
+            Button(action: onHide) {
+                Image(systemName: "xmark")
+                    .foregroundColor( (colorScheme == .dark) ? .white : .black)
+            }
+            Spacer()
+        }
 
-//        Group {
-//            if group.images.isEmpty || group.images[row].isEmpty || group.images[row].isEmpty || group.images[row][cell]==nil
-//            {
-//                Text(symbol.id)
-//                    .font(.system(size: 16).bold())
-//
-//            }
-//            else {
-//                let img = group.images[row][cell]
-//                Image( uiImage: img! )
-//                    .resizable()
-//                    .frame(width: 40, height: 20)
-//            }
-//        }
     }
+
 }
 
 
 struct PlantUMLKeyboardView_Previews: PreviewProvider {
 
     static var previews: some View {
-        PlantUMLKeyboardView( selectedTab: .constant("general"), onHide: { }, onPressSymbol: { _ in } )
-            .previewInterfaceOrientation(.landscapeLeft)
+        ForEach(ColorScheme.allCases, id: \.self) {
+            PlantUMLKeyboardView( selectedTab: .constant("general"), onHide: { }, onPressSymbol: { _ in } )
+                .previewInterfaceOrientation(.landscapeLeft)
+                .preferredColorScheme($0)
+        }
+
     }
 }