From 385e7b157452993730a4c9e1047373794bcb8770 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Thu, 7 Dec 2023 21:49:44 +0100 Subject: [PATCH 1/4] 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. --- app/assets/stylesheets/alchemy/sitemap.scss | 21 +++++++++++++--- app/models/alchemy/page/page_natures.rb | 12 ++++++++-- app/views/alchemy/admin/pages/_page.html.erb | 14 ++++++----- .../alchemy/admin/pages/_page_status.html.erb | 24 ++++++++----------- app/views/alchemy/admin/pages/_table.html.erb | 2 +- .../alchemy/admin/pages/_table_row.html.erb | 15 ++++++++++-- app/views/alchemy/admin/pages/info.html.erb | 8 +++---- config/locales/alchemy.en.yml | 20 +++++++++++----- spec/models/alchemy/page_spec.rb | 18 ++++++++++++-- 9 files changed, 94 insertions(+), 40 deletions(-) diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss index 778573ce07..3b874f8b3e 100644 --- a/app/assets/stylesheets/alchemy/sitemap.scss +++ b/app/assets/stylesheets/alchemy/sitemap.scss @@ -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; } diff --git a/app/models/alchemy/page/page_natures.rb b/app/models/alchemy/page/page_natures.rb index 6e1adbde67..79b7802b14 100644 --- a/app/models/alchemy/page/page_natures.rb +++ b/app/models/alchemy/page/page_natures.rb @@ -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) diff --git a/app/views/alchemy/admin/pages/_page.html.erb b/app/views/alchemy/admin/pages/_page.html.erb index 158e788d32..3fa2a5d889 100644 --- a/app/views/alchemy/admin/pages/_page.html.erb +++ b/app/views/alchemy/admin/pages/_page.html.erb @@ -123,16 +123,18 @@ {{/if}}
+ {{#if restricted}} - + + {{status_titles.restricted}} + {{/if}} + {{#unless public}} - + + {{status_titles.public}} + {{/unless}}
{{ url_path }} diff --git a/app/views/alchemy/admin/pages/_page_status.html.erb b/app/views/alchemy/admin/pages/_page_status.html.erb index 4304a9e660..4c2b68005f 100644 --- a/app/views/alchemy/admin/pages/_page_status.html.erb +++ b/app/views/alchemy/admin/pages/_page_status.html.erb @@ -1,18 +1,14 @@ - + <% if page.public? %> + <%= render_icon(:cloud, size: "1x", class: "disabled") %> + <% else %> + <%= render_icon("cloud-off", size: "1x") %> + <% end %> - + <% if page.restricted? %> + <%= render_icon(:lock, size: "1x") %> + <% else %> + <%= render_icon("lock-unlock", size: "1x", class: "disabled") %> + <% end %> diff --git a/app/views/alchemy/admin/pages/_table.html.erb b/app/views/alchemy/admin/pages/_table.html.erb index ce2fc102f2..f2a71a8e98 100644 --- 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" %> - <%= Alchemy::Page.human_attribute_name(:status) %> + <%= Alchemy::Page.human_attribute_name(:status) %> diff --git a/app/views/alchemy/admin/pages/_table_row.html.erb b/app/views/alchemy/admin/pages/_table_row.html.erb index 019cd983ba..692dbb4ce4 100644 --- a/app/views/alchemy/admin/pages/_table_row.html.erb +++ b/app/views/alchemy/admin/pages/_table_row.html.erb @@ -36,8 +36,19 @@ <%= l(page.updated_at, format: :"alchemy.default") %> - - <%= render "alchemy/admin/pages/page_status", page: page %> + + <% if page.restricted? %> + + <%= render_icon(:lock, size: "1x") %> + <%= page.status_title(:restricted) %> + + <% end %> + <% unless page.public? %> + + <%= render_icon("cloud-off", size: "1x") %> + <%= page.status_title(:public) %> + + <% end %> <% if can?(:info, page) %> diff --git a/app/views/alchemy/admin/pages/info.html.erb b/app/views/alchemy/admin/pages/info.html.erb index d4a520c88d..7f90709e17 100644 --- a/app/views/alchemy/admin/pages/info.html.erb +++ b/app/views/alchemy/admin/pages/info.html.erb @@ -22,19 +22,19 @@

<% 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) %> <% 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) %>

diff --git a/config/locales/alchemy.en.yml b/config/locales/alchemy.en.yml index 93bdf075fb..cb8d36b43c 100644 --- a/config/locales/alchemy.en.yml +++ b/config/locales/alchemy.en.yml @@ -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" diff --git a/spec/models/alchemy/page_spec.rb b/spec/models/alchemy/page_spec.rb index cb36a3c6f0..80352b4854 100644 --- a/spec/models/alchemy/page_spec.rb +++ b/spec/models/alchemy/page_spec.rb @@ -1683,7 +1683,7 @@ 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 @@ -1691,7 +1691,21 @@ module Alchemy 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 From 56302214283d2137ced48399cd2a9489386cb437 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Tue, 12 Dec 2023 18:14:52 +0100 Subject: [PATCH 2/4] Use absolute imports for web components In some Rails apps it does not work with relative imports. --- app/javascript/alchemy_admin/components/char_counter.js | 2 +- app/javascript/alchemy_admin/components/datepicker.js | 2 +- app/javascript/alchemy_admin/components/node_select.js | 2 +- app/javascript/alchemy_admin/components/overlay.js | 2 +- app/javascript/alchemy_admin/components/page_select.js | 2 +- app/javascript/alchemy_admin/components/remote_select.js | 2 +- app/javascript/alchemy_admin/components/spinner.js | 2 +- app/javascript/alchemy_admin/components/tinymce.js | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/javascript/alchemy_admin/components/char_counter.js b/app/javascript/alchemy_admin/components/char_counter.js index b36b91ec8e..2a8752b43d 100644 --- a/app/javascript/alchemy_admin/components/char_counter.js +++ b/app/javascript/alchemy_admin/components/char_counter.js @@ -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 { diff --git a/app/javascript/alchemy_admin/components/datepicker.js b/app/javascript/alchemy_admin/components/datepicker.js index ef83f038ab..22d7ca287b 100644 --- a/app/javascript/alchemy_admin/components/datepicker.js +++ b/app/javascript/alchemy_admin/components/datepicker.js @@ -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" diff --git a/app/javascript/alchemy_admin/components/node_select.js b/app/javascript/alchemy_admin/components/node_select.js index 5e648bb28a..e3d17c1bdd 100644 --- a/app/javascript/alchemy_admin/components/node_select.js +++ b/app/javascript/alchemy_admin/components/node_select.js @@ -1,4 +1,4 @@ -import { RemoteSelect } from "./remote_select" +import { RemoteSelect } from "alchemy_admin/components/remote_select" class NodeSelect extends RemoteSelect { _searchQuery(term, page) { diff --git a/app/javascript/alchemy_admin/components/overlay.js b/app/javascript/alchemy_admin/components/overlay.js index 6db711350f..cbfd58c464 100644 --- a/app/javascript/alchemy_admin/components/overlay.js +++ b/app/javascript/alchemy_admin/components/overlay.js @@ -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 = { diff --git a/app/javascript/alchemy_admin/components/page_select.js b/app/javascript/alchemy_admin/components/page_select.js index cac24fe1de..7d2475bf43 100644 --- a/app/javascript/alchemy_admin/components/page_select.js +++ b/app/javascript/alchemy_admin/components/page_select.js @@ -1,4 +1,4 @@ -import { RemoteSelect } from "./remote_select" +import { RemoteSelect } from "alchemy_admin/components/remote_select" class PageSelect extends RemoteSelect { onChange(event) { diff --git a/app/javascript/alchemy_admin/components/remote_select.js b/app/javascript/alchemy_admin/components/remote_select.js index 6ed12036b9..4612473373 100644 --- a/app/javascript/alchemy_admin/components/remote_select.js +++ b/app/javascript/alchemy_admin/components/remote_select.js @@ -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 = { diff --git a/app/javascript/alchemy_admin/components/spinner.js b/app/javascript/alchemy_admin/components/spinner.js index d2fb01104b..8b0cdc88e7 100644 --- a/app/javascript/alchemy_admin/components/spinner.js +++ b/app/javascript/alchemy_admin/components/spinner.js @@ -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 = { diff --git a/app/javascript/alchemy_admin/components/tinymce.js b/app/javascript/alchemy_admin/components/tinymce.js index 1548e4d7df..349e4ee52c 100644 --- a/app/javascript/alchemy_admin/components/tinymce.js +++ b/app/javascript/alchemy_admin/components/tinymce.js @@ -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 From 46a47ebf56ac3d699fb9a38fc19aa70e40df9151 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Tue, 12 Dec 2023 18:15:58 +0100 Subject: [PATCH 3/4] Fix add page button tooltop alignment It will be overlapped from themain menu otherwise. --- app/views/alchemy/admin/pages/_toolbar.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/alchemy/admin/pages/_toolbar.html.erb b/app/views/alchemy/admin/pages/_toolbar.html.erb index f8493a769a..41d9f4225e 100644 --- a/app/views/alchemy/admin/pages/_toolbar.html.erb +++ b/app/views/alchemy/admin/pages/_toolbar.html.erb @@ -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] ) %> From 78bb3e825357f2496f5956da5942d0ee1b01c60c Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Wed, 13 Dec 2023 08:08:33 +0100 Subject: [PATCH 4/4] Fix spinner position in Reload preview button It shifts the layout if positioned absolute. Since the button is already display flex we do not need the absolute position anymore anyway. --- app/assets/stylesheets/alchemy/buttons.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/stylesheets/alchemy/buttons.scss b/app/assets/stylesheets/alchemy/buttons.scss index df03a5a635..28571d94f3 100644 --- a/app/assets/stylesheets/alchemy/buttons.scss +++ b/app/assets/stylesheets/alchemy/buttons.scss @@ -100,6 +100,11 @@ input.button { &:focus:not(.disabled):not([disabled]) { @include default-focus-style; } + + .spinner { + position: static; + transform: none; + } } button.icon_button {