From 0619615e51b97375668bfcb95968c7673c17e2fc Mon Sep 17 00:00:00 2001
From: James Elliott <james.elliott@acquia.com>
Date: Fri, 22 Apr 2011 15:34:43 -0400
Subject: [PATCH 12/15] Styling for the button switcher

Scoping for the select list actions behaviors
---
 css/media.css              |   25 +++++++------------------
 css/media.thumbnails.css   |    1 +
 includes/media.browser.inc |   22 +++++++++++++---------
 js/media.admin.js          |    2 +-
 4 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/css/media.css b/css/media.css
index 96591fd..17c18fe 100644
--- a/css/media.css
+++ b/css/media.css
@@ -8,35 +8,31 @@
 
 /* @group media item list */
 
-.item-list .media-display-switch {
+#media-display-switches {
   float: right;
-  line-height: 0;
+  margin-bottom: 10px;
 }
-.item-list .media-display-switch li {
-  float: left;
-  list-style: none;
-  margin-left: -1px;
-}
-.item-list .media-display-switch li a {
+#media-display-switches .form-media-display {
   background: #f2f1f1;
   border: 1px solid;
   border-color: #e4e4e4 #d2d2d2 #b4b4b4 #d3d3d3;
   display: block;
+  float: left;
   padding: 7px 9px;
 }
-.item-list .media-display-switch li.first a {
+#media-display-switches .form-media-display:first-child {
   -moz-border-radius-topleft: 4px;
   -moz-border-radius-bottomleft: 4px;
   -webkit-border-top-left-radius: 4px;
   -webkit-border-bottom-left-radius: 4px;
 }
-.item-list .media-display-switch li.last a {
+#media-display-switches .form-media-display:last-child {
   -moz-border-radius-topright: 4px;
   -moz-border-radius-bottomright: 4px;
   -webkit-border-top-right-radius: 4px;
   -webkit-border-bottom-right-radius: 4px;
 }
-.item-list .media-display-switch li a.active {
+#media-display-switches .form-media-display.active {
   position: relative;
   background: #666;
   border: 1px solid #555;
@@ -99,13 +95,6 @@ div#media-browser-tabs {
 }
 
 /* show the throbber on the page */
-div#media-browser .throbber {
-  height:100%;
-  width:100%;
-  position:absolute;
-  background: transparent url('images/loading.gif') no-repeat center center;
-}
-
 #media-browser .ui-tabs-panel {
   /**
    * This sucks, I don't want to hardcode this, but don't know how else
diff --git a/css/media.thumbnails.css b/css/media.thumbnails.css
index 6bc0ad4..ae68d78 100644
--- a/css/media.thumbnails.css
+++ b/css/media.thumbnails.css
@@ -122,6 +122,7 @@
 html.js .media-thumbnails-select {
   display: block;
   float: left;
+  margin-top: 11px;
 }
 
 html.js .media-thumbnails-select ul {
diff --git a/includes/media.browser.inc b/includes/media.browser.inc
index 9a96333..d254791 100644
--- a/includes/media.browser.inc
+++ b/includes/media.browser.inc
@@ -215,7 +215,7 @@ function media_browser_set_display($type, $js = FALSE) {
     
     $commands = array();
     
-    $container = array_slice(array_reverse($form_state['triggering_element']['#array_parents']), 2);
+    $container = array_slice(array_reverse($form_state['triggering_element']['#array_parents']), 3);
     $element = $form;
     foreach($container as $key) {
       $element = $element[$key];
@@ -353,10 +353,8 @@ function media_browser_thumbnails() {
   }
   
   $path = drupal_get_path('module', 'media');
-  $form['#attached'] = array(
-    'css' => array($path . '/css/media.thumbnails.css'),
-    'js' => array($path . '/js/media.thumbnails.js'),
-  );
+  drupal_add_css($path . '/css/media.thumbnails.css');
+  drupal_add_js($path . '/js/media.thumbnails.js');
   
   $form['select_all'] = array(
     '#theme' => 'links',
@@ -424,19 +422,25 @@ function media_browser_display_switch() {
     }
     
     $links[$delta] = array(
-      '#type' => 'button',
+      '#type' => 'image_button',
+      '#button_type' => 'media-display',
       '#title' => $delta,
       '#value' => $delta,
-      '#href' => '/media/browser/nojs/' . $delta,
+      '#src' => $icon,
       '#ajax' => array(
         'path' => 'media/browser/ajax/' . $delta,
       ),
+      '#attributes' => $attributes,
       '#limit_validation_errors' => array(),
-      '#executes_submission_callback' => FALSE,
+      '#executes_submit_callback' => FALSE,
     );
   }
   
-  return $links;
+  return array(
+    'links' => $links,
+    '#prefix' => '<div id="media-display-switches">',
+    '#suffix' => '</div>',
+  );
 }
 
 /**
diff --git a/js/media.admin.js b/js/media.admin.js
index eed581c..6cf8c2e 100644
--- a/js/media.admin.js
+++ b/js/media.admin.js
@@ -19,7 +19,7 @@ Drupal.behaviors.mediaAdmin = {
   attach: function (context) {
     // When any checkboxes are clicked on this form check to see if any are checked.
     // If any checkboxes are checked, show the edit options (@todo rename to edit-actions).
-    $('#media-admin :checkbox', context).once('media-admin', function() {
+    $('#media-browser :checkbox', context).once('media-admin', function() {
       $(this).bind('change', Drupal.media.admin.showOrHideEditOptions).trigger('change');
     });
     
-- 
1.7.4.msysgit.0