diff --git a/css/media.css b/css/media.css index cf466b7..8ec5190 100644 --- a/css/media.css +++ b/css/media.css @@ -13,22 +13,56 @@ 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; } .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 f536deb..f50dc8a 100644 --- a/includes/media.theme.inc +++ b/includes/media.theme.inc @@ -78,41 +78,71 @@ function template_preprocess_media_dialog_page(&$variables) { * Adds a wrapper around a preview of a media file. */ function theme_media_thumbnail($variables) { - $label = ''; + $content = ''; $element = $variables['element']; - $destination = drupal_get_destination(); // Wrappers to go around the thumbnail. - $prefix = '
'; + $attributes = array( + 'title' => $element['#name'], + 'class' => 'media-item', + 'data-fid' => $element['#file']->fid, + ); + $prefix = '\n" . '
'; $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')), - ); + // Should a thumbnail link be added to this item? + // @todo It is likely that there is already a link in the $thumb content. This + // is not ideal. + if (!empty($element['#add_link'])) { + $target = 'file/' . $element['#file']->fid . '/edit'; + $options = array( + 'query' => drupal_get_destination(), + 'html' => TRUE, + 'attributes' => array('title' => t('Click to edit details')), + ); + $content = l($element['#children'], $target, $options); + } + + // If this is not image content, get the image style dimensions and wrap the + // output in a div + elseif ($element['#theme'] != 'image_style') { - // Element should be a field renderable array. This should be improved. - if (!empty($element['#show_names']) && $element['#name']) { - $label = '
'; + static $data = FALSE; + if (! $data) { + $style = image_style_load('media_thumbnail'); + $data = $style['effects'][0]['data']; + } + // Build a path to a generic icon. + $type = dirname($element['#file']->filemime); + $path = drupal_get_path('module', 'media') . '/images/icons/default/' . $type . '-x-generic.png'; + if (file_exists($path)) { + $data['path'] = $path; + $content = theme('image', $data); + $content .= '
'; + } + // @todo force the item to render at the dimesions that are in $data with + // wrapped divs. + else { + $content = $element['#children']; + } + } + + // Default behavior, just use the rendered item. + else { + $content = $element['#children']; + } + + // If this is image content add a filename to the display + // @todo Element should be a field renderable array. This should be improved. + if (!empty($element['#show_names']) && $element['#name'] && $element['#theme'] == 'image_style') { + $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; - } - $output .= $label . $suffix; - return $output; + return $prefix . $content . $suffix; } /** diff --git a/js/media.popups.js b/js/media.popups.js index f2d9518..c8e5fa2 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/js/plugins/media.views.js b/js/plugins/media.views.js index 9dfe231..f99fca3 100644 --- a/js/plugins/media.views.js +++ b/js/plugins/media.views.js @@ -75,7 +75,7 @@ Drupal.media.browser.views.setup = function(view) { // Catch the click on a media item $('.view-content .media-item', view).bind('click', function () { - var fid = $(this).closest('a[data-fid]').data('fid'), + var fid = $(this).closest('.media-item[data-fid]').data('fid'), selectedFiles = new Array(); // Remove all currently selected files diff --git a/media.install b/media.install index b3d239b..8822e4d 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_7216() { + 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 fb916b1..b6088be 100644 --- a/media.module +++ b/media.module @@ -302,11 +302,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, ), ), @@ -658,10 +658,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'), ), ); @@ -671,14 +671,11 @@ 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'), ), ); diff --git a/media.views.inc b/media.views.inc index e08e17f..9d116bf 100644 --- a/media.views.inc +++ b/media.views.inc @@ -79,13 +79,7 @@ function template_preprocess_media_views_view_media_browser(&$vars) { // Add url/preview to the file object. media_browser_build_media_item($file); $vars['rows'][$index] = $file; - $vars['rows'][$index]->preview = l($file->preview, 'media/browser', array( - 'html' => TRUE, - 'attributes' => array( - 'data-fid' => $row->fid, - ), - 'query' => array('render' => 'media-popup', 'fid' => $row->fid)) - ); + $vars['rows'][$index]->preview = $file->preview; } // Add the files to JS so that they are accessible inside the browser.