2018-08-18 07:19:57 -04:00
|
|
|
# frozen_string_literal: true
|
|
|
|
|
2018-07-18 12:56:19 -04:00
|
|
|
require 'json'
|
|
|
|
|
2013-11-20 06:41:41 -05:00
|
|
|
module IconsHelper
|
2017-05-26 14:51:24 -04:00
|
|
|
extend self
|
2015-05-21 17:49:06 -04:00
|
|
|
|
2020-07-22 20:09:43 -04:00
|
|
|
DEFAULT_ICON_SIZE = 16
|
|
|
|
|
|
|
|
def custom_icon(icon_name, size: DEFAULT_ICON_SIZE)
|
2020-11-11 13:09:10 -05:00
|
|
|
memoized_icon("#{icon_name}_#{size}") do
|
2021-10-28 17:10:02 -04:00
|
|
|
render partial: "shared/icons/#{icon_name}", formats: :svg, locals: { size: size }
|
2020-11-11 13:09:10 -05:00
|
|
|
end
|
2017-09-22 04:39:47 -04:00
|
|
|
end
|
|
|
|
|
2017-11-09 04:38:00 -05:00
|
|
|
def sprite_icon_path
|
2020-07-14 08:09:14 -04:00
|
|
|
@sprite_icon_path ||= begin
|
|
|
|
# SVG Sprites currently don't work across domains, so in the case of a CDN
|
|
|
|
# we have to set the current path deliberately to prevent addition of asset_host
|
|
|
|
sprite_base_url = Gitlab.config.gitlab.url if ActionController::Base.asset_host
|
|
|
|
ActionController::Base.helpers.image_path('icons.svg', host: sprite_base_url)
|
|
|
|
end
|
2017-11-09 04:38:00 -05:00
|
|
|
end
|
|
|
|
|
2018-01-03 05:08:14 -05:00
|
|
|
def sprite_file_icons_path
|
|
|
|
# SVG Sprites currently don't work across domains, so in the case of a CDN
|
|
|
|
# we have to set the current path deliberately to prevent addition of asset_host
|
|
|
|
sprite_base_url = Gitlab.config.gitlab.url if ActionController::Base.asset_host
|
|
|
|
ActionController::Base.helpers.image_path('file_icons.svg', host: sprite_base_url)
|
|
|
|
end
|
|
|
|
|
2020-08-03 11:09:44 -04:00
|
|
|
def sprite_icon(icon_name, size: DEFAULT_ICON_SIZE, css_class: nil)
|
2020-11-11 13:09:10 -05:00
|
|
|
memoized_icon("#{icon_name}_#{size}_#{css_class}") do
|
|
|
|
if known_sprites&.exclude?(icon_name)
|
|
|
|
exception = ArgumentError.new("#{icon_name} is not a known icon in @gitlab-org/gitlab-svg")
|
|
|
|
Gitlab::ErrorTracking.track_and_raise_for_dev_exception(exception)
|
|
|
|
end
|
2018-07-18 12:56:19 -04:00
|
|
|
|
2020-11-11 13:09:10 -05:00
|
|
|
css_classes = []
|
|
|
|
css_classes << "s#{size}" if size
|
|
|
|
css_classes << "#{css_class}" unless css_class.blank?
|
2020-07-22 20:09:43 -04:00
|
|
|
|
2020-11-11 13:09:10 -05:00
|
|
|
content_tag(
|
|
|
|
:svg,
|
2021-09-30 14:11:31 -04:00
|
|
|
content_tag(:use, '', { 'href' => "#{sprite_icon_path}##{icon_name}" } ),
|
2020-11-11 13:09:10 -05:00
|
|
|
class: css_classes.empty? ? nil : css_classes.join(' '),
|
|
|
|
data: { testid: "#{icon_name}-icon" }
|
|
|
|
)
|
|
|
|
end
|
2017-09-22 04:39:47 -04:00
|
|
|
end
|
|
|
|
|
2022-03-04 07:13:07 -05:00
|
|
|
# Creates a GitLab UI loading icon/spinner.
|
|
|
|
#
|
|
|
|
# Examples:
|
|
|
|
# # Default
|
|
|
|
# gl_loading_icon
|
|
|
|
#
|
|
|
|
# # Sizes
|
|
|
|
# gl_loading_icon(size: 'md')
|
|
|
|
# gl_loading_icon(size: 'lg')
|
|
|
|
# gl_loading_icon(size: 'xl')
|
|
|
|
#
|
|
|
|
# # Colors
|
|
|
|
# gl_loading_icon(color: 'light')
|
|
|
|
#
|
|
|
|
# # Block/Inline
|
|
|
|
# gl_loading_icon(inline: true)
|
|
|
|
#
|
|
|
|
# # Custom classes
|
|
|
|
# gl_loading_icon(css_class: "foo-bar")
|
|
|
|
#
|
|
|
|
# See also https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-loading-icon--default
|
|
|
|
def gl_loading_icon(inline: false, color: 'dark', size: 'sm', css_class: nil)
|
|
|
|
spinner = content_tag(:span, "", {
|
|
|
|
class: %[gl-spinner gl-spinner-#{color} gl-spinner-#{size} gl-vertical-align-text-bottom!],
|
|
|
|
aria: { label: _('Loading') }
|
|
|
|
})
|
2020-07-13 17:09:24 -04:00
|
|
|
|
2022-03-04 07:13:07 -05:00
|
|
|
container_classes = ['gl-spinner-container']
|
|
|
|
container_classes << css_class unless css_class.blank?
|
|
|
|
content_tag(inline ? :span : :div, spinner, {
|
|
|
|
class: container_classes,
|
|
|
|
role: 'status'
|
|
|
|
})
|
2020-07-13 17:09:24 -04:00
|
|
|
end
|
|
|
|
|
2018-02-06 08:33:18 -05:00
|
|
|
def external_snippet_icon(name)
|
2018-03-03 04:23:42 -05:00
|
|
|
content_tag(:span, "", class: "gl-snippet-icon gl-snippet-icon-#{name}")
|
2018-02-06 08:33:18 -05:00
|
|
|
end
|
|
|
|
|
2020-10-20 14:08:54 -04:00
|
|
|
def audit_icon(name, css_class: nil)
|
|
|
|
case name
|
2016-03-01 04:11:46 -05:00
|
|
|
when "standard"
|
2020-10-20 14:08:54 -04:00
|
|
|
name = "key"
|
2017-05-16 08:54:57 -04:00
|
|
|
when "two-factor"
|
2020-10-20 14:08:54 -04:00
|
|
|
name = "key"
|
2018-08-14 15:12:07 -04:00
|
|
|
when "google_oauth2"
|
2020-10-20 14:08:54 -04:00
|
|
|
name = "google"
|
2016-03-01 04:11:46 -05:00
|
|
|
end
|
|
|
|
|
2020-10-20 14:08:54 -04:00
|
|
|
sprite_icon(name, css_class: css_class)
|
2016-03-01 04:11:46 -05:00
|
|
|
end
|
|
|
|
|
2013-11-20 06:41:41 -05:00
|
|
|
def boolean_to_icon(value)
|
2015-08-20 17:03:09 -04:00
|
|
|
if value
|
2020-12-11 13:09:57 -05:00
|
|
|
sprite_icon('check', css_class: 'gl-text-green-500')
|
2013-11-20 06:41:41 -05:00
|
|
|
else
|
2020-12-11 13:09:57 -05:00
|
|
|
sprite_icon('power', css_class: 'gl-text-gray-500')
|
2013-11-20 06:41:41 -05:00
|
|
|
end
|
|
|
|
end
|
|
|
|
|
2020-07-22 20:09:43 -04:00
|
|
|
def visibility_level_icon(level, options: {})
|
2015-12-02 08:08:59 -05:00
|
|
|
name =
|
|
|
|
case level
|
|
|
|
when Gitlab::VisibilityLevel::PRIVATE
|
|
|
|
'lock'
|
|
|
|
when Gitlab::VisibilityLevel::INTERNAL
|
|
|
|
'shield'
|
|
|
|
else # Gitlab::VisibilityLevel::PUBLIC
|
2020-07-22 20:09:43 -04:00
|
|
|
'earth'
|
2015-12-02 08:08:59 -05:00
|
|
|
end
|
2016-03-01 04:11:46 -05:00
|
|
|
|
2020-08-03 11:09:44 -04:00
|
|
|
css_class = options.delete(:class)
|
|
|
|
|
|
|
|
sprite_icon(name, size: DEFAULT_ICON_SIZE, css_class: css_class)
|
2013-11-20 06:41:41 -05:00
|
|
|
end
|
2014-10-04 06:29:18 -04:00
|
|
|
|
|
|
|
def file_type_icon_class(type, mode, name)
|
|
|
|
if type == 'folder'
|
2020-10-08 11:08:17 -04:00
|
|
|
icon_class = 'folder-o'
|
2018-10-17 20:03:15 -04:00
|
|
|
elsif type == 'archive'
|
|
|
|
icon_class = 'archive'
|
2015-04-01 23:32:16 -04:00
|
|
|
elsif mode == '120000'
|
2014-10-04 06:29:18 -04:00
|
|
|
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'
|
2020-10-08 11:08:17 -04:00
|
|
|
icon_class = 'document'
|
2014-10-04 06:29:18 -04:00
|
|
|
when '.jpg', '.jpeg', '.jif', '.jfif',
|
|
|
|
'.jp2', '.jpx', '.j2k', '.j2c',
|
2019-07-14 22:53:02 -04:00
|
|
|
'.apng', '.png', '.gif', '.tif', '.tiff',
|
|
|
|
'.svg', '.ico', '.bmp', '.webp'
|
2020-10-08 11:08:17 -04:00
|
|
|
icon_class = 'doc-image'
|
2019-07-14 22:53:02 -04:00
|
|
|
when '.zip', '.zipx', '.tar', '.gz', '.gzip', '.tgz', '.bz', '.bzip',
|
|
|
|
'.bz2', '.bzip2', '.car', '.tbz', '.xz', 'txz', '.rar', '.7z',
|
|
|
|
'.lz', '.lzma', '.tlz'
|
2020-10-08 11:08:17 -04:00
|
|
|
icon_class = 'doc-compressed'
|
2019-07-14 22:53:02 -04:00
|
|
|
when '.mp3', '.wma', '.ogg', '.oga', '.wav', '.flac', '.aac', '.3ga',
|
|
|
|
'.ac3', '.midi', '.m4a', '.ape', '.mpa'
|
2020-10-08 11:08:17 -04:00
|
|
|
icon_class = 'volume-up'
|
2014-10-04 06:29:18 -04:00
|
|
|
when '.mp4', '.m4p', '.m4v',
|
|
|
|
'.mpg', '.mp2', '.mpeg', '.mpe', '.mpv',
|
2019-07-14 22:53:02 -04:00
|
|
|
'.mpg', '.mpeg', '.m2v', '.m2ts',
|
2014-10-04 06:29:18 -04:00
|
|
|
'.avi', '.mkv', '.flv', '.ogv', '.mov',
|
|
|
|
'.3gp', '.3g2'
|
2020-10-08 11:08:17 -04:00
|
|
|
icon_class = 'live-preview'
|
2019-07-14 22:53:02 -04:00
|
|
|
when '.doc', '.dot', '.docx', '.docm', '.dotx', '.dotm', '.docb',
|
|
|
|
'.odt', '.ott', '.uot', '.rtf'
|
2020-10-08 11:08:17 -04:00
|
|
|
icon_class = 'doc-text'
|
2014-10-04 06:29:18 -04:00
|
|
|
when '.xls', '.xlt', '.xlm', '.xlsx', '.xlsm', '.xltx', '.xltm',
|
2019-07-14 22:53:02 -04:00
|
|
|
'.xlsb', '.xla', '.xlam', '.xll', '.xlw', '.ots', '.ods', '.uos'
|
2020-10-08 11:08:17 -04:00
|
|
|
icon_class = 'document'
|
2014-10-04 06:29:18 -04:00
|
|
|
when '.ppt', '.pot', '.pps', '.pptx', '.pptm', '.potx', '.potm',
|
2019-07-14 22:53:02 -04:00
|
|
|
'.ppam', '.ppsx', '.ppsm', '.sldx', '.sldm', '.odp', '.otp', '.uop'
|
2020-10-08 11:08:17 -04:00
|
|
|
icon_class = 'doc-chart'
|
2014-10-04 06:29:18 -04:00
|
|
|
else
|
2020-10-08 11:08:17 -04:00
|
|
|
icon_class = 'doc-text'
|
2014-10-04 06:29:18 -04:00
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
icon_class
|
|
|
|
end
|
2018-07-18 12:56:19 -04:00
|
|
|
|
|
|
|
private
|
|
|
|
|
|
|
|
def known_sprites
|
2019-12-14 13:07:40 -05:00
|
|
|
return if Rails.env.production?
|
|
|
|
|
2020-04-30 14:09:38 -04:00
|
|
|
@known_sprites ||= Gitlab::Json.parse(File.read(Rails.root.join('node_modules/@gitlab/svgs/dist/icons.json')))['icons']
|
2018-07-18 12:56:19 -04:00
|
|
|
end
|
2020-11-11 13:09:10 -05:00
|
|
|
|
|
|
|
def memoized_icon(key)
|
|
|
|
@rendered_icons ||= {}
|
|
|
|
|
|
|
|
@rendered_icons[key] || (
|
|
|
|
@rendered_icons[key] = yield
|
|
|
|
)
|
|
|
|
end
|
2013-11-20 06:41:41 -05:00
|
|
|
end
|