Float draft-saved box inside redactor editors

include/staff/tpl.inc.php

@@ -97,7 +97,7 @@ $tpl=$msgtemplates[$selected];
 
 <div>
     <input type="text" name="subject" size="65" value="<?php echo $info['subject']; ?>"
-    style="font-size:14pt">
+    style="font-size:14pt;width:100%;box-sizing:border-box">
     <div style="margin-bottom:0.5em;margin-top:0.5em">
     </div>
     <input type="hidden" name="draft_id" value=""/>

js/redactor-osticket.js

@@ -4,8 +4,8 @@ if (typeof RedactorPlugins === 'undefined') var RedactorPlugins = {};
  * automatically, along with draft autosave, and image uploading.
  *
  * Configuration:
- * draft_namespace: namespace for the draft retrieval
- * draft_object_id: extension to the namespace for draft retrieval
+ * draftNamespace: namespace for the draft retrieval
+ * draftObjectId: extension to the namespace for draft retrieval
  *
  * Caveats:
  * Login (staff only currently) is required server-side for drafts and image
@@ -14,17 +14,37 @@ if (typeof RedactorPlugins === 'undefined') var RedactorPlugins = {};
  */
 RedactorPlugins.draft = {
     init: function() {
-        if (!this.opts.draft_namespace)
+        if (!this.opts.draftNamespace)
             return;
 
         this.opts.changeCallback = this.hideDraftSaved;
-        var autosave_url = 'ajax.php/draft/' + this.opts.draft_namespace;
-        if (this.opts.draft_object_id)
-            autosave_url += '.' + this.opts.draft_object_id;
+        var autosave_url = 'ajax.php/draft/' + this.opts.draftNamespace;
+        if (this.opts.draftObjectId)
+            autosave_url += '.' + this.opts.draftObjectId;
         this.opts.autosave = autosave_url;
         this.opts.autosaveInterval = 10;
         this.opts.autosaveCallback = this.setupDraftUpdate;
         this.opts.initCallback = this.recoverDraft;
+
+        this.$draft_saved = $('<span>')
+            .addClass("pull-right draft-saved faded")
+            .css({'position':'absolute','top':'3em','right':'0.5em'})
+            .hide()
+            .append($('<span>')
+                .text('Draft Saved'));
+        if (this.opts.draftDelete) {
+            this.$draft_saved.append($('<span>')
+                .css({'padding-left':'1em', 'cursor':'pointer'})
+                .click($.proxy(function() {
+                    this.deleteDraft();
+                    return false;
+                }, this))
+                .append($('<i>')
+                    .addClass('icon-trash')
+                )
+            );
+        }
+        this.$toolbar.append(this.$draft_saved);
     },
     recoverDraft: function() {
         var self = this;
@@ -62,11 +82,11 @@ RedactorPlugins.draft = {
         });
     },
     setupDraftUpdate: function(data) {
-        this.$box.parent().find('.draft-saved').show();
+        this.$draft_saved.show().delay(5000).fadeOut();
 
         // Slight workaround. Signal the 'keyup' event normally signaled
         // from typing in the <textarea>
-        if ($.autoLock && this.opts.draft_namespace == 'ticket.response')
+        if ($.autoLock && this.opts.draftNamespace == 'ticket.response')
             if (this.get())
                 $.autoLock.handleEvent();
 
@@ -102,7 +122,7 @@ RedactorPlugins.draft = {
     },
 
     hideDraftSaved: function() {
-        this.$box.parent().find('.draft-saved').hide();
+        this.$draft_saved.hide();
     },
 
     deleteDraft: function() {
@@ -238,33 +258,9 @@ $(function() {
             });
         }
         if (el.hasClass('draft')) {
-            var draft_saved = $('<span>')
-                .addClass("pull-right draft-saved faded")
-                .css({'position':'absolute','top':'0.2em','right':'1em'})
-                .hide()
-                .append($('<span>')
-                    .css({'position':'relative', 'top':'0.17em'})
-                    .text('Draft Saved'));
             el.closest('form').append($('<input type="hidden" name="draft_id"/>'));
-            if (el.hasClass('draft-delete')) {
-                draft_saved.append($('<span>')
-                    .addClass('action-button')
-                    .click(function() {
-                        el.redactor('deleteDraft');
-                        return false;
-                    })
-                    .append($('<i>')
-                        .addClass('icon-trash')
-                    )
-                );
-            }
-            el.parent().css('position', 'relative');
-            draft_saved.insertBefore(el);
             options['plugins'].push('draft');
-            if (el.data('draftNamespace'))
-                options['draft_namespace'] = el.data('draftNamespace');
-            if (el.data('draftObjectId'))
-                options['draft_object_id'] = el.data('draftObjectId');
+            options.draftDelete = el.hasClass('draft-delete');
         }
         el.redactor(options);
     },

scp/css/scp.css

@@ -1817,3 +1817,12 @@ table.custom-info td {
 .ui-datepicker {
     z-index: 100 !important;
 }
+.draft-saved {
+    background-color: black;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 4px 8px 6px;
+    border-radius: 3px;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    line-height: 14px;
+}