diff --git a/css/media.css b/css/media.css
index cf466b7..05d684a 100644
--- a/css/media.css
+++ b/css/media.css
@@ -13,22 +13,62 @@
display: none;
}
+/* Remove the default border */
+.ui-widget-content {
+ border: none;
+}
+
+#media-dialog-tabs-wrapper {
+ height: 2.6em;
+ padding-left: 10px;
+}
+
+/* Title for the media browser */
+#media-dialog-tabs-wrapper .item-list h3 {
+ float: left;
+}
+
+#media-browser-tabset ul.tabs {
+ padding: 0;
+ border: none;
+}
+
+/* Reset the height to match the browser */
+#media-browser-tabset ul.tabs.primary li a:link {
+ height: 2em;
+}
+
+.media-browser-tab.ui-tabs-panel {
+ border: 1px solid #cccccc;
+}
+
/* Media item */
.media-item {
background: #FFFFFF;
border: 1px solid #CCCCCC;
padding: 5px;
- width: 100px;
+ position: relative;
+}
+
+/* Items in the media browser which do not use the media_thumbnail image style
+ have a wrapper div that constrains the height and width display */
+.media-style-wrapper {
+ overflow: hidden;
}
.media-item img {
height: auto;
- width: 100%;
+ margin-bottom: 10px;
}
.media-item .label-wrapper {
text-align: center;
+ position: absolute;
+ bottom: 0;
+ margin-left: auto;
+ margin-right: auto;
+ width: 90%;
}
.media-item .label-wrapper label {
diff --git a/includes/media.browser.inc b/includes/media.browser.inc
index 36ee0b0..98427ca 100644
--- a/includes/media.browser.inc
+++ b/includes/media.browser.inc
@@ -154,7 +154,12 @@ function media_browser($selected = NULL) {
'#suffix' => '',
);
$output['tabset']['list'] = array(
- '#markup' => theme('item_list', array('items' => $tabs)),
+ '#theme' => 'item_list',
+ '#title' => t('Select a file'),
+ '#attributes' => array('class' => array('tabs', 'primary')),
+ '#items' => $tabs,
+ '#prefix' => '
' . "\n",
+ '#suffix' => "
\n",
);
$output['tabset']['plugins'] = $plugin_output;
diff --git a/includes/media.theme.inc b/includes/media.theme.inc
index b369543..9a8a5c8 100644
--- a/includes/media.theme.inc
+++ b/includes/media.theme.inc
@@ -33,11 +33,9 @@ function template_preprocess_media_dialog_page(&$variables) {
* Adds a wrapper around a preview of a media file.
*/
function theme_media_thumbnail($variables) {
- $label = '';
$element = $variables['element'];
- $destination = drupal_get_destination();
- // Wrappers to go around the thumbnail.
+ // Wrappers to go around the thumbnail.
$attributes = array(
'title' => $element['#name'],
'class' => 'media-item',
@@ -46,33 +44,32 @@ function theme_media_thumbnail($variables) {
$prefix = '
';
$suffix = '
';
- // Arguments for the thumbnail link.
- $thumb = $element['#children'];
- $target = 'file/' . $element['#file']->fid . '/edit';
- $options = array(
- 'query' => $destination,
- 'html' => TRUE,
- 'attributes' => array('title' => t('Click to edit details')),
- );
+ // Default display is the already rendered file.
+ $content = $element['#children'];
- // Element should be a field renderable array. This should be improved.
- if (!empty($element['#show_names']) && $element['#name']) {
- $label = '';
+ // If this is not image content, get the image style dimensions and wrap the
+ // output in a div.
+ // @TODO Hopefully there is a better way to do this. This whitelists two
+ // formats that are functional in the browser and the admin view
+ if ($element['#theme'] != 'image_style' || $element['#theme'] != 'media_formatter_large_icon') {
+ static $attributes = FALSE;
+ if (! $attributes) {
+ $style = image_style_load('media_thumbnail');
+ $data = $style['effects'][0]['data'];
+ $attributes = array(
+ 'class' => array('media-style-wrapper'),
+ 'style' => 'height: ' . ($style['effects'][0]['data']['height'] + 15) . 'px; width: ' . $style['effects'][0]['data']['width'] . 'px;'
+ );
+ }
+ $content = '