Show page status inline

This makes it more clear that these icons are status icons and not buttons. Also we only show them if a page has not the default state (online and not restricted) in order to unclutter the screen from obvious information.
AlchemyCMS · Dec 12, 2023 · 0d43087 · 0d43087
1 parent e75e933
commit 0d43087
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 40 deletions.
diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss
@@ -177,12 +177,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 +218,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 + 110;
     }
 
     @media screen and (min-width: 1440px) {
-      width: $sitemap-url-xlarge-width;
+      width: $sitemap-url-xlarge-width + 110;
     }
   }
 
   .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;
     }

diff --git a/app/models/alchemy/page/page_natures.rb b/app/models/alchemy/page/page_natures.rb
@@ -57,19 +57,29 @@ def locked?
       def status
         {
           public: public?,
+          hidden: !public?,
           locked: locked?,
-          restricted: restricted?
+          restricted: restricted?,
+          accessible: !restricted?
         }
       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)

diff --git a/app/serializers/alchemy/page_tree_serializer.rb b/app/serializers/alchemy/page_tree_serializer.rb
@@ -105,7 +105,9 @@ def page_permissions(page, ability)
     def page_status_titles(page)
       {
         public: page.status_title(:public),
-        restricted: page.status_title(:restricted)
+        hidden: page.status_title(:hidden),
+        restricted: page.status_title(:restricted),
+        accessible: page.status_title(:accessible)
       }
     end
   end

diff --git a/app/views/alchemy/admin/pages/_page.html.erb b/app/views/alchemy/admin/pages/_page.html.erb
@@ -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 }}

diff --git a/app/views/alchemy/admin/pages/_page_status.html.erb b/app/views/alchemy/admin/pages/_page_status.html.erb
@@ -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>
diff --git a/app/views/alchemy/admin/pages/_table.html.erb b/app/views/alchemy/admin/pages/_table.html.erb
@@ -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>

diff --git a/app/views/alchemy/admin/pages/_table_row.html.erb b/app/views/alchemy/admin/pages/_table_row.html.erb
@@ -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) %>

diff --git a/app/views/alchemy/admin/pages/info.html.erb b/app/views/alchemy/admin/pages/info.html.erb
@@ -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>

diff --git a/config/locales/alchemy.en.yml b/config/locales/alchemy.en.yml
@@ -527,19 +527,24 @@ 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"
+      restricted:
+        "true": "restricted"
+        "false": "accessible"
     page_status: "Status"
     page_title: "Title"
     page_type: "Type"