Add file-specific icons for media in JavaScript code

Close #2276

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js
index 1f44ff037d9984ea273b3d82592dcced5affa38f..c606df816066b22466e9a9ec9efd891a6a904c94 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js
@@ -6,8 +6,8 @@
  * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module     WoltLabSuite/Core/Media/Manager/Select
  */
-define(['Core', 'Dom/Traverse', 'Dom/Util', 'Language', 'ObjectMap', 'Ui/Dialog', 'WoltLabSuite/Core/Media/Manager/Base'],
-       function(Core, DomTraverse, DomUtil, Language, ObjectMap, UiDialog, MediaManagerBase) {
+define(['Core', 'Dom/Traverse', 'Dom/Util', 'Language', 'ObjectMap', 'Ui/Dialog', 'WoltLabSuite/Core/FileUtil', 'WoltLabSuite/Core/Media/Manager/Base'],
+       function(Core, DomTraverse, DomUtil, Language, ObjectMap, UiDialog, FileUtil, MediaManagerBase) {
        "use strict";
        
        if (!COMPILER_TARGET_DEFAULT) {
@@ -121,8 +121,13 @@ define(['Core', 'Dom/Traverse', 'Dom/Util', 'Language', 'ObjectMap', 'Ui/Dialog'
                                                displayElement.innerHTML = '<img src="' + (media.smallThumbnailLink ? media.smallThumbnailLink : media.link) + '" alt="' + (media.altText && media.altText[LANGUAGE_ID] ? media.altText[LANGUAGE_ID] : '') + '" />';
                                        }
                                        else {
+                                               var fileIcon = FileUtil.getIconNameByFilename(media.filename);
+                                               if (fileIcon) {
+                                                       fileIcon = '-' + fileIcon;
+                                               }
+                                               
                                                displayElement.innerHTML = '<div class="box48" style="margin-bottom: 10px;">'
-                                                       + '<span class="icon icon48 fa-file-o"></span>'
+                                                       + '<span class="icon icon48 fa-file' + fileIcon + '-o"></span>'
                                                        + '<div class="containerHeadline">'
                                                                + '<h3>' + media.filename + '</h3>'
                                                                + '<p>' + media.formattedFilesize + '</p>'

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Upload.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Upload.js
index e739358690e870a63d2bce43bca02f997ccc19bc..7781ad0ab6b14f49685bf8bcc7ebca25f2e0b8aa 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Upload.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Upload.js
@@ -227,7 +227,12 @@ define(
                        }
                        else {
                                fileIcon.classList.remove('fa-spinner');
-                               fileIcon.classList.add('fa-file-o');
+                               
+                               var fileIconName = FileUtil.getIconNameByFilename(media.filename);
+                               if (fileIconName) {
+                                       fileIconName = '-' + fileIconName;
+                               }
+                               fileIcon.classList.add('fa-file' + fileIconName + '-o');
                        }
                },