Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #2236855 by rachel_norfolk, stefank, ngocketit, lauriii, LewisNyman, alexpott, yuki77, rteijeiro | mortendk: Use CSS for file icons in file fields.

8.0.x
Nathaniel Catchpole 2014-11-10 14:30:41 +00:00
parent 92493af712
commit 0413834556
5 changed files with 129 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
core/modules/file/css/file.formatter.generic.css Normal file
View File

@ -0,0 +1,69 @@
/**
* @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);
}

9
core/modules/file/file.libraries.yml
View File

@ -5,8 +5,17 @@ drupal.file:
css:
theme:
css/file.admin.css: {}
component:
css/file.formatter.generic.css: {}
dependencies:
- core/jquery
- core/jquery.once
- core/drupal
- core/drupalSettings
drupal.file.formatter.generic:
version: VERSION
css:
theme:
css/file.formatter.generic.css: {}

143
core/modules/file/file.module
View File

@ -549,7 +549,7 @@ function file_theme() {
return array(
// From file.module.
'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(
'render element' => 'element',
@ -1213,43 +1213,15 @@ function template_preprocess_file_managed_file(&$variables) {
*/
function template_preprocess_file_link(&$variables) {
$file = $variables['file'];
$options = array(
'attributes' => $variables['attributes'],
);
$icon_directory = $variables['icon_directory'];
$options = array();
$url = file_create_url($file->getFileUri());
$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_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')),
);
$mime_type = $file->getMimeType();
// Set options as per anchor format described at
// 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.
if (empty($variables['description'])) {
@ -1260,93 +1232,60 @@ function template_preprocess_file_link(&$variables) {
$options['attributes']['title'] = String::checkPlain($file_entity->getFilename());
}
$variables['link'] = \Drupal::l($link_text, Url::fromUri($url, $options));
$variables['attributes'] = array('class' => array('file'));
// Classes to add to the file field for icons.
$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.
$variables['attributes'] = new Attribute($variables['attributes']);
$variables['attributes']->addClass($classes);
$variables['link'] = _l($link_text, $url, $options);
}
/**
* Creates a URL to the icon for a file entity.
* Gets a class for the icon for a MIME type.
*
* @param \Drupal\file\FileInterface $file
* A file entity.
* @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.
* @param string $mime_type
* A MIME type.
*
* @return
* A URL string to the icon, or FALSE if an appropriate icon cannot be found.
* @return string
* A class associated to the file.
*/
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.
*
* @param \Drupal\file\FileInterface $file
* A file entity.
* @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 string to the icon as a local path, or FALSE if an appropriate icon could
* not be found.
*/
function file_icon_path(FileInterface $file, $icon_directory = NULL) {
// Use the default set of icons if none specified.
if (!isset($icon_directory)) {
$icon_directory = \Drupal::config('file.settings')->get('icon.directory');
}
// 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;
function file_icon_class($mime_type) {
// Search for a group with the files MIME type.
$generic_mime = (string) file_icon_map($mime_type);
if (!empty($generic_mime)) {
return $generic_mime;
}
// Use generic icons for each category that provides such icons.
foreach (array('audio', 'image', 'text', 'video') as $category) {
if (strpos($file->getMimeType(), $category . '/') === 0) {
$icon_path = $icon_directory . '/' . $category . '-x-generic.png';
if (file_exists($icon_path)) {
return $icon_path;
}
if (strpos($mime_type, $category) === 0) {
return $category;
}
}
// Try application-octet-stream as last fallback.
$icon_path = $icon_directory . '/application-octet-stream.png';
if (file_exists($icon_path)) {
return $icon_path;
}
// No icon can be found.
return FALSE;
// If there's no generic icon for the type the general class.
return 'general';
}
/**
* Determines the generic icon MIME package based on a file's MIME type.
*
* @param \Drupal\file\FileInterface $file
* A file entity.
* @param string $mime_type
* A MIME type.
*
* @return
* The generic icon MIME package expected for this file.
*/
function file_icon_map(FileInterface $file) {
switch ($file->getMimeType()) {
function file_icon_map($mime_type) {
switch ($mime_type) {
// Word document types.
case 'application/msword':
case 'application/vnd.ms-word.document.macroEnabled.12':
@ -1457,6 +1396,14 @@ function file_icon_map(FileInterface $file) {
case 'application/x-pef-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:
return FALSE;
}

5
core/modules/file/src/Plugin/Field/FieldFormatter/GenericFileFormatter.php
View File

@ -45,6 +45,11 @@ class GenericFileFormatter extends FileFormatterBase {
}
}
}
if (!empty($elements)) {
$elements['#attached'] = array(
'library' => array('file/drupal.file.formatter.generic'),
);
}
return $elements;
}

3
core/modules/file/templates/file-link.html.twig
View File

@ -6,11 +6,10 @@
* Available variables:
* - attributes: The HTML attributes for the containing element.
* - link: A link to the file.
* - icon: The icon image representing the file type.
*
* @see template_preprocess_file_link()
*
* @ingroup themeable
*/
#}
<span{{ attributes }}>{{ icon }} {{ link }}</span>
<span{{ attributes }}>{{ link }}</span>