Improve file icons rendering on tree

9 files changed, 171 insertions, 8 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 04d889456dd..d961e3db12b 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -47,6 +47,7 @@ v 7.10.0 (unreleased)
   - AJAX selectbox for issue assignee and author filters
   - Fix issue with missing options in issue filtering dropdown if selected one
   - Prevent holding Control-Enter or Command-Enter from posting comment multiple times.
+  - Improve file icons rendering on tree (Sullivan Sénéchal)
 
 v 7.9.0
   - Send EmailsOnPush email when branch or tag is created or deleted.
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 798d62b3a09..4ea838ca447 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -61,4 +61,12 @@ module BlobHelper
       'Preview changes'
     end
   end
+
+  # Return an image icon depending on the file mode and extension
+  #
+  # mode - File unix mode
+  # mode - File name
+  def blob_icon(mode, name)
+    icon("#{file_type_icon_class('file', mode, name)} fw")
+  end
 end
diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb
index 18260f0ed4d..187e21832f0 100644
--- a/app/helpers/icons_helper.rb
+++ b/app/helpers/icons_helper.rb
@@ -36,4 +36,48 @@ module IconsHelper
   def private_icon
     icon('lock')
   end
+
+  def file_type_icon_class(type, mode, name)
+    if type == 'folder'
+      icon_class = 'folder'
+    elsif mode == 0120000
+      icon_class = 'share'
+    else
+      # Guess which icon to choose based on file extension.
+      # If you think a file extension is missing, feel free to add it on PR
+
+      case File.extname(name).downcase
+      when '.pdf'
+        icon_class = 'file-pdf-o'
+      when '.jpg', '.jpeg', '.jif', '.jfif',
+          '.jp2', '.jpx', '.j2k', '.j2c',
+          '.png', '.gif', '.tif', '.tiff',
+          '.svg', '.ico', '.bmp'
+        icon_class = 'file-image-o'
+      when '.zip', '.zipx', '.tar', '.gz', '.bz', '.bzip',
+          '.xz', '.rar', '.7z'
+        icon_class = 'file-archive-o'
+      when '.mp3', '.wma', '.ogg', '.oga', '.wav', '.flac', '.aac'
+        icon_class = 'file-audio-o'
+      when '.mp4', '.m4p', '.m4v',
+          '.mpg', '.mp2', '.mpeg', '.mpe', '.mpv',
+          '.mpg', '.mpeg', '.m2v',
+          '.avi', '.mkv', '.flv', '.ogv', '.mov',
+          '.3gp', '.3g2'
+        icon_class = 'file-video-o'
+      when '.doc', '.dot', '.docx', '.docm', '.dotx', '.dotm', '.docb'
+        icon_class = 'file-word-o'
+      when '.xls', '.xlt', '.xlm', '.xlsx', '.xlsm', '.xltx', '.xltm',
+          '.xlsb', '.xla', '.xlam', '.xll', '.xlw'
+        icon_class = 'file-excel-o'
+      when '.ppt', '.pot', '.pps', '.pptx', '.pptm', '.potx', '.potm',
+          '.ppam', '.ppsx', '.ppsm', '.sldx', '.sldm'
+        icon_class = 'file-powerpoint-o'
+      else
+        icon_class = 'file-text-o'
+      end
+    end
+
+    icon_class
+  end
 end
diff --git a/app/helpers/tree_helper.rb b/app/helpers/tree_helper.rb
index bf6726574ec..6dd9b6f017c 100644
--- a/app/helpers/tree_helper.rb
+++ b/app/helpers/tree_helper.rb
@@ -34,12 +34,13 @@ module TreeHelper
     end
   end
 
-  # Return an image icon depending on the file type
+  # Return an image icon depending on the file type and mode
   #
   # type - String type of the tree item; either 'folder' or 'file'
-  def tree_icon(type)
-    icon_class = type == 'folder' ? 'folder' : 'file-o'
-    icon(icon_class)
+  # mode - File unix mode
+  # name - File name
+  def tree_icon(type, mode, name)
+    icon("#{file_type_icon_class(type, mode, name)} fw")
   end
 
   def tree_hex_class(content)
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index ba60bd92869..65c3ab10e02 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -22,7 +22,7 @@
 %div#tree-content-holder.tree-content-holder
   %article.file-holder
     .file-title
-      %i.fa.fa-file
+      = blob_icon blob.mode, blob.name
       %strong
         = blob.name
       %small
diff --git a/app/views/projects/tree/_blob_item.html.haml b/app/views/projects/tree/_blob_item.html.haml
index b253fe896e3..02ecbade219 100644
--- a/app/views/projects/tree/_blob_item.html.haml
+++ b/app/views/projects/tree/_blob_item.html.haml
@@ -1,6 +1,6 @@
 %tr{ class: "tree-item #{tree_hex_class(blob_item)}" }
   %td.tree-item-file-name
-    = tree_icon(type)
+    = tree_icon(type, blob_item.mode, blob_item.name)
     %span.str-truncated
       = link_to blob_item.name, namespace_project_blob_path(@project.namespace, @project, tree_join(@id || @commit.id, blob_item.name))
   %td.tree_time_ago.cgray
diff --git a/app/views/projects/tree/_submodule_item.html.haml b/app/views/projects/tree/_submodule_item.html.haml
index 20c70cac699..2b5f671c09e 100644
--- a/app/views/projects/tree/_submodule_item.html.haml
+++ b/app/views/projects/tree/_submodule_item.html.haml
@@ -1,6 +1,6 @@
 %tr{ class: "tree-item" }
   %td.tree-item-file-name
-    %i.fa.fa-archive
+    %i.fa.fa-archive.fa-fw
     = submodule_link(submodule_item, @ref)
   %td
   %td.hidden-xs
diff --git a/app/views/projects/tree/_tree_item.html.haml b/app/views/projects/tree/_tree_item.html.haml
index 94342bc9b2b..e87138bf980 100644
--- a/app/views/projects/tree/_tree_item.html.haml
+++ b/app/views/projects/tree/_tree_item.html.haml
@@ -1,6 +1,6 @@
 %tr{ class: "tree-item #{tree_hex_class(tree_item)}" }
   %td.tree-item-file-name
-    = tree_icon(type)
+    = tree_icon(type, tree_item.mode, tree_item.name)
     %span.str-truncated
       - path = flatten_tree(tree_item)
       = link_to path, namespace_project_tree_path(@project.namespace, @project, tree_join(@id || @commit.id, path))
diff --git a/spec/helpers/icons_helper_spec.rb b/spec/helpers/icons_helper_spec.rb
new file mode 100644
index 00000000000..0b1cf07b7b0
--- /dev/null
+++ b/spec/helpers/icons_helper_spec.rb
@@ -0,0 +1,109 @@
+require 'spec_helper'
+
+describe IconsHelper do
+  describe 'file_type_icon_class' do
+    it 'returns folder class' do
+      expect(file_type_icon_class('folder', 0, 'folder_name')).to eq 'folder'
+    end
+
+    it 'returns share class' do
+      expect(file_type_icon_class('file', 0120000, 'link')).to eq 'share'
+    end
+
+    it 'returns file-pdf-o class with .pdf' do
+      expect(file_type_icon_class('file', 0, 'filename.pdf')).to eq 'file-pdf-o'
+    end
+
+    it 'returns file-image-o class with .jpg' do
+      expect(file_type_icon_class('file', 0, 'filename.jpg')).to eq 'file-image-o'
+    end
+
+    it 'returns file-image-o class with .JPG' do
+      expect(file_type_icon_class('file', 0, 'filename.JPG')).to eq 'file-image-o'
+    end
+
+    it 'returns file-image-o class with .png' do
+      expect(file_type_icon_class('file', 0, 'filename.png')).to eq 'file-image-o'
+    end
+
+    it 'returns file-archive-o class with .tar' do
+      expect(file_type_icon_class('file', 0, 'filename.tar')).to eq 'file-archive-o'
+    end
+
+    it 'returns file-archive-o class with .TAR' do
+      expect(file_type_icon_class('file', 0, 'filename.TAR')).to eq 'file-archive-o'
+    end
+
+    it 'returns file-archive-o class with .tar.gz' do
+      expect(file_type_icon_class('file', 0, 'filename.tar.gz')).to eq 'file-archive-o'
+    end
+
+    it 'returns file-audio-o class with .mp3' do
+      expect(file_type_icon_class('file', 0, 'filename.mp3')).to eq 'file-audio-o'
+    end
+
+    it 'returns file-audio-o class with .MP3' do
+      expect(file_type_icon_class('file', 0, 'filename.MP3')).to eq 'file-audio-o'
+    end
+
+    it 'returns file-audio-o class with .wav' do
+      expect(file_type_icon_class('file', 0, 'filename.wav')).to eq 'file-audio-o'
+    end
+
+    it 'returns file-video-o class with .avi' do
+      expect(file_type_icon_class('file', 0, 'filename.avi')).to eq 'file-video-o'
+    end
+
+    it 'returns file-video-o class with .AVI' do
+      expect(file_type_icon_class('file', 0, 'filename.AVI')).to eq 'file-video-o'
+    end
+
+    it 'returns file-video-o class with .mp4' do
+      expect(file_type_icon_class('file', 0, 'filename.mp4')).to eq 'file-video-o'
+    end
+
+    it 'returns file-word-o class with .doc' do
+      expect(file_type_icon_class('file', 0, 'filename.doc')).to eq 'file-word-o'
+    end
+
+    it 'returns file-word-o class with .DOC' do
+      expect(file_type_icon_class('file', 0, 'filename.DOC')).to eq 'file-word-o'
+    end
+
+    it 'returns file-word-o class with .docx' do
+      expect(file_type_icon_class('file', 0, 'filename.docx')).to eq 'file-word-o'
+    end
+
+    it 'returns file-excel-o class with .xls' do
+      expect(file_type_icon_class('file', 0, 'filename.xls')).to eq 'file-excel-o'
+    end
+
+    it 'returns file-excel-o class with .XLS' do
+      expect(file_type_icon_class('file', 0, 'filename.XLS')).to eq 'file-excel-o'
+    end
+
+    it 'returns file-excel-o class with .xlsx' do
+      expect(file_type_icon_class('file', 0, 'filename.xlsx')).to eq 'file-excel-o'
+    end
+
+    it 'returns file-excel-o class with .ppt' do
+      expect(file_type_icon_class('file', 0, 'filename.ppt')).to eq 'file-powerpoint-o'
+    end
+
+    it 'returns file-excel-o class with .PPT' do
+      expect(file_type_icon_class('file', 0, 'filename.PPT')).to eq 'file-powerpoint-o'
+    end
+
+    it 'returns file-excel-o class with .pptx' do
+      expect(file_type_icon_class('file', 0, 'filename.pptx')).to eq 'file-powerpoint-o'
+    end
+
+    it 'returns file-text-o class with .unknow' do
+      expect(file_type_icon_class('file', 0, 'filename.unknow')).to eq 'file-text-o'
+    end
+
+    it 'returns file-text-o class with no extension' do
+      expect(file_type_icon_class('file', 0, 'CHANGELOG')).to eq 'file-text-o'
+    end
+  end
+end