added a close button to panels. closes jejacks0n#78

spec/javascripts/mercury/panel_spec.js.coffee

@@ -22,16 +22,23 @@ describe "Mercury.Panel", ->
       expect(html).toContain('class="mercury-panel loading"')
       expect(html).toContain('style="display:none;"')
       expect(html).toContain('<h1>foo panel</h1><div class="mercury-panel-pane"></div>')
+      expect(html).not.toContain('class="mercury-panel-close"')
 
     it "appends to any element", ->
       @panel = new Mercury.Panel('/evergreen/resources/panel.html', 'foo', {appendTo: '#panel_container', title: 'foo panel'})
       expect($('#panel_container .mercury-panel').length).toEqual(1)
 
+    it "creates a close button if it should", ->
+      @panel = new Mercury.Panel('/evergreen/resources/panel.html', 'foo', {appendTo: '#test', title: 'foo panel', closeButton: true})
+      html = $('<div>').html(@panel.element).html()
+      expect(html).toContain('class="mercury-panel-close"')
+      expect(@panel.element.find('.mercury-panel-close').css('opacity')).toEqual('0')
+
 
   describe "observed events", ->
 
     beforeEach ->
-      @panel = new Mercury.Panel('/evergreen/resources/panel.html', 'foo', {appendTo: '#test', title: 'foo panel', for: $('#button')})
+      @panel = new Mercury.Panel('/evergreen/resources/panel.html', 'foo', {appendTo: '#test', title: 'foo panel', for: $('#button'), closeButton: true})
 
     describe "custom event: resize", ->
 
@@ -65,6 +72,14 @@ describe "Mercury.Panel", ->
         expect(loadContentSpy.argsForCall[0]).toEqual(['new content'])
         expect(resizeSpy.callCount).toEqual(1)
 
+    describe "clicking on the close button", ->
+
+      it "calls hide:panels", ->
+        spy = spyOn(Mercury, 'trigger').andCallFake(=>)
+        jasmine.simulate.click(@panel.element.find('.mercury-panel-close').get(0))
+        expect(spy.callCount).toEqual(1)
+        expect(spy.argsForCall[0]).toEqual(['hide:panels'])
+
 
   describe "#show", ->
 

vendor/assets/javascripts/mercury/panel.js.coffee

@@ -9,6 +9,9 @@ class @Mercury.Panel extends Mercury.Dialog
     @titleElement = jQuery("<h1>#{@options.title}</h1>").appendTo(@element)
     @paneElement = jQuery('<div>', {class: 'mercury-panel-pane'}).appendTo(@element)
 
+    if @options.closeButton
+      jQuery('<a/>', {class: 'mercury-panel-close'}).appendTo(@titleElement).css({opacity: 0})
+
     @element.appendTo(jQuery(@options.appendTo).get(0) ? 'body')
 
 
@@ -21,6 +24,10 @@ class @Mercury.Panel extends Mercury.Dialog
 
     @element.mousedown (event) -> event.stopPropagation()
 
+    @titleElement.find('.mercury-panel-close').click (event) ->
+      event.preventDefault()
+      Mercury.trigger('hide:panels')
+
     @element.bind 'ajax:beforeSend', (event, xhr, options) =>
       options.success = (content) =>
         @loadContent(content)
@@ -35,6 +42,7 @@ class @Mercury.Panel extends Mercury.Dialog
 
 
   resize: ->
+    @titleElement.find('.mercury-panel-close').css({opacity: 0})
     @paneElement.css({display: 'none'})
     preWidth = @element.width()
 
@@ -44,6 +52,8 @@ class @Mercury.Panel extends Mercury.Dialog
     @paneElement.css({visibility: 'visible', display: 'none'})
     position = @element.offset()
     @element.animate {left: position.left - (postWidth - preWidth), width: postWidth}, 200, 'easeInOutSine', =>
+      @titleElement.find('.mercury-panel-close').animate({opacity: 1}, 100)
+
       @paneElement.css({display: 'block', width: postWidth})
       @makeDraggable()
 

vendor/assets/javascripts/mercury/toolbar.button.js.coffee

@@ -11,7 +11,7 @@ class @Mercury.Toolbar.Button
     @element.data('expander', "<div class=\"mercury-expander-button\" data-button=\"#{@name}\"><em></em><span>#{@title}</span></div>")
 
     @handled = {}
-    dialogOptions = {title: @summary || @title, preload: @types.preload, appendTo: @options.appendDialogsTo || 'body', for: @element}
+
     for own type, mixed of @types
       switch type
         when 'preload' then true
@@ -32,18 +32,18 @@ class @Mercury.Toolbar.Button
         when 'palette'
           @element.addClass("mercury-button-palette")
           url = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
-          @handled[type] = new Mercury.Palette(url, @name, dialogOptions)
+          @handled[type] = new Mercury.Palette(url, @name, @defaultDialogOptions())
 
         when 'select'
           @element.addClass("mercury-button-select").find('em').html(@title)
           url = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
-          @handled[type] = new Mercury.Select(url, @name, dialogOptions)
+          @handled[type] = new Mercury.Select(url, @name, @defaultDialogOptions())
 
         when 'panel'
           @element.addClass('mercury-button-panel')
           url = if jQuery.isFunction(mixed) then mixed.call(@, @name) else mixed
           @handled['toggle'] = true
-          @handled[type] = new Mercury.Panel(url, @name, dialogOptions)
+          @handled[type] = new Mercury.Panel(url, @name, @defaultDialogOptions())
 
         when 'modal'
           @handled[type] = if jQuery.isFunction(mixed) then mixed.apply(@, @name) else mixed
@@ -110,6 +110,16 @@ class @Mercury.Toolbar.Button
       Mercury.trigger('focus:frame') if @options['regions'] && @options['regions'].length
 
 
+  defaultDialogOptions: ->
+    {
+      title: @summary || @title
+      preload: @types.preload
+      appendTo: @options.appendDialogsTo || 'body'
+      closeButton: true
+      for: @element
+    }
+
+
   togglePressed: ->
     @element.toggleClass('pressed')
 

vendor/assets/stylesheets/mercury/dialog.css

@@ -80,6 +80,14 @@
   cursor: move;
   text-shadow: 1px 1px 2px rgba(0,0,0, .9);
 }
+.mercury-panel h1 a.mercury-panel-close {
+  float: right;
+  width: 42px;
+  height: 42px;
+  margin: -14px -20px;
+  background: url(/assets/mercury/close.png) no-repeat center;
+  cursor: default;
+}
 .mercury-panel h4,
 .mercury-panel h5,
 .mercury-panel h6 {