From d8cd6b99d806aad49cd03ca7100d704f05fd1714 Mon Sep 17 00:00:00 2001 From: mlongley Date: Fri, 10 May 2024 11:35:54 -0500 Subject: [PATCH] Implement custom digital contents icon, tooltip, and alert --- app/assets/stylesheets/palette.scss | 1 + app/assets/stylesheets/sulCollection.scss | 41 ++++++++++++++++++- .../online_content_filter_component.html.erb | 16 ++++++++ ...online_status_indicator_component.html.erb | 1 + .../online_status_indicator_component.rb | 25 +++++++++++ .../search_result_title_component.html.erb | 9 +++- app/controllers/catalog_controller.rb | 4 +- app/javascript/application.js | 8 +++- 8 files changed, 99 insertions(+), 6 deletions(-) create mode 100644 app/components/arclight/online_content_filter_component.html.erb create mode 100644 app/components/arclight/online_status_indicator_component.html.erb create mode 100644 app/components/arclight/online_status_indicator_component.rb diff --git a/app/assets/stylesheets/palette.scss b/app/assets/stylesheets/palette.scss index 6ffb3a7..683e6e2 100644 --- a/app/assets/stylesheets/palette.scss +++ b/app/assets/stylesheets/palette.scss @@ -27,3 +27,4 @@ $stanford-stone-light: #D4D1D1; $cyan-blue-light: #f8f9fa; $gray-light: #fafafa; $grey-lighter: #ededed; +$green-white: #EBF5F1; diff --git a/app/assets/stylesheets/sulCollection.scss b/app/assets/stylesheets/sulCollection.scss index fb8349e..01f249b 100644 --- a/app/assets/stylesheets/sulCollection.scss +++ b/app/assets/stylesheets/sulCollection.scss @@ -17,7 +17,7 @@ } .al-show-actions-box { - background-color: #EBF5F1; + background-color: $green-white; } .al-collection-context-actions .btn-sm { @@ -104,7 +104,7 @@ } .al-hierarchy-highlight > .documentHeader { - background-color: #EBF5F1; + background-color: $green-white; } #sidebar { @@ -190,3 +190,40 @@ a.btn-outline-secondary:focus { .page-item.disabled .page-link { color: black; } + +.al-online-content-icon { + align-content: center; +} + +// Digital contents icons, alerts +// AL Core overrides +article.document .al-online-content-icon .blacklight-icons svg, +.online-contents .al-online-content-icon .blacklight-icons svg { + fill: $stanford-palo-alto-light; +} + +.tooltip-inner { + background-color: $stanford-palo-alto-light; + color: white; +} + +.tooltip.bs-tooltip-top .tooltip-arrow::before { + border-top-color: $stanford-palo-alto-light; +} + +.title-container .online-contents h2 { + text-transform: none; + margin-bottom: 0; + align-content: center; + margin-left: 1rem; +} + +.online-contents.card { + border: 0; + background-color: $green-white; + padding: 0; + .card-body { + padding: 0.25rem 0.25rem 0.25rem 1rem; + border-left: 8px solid $stanford-palo-alto-dark; + } +} \ No newline at end of file diff --git a/app/components/arclight/online_content_filter_component.html.erb b/app/components/arclight/online_content_filter_component.html.erb new file mode 100644 index 0000000..4b41328 --- /dev/null +++ b/app/components/arclight/online_content_filter_component.html.erb @@ -0,0 +1,16 @@ +<%# Overrides AL Core to use custom icon/tooltip and layout %> +
+
+
+ <%= render Arclight::OnlineStatusIndicatorComponent.new(document: @document) %> +

+ + Digital content - +

+
+
+ <%= t('arclight.views.show.online_content.description') %> + <%= link_to t('arclight.views.show.online_content.link_text'), helpers.search_action_path(f: { collection: [collection_name], access: ['online'] }) %> +
+
+
\ No newline at end of file diff --git a/app/components/arclight/online_status_indicator_component.html.erb b/app/components/arclight/online_status_indicator_component.html.erb new file mode 100644 index 0000000..a99bdd1 --- /dev/null +++ b/app/components/arclight/online_status_indicator_component.html.erb @@ -0,0 +1 @@ +<%= icon_with_tooltip %> \ No newline at end of file diff --git a/app/components/arclight/online_status_indicator_component.rb b/app/components/arclight/online_status_indicator_component.rb new file mode 100644 index 0000000..c969de7 --- /dev/null +++ b/app/components/arclight/online_status_indicator_component.rb @@ -0,0 +1,25 @@ +# frozen_string_literal: true + +# Overrides Arclight's OnlineStatusIndicatorComponent to replace with a custom template that includes our tooltip +module Arclight + # Render an online status indicator for a document + class OnlineStatusIndicatorComponent < Blacklight::Component + def initialize(document:, **) + @document = document + super + end + + def render? + @document.online_content? + end + + def icon_with_tooltip + icon = <<~HTML + + #{helpers.blacklight_icon(:online)} + + HTML + icon.html_safe # rubocop:disable Rails/OutputSafety + end + end +end diff --git a/app/components/arclight/search_result_title_component.html.erb b/app/components/arclight/search_result_title_component.html.erb index c9361c2..266dac5 100644 --- a/app/components/arclight/search_result_title_component.html.erb +++ b/app/components/arclight/search_result_title_component.html.erb @@ -1,4 +1,5 @@ -<%# This file overrides AL Core for more control over the extents display %> +<%# This file overrides AL Core for more control over the extents display + and to add the digital content icon %>

<%= helpers.link_to_document @document, counter: @counter %> @@ -10,10 +11,14 @@
<% @document.extent.each do |extent| %> <%= tag.span extent, class: 'al-document-extent badge mx-1' unless compact? %> - <% end %> + <% end %> + <%= render Arclight::OnlineStatusIndicatorComponent.new(document: @document) %> +
+

+ <%# these are set in the catalog_controller by add_results_document_tool %> <% actions.each do |action| %> <%= action %> <% end %> diff --git a/app/controllers/catalog_controller.rb b/app/controllers/catalog_controller.rb index bb17e0f..79127b1 100644 --- a/app/controllers/catalog_controller.rb +++ b/app/controllers/catalog_controller.rb @@ -50,7 +50,9 @@ class CatalogController < ApplicationController config.header_component = Arclight::HeaderComponent config.logo_link = 'https://library.stanford.edu' - config.add_results_document_tool(:online, component: Arclight::OnlineStatusIndicatorComponent) + # add_results_document_tool effectively creates an Blacklight action + # Then actions are interated over in search_results_document_component.html.erb + # See https://github.com/projectblacklight/blacklight/blob/6c6a72066a6330a815603e839b316958f6321dd7/lib/blacklight/configuration.rb#L560 config.add_results_document_tool(:arclight_bookmark_control, component: Arclight::BookmarkComponent) config.add_results_collection_tool(:group_toggle) diff --git a/app/javascript/application.js b/app/javascript/application.js index 3b07723..27d010f 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -5,4 +5,10 @@ import bootstrap from "bootstrap" import githubAutoCompleteElement from "@github/auto-complete-element" import Blacklight from "blacklight" -import "arclight" \ No newline at end of file +import "arclight" + +Blacklight.onLoad(() => { + // Initialize Bootstrap tooltips + const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') + const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) +}) \ No newline at end of file