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