feat: show nodes with a different background color when inactive

bochaco · Dec 10, 2024 · f2e1b78 · f2e1b78
1 parent b8e5877
commit f2e1b78
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/src/node_actions.rs b/src/node_actions.rs
@@ -124,7 +124,7 @@ pub fn NodesActionsView() -> impl IntoView {
         context
             .selecting_nodes
             .update(|(_, executing, _)| *executing = true);
-        let selected = context.selecting_nodes.get_untracked().2;
+        let selected = &context.selecting_nodes.read_untracked().2;
         let nodes = context
             .nodes
             .read_untracked()
@@ -178,6 +178,7 @@ pub fn NodesActionsView() -> impl IntoView {
                 <button
                     type="button"
                     on:click=move |_| {
+                        show_actions_menu.set(false);
                         context
                             .selecting_nodes
                             .update(|(f, _, s)| {

diff --git a/src/nodes_list_view.rs b/src/nodes_list_view.rs
@@ -253,8 +253,14 @@ fn NodeInstanceView(
     view! {
         <div
             on:click=move |_| node_card_clicked()
-            class=move || { if is_selected() { "node-card-selected" } else { "node-card" } }
+            class=move || match (is_selected(), info.read().status.is_active()) {
+                (true, true) => "node-card-selected node-card-active",
+                (true, false) => "node-card-selected node-card-inactive",
+                (false, true) => "node-card node-card-active",
+                (false, false) => "node-card node-card-inactive",
+            }
         >
+
             <div class="flex justify-end">
                 <Show when=move || is_selection_on() fallback=move || view! { "" }.into_view()>
                     <NodeSelection info />
@@ -585,12 +591,14 @@ fn ButtonStopStart(info: RwSignal<NodeInstanceInfo>) -> impl IntoView {
     view! {
         <div class="tooltip tooltip-bottom tooltip-info" data-tip=tip>
             <button
-                class=move || {
-                    if is_selecting_nodes() || info.read().status.is_transitioning() {
-                        "btn-disabled-node-action"
-                    } else {
-                        "btn-node-action"
-                    }
+                class=move || match (
+                    is_selecting_nodes() || info.read().status.is_transitioning(),
+                    info.read().status.is_active(),
+                ) {
+                    (true, true) => "btn-disabled-node-action btn-node-action-active",
+                    (true, false) => "btn-disabled-node-action btn-node-action-inactive",
+                    (false, true) => "btn-node-action btn-node-action-active",
+                    (false, false) => "btn-node-action btn-node-action-inactive",
                 }
                 on:click=move |_| spawn_local(async move {
                     if info.read_untracked().status.is_inactive() {

diff --git a/style/tailwind.css b/style/tailwind.css
@@ -7,19 +7,35 @@
 }
 
 .btn-node-action {
-    @apply inline-flex items-center ml-1 px-1 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white;
+    @apply inline-flex items-center ml-1 px-1 py-1 text-xs font-medium text-gray-900 border border-gray-200 rounded hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-blue-500 dark:focus:text-white;
 }
 
 .btn-disabled-node-action {
-    @apply btn-disabled inline-flex items-center ml-1 px-1 py-1 text-xs font-medium text-gray-200 bg-white border border-gray-200 rounded hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white;
+    @apply btn-disabled inline-flex items-center ml-1 px-1 py-1 text-xs font-medium text-gray-200 border border-gray-200 rounded hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-700 dark:text-gray-700 dark:hover:text-white dark:focus:ring-blue-500 dark:focus:text-white;
+}
+
+.btn-node-action-active {
+    @apply bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700;
+}
+
+.btn-node-action-inactive {
+    @apply bg-gray-50 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800;
 }
 
 .node-card {
-    @apply relative max-w-sm m-2 p-4 bg-gray-50 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700;
+    @apply relative max-w-sm m-2 p-4 border border-gray-200 rounded-lg shadow dark:border-gray-700;
 }
 
 .node-card-selected {
-    @apply relative max-w-sm m-2 p-4 bg-gray-50 border border-blue-700 rounded-lg shadow dark:bg-gray-800 dark:border-blue-400;
+    @apply relative max-w-sm m-2 p-4 border border-blue-700 rounded-lg shadow dark:border-blue-400;
+}
+
+.node-card-active {
+    @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.node-card-inactive {
+    @apply bg-gray-50 dark:bg-gray-900;
 }
 
 .node-info-item {