Improve button styles

stackotter · Jul 10, 2021 · d4dcc89 · d4dcc89
1 parent 56fac87
commit d4dcc89
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 24 deletions.
diff --git a/DeltaClient.xcodeproj/project.pbxproj b/DeltaClient.xcodeproj/project.pbxproj
@@ -71,6 +71,12 @@
 		78427864268FBA2200FF16C2 /* AssetError.swift in Sources */ = {isa = PBXBuildFile; fileRef = 78427862268FBA2200FF16C2 /* AssetError.swift */; };
 		7842786F268FBCEF00FF16C2 /* VersionManifest.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7842786E268FBCEF00FF16C2 /* VersionManifest.swift */; };
 		78427870268FBCEF00FF16C2 /* VersionManifest.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7842786E268FBCEF00FF16C2 /* VersionManifest.swift */; };
+		7845DDC5269A4DDE008FC70E /* PrimaryButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7845DDC4269A4DDE008FC70E /* PrimaryButtonStyle.swift */; };
+		7845DDC6269A4DDE008FC70E /* PrimaryButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7845DDC4269A4DDE008FC70E /* PrimaryButtonStyle.swift */; };
+		7845DDCA269A4E00008FC70E /* SecondaryButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7845DDC9269A4E00008FC70E /* SecondaryButtonStyle.swift */; };
+		7845DDCB269A4E00008FC70E /* SecondaryButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7845DDC9269A4E00008FC70E /* SecondaryButtonStyle.swift */; };
+		7845DDCF269A5350008FC70E /* DisabledButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7845DDCE269A5350008FC70E /* DisabledButtonStyle.swift */; };
+		7845DDD0269A5350008FC70E /* DisabledButtonStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7845DDCE269A5350008FC70E /* DisabledButtonStyle.swift */; };
 		788195C12691E2960099575B /* LoadingState.swift in Sources */ = {isa = PBXBuildFile; fileRef = 788195C02691E2960099575B /* LoadingState.swift */; };
 		788195C22691E2960099575B /* LoadingState.swift in Sources */ = {isa = PBXBuildFile; fileRef = 788195C02691E2960099575B /* LoadingState.swift */; };
 		788538892695C8BB00932F71 /* EditorView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 788538882695C8BB00932F71 /* EditorView.swift */; };
@@ -151,6 +157,9 @@
 		7842785D268FB91F00FF16C2 /* VersionsManifest.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VersionsManifest.swift; sourceTree = "<group>"; };
 		78427862268FBA2200FF16C2 /* AssetError.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AssetError.swift; sourceTree = "<group>"; };
 		7842786E268FBCEF00FF16C2 /* VersionManifest.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VersionManifest.swift; sourceTree = "<group>"; };
+		7845DDC4269A4DDE008FC70E /* PrimaryButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PrimaryButtonStyle.swift; sourceTree = "<group>"; };
+		7845DDC9269A4E00008FC70E /* SecondaryButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SecondaryButtonStyle.swift; sourceTree = "<group>"; };
+		7845DDCE269A5350008FC70E /* DisabledButtonStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DisabledButtonStyle.swift; sourceTree = "<group>"; };
 		788195C02691E2960099575B /* LoadingState.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoadingState.swift; sourceTree = "<group>"; };
 		788538882695C8BB00932F71 /* EditorView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EditorView.swift; sourceTree = "<group>"; };
 		78AA801F2699329300664150 /* VideoConfig.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VideoConfig.swift; sourceTree = "<group>"; };
@@ -356,6 +365,9 @@
 				78050DE6269514ED0024C049 /* Config */,
 				78E18844267DB6050069E701 /* RouterView.swift */,
 				78050DEC269588510024C049 /* IconButton.swift */,
+				7845DDC4269A4DDE008FC70E /* PrimaryButtonStyle.swift */,
+				7845DDC9269A4E00008FC70E /* SecondaryButtonStyle.swift */,
+				7845DDCE269A5350008FC70E /* DisabledButtonStyle.swift */,
 			);
 			path = Views;
 			sourceTree = "<group>";
@@ -562,13 +574,16 @@
 				78427845268F275A00FF16C2 /* ConfigManager.swift in Sources */,
 				7842785E268FB91F00FF16C2 /* VersionsManifest.swift in Sources */,
 				78B6B1C42687E3440041B1E1 /* StorageError.swift in Sources */,
+				7845DDCA269A4E00008FC70E /* SecondaryButtonStyle.swift in Sources */,
 				7806A8A226968B1C002F4115 /* EmailField.swift in Sources */,
+				7845DDC5269A4DDE008FC70E /* PrimaryButtonStyle.swift in Sources */,
 				78B6B1A52687D9470041B1E1 /* ErrorView.swift in Sources */,
 				78ABBBC926964A0F00475BFE /* OptionalNumberField.swift in Sources */,
 				78C1C01C2696644500604D15 /* ServerEditorView.swift in Sources */,
 				78E18845267DB6050069E701 /* RouterView.swift in Sources */,
 				78203EB02696B27100D97A93 /* ConfigError.swift in Sources */,
 				78427863268FBA2200FF16C2 /* AssetError.swift in Sources */,
+				7845DDCF269A5350008FC70E /* DisabledButtonStyle.swift in Sources */,
 				78B4B70D2696706B00DF28B2 /* SettingsView.swift in Sources */,
 				7839921326911DCD005E93FD /* MetalView.swift in Sources */,
 				7837265926991DAF00E39326 /* ClientInputDelegate.swift in Sources */,
@@ -617,13 +632,16 @@
 				78427846268F275A00FF16C2 /* ConfigManager.swift in Sources */,
 				7842785F268FB91F00FF16C2 /* VersionsManifest.swift in Sources */,
 				78B6B1C52687E3440041B1E1 /* StorageError.swift in Sources */,
+				7845DDCB269A4E00008FC70E /* SecondaryButtonStyle.swift in Sources */,
 				7806A8A326968B1C002F4115 /* EmailField.swift in Sources */,
+				7845DDC6269A4DDE008FC70E /* PrimaryButtonStyle.swift in Sources */,
 				78B6B1A62687D9470041B1E1 /* ErrorView.swift in Sources */,
 				78ABBBCA26964A0F00475BFE /* OptionalNumberField.swift in Sources */,
 				78C1C01D2696644500604D15 /* ServerEditorView.swift in Sources */,
 				78E18846267DB6050069E701 /* RouterView.swift in Sources */,
 				78203EB12696B27100D97A93 /* ConfigError.swift in Sources */,
 				78427864268FBA2200FF16C2 /* AssetError.swift in Sources */,
+				7845DDD0269A5350008FC70E /* DisabledButtonStyle.swift in Sources */,
 				78B4B710269670B400DF28B2 /* SettingsView.swift in Sources */,
 				7839921426911DCD005E93FD /* MetalView.swift in Sources */,
 				7837265A26991DAF00E39326 /* ClientInputDelegate.swift in Sources */,

diff --git a/Shared/Views/Config/Account/AccountLoginView.swift b/Shared/Views/Config/Account/AccountLoginView.swift
@@ -75,7 +75,6 @@ struct AccountLoginView: EditorView {
               TextField("Username", text: $username)
           }
         }
-        .padding(.bottom, 8)
 
         if let error = errorMessage {
           Text(error)
@@ -85,10 +84,12 @@ struct AccountLoginView: EditorView {
         HStack {
           if let cancel = cancelationHandler {
             Button("Cancel", action: cancel)
-              .buttonStyle(BorderlessButtonStyle())
+              .buttonStyle(SecondaryButtonStyle())
           }
           Button("Login", action: login)
+            .buttonStyle(PrimaryButtonStyle())
         }
+        .padding(.top, 8)
       } else {
         Text("Logging in..")
       }

diff --git a/Shared/Views/Config/EditableList/EditableList.swift b/Shared/Views/Config/EditableList/EditableList.swift
@@ -114,21 +114,26 @@ struct EditableList<Row: View, ItemEditor: EditorView>: View {
               }
             }
 
-            Button("Add") {
-              state.update(to: .addItem)
-            }
-
-            if save != nil || cancel != nil {
-              HStack {
-                if let cancel = cancel {
-                  Button("Cancel", action: cancel)
-                    .buttonStyle(BorderlessButtonStyle())
-                }
-                if let save = save {
-                  Button("Done", action: save)
+            VStack {
+              Button("Add") {
+                state.update(to: .addItem)
+              }
+              .buttonStyle(SecondaryButtonStyle())
+
+              if save != nil || cancel != nil {
+                HStack {
+                  if let cancel = cancel {
+                    Button("Cancel", action: cancel)
+                      .buttonStyle(SecondaryButtonStyle())
+                  }
+                  if let save = save {
+                    Button("Save", action: save)
+                      .buttonStyle(PrimaryButtonStyle())
+                  }
                 }
               }
             }
+            .frame(width: 200)
           }
         case .addItem:
           itemEditor.init(nil, completion: { newItem in

diff --git a/Shared/Views/Config/Server/ServerEditorView.swift b/Shared/Views/Config/Server/ServerEditorView.swift
@@ -16,11 +16,14 @@ struct ServerEditorView: EditorView {
   var cancelationHandler: (() -> Void)?
 
   @State var isIpValid = false
+  /// True if this is editing an existing server.
+  let isEditor: Bool
 
   init(_ item: ServerDescriptor?, completion: @escaping (ServerDescriptor) -> Void, cancelation: (() -> Void)?) {
     completionHandler = completion
     cancelationHandler = cancelation
 
+    isEditor = item == nil
     _descriptor = State(initialValue: item ?? ServerDescriptor(name: "", host: "", port: nil))
   }
 
@@ -46,12 +49,14 @@ struct ServerEditorView: EditorView {
       HStack {
         if let cancel = cancelationHandler {
           Button("Cancel", action: cancel)
-            .buttonStyle(BorderlessButtonStyle())
+            .buttonStyle(SecondaryButtonStyle())
         }
-        Button("Save") {
+        Button(isEditor ? "Save" : "Add") {
           if verify() { completionHandler(descriptor) }
         }
+        .buttonStyle(PrimaryButtonStyle())
       }
+      .padding(.top, 8)
     }
     .frame(width: 200)
   }

diff --git a/Shared/Views/DisabledButtonStyle.swift b/Shared/Views/DisabledButtonStyle.swift
@@ -0,0 +1,20 @@
+//
+//  DisabledButtonStyle.swift
+//  DeltaClient
+//
+//  Created by Rohan van Klinken on 11/7/21.
+//
+
+import SwiftUI
+
+struct DisabledButtonStyle: ButtonStyle {
+  func makeBody(configuration: Configuration) -> some View {
+    HStack {
+      Spacer()
+      configuration.label.foregroundColor(.gray)
+      Spacer()
+    }
+    .padding(6)
+    .background(Color.secondary.brightness(-0.4).cornerRadius(4))
+  }
+}
diff --git a/Shared/Views/Play/PlayServerView.swift b/Shared/Views/Play/PlayServerView.swift
@@ -90,6 +90,8 @@ struct PlayServerView: View {
           VStack {
             Text("Downloading terrain..")
             Button("Cancel", action: disconnect)
+              .buttonStyle(SecondaryButtonStyle())
+              .frame(width: 150)
           }
         case .playing:
           ZStack {
@@ -111,15 +113,20 @@ struct PlayServerView: View {
             if !cursorCaptured {
               switch overlayState.current {
                 case .menu:
+                  // Invisible button for escape to exit menu. Because keyboard shortcuts aren't working with my custom button styles
+                  Button("Back to game", action: inputDelegate.captureCursor)
+                    .keyboardShortcut(.escape, modifiers: [])
+                    .opacity(0)
+
                   VStack {
                     Button("Back to game", action: inputDelegate.captureCursor)
-                      .keyboardShortcut(.escape, modifiers: [])
-                      .frame(width: 100)
+                      .buttonStyle(PrimaryButtonStyle())
                     Button("Settings", action: { overlayState.update(to: .settings) })
-                      .frame(width: 100)
+                      .buttonStyle(SecondaryButtonStyle())
                     Button("Disconnect", action: disconnect)
-                      .frame(width: 100)
+                      .buttonStyle(SecondaryButtonStyle())
                   }
+                  .frame(width: 200)
                 case .settings:
                   InGameSettingsView(eventBus: client.eventBus, onDone: {
                     overlayState.update(to: .menu)

diff --git a/Shared/Views/PrimaryButtonStyle.swift b/Shared/Views/PrimaryButtonStyle.swift
@@ -0,0 +1,20 @@
+//
+//  PrimaryButtonStyle.swift
+//  DeltaClient
+//
+//  Created by Rohan van Klinken on 11/7/21.
+//
+
+import SwiftUI
+
+struct PrimaryButtonStyle: ButtonStyle {
+  func makeBody(configuration: Configuration) -> some View {
+    HStack {
+      Spacer()
+      configuration.label.foregroundColor(.white)
+      Spacer()
+    }
+    .padding(6)
+    .background(Color.accentColor.brightness(configuration.isPressed ? 0.15 : 0).cornerRadius(4))
+  }
+}
diff --git a/Shared/Views/SecondaryButtonStyle.swift b/Shared/Views/SecondaryButtonStyle.swift
@@ -0,0 +1,20 @@
+//
+//  SecondaryButtonStyle.swift
+//  DeltaClient
+//
+//  Created by Rohan van Klinken on 11/7/21.
+//
+
+import SwiftUI
+
+struct SecondaryButtonStyle: ButtonStyle {
+  func makeBody(configuration: Configuration) -> some View {
+    HStack {
+      Spacer()
+      configuration.label.foregroundColor(.white)
+      Spacer()
+    }
+    .padding(6)
+    .background(Color.secondary.brightness(configuration.isPressed ? 0 : -0.15).cornerRadius(4))
+  }
+}
diff --git a/Shared/Views/ServerList/ServerDetail.swift b/Shared/Views/ServerList/ServerDetail.swift
@@ -26,17 +26,25 @@ struct ServerDetail: View {
             Text(verbatim: "\(info.numPlayers)/\(info.maxPlayers) online")
             Text("version: \(info.versionName) \(info.protocolVersion == Constants.protocolVersion ? "" : "(incompatible)")")
               .padding(.bottom, 8)
+            Button("Play") {
+              appState.update(to: .playServer(descriptor))
+            }
+            .buttonStyle(SecondaryButtonStyle())
+            .frame(width: 150)
           case let .failure(error):
             Text("Connection failed: \(error.localizedDescription)")
               .padding(.bottom, 8)
+            Button("Play") { }
+              .buttonStyle(SecondaryButtonStyle())
+              .frame(width: 150)
+              .disabled(false)
         }
       } else {
         Text("Pinging..")
           .padding(.bottom, 8)
-      }
-
-      Button("Play") {
-        appState.update(to: .playServer(descriptor))
+        Button("Play") { }
+          .buttonStyle(DisabledButtonStyle())
+          .frame(width: 150)
       }
     }
   }