Add basic detachable post editing dialog

#1875

app/assets/javascripts/posts.js

@@ -28,6 +28,7 @@
       this.initialize_post_image_resize_links();
       this.initialize_post_image_resize_to_window_link();
       this.initialize_similar();
+      this.initialize_edit_dialog();
 
       if (Danbooru.meta("always-resize-images") === "true") {
         $("#image-resize-to-window-link").click();
@@ -35,6 +36,59 @@
     }
   }
 
+  Danbooru.Post.initialize_edit_dialog = function(e) {
+    $("#open-post-edit-dialog").button().click(this.open_edit_dialog);
+
+    $("#toggle-related-tags-link").click(function(e) {
+      if ($("#related-tags").is(":visible")) {
+        $("#related-tags").hide();
+        $(e.target).html("«");
+      } else {
+        $("#related-tags").show();
+        Danbooru.RelatedTag.build_all();
+        $(e.target).html("»");
+      }
+      e.preventDefault();
+    });
+  }
+
+  Danbooru.Post.open_edit_dialog = function(e) {
+    $("div.input:has(#post_tag_string)").prevAll().hide();
+    $("#open-post-edit-dialog").hide();
+
+    $("#toggle-related-tags-link").show();
+
+    $("#post_tag_string").css({"resize": "none", "width": "100%"});
+
+    var dialog = $("<div/>").attr("id", "post-edit-dialog");
+    $("#form").appendTo(dialog);
+    dialog.dialog({
+      title: "Edit",
+      width: "auto",
+      close: Danbooru.Post.close_edit_dialog
+    });
+    dialog.dialog("widget").draggable("option", "containment", "none");
+
+    dialog.parent().mouseout(function(e) {
+      dialog.parent().css("opacity", 0.4);
+    })
+    .mouseover(function(e) {
+      dialog.parent().css("opacity", 1);
+    });
+
+    e.preventDefault();
+  }
+
+  Danbooru.Post.close_edit_dialog = function(e, ui) {
+    $("#form").appendTo($("#edit"));
+    $("#post-edit-dialog").remove();
+    $("#related-tags").show();
+    $("#toggle-related-tags-link").html("&raquo;").hide();
+    $("div.input:has(#post_tag_string)").prevAll().show();
+    $("#open-post-edit-dialog").show();
+    $("#post_tag_string").css({"resize": "", "width": ""});
+  }
+
   Danbooru.Post.initialize_tag_autocomplete = function() {
     var $fields_multiple = $(
       "#tags,#post_tag_string,#upload_tag_string,#tag-script-field,#c-moderator-post-queues #query"

app/assets/javascripts/related_tag.js

@@ -102,6 +102,9 @@
     if (Danbooru.RelatedTag.recent_search === null || Danbooru.RelatedTag.recent_search === undefined) {
       return;
     }
+    if ($("#post-edit-dialog").length && !$("#related-tags").is(":visible")) {
+      return;
+    }
 
     $("#related-tags").show();
 

app/assets/stylesheets/common/autocomplete.css.scss

@@ -1,5 +1,6 @@
 .ui-autocomplete {
   font-size: 0.9em;
+  z-index: 1000;
 
   .ui-menu-item a {
     padding: 1px .2em;

app/assets/stylesheets/specific/posts.css.scss

@@ -397,3 +397,10 @@ div#unapprove-dialog {
   }
 }
 
+.ui-widget #form {
+  font-size: 1em;
+
+  input, select, textarea, button {
+    font-size: 0.9em;
+  }
+}

app/views/posts/partials/show/_edit.html.erb

@@ -63,6 +63,7 @@
     <div>
       <%= f.label :tag_string, "Tags" %>
       <%= f.text_area :tag_string, :size => "50x5", :value => post.presenter.categorized_tag_string + " " %>
+      <span id="open-post-edit-dialog" class="ui-icon ui-icon-arrow-2-ne-sw" title="detach"/>
     </div>
 
     <%= button_tag "Related tags", :id => "related-tags-button", :type => "button" %>
@@ -76,7 +77,7 @@
   </div>
 
   <div id="related-tags-container">
-    <h1>Related Tags</h1>
+    <h1>Related Tags <a href="#" id="toggle-related-tags-link" style="display: none;">&raquo;</a></h1>
     <div id="related-tags" class="related-tags">
     </div>
   </div>