Merge pull request #5518 from solidusio/elia/admin-menu

[admin] Fix menu styles & add a backend menu items importer
solidusio · Nov 27, 2023 · 5dd0817 · 5dd0817
2 parents 4db50dc + 597211c
commit 5dd0817
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 11 deletions.
diff --git a/admin/app/components/solidus_admin/layout/navigation/account/component.html.erb b/admin/app/components/solidus_admin/layout/navigation/account/component.html.erb
@@ -14,7 +14,7 @@
       cursor-pointer
     ">
     <%= icon_tag("user-smile-fill", class: "inline-block align-text-bottom shrink-0 w-6 h-6 rounded-[4.81rem] body-small fill-yellow bg-black") %>
-    <span class="overflow-hidden whitespace-nowrap text-ellipsis">
+    <span class="overflow-hidden whitespace-nowrap text-ellipsis leading-6">
       <%= @user_label %>
     </span>
   </summary>

diff --git a/admin/app/components/solidus_admin/layout/navigation/component.html.erb b/admin/app/components/solidus_admin/layout/navigation/component.html.erb
@@ -9,14 +9,14 @@
   <% end %>
 
   <%= link_to @store_url, target: :_blank, class: "flex mb-4 px-2 py-1.5 border border-gray-100 rounded-sm shadow-sm" do %>
-    <div class="flex-grow">
+    <div class="flex-grow flex flex-col gap-0.5">
       <p class="body-small-bold text-black"><%= @store.name %></p>
-      <p class="body-tiny text-gray-500"><%= @store_url %></p>
+      <p class="body-tiny text-gray-500"><%= @store.url %></p>
     </div>
     <%= render component("ui/icon").new(name: 'arrow-right-up-line', class: 'w-4 h-4 fill-gray-400') %>
   <% end %>
 
-  <ul>
+  <ul class="flex flex-col gap-0.5">
     <%= render component("layout/navigation/item").with_collection(items, fullpath: request.fullpath) %>
   </ul>
 

diff --git a/admin/app/components/solidus_admin/layout/navigation/item/component.html.erb b/admin/app/components/solidus_admin/layout/navigation/item/component.html.erb
@@ -4,7 +4,7 @@
     aria-current="<%= @item.current?(@url_helpers, @fullpath) ? "page" : "false" %>"
     class="
       flex gap-3 items-center
-      py-0.5 px-3 mb-0.5 rounded
+      py-1 px-3 rounded
       hover:text-red-500 hover:bg-gray-50
       <%= "text-red-500 bg-gray-50" if active? %>
       <%= @item.top_level ? "body-small-bold text-black" : "body-small text-gray-600" %>
@@ -19,7 +19,7 @@
   </a>
 
   <% if @item.children? %>
-    <ul class="<%= "hidden" unless active? %>">
+    <ul class="flex flex-col gap-0.5 pt-0.5 <%= "hidden" unless active? %>">
       <%= render self.class.with_collection(@item.children, url_helpers: @url_helpers, fullpath: @fullpath) %>
     </ul>
   <% end %>

diff --git a/admin/lib/generators/solidus_admin/install/install_generator.rb b/admin/lib/generators/solidus_admin/install/install_generator.rb
@@ -17,7 +17,7 @@ def install_solidus_core_support
       end
 
       def copy_initializer
-        copy_file "config/initializers/solidus_admin.rb"
+        template 'config/initializers/solidus_admin.rb.tt', 'config/initializers/solidus_admin.rb'
       end
 
       def ignore_tailwind_build_files

diff --git a/...ates/config/initializers/solidus_admin.rb → ...s/config/initializers/solidus_admin.rb.tt b/...ates/config/initializers/solidus_admin.rb → ...s/config/initializers/solidus_admin.rb.tt
@@ -23,6 +23,15 @@
   # regeneration of the importmap.
   # config.importmap_cache_sweepers << Rails.root.join("app/javascript/my_admin_components")
 
+  # If you want to avoid defining menu_item customizations twice while migrating to SolidusAdmin
+  # you can import menu_items from the backend by uncommenting the following line,
+  # but you will need to
+  <%- if defined? Spree::Backend -%>
+  config.import_menu_items_from_backend!
+  <%- else -%>
+  # config.import_menu_items_from_backend!
+  <%- end -%>
+
   # Add custom paths to importmap files to be loaded.
   # config.importmap_paths << Rails.root.join("config/solidus_admin_importmap.rb")
   #

diff --git a/admin/lib/solidus_admin/configuration.rb b/admin/lib/solidus_admin/configuration.rb
@@ -186,6 +186,41 @@ def menu_items
       ]
     end
 
+    def import_menu_items_from_backend!
+      menu_item_to_hash = ->(item, index) do
+        route =
+          if item.url.is_a?(Symbol)
+            -> { solidus_admin.public_send(item.url) }
+          elsif item.url.is_a?(String)
+            -> { item.url }
+          elsif item.url.is_a?(Proc)
+            item.url
+          elsif item.url.nil?
+            -> { spree.public_send(:"admin_#{item.label}_path") }
+          else
+            raise ArgumentError, "Unknown url type #{item.url.class}"
+          end
+
+        icon =
+          case item.icon
+          when /^ri-/
+            item.icon.delete_prefix("ri-")
+          when String
+            'record-circle-line' # fallback on a generic icon
+          end
+
+        {
+          position: index,
+          key: item.label,
+          icon: icon,
+          route: route,
+          children: item.children.map.with_index(&menu_item_to_hash)
+        }
+      end
+
+      @menu_items = Spree::Backend::Config.menu_items.map.with_index(&menu_item_to_hash)
+    end
+
     def components
       @components ||= Hash.new do |_h, k|
         const_name = "solidus_admin/#{k}/component".classify

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss
@@ -4,7 +4,7 @@ $color-navbar-hover: $color-navbar !default;
 @import "spree/backend/components/switch_solidus_admin";
 
 .solidus-admin--nav {
-  background-color: $color-light;
+  background-color: $solidus-admin-gray-15;
   position: sticky;
   top: 0;
   bottom: 0;
@@ -93,15 +93,15 @@ $color-navbar-hover: $color-navbar !default;
     }
 
     &--name {
-      line-height: 24px;
+      line-height: 20px;
       font-size: 14px;
       font-weight: 600;
       color: $color-dark;
       display: block;
     }
 
     &--url {
-      line-height: 20px;
+      line-height: 16px;
       font-size: 12px;
       font-weight: 400;
       color: $color-dark-light;
@@ -120,6 +120,7 @@ $color-navbar-hover: $color-navbar !default;
     padding: 0;
     list-style: none;
     text-align: left;
+    margin-bottom: 12px;
 
     li {
       padding: 0;
@@ -152,6 +153,10 @@ $color-navbar-hover: $color-navbar !default;
       }
     }
 
+    li > label > span {
+      line-height: 20px;
+    }
+
     li.selected > a {
       background: $color-navbar-active-bg;
       color: $color-navbar-active;

diff --git a/backend/app/views/spree/admin/shared/_navigation_solidus_admin.html.erb b/backend/app/views/spree/admin/shared/_navigation_solidus_admin.html.erb
@@ -8,7 +8,7 @@
       <%- end %>
 
       <%= link_to "//#{default_store.url}", target: '_blank', class: 'solidus-admin--nav--store-link' do %>
-        <div style="flex-grow: 1">
+        <div style="flex-grow: 1; display: flex; flex-direction: column; gap: 2px;">
           <span class="solidus-admin--nav--store-link--name"><%= default_store.name %></span>
           <span class="solidus-admin--nav--store-link--url"><%= default_store.url %></span>
         </div>