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 = '' . $content . ''; } - // @todo should CSS be attached to the form element here? - // $element['#attached']['css'][] = drupal_get_path('module', 'media') . '/css/media.css'; - drupal_add_css(drupal_get_path('module', 'media') . '/css/media.css'); - - $output = $prefix; - if (!empty($element['#add_link'])) { - $output .= l($thumb, $target, $options); - } - else { - $output .= $thumb; + // Add a file name label to the display. + if (!empty($element['#show_names']) && $element['#name']) { + $content .= theme('media_thumbnail_filename', array('element' => $element)); } - $output .= $label . $suffix; - return $output; + + return $prefix . $content . $suffix; } /** @@ -98,5 +95,31 @@ function theme_media_formatter_large_icon($variables) { if (!isset($variables['alt']) && isset($variables['attributes']['alt'])) { $variables['alt'] = $variables['attributes']['alt']; } + + static $attributes = FALSE; + if (! $attributes) { + $style = image_style_load('media_thumbnail'); + $data = $style['effects'][0]['data']; + } + $variables['width'] = $data['width']; + $variables['height'] = $data['height']; + return theme('image', $variables); } + +/** + * Allows for overrides of the thumbnail filename display. + */ +function theme_media_thumbnail_filename($variables) { + $text = $variables['element']['#name']; + if ($variables['element']['#add_link']) { + $target = 'file/' . $variables['element']['#file']->fid . '/edit'; + $options = array( + 'query' => drupal_get_destination(), + 'html' => TRUE, + 'attributes' => array('title' => t('Click to edit details')), + ); + $text = l($variables['element']['#name'], $target, $options); + } + return '
'; +} \ No newline at end of file diff --git a/js/media.popups.js b/js/media.popups.js index c17362b..71945ce 100644 --- a/js/media.popups.js +++ b/js/media.popups.js @@ -305,9 +305,9 @@ Drupal.media.popups.getDialogOptions = function () { modal: true, draggable: false, resizable: false, - minWidth: 600, - width: 800, - height: 550, + minWidth: 500, + width: 670, + height: 280, position: 'center', overlay: { backgroundColor: '#000000', diff --git a/media.install b/media.install index b3d239b..756e3fd 100644 --- a/media.install +++ b/media.install @@ -51,7 +51,7 @@ function media_install() { // Create initial display settings. module_load_include('inc', 'file_entity', 'file_entity.file_api'); $default_image_styles = array( - 'preview' => 'square_thumbnail', + 'preview' => 'media_thumbnail', 'teaser' => 'medium', 'full' => 'large', ); @@ -958,6 +958,33 @@ function media_update_7210() { } /** + * Flush old version of the image style to make the thumbnails appear correctly. + */ +function media_update_7211() { + image_style_flush('square_thumbnail'); + db_update('image_styles') + ->fields(array('name' => 'square_thumbnail')) + ->condition('name', 'media_thumbnail') + ->execute(); + + // Replace any instances in display settings + module_load_include('inc', 'file_entity', 'file_entity.file_api'); + $entity_info = entity_get_info('file'); + $view_modes = array('default' => array('label' => t('Default'))) + $entity_info['view modes']; + foreach ($view_modes as $view_mode => $view_mode_info) { + $displays = file_displays_load('image', $view_mode); + foreach ($displays as $display) { + if ($display->settings['image_style'] == 'square_thumbnail') { + $display->settings['image_style'] = 'media_thumbnail'; + file_display_save($display); + } + } + } + + return t('Flushed image style and updated display styles.'); +} + +/** * Utility function for update 7204. Updates display options within Views. */ function _media_update_7204_update_views_display_options(&$display_options, $view_mode_updates) { diff --git a/media.module b/media.module index 0c85bdb..197c20e 100644 --- a/media.module +++ b/media.module @@ -269,6 +269,11 @@ function media_theme() { 'render element' => 'element', 'file' => 'includes/media.theme.inc', ), + // A preview of the uploaded file. + 'media_thumbnail_filename' => array( + 'variables' => array('element' => NULL), + 'file' => 'includes/media.theme.inc', + ), // Dialog page. 'media_dialog_page' => array( @@ -296,11 +301,11 @@ function media_theme() { */ function media_image_default_styles() { $styles = array(); - $styles['square_thumbnail'] = array( + $styles['media_thumbnail'] = array( 'effects' => array( array( 'name' => 'image_scale_and_crop', - 'data' => array('width' => 180, 'height' => 180), + 'data' => array('width' => 100, 'height' => 100), 'weight' => 0, ), ), @@ -652,10 +657,10 @@ function media_library() { $path . '/js/media.popups.js' => array('group' => JS_DEFAULT), ), 'dependencies' => array( - array('media', 'media_base'), array('system', 'ui.resizable'), array('system', 'ui.draggable'), array('system', 'ui.dialog'), + array('media', 'media_base'), ), ); @@ -665,14 +670,22 @@ function media_library() { 'js' => array( $path . '/js/media.browser.js' => array('group' => JS_DEFAULT), ), - 'css' => array( - $path . '/css/media.browser.css' => array('group' => CSS_DEFAULT), - ), 'dependencies' => array( - array('media', 'media_base'), array('system', 'ui.tabs'), array('system', 'ui.draggable'), array('system', 'ui.dialog'), + array('media', 'media_base'), + ), + ); + + // Resources needed on a media admin page + $libraries['media_admin_page'] = array( + 'title' => 'Media admin page', + 'js' => array( + $path . '/js/media.admin.js' => array('group' => JS_DEFAULT), + ), + 'dependencies' => array( + array('media', 'media_base'), ), ); @@ -1154,8 +1167,7 @@ function media_form_file_entity_admin_files_alter(&$form, $form_state) { $path = drupal_get_path('module', 'media'); require_once $path . '/includes/media.browser.inc'; $form['#attributes']['class'][] = 'file-entity-admin-files-form'; - $form['#attached']['js'][] = $path . '/js/media.admin.js'; - $form['#attached']['css'][] = $path . '/css/media.css'; + $form['#attached']['library'][] = array('media', 'media_admin_page'); media_attach_browser_js($form); // By default, this form contains a table select element called "files". For