diff --git a/css/media.css b/css/media.css index cf466b7..92df514 100644 --- a/css/media.css +++ b/css/media.css @@ -1,9 +1,15 @@ /** * @file * Styles for the media library. + * + * The display and layout of the Media browser assumes Drupal's Seven theme as + * the theme active when this is displayed. */ -/* jQuery UI */ +/* jQuery UI Resets */ +.ui-tabs { + padding: 0; +} .ui-dialog.media-wrapper .ui-dialog-content { padding: 0; @@ -13,22 +19,71 @@ display: none; } -/* Media item */ +#media-browser-tabset .ui-widget-header { + background: none; +} + +/* Remove the default border */ +.ui-widget-content { + border: none; +} + +/* *********************************************************** */ +/* Browser layout themeing */ + +/* Size the branding header appropriately */ +#media-browser-tabset #branding { + padding: 10px 10px 0px 10px; +} + +#media-browser-tabset #branding h1 { + float: left; + height: 16px; + margin-top: 0px; +} + +/* Float the tabs right to keep the UI consistent across themes */ +#media-tabs-wrapper { + float: right; +} + +#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 { + font-weight: bold; + margin-right: 0; +} + +.media-browser-tab.ui-tabs-panel { + border: 1px solid #cccccc; +} + +/* *********************************************************** */ +/* Media item display */ .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 { @@ -38,7 +93,7 @@ white-space: nowrap; } -/* Media item list */ +/* Media item lists */ #media-browser-library-list { margin: 0; diff --git a/includes/media.browser.inc b/includes/media.browser.inc index 36ee0b0..719305b 100644 --- a/includes/media.browser.inc +++ b/includes/media.browser.inc @@ -132,32 +132,50 @@ function media_browser($selected = NULL) { } // If this is a "ajax" style tab, add the href, otherwise an id. - $href = '#media-tab-' . $key; + $tabid = 'media-tab-' . check_plain($key); if (!empty($plugin_output[$key]['#callback'])) { $href = $plugin_output[$key]['#callback']; } else { + $attributes = array( + 'class' => array('media-browser-tab'), + 'id' => $tabid, + 'data-tabid' => check_plain($key), + ); // Create a div for each tab's content. $plugin_output[$key] += array( - '#prefix' => '
', - '#suffix' => '
', + '#prefix' => '
\n", + '#suffix' => "
\n", ); } - $tabs[] = "" . check_plain($plugin_output[$key]['#title']) . ""; + $attributes = array( + 'href' => '#' . $tabid, + 'data-tabid' => check_plain($key), + 'title' => check_plain($plugin_output[$key]['#title']), + ); + $tabs[]['element'] = array( + '#markup' => '' . check_plain($plugin_output[$key]['#title']) . "\n", + '#prefix' => "
  • \n", + '#suffix' => "
    • \n", + ); } drupal_add_js($settings, 'setting'); - $output['tabset'] = array( - '#prefix' => '
    ', - '#suffix' => '
    ', + $output['title'] = array( + '#markup' => t('Select a file') ); - $output['tabset']['list'] = array( - '#markup' => theme('item_list', array('items' => $tabs)), + + $output['tabset']['tabs'] = array( + '#theme' => 'menu_local_tasks', + '#attributes' => array('class' => array('tabs', 'primary')), + '#primary' => $tabs, + ); - $output['tabset']['plugins'] = $plugin_output; + $output['tabset']['panes'] = $plugin_output; + return $output; } diff --git a/includes/media.fields.inc b/includes/media.fields.inc index 35692ed..25317d4 100644 --- a/includes/media.fields.inc +++ b/includes/media.fields.inc @@ -58,10 +58,18 @@ function media_field_formatter_view($entity_type, $entity, $field, $instance, $l $element = array(); if ($display['type'] == 'media_large_icon') { + // Add height/width variable according to media_thumbnail image style + // so that the output in media browser is consistent. + // @todo is this the correct place to put this? + $style = image_style_load('media_thumbnail'); foreach ($items as $delta => $item) { $element[$delta] = array( '#theme' => 'media_formatter_large_icon', '#file' => (object) $item, + '#attributes' => array( + 'width' => $style['effects'][0]['data']['width'], + 'height' => $style['effects'][0]['data']['height'], + ), ); } } diff --git a/includes/media.filter.inc b/includes/media.filter.inc index 7c96307..f370067 100644 --- a/includes/media.filter.inc +++ b/includes/media.filter.inc @@ -552,10 +552,7 @@ function media_format_form($form, $form_state, $file) { $form['#attached']['library'][] = array('system', 'form'); $form['#attached']['js'][] = drupal_get_path('module', 'media') . '/js/media.format_form.js'; - $form['heading'] = array( - '#type' => 'markup', - '#prefix' => '

    ', - '#suffix' => '

    ', + $form['title'] = array( '#markup' => t('Embedding %filename', array('%filename' => $file->filename)), ); diff --git a/includes/media.theme.inc b/includes/media.theme.inc index b369543..28e12b2 100644 --- a/includes/media.theme.inc +++ b/includes/media.theme.inc @@ -35,7 +35,6 @@ function template_preprocess_media_dialog_page(&$variables) { function theme_media_thumbnail($variables) { $label = ''; $element = $variables['element']; - $destination = drupal_get_destination(); // Wrappers to go around the thumbnail. $attributes = array( @@ -50,7 +49,7 @@ function theme_media_thumbnail($variables) { $thumb = $element['#children']; $target = 'file/' . $element['#file']->fid . '/edit'; $options = array( - 'query' => $destination, + 'query' => drupal_get_destination(), 'html' => TRUE, 'attributes' => array('title' => t('Click to edit details')), ); @@ -60,10 +59,6 @@ function theme_media_thumbnail($variables) { $label = '
    '; } - // @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); diff --git a/js/media.browser.js b/js/media.browser.js index e7a9934..d899ea2 100644 --- a/js/media.browser.js +++ b/js/media.browser.js @@ -95,11 +95,6 @@ Drupal.media.browser.finalizeSelection = function () { } }; -Drupal.media.browser.resizeIframe = function (event) { - var h = $('body').height(); - $(parent.window.document).find('#mediaBrowser').height(h); -}; - Drupal.media.browser.selectErrorTab = function() { //Find the ID of a tab with an error in it var errorTabID = $('#media-browser-tabset') diff --git a/js/media.format_form.js b/js/media.format_form.js index 06c66a4..76de1e8 100644 --- a/js/media.format_form.js +++ b/js/media.format_form.js @@ -12,6 +12,7 @@ Drupal.media.mediaFormatSelected = {}; Drupal.behaviors.mediaFormatForm = { attach: function (context, settings) { + // Add "Submit" and "Cancel" buttons inside the IFRAME that trigger the // behavior of the hidden "OK" and "Cancel" buttons that are outside the // IFRAME. See Drupal.media.browser.validateButtons() for more details. @@ -21,12 +22,25 @@ Drupal.behaviors.mediaFormatForm = { // this particular functionality is. We should evaluate if it is still // needed. + // @TODO can these be added to the content being displayed via form_alter? + // Adding the buttons should only be done once in order to prevent multiple // buttons from being added if part of the form is updated via AJAX $('#media-format-form').once('format', function() { $('' + Drupal.t('Submit') + '').appendTo($('#media-format-form')).bind('click', Drupal.media.formatForm.submit); $('' + Drupal.t('Cancel') + '').appendTo($('#media-format-form')).bind('click', Drupal.media.formatForm.submit); + }); + + // Resize the window on load. + // @TODO this duplicates Drupal.media.browser.resizeIframe() + // can we put a resize function into media.core.js? + $(document).ready(function () { + // Get the height and add a bit of padding. + var h = $('body').height() + 10; + $(parent.window.document).find('#mediaStyleSelector').height(h); + }); + } }; diff --git a/js/media.popups.js b/js/media.popups.js index c17362b..c8e5fa2 100644 --- a/js/media.popups.js +++ b/js/media.popups.js @@ -100,7 +100,7 @@ Drupal.media.popups.mediaBrowser = function (onSelect, globalOptions, pluginOpti Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad = function (e) { var options = e.data; - if (this.contentWindow.Drupal.media.browser == undefined) return; + if (this.contentWindow.Drupal.media == undefined) return; if (this.contentWindow.Drupal.media.browser.selectedMedia.length > 0) { var ok = (Drupal && Drupal.t) ? Drupal.t('OK') : 'OK'; @@ -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 04245cb..b034148 100644 --- a/js/plugins/media.views.js +++ b/js/plugins/media.views.js @@ -34,16 +34,14 @@ Drupal.behaviors.mediaViews = { } } - // We want to be able to reset state on tab-changes, so we bind on the - // 'select' event on the tabset - $('#media-browser-tabset').tabs({ - select: function(e, ui) { - var view = $('.view', ui.panel); - if (view.length) { - Drupal.media.browser.views.select(view); - } + // Reset the state on tab-changes- bind on the 'select' event on the tabset + $('#media-browser-tabset').bind('tabsselect', function(event, ui) { + var view = $('.view', ui.panel); + if (view.length) { + Drupal.media.browser.views.select(view); } - }) + }); + } } 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..acfaba0 100644 --- a/media.module +++ b/media.module @@ -296,11 +296,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 +652,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 +665,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'), ), ); @@ -1032,6 +1029,9 @@ function media_get_thumbnail_preview($file, $link = NULL) { if (!file_type_is_enabled($file->type)) { $file->type = file_get_type($file); } + // @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'); $preview = file_view_file($file, 'preview'); $preview['#show_names'] = TRUE; $preview['#add_link'] = $link; @@ -1062,42 +1062,22 @@ function media_file_validate_types(stdClass $file, $types) { } /** - * Implements hook_file_type_info_alter(). + * Implements hook_file_displays_alter(). */ -function media_file_type_info_alter(array &$info) { - // Add default view callback support for all file types. - foreach ($info as $type => $type_info) { - $info[$type] += array( - 'default view callback' => 'media_file_type_media_default_view', +function media_file_displays_alter(&$displays, $file, $view_mode) { + if ($view_mode == 'preview' && empty($displays)) { + // We re in the media browser and this file has no formatters enabled. + // Instead of letting it go through theme_file_link(), pass it through + // theme_media_formatter_large_icon() to get our cool file icon instead. + $displays['file_field_media_large_icon'] = array( + 'weight' => 0, + 'status' => 1, + 'settings' => NULL, ); } } /** - * Implements hook_file_type_TYPE_default_view(). - * - * Returns a drupal_render() array for displaying the file when there are no - * administrator-configured formatters, or none of the configured ones return a - * display. - */ -function media_file_type_media_default_view($file, $view_mode, $langcode) { - // During preview, or when custom attribute values are needed on the displayed - // element, use a media icon. - if ($view_mode == 'preview' || isset($file->override)) { - return array( - '#theme' => 'media_formatter_large_icon', - '#file' => $file, - ); - } - - // Finally, fall back to File module's generic file display. - return array( - '#theme' => 'file_link', - '#file' => $file, - ); -} - -/** * Implements hook_flush_caches(). */ function media_flush_caches() { diff --git a/templates/media-dialog-page.tpl.php b/templates/media-dialog-page.tpl.php index d426686..6e21da0 100644 --- a/templates/media-dialog-page.tpl.php +++ b/templates/media-dialog-page.tpl.php @@ -65,9 +65,28 @@ * @see template_preprocess_page() * @see template_process() */ +//print_r($page); ?> -
    - - -
    + +
    +
    +
    +
    +
    +

    +
    +
    + +
    +
    + +
    +
    +
    + + \ No newline at end of file