AlchemyCMS · tvdeyen · Dec 13, 2023 · Dec 7, 2023 · Dec 12, 2023 · Dec 12, 2023
@@ -100,6 +100,11 @@ input.button {
   &:focus:not(.disabled):not([disabled]) {
     @include default-focus-style;
   }
+
+  .spinner {
+    position: static;
+    transform: none;
+  }
 }
 
 button.icon_button {

@@ -1,5 +1,6 @@
 $sitemap-url-large-width: 250px;
 $sitemap-url-xlarge-width: 350px;
+$sitemap-url-header-offset: 110px;
 
 #sort_panel {
   background: $light-gray;
@@ -177,12 +178,20 @@ $sitemap-url-xlarge-width: 350px;
   background-color: $sitemap-page-background-color;
   border-left: 1px solid $light-gray;
   float: right;
+  display: none;
+  justify-content: end;
+  width: 170px;
   height: $sitemap-line-height;
   line-height: $sitemap-line-height;
-  padding: 0 $default-padding;
 
   .page_status {
+    margin: 0 $default-margin;
     padding: 0 $default-padding;
+    white-space: nowrap;
+  }
+
+  @media screen and (min-width: $medium-screen-break-point) {
+    display: flex;
   }
 }
 
@@ -210,22 +219,28 @@ $sitemap-url-xlarge-width: 350px;
   .page_urlname {
     display: none;
     margin-left: auto;
+    padding-left: $default-padding;
 
     @media screen and (min-width: $large-screen-break-point) {
       display: block;
-      width: $sitemap-url-large-width;
+      width: $sitemap-url-large-width + $sitemap-url-header-offset;
     }
 
     @media screen and (min-width: 1440px) {
-      width: $sitemap-url-xlarge-width;
+      width: $sitemap-url-xlarge-width + $sitemap-url-header-offset;
     }
   }
 
   .page_status {
+    display: none;
     padding-left: 2 * $default-padding;
     margin-right: 190px;
     margin-left: auto;
 
+    @media screen and (min-width: $medium-screen-break-point) {
+      display: block;
+    }
+
     @media screen and (min-width: $large-screen-break-point) {
       margin-left: initial;
     }

@@ -1,7 +1,7 @@
 /**
  * Show the character counter below input fields and textareas
  */
-import { AlchemyHTMLElement } from "./alchemy_html_element"
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { translate } from "alchemy_admin/i18n"
 
 class CharCounter extends AlchemyHTMLElement {

@@ -1,4 +1,4 @@
-import { AlchemyHTMLElement } from "./alchemy_html_element"
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { translate, currentLocale } from "alchemy_admin/i18n"
 import flatpickr from "flatpickr"
 

@@ -1,4 +1,4 @@
-import { RemoteSelect } from "./remote_select"
+import { RemoteSelect } from "alchemy_admin/components/remote_select"
 
 class NodeSelect extends RemoteSelect {
   _searchQuery(term, page) {

@@ -1,4 +1,4 @@
-import { AlchemyHTMLElement } from "./alchemy_html_element"
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 
 class Overlay extends AlchemyHTMLElement {
   static properties = {

@@ -1,4 +1,4 @@
-import { RemoteSelect } from "./remote_select"
+import { RemoteSelect } from "alchemy_admin/components/remote_select"
 
 class PageSelect extends RemoteSelect {
   onChange(event) {

@@ -1,4 +1,4 @@
-import { AlchemyHTMLElement } from "./alchemy_html_element"
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 
 export class RemoteSelect extends AlchemyHTMLElement {
   static properties = {

@@ -1,4 +1,4 @@
-import { AlchemyHTMLElement } from "./alchemy_html_element"
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 
 class Spinner extends AlchemyHTMLElement {
   static properties = {

@@ -1,4 +1,4 @@
-import { AlchemyHTMLElement } from "./alchemy_html_element"
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { currentLocale } from "alchemy_admin/i18n"
 
 const TOOLBAR_ROW_HEIGHT = 30

@@ -62,14 +62,22 @@ def status
         }
       end
 
-      # Returns the translated status for given status type.
+      # Returns the long translated status message for given status type.
       #
       # @param [Symbol] status_type
       #
-      def status_title(status_type)
+      def status_message(status_type)
         Alchemy.t(status[status_type].to_s, scope: "page_states.#{status_type}")
       end
 
+      # Returns the sort translated status title for given status type.
+      #
+      # @param [Symbol] status_type
+      #
+      def status_title(status_type)
+        Alchemy.t(status[status_type].to_s, scope: "page_status_titles.#{status_type}")
+      end
+
       # Returns the self#page_layout definition from config/alchemy/page_layouts.yml file.
       def definition
         definition = PageLayout.get(page_layout)

@@ -123,16 +123,18 @@
       {{/if}}
     </div>
     <div class="page_infos">
+      {{#if restricted}}
       <span class="page_status">
-        <sl-tooltip content="{{status_titles.public}}" class="like-hint-tooltip" placement="bottom-start">
-          <i class="icon ri-fw ri-1x ri-cloud{{#unless public}}-off{{/unless}}-line {{#if public}}disabled{{/if}}"></i>
-        </sl-tooltip>
+        <i class="icon ri-fw ri-1x ri-lock-line"></i>
+        {{status_titles.restricted}}
       </span>
+      {{/if}}
+      {{#unless public}}
       <span class="page_status">
-        <sl-tooltip content="{{status_titles.restricted}}" class="like-hint-tooltip" placement="bottom-start">
-          <i class="icon ri-fw ri-1x ri-lock{{#unless restricted}}-unlock{{/unless}}-line {{#unless restricted}}disabled{{/unless}}"></i>
-        </sl-tooltip>
+        <i class="icon ri-fw ri-1x ri-cloud-off-line"></i>
+        {{status_titles.public}}
       </span>
+      {{/unless}}
     </div>
     <div class="sitemap_url" title="{{url_path}}">
       {{ url_path }}

@@ -1,18 +1,14 @@
 <span class="page_status">
-  <sl-tooltip content="<%= page.status_title(:public) %>" placement="bottom" class="like-hint-tooltip">
-    <% if page.public? %>
-      <%= render_icon(:cloud, size: "1x", class: "disabled") %>
-    <% else %>
-      <%= render_icon("cloud-off", size: "1x") %>
-    <% end %>
-  </sl-tooltip>
+  <% if page.public? %>
+    <%= render_icon(:cloud, size: "1x", class: "disabled") %>
+  <% else %>
+    <%= render_icon("cloud-off", size: "1x") %>
+  <% end %>
 </span>
 <span class="page_status">
-  <sl-tooltip content="<%= page.status_title(:restricted) %>" placement="bottom" class="like-hint-tooltip">
-    <% if page.restricted? %>
-      <%= render_icon(:lock, size: "1x") %>
-    <% else %>
-      <%= render_icon("lock-unlock", size: "1x", class: "disabled") %>
-    <% end %>
-  </sl-tooltip>
+  <% if page.restricted? %>
+    <%= render_icon(:lock, size: "1x") %>
+  <% else %>
+    <%= render_icon("lock-unlock", size: "1x", class: "disabled") %>
+  <% end %>
 </span>
@@ -17,7 +17,7 @@
           Alchemy::Page.human_attribute_name(:updated_at),
           default_order: "desc" %>
       </th>
-      <th class="status center"><%= Alchemy::Page.human_attribute_name(:status) %></th>
+      <th class="status right"><%= Alchemy::Page.human_attribute_name(:status) %></th>
       <th class="tools"></th>
     </tr>
   </thead>

@@ -36,8 +36,19 @@
   <td class="date">
     <%= l(page.updated_at, format: :"alchemy.default") %>
   </td>
-  <td class="status center">
-    <%= render "alchemy/admin/pages/page_status", page: page %>
+  <td class="status right">
+    <% if page.restricted? %>
+      <span class="page_status">
+        <%= render_icon(:lock, size: "1x") %>
+        <%= page.status_title(:restricted) %>
+      </span>
+    <% end %>
+    <% unless page.public? %>
+      <span class="page_status">
+        <%= render_icon("cloud-off", size: "1x") %>
+        <%= page.status_title(:public) %>
+      </span>
+    <% end %>
   </td>
   <td class="tools">
     <% if can?(:info, page) %>

@@ -5,12 +5,12 @@
     icon: "file-add",
     url: alchemy.new_admin_page_path(language: @current_language),
     hotkey: 'alt+n',
+    tooltip_placement: "top-start",
     dialog_options: {
       title: Alchemy.t('Add a page'),
       size: '340x215',
       overflow: true
     },
-    title: Alchemy.t('Add a page'),
     label: Alchemy.t('Add a page'),
     if_permitted_to: [:create, Alchemy::Page]
   ) %>

@@ -22,19 +22,19 @@
     <p>
       <span class="page_status">
         <% if @page.public? %>
-          <%= render_icon(:cloud, size: "1x", class: "disabled") %>
+          <%= render_icon(:cloud, size: "1x") %>
         <% else %>
           <%= render_icon("cloud-off", size: "1x") %>
         <% end %>
-        <%= @page.status_title(:public) %>
+        <%= @page.status_message(:public) %>
       </span>
       <span class="page_status">
         <% if @page.restricted? %>
           <%= render_icon(:lock, size: "1x") %>
         <% else %>
-          <%= render_icon("lock-unlock", size: "1x", class: "disabled") %>
+          <%= render_icon("lock-unlock", size: "1x") %>
         <% end %>
-        <%= @page.status_title(:restricted) %>
+        <%= @page.status_message(:restricted) %>
       </span>
     </p>
   </div>

@@ -527,19 +527,27 @@ en:
     "Page created": "Page: '%{name}' created."
     page_infos: "Page info"
     page_properties: "Page properties"
-    page_public: "published"
     page_published: "Published page"
-    page_restricted: "restricted"
     page_states:
       public:
-        "true": "Page is published."
-        "false": "Page is unpublished."
+        "true": "Page is available online."
+        "false": "Page is unavailable for website visitors."
       locked:
         "true": "Page is being edited at the moment."
         "false": ""
       restricted:
-        "true": "Page is restricted."
-        "false": "Page is not restricted."
+        "true": "Page is only accessible by members."
+        "false": "Page is accessible by all visitors."
+    page_status_titles:
+      public:
+        "true": "online"
+        "false": "offline"
+      locked:
+        "true": "locked"
+        "false": ""
+      restricted:
+        "true": "restricted"
+        "false": "accessible"
     page_status: "Status"
     page_title: "Title"
     page_type: "Type"

@@ -1683,15 +1683,29 @@ module Alchemy
 
       describe "#status_title" do
         it "returns a translated status string for public status" do
-          expect(page.status_title(:public)).to eq("Page is published.")
+          expect(page.status_title(:public)).to eq("online")
         end
 
         it "returns a translated status string for locked status" do
           expect(page.status_title(:locked)).to eq("")
         end
 
         it "returns a translated status string for restricted status" do
-          expect(page.status_title(:restricted)).to eq("Page is not restricted.")
+          expect(page.status_title(:restricted)).to eq("accessible")
+        end
+      end
+
+      describe "#status_message" do
+        it "returns a translated status string for public status" do
+          expect(page.status_message(:public)).to eq("Page is available online.")
+        end
+
+        it "returns a translated status string for locked status" do
+          expect(page.status_message(:locked)).to eq("")
+        end
+
+        it "returns a translated status string for restricted status" do
+          expect(page.status_message(:restricted)).to eq("Page is accessible by all visitors.")
         end
       end
     end