Collapse the signature box and show on hover

js/redactor-osticket.js

@@ -123,39 +123,61 @@ RedactorPlugins.signature = {
     init: function() {
         var $el = $(this.$element.get(0));
         if ($el.data('signatureField')) {
-            this.$signatureBox = $('<div class="redactor_editor selected-signature"></div>')
-                .html($el.data('signature'))
+            this.$signatureBox = $('<div class="selected-signature"></div>')
+                .append($('<div class="inner"></div>')
+                    .html($el.data('signature'))
+                )
                 .appendTo(this.$box);
             $('input[name='+$el.data('signatureField')+']', $el.closest('form'))
                 .on('change', false, false, $.proxy(this.updateSignature, this))
             if ($el.data('deptField'))
                 $(':input[name='+$el.data('deptField')+']', $el.closest('form'))
                     .on('change', false, false, $.proxy(this.updateSignature, this))
+            // Expand on hover
+            var outer = this.$signatureBox,
+                inner = $('.inner', this.$signatureBox).get(0),
+                originalHeight = outer.height(),
+                hoverTimeout = undefined,
+                originalShadow = this.$signatureBox.css('box-shadow');
+            this.$signatureBox.hover(function() {
+                hoverTimeout = setTimeout($.proxy(function() {
+                    originalHeight = outer.height()
+                    $(this).animate({
+                        'height': inner.offsetHeight
+                    }, 'fast');
+                    $(this).css('box-shadow', 'none', 'important');
+                }, this), 250);
+            }, function() {
+                clearTimeout(hoverTimeout);
+                $(this).stop().animate({
+                    'height': Math.min(inner.offsetHeight, originalHeight)
+                }, 'fast');
+                $(this).css('box-shadow', originalShadow);
+            });
         }
     },
     updateSignature: function(e) {
         var $el = $(this.$element.get(0));
-            selected = e.target,
-            type = $(selected).val(),
+            selected = $(':input:checked[name='+$el.data('signatureField')+']', $el.closest('form')).val(),
+            type = $(e.target).val(),
             dept = $(':input[name='+$el.data('deptField')+']', $el.closest('form')).val(),
-            url = 'ajax.php/content/signature/';
+            url = 'ajax.php/content/signature/',
+            inner = $('.inner', this.$signatureBox);
         e.preventDefault && e.preventDefault();
-        if (type == 'dept' && $el.data('deptId'))
+        if (selected == 'dept' && $el.data('deptId'))
             url += 'dept/' + $el.data('deptId');
-        else if ((type == 'dept' || (type % 1 === 0)) && $el.data('deptField')) {
-            if (type && type % 1 === 0)
-                url += 'dept/' + type
-            else if (type == 'dept' && dept)
+        else if (selected == 'dept' && $el.data('deptField')) {
+            if (dept)
                 url += 'dept/' + dept
             else
-                return this.$signatureBox.empty().hide();
+                return inner.empty().parent().hide();
         }
         else if (type == 'none')
-           return this.$signatureBox.empty().hide();
+           return inner.empty().parent().hide();
         else
-            url += type
+            url += selected
 
-        this.$signatureBox.load(url).show();
+        inner.load(url).parent().show();
     }
 };
 

scp/css/scp.css

@@ -1535,13 +1535,16 @@ div.patch {
     color: #555;
 }
 
-div.redactor_editor.selected-signature {
-    opacity: 0.5;
+div.selected-signature {
     border-top: 1px dotted #aaa;
-    padding-top: 0.1em !important;
-    background-color: #f9f9f9 !important;
-}
-.selected-signature:empty {
-    border-top: none;
-    display: none;
+    padding: 0.3em 10px 5px;
+    background-color: #f9f9f9;
+    height: 2.5em;
+    overflow-y: hidden;
+    box-shadow: inset 0px -5px 5px -5px rgba(206, 199, 182, 1.0);
+    font-size: 15px;
+    line-height: 1.25rem;
+}
+div.selected-signature .inner {
+    opacity: 0.5;
 }