Improve tooltips and dialogs

jcraigk · Oct 19, 2023 · 8abe9ae · 8abe9ae
1 parent 5638042
commit 8abe9ae
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 28 deletions.
diff --git a/app/helpers/tag_helper.rb b/app/helpers/tag_helper.rb
@@ -15,31 +15,22 @@ def display_tag_instances(tag_instances, css_class = 'show_tag_container')
   def tag_stack_label(tag_stack) # rubocop:disable Metrics/MethodLength
     tag_instances = tag_stack.second.sort_by { |t| t.try(:starts_at_second) || 0 }
     first_instance = tag_instances.first
+    title = stack_title(tag_instances)
     link_to '#' do
       tag.span(
-        stack_title(tag_instances),
+        title,
         class: 'label tag_label',
-        title: tooltip_for_tag_stack(tag_instances),
         style: "background-color: #{first_instance.tag.color}",
+        title: tooltip_for_tag_stack(tag_instances),
         data: {
           html: true,
-          detail_title: detail_title(tag_instances),
+          title:, # Dialog headers
           detail: tooltip_for_tag_stack(tag_instances, detail: true)
         }
       )
     end
   end
 
-  def detail_title(tag_instances)
-    tag_instance = tag_instances.first
-    if tag_instance.is_a?(TrackTag)
-      "#{tag_label(tag_instance.tag, 'detail_tag_label')}" \
-        "<br>#{tag_instance.track.show.date_with_dots} #{tag_instance.track.title}"
-    else
-      "#{tag_label(tag_instance.tag, 'detail_tag_label')}<br>#{tag_instance.show.date_with_dots}"
-    end
-  end
-
   def stack_title(tag_instances)
     str = tag_instances.first.tag.name
     str += " (#{tag_instances.size})" if tag_instances.size >= 2
@@ -58,41 +49,40 @@ def tooltip_for_tag_stack(tag_instances, detail: false)
     title = ''
 
     tag_instances.each_with_index do |t, idx|
-      title += tag_notes(t, detail:)
+      title += tag_notes(t)
       title += transcript_or_link(t, title) if detail
-      title += '<br>' unless idx == tag_instances.size - 1
+      break if idx == tag_instances.size - 1
+      title += (detail ? '<br>' : ', ')
     end
 
     title = tag_instances.first.tag.description if title.blank?
     title
   end
 
-  def tag_notes(tag_instance, detail:)
+  def tag_notes(tag_instance)
     return '' if tag_instance.notes.blank?
     str = tag_instance.notes
-    str += " #{time_range(tag_instance, detail:)}"
+    str += " #{time_range(tag_instance)}"
     str.strip
   end
 
   def transcript_or_link(tag_instance, title)
     return '' if tag_instance.try(:transcript).blank?
     str = '<br><br>' if title.present?
-    str + "<strong>TRANSCRIPT</strong><br><br> #{tag_instance.transcript.gsub("\n", '<br>')}"
+    str + "<strong>Transcript</strong><br><br> #{tag_instance.transcript.gsub("\n", '<br>')}"
   end
 
-  def time_range(tag_instance, detail:) # rubocop:disable Metrics/MethodLength, Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+  def time_range(tag_instance)
     return unless start_timestamp(tag_instance) || end_timestamp(tag_instance)
 
     starts_at = start_timestamp(tag_instance)
-    url = "/#{tag_instance.track.show.date}/#{tag_instance.track.slug}?t=#{starts_at}"
     if start_timestamp(tag_instance) && end_timestamp(tag_instance)
       range = "#{starts_at} and #{end_timestamp(tag_instance)}"
-      str = 'between '
-      str += detail ? link_to(range, url) : range
+      str = "between #{range}"
     elsif start_timestamp(tag_instance)
-      str = 'at '
-      str += detail ? link_to(starts_at, url) : starts_at
+      str = "at #{starts_at}"
     end
+
     str
   end
 

diff --git a/app/javascript/packs/application.css.scss b/app/javascript/packs/application.css.scss
@@ -61,6 +61,29 @@ $scrubbing: #1a80f6;
   0%   { box-shadow: 0 0 5px $highlight1; }
   100% { box-shadow: 0 0 35px $highlight1; }
 }
+
+.ui-tooltip {
+  font-family: 'Open Sans Condensed', sans-serif;
+  background: $gray_70;
+  color: $background_gray;
+  border-radius: 5px;
+}
+.ui-dialog {
+  background: $gray_70;
+  border-radius: 5px;
+
+  .ui-dialog-titlebar {
+    background: $gray_80;
+    border: none;
+    color: $background_gray;
+    font-size: 1.5em;
+    line-height: 1.2em;
+  }
+  .ui-dialog-content {
+    font-family: 'Open Sans Condensed', sans-serif;
+    color: $background_gray
+  }
+}
 .tagin_project {
   p, li {
     font-size: 20px;
@@ -1071,8 +1094,6 @@ html {
     top: -20px;
   }
   #search_results_container {
-    position: relative;
-    top: -20px;
 
     & > h2 {
       font-size: 24px;

diff --git a/app/javascript/src/coffeescript/app.js.coffee b/app/javascript/src/coffeescript/app.js.coffee
@@ -425,13 +425,14 @@ $ ->
 
   # View Lyrics button opens a dialog
   .on 'click', '.song_lyrics', ->
-    $('#lyrics_dialog').attr('title', $(this).data('title'))
+    $('#lyrics_dialog').dialog('option', 'title', $(this).data('title'))
     $('#lyrics_content').html $(this).data('lyrics')
     $('#lyrics_dialog').dialog('open')
 
   # Tag instance click opens a dialog
   .on 'click', '.tag_label:not(.no-dialog)', ->
-    $('#tag_dialog').attr('title', $(this).data('detail-title'))
+    console.log($(this).attr('title'))
+    $('#tag_dialog').dialog('option', 'title', $(this).data('title'))
     $('#tag_detail').html $(this).data('detail')
     $('#tag_dialog').dialog('open')