AlchemyCMS · tvdeyen · Jun 3, 2020 · May 29, 2020 · May 27, 2020 · May 27, 2020
diff --git a/app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee b/app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee
@@ -76,26 +76,26 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
           meta = data.meta
           results:
             data.pages.map (page) ->
-              id: "/#{page.urlname}"
+              id: page.url_path
               name: page.name
-              urlname: page.urlname
+              url_path: page.url_path
               page_id: page.id
           more: meta.page * meta.per_page < meta.total_count
       initSelection: ($element, callback) =>
         urlname = $element.val()
         $.get Alchemy.routes.api_pages_path,
           q:
-            urlname_eq: urlname.replace(/^\//, '')
+            urlname_eq: urlname.replace(/^\/([a-z]{2}(-[A-Z]{2})?\/)?/, '')
           page: 1
           per_page: 1,
           (data) =>
             page = data.pages[0]
             if page
               @initElementSelect(page.id)
               callback
-                id: "/#{page.urlname}"
+                id: page.url_path
                 name: page.name
-                urlname: page.name
+                url_path: page.url_path
                 page_id: page.id
       formatSelection: (page) ->
         page.name

diff --git a/app/assets/javascripts/alchemy/templates/page.hbs b/app/assets/javascripts/alchemy/templates/page.hbs
@@ -4,6 +4,6 @@
     {{ page.name }}
   </span>
   <span class="page-select--page-urlname">
-    /{{ page.urlname }}
+    {{ page.url_path }}
   </span>
 </div>
diff --git a/app/assets/stylesheets/alchemy/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss
@@ -49,9 +49,8 @@
     border-color: $hover-border-color;
   }
 
-  &:active, &:active:focus {
-    border-color: $hover-border-color;
-    box-shadow: none;
+  &:active, &.active {
+    box-shadow: inset $button-box-shadow;
   }
 
   &:focus {

diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
@@ -76,7 +76,7 @@ $button-text-shadow: none !default;
 $button-box-shadow: 0px 1px 1px -1px #333 !default;
 $button-focus-box-shadow: 0px 1px 1px 0px $button-focus-border-color !default;
 $button-padding: 0.55em 2em !default;
-$small-button-padding: 0.4em 1.25em !default;
+$small-button-padding: 0.4em 0.8em !default;
 $button-margin: $form-field-margin !default;
 
 $secondary-button-bg-color: transparent !default;
@@ -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;
@@ -20,31 +23,43 @@
 
 #sitemap-wrapper {
   position: relative;
-  min-height: 100%;
+  min-height: calc(100vh - 96px);
 }
 
 .sitemap_pagename_link {
   display: block;
   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/controllers/alchemy/admin/pages_controller.rb b/app/controllers/alchemy/admin/pages_controller.rb
@@ -140,7 +140,6 @@ def link
         @attachments = Attachment.all.collect { |f|
           [f.name, download_attachment_path(id: f.id, name: f.urlname)]
         }
-        @url_prefix = prefix_locale? ? "#{@current_language.code}/" : ""
       end
 
       def fold

diff --git a/app/controllers/alchemy/api/pages_controller.rb b/app/controllers/alchemy/api/pages_controller.rb
@@ -96,6 +96,7 @@ def page_includes
       [
         :tags,
         {
+          language: :site,
           elements: [
             {
               nested_elements: [

diff --git a/app/models/alchemy/node.rb b/app/models/alchemy/node.rb
@@ -67,7 +67,7 @@ def definitions_file_path
     # Either the value is stored in the database, aka. an external url.
     # Or, if attached, the values comes from a page.
     def url
-      page && "/#{page.urlname}" || read_attribute(:url).presence
+      page&.url_path || read_attribute(:url).presence
     end
 
     def to_partial_path

diff --git a/app/models/alchemy/page.rb b/app/models/alchemy/page.rb
@@ -302,6 +302,13 @@ def find_elements(options = {})
       finder.elements(page: self)
     end
 
+    # = The url_path for this page
+    #
+    # @see Alchemy::Page::UrlPath#call
+    def url_path
+      Alchemy::Page::UrlPath.new(self).call
+    end
+
     # The page's view partial is dependent from its page layout
     #
     # == Define page layouts

diff --git a/app/models/alchemy/page/url_path.rb b/app/models/alchemy/page/url_path.rb
@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Alchemy
+  class Page
+    # = The url_path for this page
+    #
+    # Use this to build relative links to this page
+    #
+    # It takes several circumstances into account:
+    #
+    # 1. It returns just a slash for language root pages of the default langauge
+    # 2. It returns a url path with a leading slash for regular pages
+    # 3. It returns a url path with a leading slash and language code prefix for pages not having the default language
+    # 4. It returns a url path with a leading slash and the language code for language root pages of a non-default language
+    #
+    # == Examples
+    #
+    # Using Rails' link_to helper
+    #
+    #     link_to page.url
+    #
+    class UrlPath
+      ROOT_PATH = "/"
+
+      def initialize(page)
+        @page = page
+        @language = @page.language
+        @site = @language.site
+      end
+
+      def call
+        if @page.language_root?
+          language_root_path
+        elsif @site.languages.select(&:public?).length > 1
+          page_path_with_language_prefix
+        else
+          page_path_with_leading_slash
+        end
+      end
+
+      private
+
+      def language_root_path
+        @language.default? ? ROOT_PATH : language_path
+      end
+
+      def page_path_with_language_prefix
+        @language.default? ? page_path : language_path + page_path
+      end
+
+      def page_path_with_leading_slash
+        @page.language_root? ? ROOT_PATH : page_path
+      end
+
+      def language_path
+        "/#{@page.language_code}"
+      end
+
+      def page_path
+        "/#{@page.urlname}"
+      end
+    end
+  end
+end
diff --git a/app/serializers/alchemy/page_serializer.rb b/app/serializers/alchemy/page_serializer.rb
@@ -13,7 +13,8 @@ class PageSerializer < ActiveModel::Serializer
       :tag_list,
       :created_at,
       :updated_at,
-      :status
+      :status,
+      :url_path
 
     has_many :elements
   end

diff --git a/app/serializers/alchemy/page_tree_serializer.rb b/app/serializers/alchemy/page_tree_serializer.rb
@@ -58,9 +58,10 @@ 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,
+        root: page.depth == 1,
+        root_or_leaf: page.depth == 1 || !has_children,
         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>