Commit 04138345 authored by catch's avatar catch
Browse files

Issue #2236855 by rachel_norfolk, stefank, ngocketit, lauriii, LewisNyman,...

Issue #2236855 by rachel_norfolk, stefank, ngocketit, lauriii, LewisNyman, alexpott, yuki77, rteijeiro | mortendk: Use CSS for file icons in file fields.
parent 92493af7
/**
* @file
* Default style for file module.
*/
/**
* File icons.
*/
.file {
padding-left: 20px; /* LTR */
display: inline-block;
min-height: 16px;
background-repeat: no-repeat;
background-position: left center; /* LTR */
}
[dir="rtl"] .file {
padding-left: inherit;
padding-right: 20px;
background-position: right center;
}
.file--general {
background-image: url(../icons/application-octet-stream.png);
}
.file--package-x-generic {
background-image: url(../icons/package-x-generic.png);
}
.file--x-office-spreadsheet {
background-image: url(../icons/x-office-spreadsheet.png);
}
.file--x-office-document {
background-image: url(../icons/x-office-document.png);
}
.file--x-office-presentation {
background-image: url(../icons/x-office-presentation.png);
}
.file--text-x-script {
background-image: url(../icons/text-x-script.png);
}
.file--text-html {
background-image: url(../icons/text-html.png);
}
.file--text-plain {
background-image: url(../icons/text-plain.png);
}
.file--application-pdf {
background-image: url(../icons/application-pdf.png);
}
.file--application-octet-stream {
background-image: url(../icons/application-octet-stream.png);
}
.file--application-x-executable {
background-image: url(../icons/application-x-executable.png);
}
.file--audio {
background-image: url(../icons/audio-x-generic.png);
}
.file--video {
background-image: url(../icons/video-x-generic.png);
}
.file--text {
background-image: url(../icons/text-x-generic.png);
}
.file--image {
background-image: url(../icons/image-x-generic.png);
}
...@@ -5,8 +5,17 @@ drupal.file: ...@@ -5,8 +5,17 @@ drupal.file:
css: css:
theme: theme:
css/file.admin.css: {} css/file.admin.css: {}
component:
css/file.formatter.generic.css: {}
dependencies: dependencies:
- core/jquery - core/jquery
- core/jquery.once - core/jquery.once
- core/drupal - core/drupal
- core/drupalSettings - core/drupalSettings
drupal.file.formatter.generic:
version: VERSION
css:
theme:
css/file.formatter.generic.css: {}
...@@ -549,7 +549,7 @@ function file_theme() { ...@@ -549,7 +549,7 @@ function file_theme() {
return array( return array(
// From file.module. // From file.module.
'file_link' => array( 'file_link' => array(
'variables' => array('file' => NULL, 'icon_directory' => NULL, 'description' => NULL, 'attributes' => array()), 'variables' => array('file' => NULL, 'description' => NULL, 'attributes' => array()),
), ),
'file_managed_file' => array( 'file_managed_file' => array(
'render element' => 'element', 'render element' => 'element',
...@@ -1213,43 +1213,15 @@ function template_preprocess_file_managed_file(&$variables) { ...@@ -1213,43 +1213,15 @@ function template_preprocess_file_managed_file(&$variables) {
*/ */
function template_preprocess_file_link(&$variables) { function template_preprocess_file_link(&$variables) {
$file = $variables['file']; $file = $variables['file'];
$options = array( $options = array();
'attributes' => $variables['attributes'],
);
$icon_directory = $variables['icon_directory'];
$url = file_create_url($file->getFileUri());
$file_entity = ($file instanceof File) ? $file : file_load($file->fid); $file_entity = ($file instanceof File) ? $file : file_load($file->fid);
$url = file_create_url($file_entity->getFileUri());
// Human-readable names, for use as text-alternatives to icons. $mime_type = $file->getMimeType();
$mime_name = array(
'application/msword' => t('Microsoft Office document icon'),
'application/vnd.ms-excel' => t('Office spreadsheet icon'),
'application/vnd.ms-powerpoint' => t('Office presentation icon'),
'application/pdf' => t('PDF icon'),
'video/quicktime' => t('Movie icon'),
'audio/mpeg' => t('Audio icon'),
'audio/wav' => t('Audio icon'),
'image/jpeg' => t('Image icon'),
'image/png' => t('Image icon'),
'image/gif' => t('Image icon'),
'application/zip' => t('Package icon'),
'text/html' => t('HTML icon'),
'text/plain' => t('Plain text icon'),
'application/octet-stream' => t('Binary Data'),
);
$variables['icon'] = array(
'#theme' => 'image__file_icon',
'#uri' => file_icon_url($file_entity, $icon_directory),
'#alt' => (!empty($mime_name[$file->getMimeType()])) ? $mime_name[$file->getMimeType()] : t('File'),
'#title' => String::checkPlain($file_entity->getFilename()),
'#attributes' => array('class' => array('file-icon')),
);
// Set options as per anchor format described at // Set options as per anchor format described at
// http://microformats.org/wiki/file-format-examples // http://microformats.org/wiki/file-format-examples
$options['attributes']['type'] = $file->getMimeType() . '; length=' . $file->getSize(); $options['attributes']['type'] = $mime_type . '; length=' . $file->getSize();
// Use the description as the link text if available. // Use the description as the link text if available.
if (empty($variables['description'])) { if (empty($variables['description'])) {
...@@ -1260,93 +1232,60 @@ function template_preprocess_file_link(&$variables) { ...@@ -1260,93 +1232,60 @@ function template_preprocess_file_link(&$variables) {
$options['attributes']['title'] = String::checkPlain($file_entity->getFilename()); $options['attributes']['title'] = String::checkPlain($file_entity->getFilename());
} }
$variables['link'] = \Drupal::l($link_text, Url::fromUri($url, $options)); // Classes to add to the file field for icons.
$variables['attributes'] = array('class' => array('file')); $classes = array(
} 'file',
// Add a specific class for each and every mime type.
'file--mime-' . strtr($mime_type, array('/' => '-', '.' => '-')),
// Add a more general class for groups of well known mime types.
'file--' . file_icon_class($mime_type),
);
/** // Set file classes to the options array.
* Creates a URL to the icon for a file entity. $variables['attributes'] = new Attribute($variables['attributes']);
* $variables['attributes']->addClass($classes);
* @param \Drupal\file\FileInterface $file
* A file entity. $variables['link'] = _l($link_text, $url, $options);
* @param $icon_directory
* (optional) A path to a directory of icons to be used for files. Defaults to
* the value of the "icon.directory" variable.
*
* @return
* A URL string to the icon, or FALSE if an appropriate icon cannot be found.
*/
function file_icon_url(FileInterface $file, $icon_directory = NULL) {
if ($icon_path = file_icon_path($file, $icon_directory)) {
return base_path() . $icon_path;
}
return FALSE;
} }
/** /**
* Creates a path to the icon for a file entity. * Gets a class for the icon for a MIME type.
* *
* @param \Drupal\file\FileInterface $file * @param string $mime_type
* A file entity. * A MIME type.
* @param $icon_directory
* (optional) A path to a directory of icons to be used for files. Defaults to
* the value of the "icon.directory" variable.
* *
* @return * @return string
* A string to the icon as a local path, or FALSE if an appropriate icon could * A class associated to the file.
* not be found.
*/ */
function file_icon_path(FileInterface $file, $icon_directory = NULL) { function file_icon_class($mime_type) {
// Use the default set of icons if none specified. // Search for a group with the files MIME type.
if (!isset($icon_directory)) { $generic_mime = (string) file_icon_map($mime_type);
$icon_directory = \Drupal::config('file.settings')->get('icon.directory'); if (!empty($generic_mime)) {
} return $generic_mime;
// If there's an icon matching the exact mimetype, go for it.
$dashed_mime = strtr($file->getMimeType(), array('/' => '-'));
$icon_path = $icon_directory . '/' . $dashed_mime . '.png';
if (file_exists($icon_path)) {
return $icon_path;
}
// For a few mimetypes, we can "manually" map to a generic icon.
$generic_mime = (string) file_icon_map($file);
$icon_path = $icon_directory . '/' . $generic_mime . '.png';
if ($generic_mime && file_exists($icon_path)) {
return $icon_path;
} }
// Use generic icons for each category that provides such icons. // Use generic icons for each category that provides such icons.
foreach (array('audio', 'image', 'text', 'video') as $category) { foreach (array('audio', 'image', 'text', 'video') as $category) {
if (strpos($file->getMimeType(), $category . '/') === 0) { if (strpos($mime_type, $category) === 0) {
$icon_path = $icon_directory . '/' . $category . '-x-generic.png'; return $category;
if (file_exists($icon_path)) {
return $icon_path;
}
} }
} }
// Try application-octet-stream as last fallback. // If there's no generic icon for the type the general class.
$icon_path = $icon_directory . '/application-octet-stream.png'; return 'general';
if (file_exists($icon_path)) {
return $icon_path;
}
// No icon can be found.
return FALSE;
} }
/** /**
* Determines the generic icon MIME package based on a file's MIME type. * Determines the generic icon MIME package based on a file's MIME type.
* *
* @param \Drupal\file\FileInterface $file * @param string $mime_type
* A file entity. * A MIME type.
* *
* @return * @return
* The generic icon MIME package expected for this file. * The generic icon MIME package expected for this file.
*/ */
function file_icon_map(FileInterface $file) { function file_icon_map($mime_type) {
switch ($file->getMimeType()) { switch ($mime_type) {
// Word document types. // Word document types.
case 'application/msword': case 'application/msword':
case 'application/vnd.ms-word.document.macroEnabled.12': case 'application/vnd.ms-word.document.macroEnabled.12':
...@@ -1457,6 +1396,14 @@ function file_icon_map(FileInterface $file) { ...@@ -1457,6 +1396,14 @@ function file_icon_map(FileInterface $file) {
case 'application/x-pef-executable': case 'application/x-pef-executable':
return 'application-x-executable'; return 'application-x-executable';
// Acrobat types
case 'application/pdf':
case 'application/x-pdf':
case 'applications/vnd.pdf':
case 'text/pdf':
case 'text/x-pdf':
return 'application-pdf';
default: default:
return FALSE; return FALSE;
} }
......
...@@ -45,6 +45,11 @@ public function viewElements(FieldItemListInterface $items) { ...@@ -45,6 +45,11 @@ public function viewElements(FieldItemListInterface $items) {
} }
} }
} }
if (!empty($elements)) {
$elements['#attached'] = array(
'library' => array('file/drupal.file.formatter.generic'),
);
}
return $elements; return $elements;
} }
......
...@@ -6,11 +6,10 @@ ...@@ -6,11 +6,10 @@
* Available variables: * Available variables:
* - attributes: The HTML attributes for the containing element. * - attributes: The HTML attributes for the containing element.
* - link: A link to the file. * - link: A link to the file.
* - icon: The icon image representing the file type.
* *
* @see template_preprocess_file_link() * @see template_preprocess_file_link()
* *
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<span{{ attributes }}>{{ icon }} {{ link }}</span> <span{{ attributes }}>{{ link }}</span>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment