From: Tom Hughes <tom@compton.nu>
Date: Sun, 4 Aug 2024 11:36:27 +0000 (+0100)
Subject: Merge remote-tracking branch 'upstream/pull/5042'
X-Git-Tag: live~266
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/1e15b89f763d103cc33acbf5be21db912c080528?hp=add32a4fe97255a4db0627a8550f4c37fa0ee4ca

Merge remote-tracking branch 'upstream/pull/5042'
---

diff --git a/app/assets/javascripts/richtext.js b/app/assets/javascripts/richtext.js
index 3036f169b..259b914de 100644
--- a/app/assets/javascripts/richtext.js
+++ b/app/assets/javascripts/richtext.js
@@ -1,7 +1,4 @@
 $(document).ready(function () {
-  /* Hide the preview panes */
-  $(".richtext_preview").hide();
-
   /*
    * When the text in an edit pane is changed, clear the contents of
    * the associated preview pne so that it will be regenerated when
@@ -11,34 +8,10 @@ $(document).ready(function () {
     $(this).parents(".richtext_container").find(".richtext_preview").empty();
   });
 
-  /* 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.
-   */
-  $(".richtext_doedit").click(function (event) {
-    var editor = $(this).parents(".richtext_container").find("textarea");
-    var preview = $(this).parents(".richtext_container").find(".richtext_preview");
-
-    preview.hide();
-    editor.show();
-
-    $(this).siblings(".richtext_dopreview").prop("disabled", false);
-    $(this).prop("disabled", true);
-
-    event.preventDefault();
-  });
-
   /*
-   * Install a click handler to switch to preview mode when the
-   * preview button is pressed.
+   * Install a handler to switch to preview mode
    */
-  $(".richtext_dopreview").click(function (event) {
+  $(".richtext_dopreview").on("show.bs.tab", function () {
     var editor = $(this).parents(".richtext_container").find("textarea");
     var preview = $(this).parents(".richtext_container").find(".richtext_preview");
     var minHeight = editor.outerHeight() - preview.outerHeight() + preview.height();
@@ -54,13 +27,6 @@ $(document).ready(function () {
       });
     }
 
-    editor.hide();
     preview.css("min-height", minHeight + "px");
-    preview.show();
-
-    $(this).siblings(".richtext_doedit").prop("disabled", false);
-    $(this).prop("disabled", true);
-
-    event.preventDefault();
   });
 });
diff --git a/app/views/shared/_richtext_field.html.erb b/app/views/shared/_richtext_field.html.erb
index f471cbbbf..238175762 100644
--- a/app/views/shared/_richtext_field.html.erb
+++ b/app/views/shared/_richtext_field.html.erb
@@ -1,14 +1,24 @@
 <div id="<%= id %>_container" class="row richtext_container">
   <div id="<%= id %>_content" class="col-sm-8 mb-3 mb-sm-0 richtext_content">
-    <%= 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>
+    <ul class="nav nav-tabs mb-3" role="tablist">
+      <li class="nav-item">
+        <button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#<%= id %>_edit"><%= t(".edit") %></button>
+      </li>
+      <li class="nav-item">
+        <button type="button" class="nav-link richtext_dopreview" data-bs-toggle="tab" data-bs-target="#<%= id %>_preview"><%= t(".preview") %></button>
+      </li>
+    </ul>
+    <div class="tab-content">
+      <div id="<%= id %>_edit" class="tab-pane show active">
+        <%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
+      </div>
+      <div id="<%= id %>_preview" class="tab-pane richtext_preview richtext text-break"></div>
+    </div>
   </div>
   <div id="<%= id %>_help" class="col-sm-4 richtext_help">
     <div class="card bg-body-tertiary h-100">
       <div class="card-body">
         <%= render :partial => "shared/#{type}_help" %>
-        <%= submit_tag t(".edit"), :id => "#{id}_doedit", :class => "richtext_doedit btn btn-primary", :disabled => true %>
-        <%= submit_tag t(".preview"), :id => "#{id}_dopreview", :class => "richtext_dopreview btn btn-primary" %>
       </div>
     </div>
   </div>
diff --git a/test/controllers/diary_entries_controller_test.rb b/test/controllers/diary_entries_controller_test.rb
index bb6c25781..24475fc80 100644
--- a/test/controllers/diary_entries_controller_test.rb
+++ b/test/controllers/diary_entries_controller_test.rb
@@ -119,9 +119,9 @@ class DiaryEntriesControllerTest < ActionDispatch::IntegrationTest
         assert_select "input#latitude[name='diary_entry[latitude]']", :count => 1
         assert_select "input#longitude[name='diary_entry[longitude]']", :count => 1
         assert_select "input[name=commit][type=submit][value=Publish]", :count => 1
-        assert_select "input[name=commit][type=submit][value=Edit]", :count => 1
-        assert_select "input[name=commit][type=submit][value=Preview]", :count => 1
-        assert_select "input", :count => 6
+        assert_select "button[type=button]", :text => "Edit", :count => 1
+        assert_select "button[type=button]", :text => "Preview", :count => 1
+        assert_select "input", :count => 4
       end
     end
   end
@@ -272,9 +272,9 @@ class DiaryEntriesControllerTest < ActionDispatch::IntegrationTest
         assert_select "input#latitude[name='diary_entry[latitude]']", :count => 1
         assert_select "input#longitude[name='diary_entry[longitude]']", :count => 1
         assert_select "input[name=commit][type=submit][value=Update]", :count => 1
-        assert_select "input[name=commit][type=submit][value=Edit]", :count => 1
-        assert_select "input[name=commit][type=submit][value=Preview]", :count => 1
-        assert_select "input", :count => 7
+        assert_select "button[type=button]", :text => "Edit", :count => 1
+        assert_select "button[type=button]", :text => "Preview", :count => 1
+        assert_select "input", :count => 5
       end
     end