Convert richtext edit/preview buttons into tabs

diff --git a/app/assets/javascripts/richtext.js b/app/assets/javascripts/richtext.js
index 70909243b657e21170f5b6e78d0277abd9c1fb7b..cfba5c923fe2c3ad02394c3b48958ff0b2105d58 100644 (file)
--- a/app/assets/javascripts/richtext.js
+++ b/app/assets/javascripts/richtext.js
@@ -14,9 +14,6 @@ $(document).ready(function () {
   /* Disable all the edit buttons */
   $(".richtext_doedit").prop("disabled", true);
 
-  /* Enable the preview buttons */
-  $(".richtext_dopreview").prop("disabled", false);
-
   /*
    * Install a click handler to switch to edit mode when the
    * edit button is pressed.
@@ -28,8 +25,8 @@ $(document).ready(function () {
     preview.hide();
     editor.show();
 
-    $(this).siblings(".richtext_dopreview").prop("disabled", false);
-    $(this).prop("disabled", true);
+    $(this).parents(".richtext_container").find(".richtext_dopreview").prop("disabled", false).removeClass("active");
+    $(this).prop("disabled", true).addClass("active");
   });
 
   /*
@@ -56,7 +53,7 @@ $(document).ready(function () {
     preview.css("min-height", minHeight + "px");
     preview.show();
 
-    $(this).siblings(".richtext_doedit").prop("disabled", false);
-    $(this).prop("disabled", true);
+    $(this).parents(".richtext_container").find(".richtext_doedit").prop("disabled", false).removeClass("active");
+    $(this).prop("disabled", true).addClass("active");
   });
 });

diff --git a/app/views/shared/_richtext_field.html.erb b/app/views/shared/_richtext_field.html.erb
index 6f5b6d3d958c791de9cb38a2414092d5d4172fe4..74d609cd56d3f9096642196ef5fa68be63a31899 100644 (file)
--- a/app/views/shared/_richtext_field.html.erb
+++ b/app/views/shared/_richtext_field.html.erb
@@ -1,5 +1,13 @@
 <div id="<%= id %>_container" class="row richtext_container">
   <div id="<%= id %>_content" class="col-sm-8 mb-3 mb-sm-0 richtext_content">
+    <ul class="nav nav-tabs mb-3" role="tablist">
+      <li class="nav-item">
+        <button type="button" class="nav-link active richtext_doedit"><%= t(".edit") %></button>
+      </li>
+      <li class="nav-item">
+        <button type="button" class="nav-link richtext_dopreview"><%= t(".preview") %></button>
+      </li>
+    </ul>
     <%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
     <div id="<%= id %>_preview" class="richtext_preview richtext text-break"></div>
   </div>
@@ -7,8 +15,6 @@
     <div class="card bg-body-tertiary h-100">
       <div class="card-body">
         <%= render :partial => "shared/#{type}_help" %>
-        <%= button_tag t(".edit"), :type => "button", :id => "#{id}_doedit", :class => "richtext_doedit btn btn-primary", :disabled => true %>
-        <%= button_tag t(".preview"), :type => "button", :id => "#{id}_dopreview", :class => "richtext_dopreview btn btn-primary" %>
       </div>
     </div>
   </div>