From 89ad05712d32cd0ef909e34ae8c9c2f06c0a23f4 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Thu, 16 May 2024 21:48:05 +0200
Subject: [PATCH] Better node-select seperator styling

Makes it more readable and consistant.
---
 app/assets/stylesheets/alchemy/node-select.scss        | 10 +++++++++-
 app/javascript/alchemy_admin/components/node_select.js |  4 +++-
 app/views/alchemy/admin/nodes/_page_nodes.html.erb     |  3 ++-
 spec/features/admin/nodes_management_spec.rb           |  4 ++--
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/alchemy/node-select.scss b/app/assets/stylesheets/alchemy/node-select.scss
index 464c54b6c9..97a20649fd 100644
--- a/app/assets/stylesheets/alchemy/node-select.scss
+++ b/app/assets/stylesheets/alchemy/node-select.scss
@@ -10,15 +10,23 @@
   align-items: center;
   height: 21px;
 
-  .icon {
+  > alchemy-icon {
     margin: 0 8px 0 4px;
+  }
 
+  .icon {
     .select2-highlighted & {
       fill: $white;
     }
   }
 }
 
+.node-select--node-display_name,
+.node-select--node-ancestors {
+  display: inline-flex;
+  align-items: center;
+}
+
 .node-select--node-name {
   font-weight: bold;
 }
diff --git a/app/javascript/alchemy_admin/components/node_select.js b/app/javascript/alchemy_admin/components/node_select.js
index 98276050d4..fbf307c838 100644
--- a/app/javascript/alchemy_admin/components/node_select.js
+++ b/app/javascript/alchemy_admin/components/node_select.js
@@ -23,12 +23,14 @@ class NodeSelect extends RemoteSelect {
    */
   _renderListEntry(node) {
     const ancestors = node.ancestors.map((a) => a.name)
+    const seperator = `<alchemy-icon name="arrow-right-s"></alchemy-icon>`
+
     return `
       <div class="node-select--node">
         <alchemy-icon name="menu-2"></alchemy-icon>
         <div class="node-select--node-display_name">
           <span class="node-select--node-ancestors">
-            ${ancestors.join(" /&nbsp;")}
+            ${ancestors.length > 0 ? ancestors.join(seperator) + seperator : ""}
           </span>
           <span class="node-select--node-name">
             ${node.name}
diff --git a/app/views/alchemy/admin/nodes/_page_nodes.html.erb b/app/views/alchemy/admin/nodes/_page_nodes.html.erb
index 678274cc5b..dbe4e8d295 100644
--- a/app/views/alchemy/admin/nodes/_page_nodes.html.erb
+++ b/app/views/alchemy/admin/nodes/_page_nodes.html.erb
@@ -7,10 +7,11 @@
       <th class="tools"></th>
     </tr>
     <% nodes = @page.nodes.select(&:persisted?) %>
+    <% seperator = '<alchemy-icon name="arrow-right-s" style="vertical-align: text-bottom"></alchemy-icon>' %>
     <% if nodes.length > 0 %>
       <% nodes.each do |node| %>
         <tr class="even">
-          <td><%= "#{node.ancestors.map(&:name).join(" / ")} / #{node.name}" %></td>
+          <td><%== "#{node.ancestors.map(&:name).join(seperator)}#{seperator}<strong>#{node.name}</strong>" %></td>
           <td class="tools">
             <sl-tooltip content="<%= Alchemy.t("delete_node") %>">
               <%= link_to render_icon(:minus),
diff --git a/spec/features/admin/nodes_management_spec.rb b/spec/features/admin/nodes_management_spec.rb
index 83c6d932a7..f81cd3270d 100644
--- a/spec/features/admin/nodes_management_spec.rb
+++ b/spec/features/admin/nodes_management_spec.rb
@@ -29,7 +29,7 @@ def add_menu_item
     add_menu_item
 
     within "#page_nodes table" do
-      expect(page).to have_content("Menu node Menu / A Page 1")
+      expect(page).to have_content("Menu node MenuA Page 1")
     end
     within "[panel='nodes']" do
       expect(page).to have_content("(1) Menu node")
@@ -59,7 +59,7 @@ def add_menu_item
       end
 
       within "#page_nodes table" do
-        expect(page).to_not have_content("Menu node Menu / A Page 1")
+        expect(page).to_not have_content("Menu node MenuA Page 1")
         expect(page).to have_content(Alchemy.t("No menu node for this page found"))
       end
       within "[panel='nodes']" do