Improve tag display

jcraigk · Oct 16, 2024 · c1a21b9 · c1a21b9
1 parent 7a5b1e8
commit c1a21b9
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 29 deletions.
diff --git a/app/javascript/components/controls/ShowContextMenu.jsx b/app/javascript/components/controls/ShowContextMenu.jsx
@@ -3,6 +3,7 @@ import { Link, useOutletContext } from "react-router-dom";
 import { formatDateMed } from "../helpers/utils";
 import { useFeedback } from "./FeedbackContext";
 import LikeButton from "./LikeButton";
+import TagBadges from "./TagBadges";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEllipsis, faShareFromSquare, faExternalLinkAlt, faClipboard, faCirclePlus, faMapMarkerAlt, faLandmark, faCircleChevronLeft, faCircleChevronRight, faDownload } from "@fortawesome/free-solid-svg-icons";
 
@@ -113,6 +114,13 @@ const ShowContextMenu = ({ show, adjacentLinks = true }) => {
           <div className="dropdown-item display-phone-only">
             <LikeButton likable={show} type="Show" />
           </div>
+
+          {show.tags?.length > 0 && (
+            <div className="dropdown-item display-phone-only">
+              <TagBadges tags={show.tags} parentId={show.date} />
+            </div>
+          )}
+
           <a className="dropdown-item" onClick={(e) => copyToClipboard(e, false)}>
             <FontAwesomeIcon icon={faShareFromSquare} className="icon" />
             Share

diff --git a/app/javascript/components/controls/TagBadges.jsx b/app/javascript/components/controls/TagBadges.jsx
@@ -14,30 +14,38 @@ const TagBadges = ({ tags, parentId }) => {
       return acc;
     }, {});
 
-  const handleClick = (tagGroup, event) => {
-    if (!tagGroup[0].notes && !tagGroup[0].transcript) {
-      return;
-    }
+  const handleClick = (event) => {
     event.stopPropagation();
     event.preventDefault();
 
     const modalContent = (
       <>
-        <h2 className="title">{tagGroup[0].name}</h2>
-        <div>
-          {tagGroup.map((tag, index) => (
-            <div key={index}>
-              {tag.transcript ? (
-                <>
-                  <h3 className="subtitle">{tag.notes}</h3>
-                  <p className="has-text-weight-bold mb-1">TRANSCRIPT:</p>
-                  <p dangerouslySetInnerHTML={{ __html: tag.transcript.replace(/\n/g, "<br />") }}></p>
-                </>
-              ) : (
-                <ul className="notes-list">
-                  <li>{tag.notes}</li>
-                </ul>
-              )}
+        <div className="tags-container">
+          {Object.entries(groupedTags).map(([tagName, tagGroup], index) => (
+            <div key={index} className="tag-group mb-4">
+              <div className="tag-badge mb-2">
+                {tagName} {tagGroup.length > 1 ? `(${tagGroup.length})` : ""}
+              </div>
+              <div className="tag-content">
+                {tagGroup.map((tag, idx) => (
+                  <div key={idx} className="tag-details">
+                    {tag.transcript ? (
+                      <>
+                        <p className="mb-4">{tag.notes || tag.description}</p>
+                        <p className="has-text-weight-bold mb-2">TRANSCRIPT:</p>
+                        <div
+                          className="box"
+                          dangerouslySetInnerHTML={{ __html: tag.transcript.replace(/\n/g, "<br />") }}
+                        ></div>
+                      </>
+                    ) : (
+                      <ul className="notes-list">
+                        <li>{tag.notes || tag.description}</li>
+                      </ul>
+                    )}
+                  </div>
+                ))}
+              </div>
             </div>
           ))}
         </div>
@@ -76,21 +84,18 @@ const TagBadges = ({ tags, parentId }) => {
   };
 
   return (
-    <div className="tag-badges-container">
+    <div className="tag-badges-container" onClick={handleClick}>
       {Object.entries(groupedTags).map(([tagName, tagGroup]) => {
         const count = tagGroup.length;
         const title = `${tagName} ${count > 1 ? `(${count})` : ""}`;
         const tooltipId = `tooltip-${parentId}-${tagName}`;
-        const isClickable = tagGroup[0].notes || tagGroup[0].transcript;
 
         return (
           <div
             key={tooltipId}
             className="tag-badge"
             data-tooltip-id={tooltipId}
             data-tooltip-content={tooltipForTagStack(tagGroup)}
-            onClick={isClickable ? (event) => handleClick(tagGroup, event) : null}
-            style={{cursor: isClickable ? "pointer" : "default"}}
           >
             {title}
             <Tooltip id={tooltipId} className="custom-tooltip" />

diff --git a/app/javascript/components/controls/TrackContextMenu.jsx b/app/javascript/components/controls/TrackContextMenu.jsx
@@ -3,6 +3,7 @@ import { useOutletContext, Link } from "react-router-dom";
 import { useFeedback } from "./FeedbackContext";
 import DraftPlaylistTrackModal from "../modals/DraftPlaylistTrackModal";
 import LikeButton from "./LikeButton";
+import TagBadges from "./TagBadges";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEllipsis, faShareFromSquare, faCirclePlus, faDownload, faMusic, faCircleChevronLeft, faCircleChevronRight, faTrashAlt, faClock } from "@fortawesome/free-solid-svg-icons";
 
@@ -101,6 +102,12 @@ const TrackContextMenu = ({ track, indexInPlaylist = null }) => {
               <LikeButton likable={track} type="Track" />
             </div>
 
+            {track.tags?.length > 0 && (
+              <div className="dropdown-item display-phone-only">
+                <TagBadges tags={track.tags} parentId={track.id} />
+              </div>
+            )}
+
             <a className="dropdown-item" onClick={(e) => copyToClipboard(e)}>
               <FontAwesomeIcon icon={faShareFromSquare} className="icon" />
               Share

diff --git a/app/javascript/components/modals/AppModal.jsx b/app/javascript/components/modals/AppModal.jsx
@@ -10,6 +10,7 @@ const AppModal = ({ isOpen, onRequestClose, modalContent }) => {
 
   return (
     <Modal
+      id="app-modal"
       isOpen={isOpen}
       onRequestClose={onRequestClose}
       className="modal-content"

diff --git a/app/javascript/stylesheets/tags.css.scss b/app/javascript/stylesheets/tags.css.scss
@@ -18,13 +18,26 @@
   white-space: nowrap;
 }
 
+.tag-details {
+  font-size: 1.2rem;
+}
+
+#app-modal {
+  .tag-badge {
+    font-size: 1.2rem !important;
+    padding: 0.2rem 0.6rem;
+    display: inline-block;
+  }
+}
+
+.dropdown-item {
+  .tag-badge {
+    font-size: 0.8rem !important;
+    line-height: 1rem !important;
+  }
+}
+
 .tag-badge:hover {
   background-color: $control-gray;
   color: $text-gray;
 }
-
-ul.notes-list {
-  list-style-type: disc;
-  margin-left: 20px;
-  padding-left: 0;
-}