Show url name in Page tree (AlchemyCMS#1856)

* Show url_path of page in admin page tree The url_path of a page is useful information. We should always display it not only if the page redirects to external. * Format sitemap.scss with Prettier * Change the sitemap urlname background color The old color was too prominent for that information. * Show a legend on top of admin page trees * Use a left aligned column layout for page tree * Slighty more space for node page name and url * Eager load associated records in page tree serializer Now that we need the language and its site we should eager load them in the page tree serializer. Also the locker of a page should be eager loaded. On a site with ~300 pages loading the page tree went from 722ms to 221ms on my machine.
mickenorlen · Jun 2, 2020 · 961fdc7 · 961fdc7
1 parent c801a36
commit 961fdc7
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 30 deletions.
diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
@@ -108,7 +108,7 @@ $form-right-width: 65% !default;
 $sitemap-line-height: 32px !default;
 $sitemap-page-background-color: rgba($white, 0.75) !default;
 $sitemap-page-hover-color: rgba($light_yellow, 0.5) !default;
-$sitemap-info-background-color: rgba($linked-color, 0.5) !default;
+$sitemap-info-background-color: rgba($white, 0.5) !default;
 $sitemap-highlight-color: rgba(#fffba5, 0.5) !default;
 
 $main-menu-width: 150px !default;

diff --git a/app/assets/stylesheets/alchemy/lists.scss b/app/assets/stylesheets/alchemy/lists.scss
@@ -13,14 +13,6 @@ ul.list {
   padding: 0;
   list-style-type: none;
 
-  &#layoutpages {
-    margin-top: 16px;
-
-    li {
-      margin-left: 8px;
-    }
-  }
-
   li {
     list-style-type: none;
     display: block;

diff --git a/app/assets/stylesheets/alchemy/nodes.scss b/app/assets/stylesheets/alchemy/nodes.scss
@@ -18,7 +18,7 @@
 
   .node_page,
   .node_url {
-    width: 200px;
+    width: 250px;
     max-width: 45%;
     white-space: nowrap;
     text-overflow: ellipsis;

diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss
@@ -1,3 +1,6 @@
+$sitemap-url-large-width: 250px;
+$sitemap-url-xlarge-width: 350px;
+
 #sort_panel {
   background: $light-gray;
   padding: 47px 0 8px 0;
@@ -28,23 +31,35 @@
   padding: 0 10px;
   margin: 2px;
   text-decoration: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 
   &.inactive {
     color: #656565;
   }
 }
 
-.redirect_url {
+.sitemap_url {
+  display: none;
   float: right;
-  text-align: right;
   background-color: $sitemap-info-background-color;
-  line-height: $sitemap-line-height;
+  line-height: $sitemap-line-height - 2px;
   font-size: $small-font-size;
-  padding: 0 2*$default-padding;
-  max-width: 45%;
+  padding: 0 2 * $default-padding;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  border: 1px solid $sitemap-page-background-color;
+
+  @media screen and (min-width: $large-screen-break-point) {
+    display: block;
+    width: $sitemap-url-large-width;
+  }
+
+  @media screen and (min-width: 1440px) {
+    width: $sitemap-url-xlarge-width;
+  }
 }
 
 .sitemap_line_spacer {
@@ -55,7 +70,7 @@
 
 .sitemap_page {
   height: $sitemap-line-height;
-  margin: 3*$default-margin 0;
+  margin: 3 * $default-margin 0;
   position: relative;
   transition: background-color $transition-duration;
 
@@ -89,13 +104,13 @@
   width: 32px;
   line-height: $sitemap-line-height;
   float: left;
-  padding: 0 2*$default-padding;
+  padding: 0 2 * $default-padding;
   text-align: center;
 }
 
 .sitemap_right_tools {
   height: $sitemap-line-height;
-  padding: 0 2*$default-padding;
+  padding: 0 2 * $default-padding;
   float: right;
 
   .sitemap_tool {
@@ -130,7 +145,9 @@
   &.sorting {
     padding-top: 100px;
 
-    .page_icon { cursor: move }
+    .page_icon {
+      cursor: move;
+    }
   }
 
   .page_folder {
@@ -183,25 +200,44 @@
 }
 
 #sitemap_heading {
+  display: flex;
   padding: 0;
-
-  .page_infos {
-    margin-right: 210px;
-    text-align: left;
-    float: right;
-    line-height: 28px;
-    background: transparent;
-  }
+  line-height: 28px;
 
   .page_name {
-    line-height: 28px;
     margin-left: 43px;
   }
+
+  .page_urlname {
+    display: none;
+    margin-left: auto;
+    padding-left: 2 * $default-padding;
+    padding-right: 2 * $default-padding;
+
+    @media screen and (min-width: $large-screen-break-point) {
+      display: block;
+      width: $sitemap-url-large-width;
+    }
+
+    @media screen and (min-width: 1440px) {
+      width: $sitemap-url-xlarge-width;
+    }
+  }
+
+  .page_status {
+    padding-left: 2 * $default-padding;
+    margin-right: 214px;
+    margin-left: auto;
+
+    @media screen and (min-width: $large-screen-break-point) {
+      margin-left: initial;
+    }
+  }
 }
 
 #page_filter_result {
   display: none;
-  margin-left: 2*$default-margin;
+  margin-left: 2 * $default-margin;
 }
 
 .alchemy-dialog {
@@ -213,6 +249,8 @@
     margin: 0;
     padding: 0 24px 8px 8px;
 
-    .page_icon { cursor: default }
+    .page_icon {
+      cursor: default;
+    }
   }
 }
diff --git a/app/serializers/alchemy/page_tree_serializer.rb b/app/serializers/alchemy/page_tree_serializer.rb
@@ -58,6 +58,7 @@ def page_hash(page, has_children, level, folded)
         page_layout: page.page_layout,
         slug: page.slug,
         urlname: page.urlname,
+        url_path: page.url_path,
         level: level,
         root: level == 1,
         root_or_leaf: level == 1 || !has_children,

diff --git a/app/views/alchemy/admin/layoutpages/index.html.erb b/app/views/alchemy/admin/layoutpages/index.html.erb
@@ -30,6 +30,10 @@
 </div>
 <% end %>
 
+<h4 id="sitemap_heading">
+  <span class="page_name"><%= Alchemy::Page.human_attribute_name(:name) %></span>
+</h4>
+
 <ul class="list" id="layoutpages">
   <%= render partial: "layoutpage", collection: @layout_pages %>
 </ul>
diff --git a/app/views/alchemy/admin/pages/_page.html.erb b/app/views/alchemy/admin/pages/_page.html.erb
@@ -159,6 +159,9 @@
         <span class="hint-bubble">{{status_titles.restricted}}</span>
       </span>
     </div>
+    <div class="sitemap_url" title="{{url_path}}">
+      {{ url_path }}
+    </div>
     <div class="sitemap_sitename">
       {{#if permissions.edit_content}}
         <%= link_to_unless(

diff --git a/app/views/alchemy/admin/pages/_sitemap.html.erb b/app/views/alchemy/admin/pages/_sitemap.html.erb
@@ -1,4 +1,10 @@
 <div id="sitemap-wrapper">
+  <h4 id="sitemap_heading">
+    <span class="page_name"><%= Alchemy::Page.human_attribute_name(:name) %></span>
+    <span class="page_urlname"><%= Alchemy::Page.human_attribute_name(:urlname) %></span>
+    <span class="page_status"><%= Alchemy.t(:page_status) %></span>
+  </h4>
+
   <p class="loading"></p>
 </div>
 

diff --git a/spec/requests/alchemy/admin/pages_controller_spec.rb b/spec/requests/alchemy/admin/pages_controller_spec.rb
@@ -116,6 +116,8 @@ module Alchemy
           expect(page["name"]).to eq(page_1.name)
           expect(page).to have_key("children")
           expect(page["children"].count).to eq(1)
+          expect(page).to have_key("url_path")
+          expect(page["url_path"]).to eq(page_1.url_path)
 
           page = page["children"].first
 
@@ -125,6 +127,8 @@ module Alchemy
           expect(page["name"]).to eq(page_2.name)
           expect(page).to have_key("children")
           expect(page["children"].count).to eq(1)
+          expect(page).to have_key("url_path")
+          expect(page["url_path"]).to eq(page_2.url_path)
 
           page = page["children"].first
 
@@ -134,6 +138,8 @@ module Alchemy
           expect(page["name"]).to eq(page_3.name)
           expect(page).to have_key("children")
           expect(page["children"].count).to eq(0)
+          expect(page).to have_key("url_path")
+          expect(page["url_path"]).to eq(page_3.url_path)
         end
 
         context "when branch is folded" do