Allow page visible toggle (4.6) (#1838)

* Use translated menu name in page form

* Format admin pages helper with Rufo

* Allow to pass a label to page_status_checkox helper

* Only check for menus having same language as page

We should only check if any menus are present to attach a page to for the same language.

* Allow to toggle visible on pages attached to menus

The Page#visible status is used to build the urlname of child pages. If a page is attached to a menu we should still be able to toggle that flag.

* Add active button style

* Reduce horizontal padding of small button

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 {

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;

app/helpers/alchemy/admin/pages_helper.rb

@@ -9,13 +9,13 @@ module PagesHelper
       #
       def preview_sizes_for_select
         options_for_select([
-          'auto',
-          [Alchemy.t('240', scope: 'preview_sizes'), 240],
-          [Alchemy.t('320', scope: 'preview_sizes'), 320],
-          [Alchemy.t('480', scope: 'preview_sizes'), 480],
-          [Alchemy.t('768', scope: 'preview_sizes'), 768],
-          [Alchemy.t('1024', scope: 'preview_sizes'), 1024],
-          [Alchemy.t('1280', scope: 'preview_sizes'), 1280]
+          "auto",
+          [Alchemy.t("240", scope: "preview_sizes"), 240],
+          [Alchemy.t("320", scope: "preview_sizes"), 320],
+          [Alchemy.t("480", scope: "preview_sizes"), 480],
+          [Alchemy.t("768", scope: "preview_sizes"), 768],
+          [Alchemy.t("1024", scope: "preview_sizes"), 1024],
+          [Alchemy.t("1280", scope: "preview_sizes"), 1280],
         ])
       end
 
@@ -27,30 +27,30 @@ def page_layout_label(page)
         if page.persisted? && page.definition.blank?
           [
             page_layout_missing_warning,
-            Alchemy.t(:page_type)
-          ].join(' ').html_safe
+            Alchemy.t(:page_type),
+          ].join(" ").html_safe
         else
           Alchemy.t(:page_type)
         end
       end
 
-      def page_status_checkbox(page, attribute)
-        label = page.class.human_attribute_name(attribute)
+      def page_status_checkbox(page, attribute, label: nil)
+        label_text = label || page.class.human_attribute_name(attribute)
 
         if page.attribute_fixed?(attribute)
           checkbox = check_box(:page, attribute, disabled: true)
-          hint = content_tag(:span, class: 'hint-bubble') do
+          hint = content_tag(:span, class: "hint-bubble") do
             Alchemy.t(:attribute_fixed, attribute: attribute)
           end
-          content = content_tag(:span, class: 'with-hint') do
-            "#{checkbox}\n#{label}\n#{hint}".html_safe
+          content = content_tag(:span, class: "with-hint") do
+            "#{checkbox}\n#{label_text}\n#{hint}".html_safe
           end
         else
           checkbox = check_box(:page, attribute)
-          content = "#{checkbox}\n#{label}".html_safe
+          content = "#{checkbox}\n#{label_text}".html_safe
         end
 
-        content_tag(:label, class: 'checkbox') { content }
+        content_tag(:label, class: "checkbox") { content }
       end
     end
   end

app/views/alchemy/admin/pages/_menu_fields.html.erb

@@ -1,33 +1,37 @@
-<% if @page.menus.any? %>
-  <label class="checkbox">
-    <input type="checkbox" disabled checked>
-    <%= Alchemy.t(:attached_to) %>
-  </label>
-  <% @page.menus.each do |menu| %>
-    <span class="page-menu-name label">
-      <%= menu.name %>
-    </span>
+<% if Alchemy::Node.roots.where(language: @page.language).any? %>
+  <% unless @page.language_root %>
+    <%= page_status_checkbox(@page, :visible, label: Alchemy.t("show in url of child pages")) %>
+  <% end %>
+  <% if @page.menus.any? %>
+    <label style="vertical-align: middle">
+      <%= Alchemy.t(:attached_to) %>
+    </label>
+    <% @page.menus.each do |menu| %>
+      <span class="page-menu-name label">
+        <%= I18n.t(menu.name, scope: [:alchemy, :menu_names]) %>
+      </span>
+    <% end %>
+  <% else %>
+    <a class="button small" id="attach-page"><%= Alchemy.t("attach to a menu") %></a>
+    <%= f.input :menu_id, collection: Alchemy::Node.roots.map { |n|
+        [I18n.t(n.name, scope: [:alchemy, :menu_names]), n.id]
+      },
+      prompt: Alchemy.t("Please choose a menu"),
+      input_html: { class: "alchemy_selectbox" },
+      wrapper_html: { class: "hidden" },
+      label: false %>
+    <script>
+      (function() {
+        var wrapper = document.querySelector(".input.page_menu_id")
+        document.querySelector("#attach-page").addEventListener("click", function() {
+          var select = wrapper.querySelector("select")
+          this.classList.toggle("active")
+          wrapper.classList.toggle("hidden")
+          $(select).select2("val", "")
+        })
+      })()
+    </script>
   <% end %>
-<% elsif Alchemy::Node.roots.any? %>
-  <%= page_status_checkbox(@page, :visible) %>
-  <%= f.input :menu_id, collection: Alchemy::Node.roots.map { |n| [n.name, n.id] },
-    prompt: Alchemy.t('Please choose a menu'),
-    input_html: { class: 'alchemy_selectbox' },
-    wrapper_html: { style: @page.visible? ? 'display: block' : 'display: none' },
-    label: false %>
-  <script>
-    (function() {
-      var $wrapper = $('.input.page_menu_id')
-      $('#page_visible').click(function() {
-        if ($(this).is(':checked')) {
-          $wrapper.show()
-        } else {
-          $wrapper.find('select').val('')
-          $wrapper.hide()
-        }
-      })
-    })()
-  </script>
 <% else %>
   <%= page_status_checkbox(@page, :visible) %>
 <% end %>