diff --git a/app/assets/images/icons/organization.svg b/app/assets/images/icons/organization.svg new file mode 100644 index 000000000..c681b0ef3 --- /dev/null +++ b/app/assets/images/icons/organization.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/icons/person.svg b/app/assets/images/icons/person.svg new file mode 100644 index 000000000..ceeab7f6f --- /dev/null +++ b/app/assets/images/icons/person.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/stylesheets/agent_tooltip.scss b/app/assets/stylesheets/agent_tooltip.scss new file mode 100644 index 000000000..833fcacb6 --- /dev/null +++ b/app/assets/stylesheets/agent_tooltip.scss @@ -0,0 +1,30 @@ +.agent-container{ + display: flex; + flex-direction: column; + align-items: center; + margin: 10px; +} +.agent-circle{ + width: 70px; + height: 70px; + background-color: var(--light-color); + display: flex; + justify-content: center; + align-items: center; + border-radius: 35px; + margin-bottom: 12px; +} +.agent-name{ + font-size: 18px; + font-weight: 600; + margin-bottom: 3px; +} +.agent-dependency{ + font-size: 16px; + font-weight: 400; + color: #767676; + margin-bottom: 3px; +} +.agent-type-icon path{ + fill: var(--primary-color) +} \ No newline at end of file diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb index ac85e687d..0040a5ba4 100755 --- a/app/assets/stylesheets/application.css.scss.erb +++ b/app/assets/stylesheets/application.css.scss.erb @@ -63,6 +63,7 @@ /* Bootstrap and Font Awesome */ @import "bootstrap"; @import "bootstrap_overrides"; +@import "agent_tooltip"; <% if (ui_theme = $UI_THEME.to_s.parameterize).present? && File.exists?(Rails.root.join('app', 'assets', 'stylesheets', 'themes', ui_theme)) %> @import "themes/<%= ui_theme %>/main"; diff --git a/app/helpers/agent_helper.rb b/app/helpers/agent_helper.rb index 0a8cbba48..a1c031597 100644 --- a/app/helpers/agent_helper.rb +++ b/app/helpers/agent_helper.rb @@ -95,17 +95,6 @@ def display_identifiers(identifiers, link: true) end.join(', ') end - def display_agent(agent, link: true) - return agent if agent.is_a?(String) - - out = agent.name.to_s - identifiers = display_identifiers(agent.identifiers, link: link) - out = "#{out} ( #{identifiers} )" unless identifiers.empty? - affiliations = Array(agent.affiliations).map { |a| display_agent(a, link: link) }.join(', ') - out = "#{out} (affiliations: #{affiliations})" unless affiliations.empty? - out - end - def agent_field_name(name, name_prefix = '') name_prefix&.empty? ? name : "#{name_prefix}[#{name}]" end @@ -166,4 +155,20 @@ def agent_usage_error_display(error) details.values.join(', ').html_safe end.join('. ').html_safe end + + def agent_tooltip(agent) + name = agent.name + email = agent.email + type = agent.agentType + identifiers = display_identifiers(agent.identifiers, link: false) + affiliations = Array(agent.affiliations).map { |a| display_agent(a, link: false) }.join(', ') + person_icon = inline_svg_tag 'icons/person.svg' , class: 'agent-type-icon' + organization_icon = inline_svg_tag 'icons/organization.svg', class: 'agent-type-icon' + agent_icon = type == "organization" ? organization_icon : person_icon + tooltip_html = "
#{agent_icon}
#{name}
#{email || ''}
#{identifiers || ''}
#{affiliations || ''}
" + return tooltip_html + end + + + end diff --git a/app/views/ontologies/sections/_metadata.html.haml b/app/views/ontologies/sections/_metadata.html.haml index 6d708f04f..5fb752244 100755 --- a/app/views/ontologies/sections/_metadata.html.haml +++ b/app/views/ontologies/sections/_metadata.html.haml @@ -20,10 +20,9 @@ = properties_dropdown('person_and_organization','Persons and organizations','', @agents_properties) do |values| = horizontal_list_container(values) do |v| - = render ChipButtonComponent.new(type: "static",'data-controller':' tooltip', title: '', class: 'text-truncate', style: 'max-width: 280px; display:block; line-height: unset') do - = display_agent(v, link: false) - - + = render ChipButtonComponent.new(type: "static",'data-controller':' tooltip', title: agent_tooltip(v) , class: 'text-truncate', style: 'max-width: 280px; display:block; line-height: unset') do + = v.name.to_s + = properties_dropdown('link','Other links','Metadata properties that highlight the links enabling access to datasets, downloading semantic resources, etc', @links_properties) do |values| = horizontal_list_container(values) do |v| = render LinkFieldComponent.new(value: v, raw: true)