From f2ca55dbf86390858473e716dd6694959fea2fb7 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Tue, 24 Nov 2020 15:37:45 +0100 Subject: [PATCH] Add new icons for assets --- app/assets/images/icon_small/docx_file.svg | 61 ++++++++++++++ .../images/icon_small/marvinjs_file.svg | 10 +++ app/assets/images/icon_small/pptx_file.svg | 62 ++++++++++++++ app/assets/images/icon_small/xslx_file.svg | 83 +++++++++++++++++++ app/assets/stylesheets/repositories.scss | 5 +- app/assets/stylesheets/shared/assets.scss | 16 ++++ .../shared_styles/constants/colors.scss | 2 + app/assets/stylesheets/themes/scinote.scss | 4 + app/helpers/file_icons_helper.rb | 34 +++++--- app/views/assets/_asset_list.html.erb | 4 +- 10 files changed, 264 insertions(+), 17 deletions(-) create mode 100644 app/assets/images/icon_small/docx_file.svg create mode 100644 app/assets/images/icon_small/marvinjs_file.svg create mode 100644 app/assets/images/icon_small/pptx_file.svg create mode 100644 app/assets/images/icon_small/xslx_file.svg diff --git a/app/assets/images/icon_small/docx_file.svg b/app/assets/images/icon_small/docx_file.svg new file mode 100644 index 000000000..004bcb798 --- /dev/null +++ b/app/assets/images/icon_small/docx_file.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/images/icon_small/marvinjs_file.svg b/app/assets/images/icon_small/marvinjs_file.svg new file mode 100644 index 000000000..581fead6a --- /dev/null +++ b/app/assets/images/icon_small/marvinjs_file.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/assets/images/icon_small/pptx_file.svg b/app/assets/images/icon_small/pptx_file.svg new file mode 100644 index 000000000..28409939a --- /dev/null +++ b/app/assets/images/icon_small/pptx_file.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/images/icon_small/xslx_file.svg b/app/assets/images/icon_small/xslx_file.svg new file mode 100644 index 000000000..13973e3e6 --- /dev/null +++ b/app/assets/images/icon_small/xslx_file.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index 9c19645ed..5c78e23e1 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -283,8 +283,9 @@ } .image-icon { - height: 18px; - width: 18px; + flex-shrink: 0; + height: 24px; + width: 24px; } .file-preview-link { diff --git a/app/assets/stylesheets/shared/assets.scss b/app/assets/stylesheets/shared/assets.scss index 3bf39918c..34883bb65 100644 --- a/app/assets/stylesheets/shared/assets.scss +++ b/app/assets/stylesheets/shared/assets.scss @@ -300,3 +300,19 @@ } } } + + +.asset-icon { + display: inline-block; + font-size: $font-size-h2; + text-align: center; + width: 24px; + + &.fa-file-pdf { + color: $pdf-color; + } + + &.fa-image { + color: $brand-primary; + } +} diff --git a/app/assets/stylesheets/shared_styles/constants/colors.scss b/app/assets/stylesheets/shared_styles/constants/colors.scss index d5d69dfd7..50f8db81f 100644 --- a/app/assets/stylesheets/shared_styles/constants/colors.scss +++ b/app/assets/stylesheets/shared_styles/constants/colors.scss @@ -38,6 +38,8 @@ $office-ms-powerpoint: #d24726; // MarvinJS color: $marvinjs-color: #29999c; +$pdf-color: #f40f02; + // Don't use them diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 45b352513..1033c11a6 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -1286,6 +1286,10 @@ ul.content-activities { } } +body > .loading-overlay { + position: fixed; +} + .turbolinks-progress-bar::before { background-color: $brand-primary; } diff --git a/app/helpers/file_icons_helper.rb b/app/helpers/file_icons_helper.rb index 92181263c..c1bff3f06 100644 --- a/app/helpers/file_icons_helper.rb +++ b/app/helpers/file_icons_helper.rb @@ -1,3 +1,5 @@ +# frozen_string_literal: true + module FileIconsHelper def wopi_file?(asset) file_ext = asset.file_name.split('.').last @@ -9,21 +11,21 @@ module FileIconsHelper file_ext = asset.file_name.split('.').last if Extends::FILE_FA_ICON_MAPPINGS[file_ext] # Check for custom mappings or possible overrides - return Extends::FILE_FA_ICON_MAPPINGS[file_ext] + Extends::FILE_FA_ICON_MAPPINGS[file_ext] elsif Constants::FILE_TEXT_FORMATS.include?(file_ext) - return 'fa-file-word' + 'fa-file-word' elsif Constants::FILE_TABLE_FORMATS.include?(file_ext) - return 'fa-file-excel' + 'fa-file-excel' elsif Constants::FILE_PRESENTATION_FORMATS.include?(file_ext) - return 'fa-file-powerpoint' + 'fa-file-powerpoint' elsif %w(pdf).include?(file_ext) - return 'fa-file-pdf' + 'fa-file-pdf' elsif %w(txt csv tab tex).include?(file_ext) - return 'fa-file-alt' + 'far fa-file-alt' elsif Constants::WHITELISTED_IMAGE_TYPES.include?(file_ext) - return 'fa-image' + 'fa-image' else - return 'fa-paperclip' + 'fa-paperclip' end end @@ -31,11 +33,13 @@ module FileIconsHelper def file_extension_icon(asset) file_ext = asset.file_name.split('.').last if Constants::FILE_TEXT_FORMATS.include?(file_ext) - image_link = 'office/Word-docx_20x20x32.png' + image_link = 'icon_small/docx_file.svg' elsif Constants::FILE_TABLE_FORMATS.include?(file_ext) - image_link = 'office/Excel-xlsx_20x20x32.png' + image_link = 'icon_small/xslx_file.svg' elsif Constants::FILE_PRESENTATION_FORMATS.include?(file_ext) - image_link = 'office/PowerPoint-pptx_20x20x32.png' + image_link = 'icon_small/pptx_file.svg' + elsif asset.file.attached? && asset.file.metadata['asset_type'] == 'marvinjs' + image_link = 'icon_small/marvinjs_file.svg' end # Now check for custom mappings or possible overrides @@ -98,7 +102,13 @@ module FileIconsHelper def file_extension_icon_html(asset) html = file_extension_icon(asset) - html = "" if html.blank? + if html.blank? + html = ActionController::Base.helpers.content_tag( + :i, + '', + class: ['fas', 'asset-icon', file_fa_icon_class(asset)] + ) + end html end diff --git a/app/views/assets/_asset_list.html.erb b/app/views/assets/_asset_list.html.erb index 88d5f675b..1d3f6a68c 100644 --- a/app/views/assets/_asset_list.html.erb +++ b/app/views/assets/_asset_list.html.erb @@ -4,9 +4,7 @@ data-asset-updated-at="<%= asset.updated_at.to_i %>" data-asset-order="1" > -
- -
+ <%= file_extension_icon_html(asset) %> <%= link_to rails_blob_path(asset.file, disposition: 'attachment'), class: "file-preview-link file-name", id: "modal_link#{asset.id}",