Manually added hover effect to toolbar menu buttons.

The icon colour still changes sometimes, making the menu look disabled when it isn't. Kudos to @OscarGroth for https://gist.github.com/OskarGroth/a7d921cd4137dc713d49549216d6ebd0
ccmenu · Dec 19, 2023 · a96ac55 · a96ac55
1 parent 2b51430
commit a96ac55
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/CCMenu/Source/Pipeline Window/PipelineListToolbar.swift b/CCMenu/Source/Pipeline Window/PipelineListToolbar.swift
@@ -12,6 +12,8 @@ struct PipelineListToolbar: ToolbarContent {
     @ObservedObject var model: PipelineModel
     @ObservedObject var viewState: ListViewState
     @EnvironmentObject var settings: UserSettings
+    @State var isHoveringOverDetailMenu = false
+    @State var isHoveringOverAddMenu = false
 
     var body: some ToolbarContent {
         ToolbarItemGroup {
@@ -34,10 +36,19 @@ struct PipelineListToolbar: ToolbarContent {
                 Image(systemName: "list.dash.header.rectangle")
             }
             .menuStyle(.borderlessButton)
+            .padding(.bottom, 1)
+            .padding([.leading, .trailing], 8)
+            .frame(height: 28)
+            .opacity(0.7)
+            .background() {
+                Color(.unemphasizedSelectedContentBackgroundColor).opacity(isHoveringOverDetailMenu ? 0.45 : 0)
+            }
+            .onHover {
+                isHoveringOverDetailMenu = $0
+            }
+            .cornerRadius(6)
             .accessibility(label: Text("Display detail menu"))
             .help("Select which details to show for the pipelines")
-
-            Spacer() // TODO: This shouldn't be necessary
         }
 
         ToolbarItemGroup {
@@ -56,6 +67,17 @@ struct PipelineListToolbar: ToolbarContent {
                 Image(systemName: "plus.square")
             }
             .menuStyle(.borderlessButton)
+            .padding(.bottom, 1)
+            .padding([.leading, .trailing], 8)
+            .frame(height: 28)
+            .opacity(0.7)
+            .background() {
+                Color(.unemphasizedSelectedContentBackgroundColor).opacity(isHoveringOverAddMenu ? 0.45 : 0)
+            }
+            .onHover {
+                isHoveringOverAddMenu = $0
+            }
+            .cornerRadius(6)
             .accessibility(label: Text("Add pipeline menu"))
             .help("Add a pipeline")