refactor: change visual presentation for remote software

research-software-directory · Jan 14, 2025 · 4389131 · 4389131
1 parent 02c7604
commit 4389131
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 24 deletions.
diff --git a/frontend/components/software/overview/SoftwareOverviewContent.tsx b/frontend/components/software/overview/SoftwareOverviewContent.tsx
@@ -1,5 +1,5 @@
-// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
-// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
+// SPDX-FileCopyrightText: 2023 - 2025 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2025 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
 // SPDX-FileCopyrightText: 2023 dv4all
 //
@@ -9,14 +9,15 @@ import Link from 'next/link'
 
 import {SoftwareOverviewItemProps} from '~/types/SoftwareTypes'
 import NoContent from '~/components/layout/NoContent'
-import SourceRsd from '~/components/cards/SourceRsd'
 import {LayoutType} from './search/ViewToggleGroup'
 import SoftwareOverviewList from './list/SoftwareOverviewList'
 import SoftwareOverviewMasonry from './cards/SoftwareOverviewMasonry'
 import SoftwareOverviewGrid from './cards/SoftwareOverviewGrid'
 import SoftwareGridCard from './cards/SoftwareGridCard'
+
 import SoftwareMasonryCard from './cards/SoftwareMasonryCard'
 import SoftwareListItemContent from './list/SoftwareListItemContent'
+import SourceBanner from './list/SourceBanner'
 import OverviewListItem from './list/OverviewListItem'
 import {getItemKey, getPageUrl} from './useSoftwareOverviewProps'
 
@@ -67,20 +68,14 @@ export default function SoftwareOverviewContent({layout, software, hasRemotes}:
               data-testid="software-list-item"
               key={listKey}
               href={pageUrl}
-              className='flex-1 hover:text-inherit'
+              className='flex-1 flex hover:text-inherit group'
               title={item.brand_name}
               target={item.domain ? '_blank' : '_self'}
             >
-              <OverviewListItem className="pr-4 relative">
+              <OverviewListItem className="pr-4">
                 <SoftwareListItemContent
                   statusBanner={
-                    <div style={{
-                      position:'absolute',
-                      top:'0.125rem',
-                      right: '1rem'
-                    }}>
-                      <SourceRsd source={item?.source} domain={item?.domain}/>
-                    </div>
+                    <SourceBanner source={item?.source} domain={item?.domain}/>
                   }
                   {...item}
                 />

diff --git a/frontend/components/software/overview/cards/ExternalLinkIcon.tsx b/frontend/components/software/overview/cards/ExternalLinkIcon.tsx
@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: 2025 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2025 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+
+/**
+ * It requires parent element to have tailwind "relative" class.
+ * It requires parent element to have tailwind "group" class for changing to primary color on hover.
+ * If domain is not provided or null it returns null/nothing.
+ * @param domain string
+ * @returns JSX.Element | null
+ */
+export default function ExternalLinkIcon({domain}:Readonly<{domain?:string|null}>) {
+  if (domain){
+    return (
+      <div
+        title={domain}
+        className="absolute right-0 top-0 p-2 z-[1] rounded-tr-md opacity-40 bg-base-100 group-hover:bg-primary group-hover:opacity-70 group-hover:text-primary-content">
+        <OpenInNewIcon sx={{width:'1.5rem', height: '1.5rem'}} />
+      </div>
+    )
+  }
+  return null
+}
diff --git a/frontend/components/software/overview/cards/SoftwareGridCard.tsx b/frontend/components/software/overview/cards/SoftwareGridCard.tsx
@@ -1,5 +1,5 @@
-// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
-// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
+// SPDX-FileCopyrightText: 2023 - 2025 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2025 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
 // SPDX-FileCopyrightText: 2023 dv4all
 //
@@ -8,6 +8,7 @@
 import Link from 'next/link'
 import {getPageUrl,visibleNumberOfKeywords,visibleNumberOfProgLang} from '../useSoftwareOverviewProps'
 import SoftwareCardContent from './SoftwareCardContent'
+import ExternalLinkIcon from './ExternalLinkIcon'
 
 type SoftwareCardProps = {
   id: string
@@ -33,11 +34,15 @@ export default function SoftwareGridCard(item:SoftwareCardProps){
       className="flex-1 flex flex-col hover:text-inherit relative group"
       target={item.domain ? '_blank' : '_self'}
     >
+      {/* Requires tailwind classes relative and group */}
+      <ExternalLinkIcon domain={item.domain} />
+
       <SoftwareCardContent
         visibleKeywords={visibleNumberOfKeywords}
         visibleProgLang={visibleNumberOfProgLang}
         {...item}
       />
+
     </Link>
   )
 }
diff --git a/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx b/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx
@@ -1,5 +1,5 @@
-// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
-// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
+// SPDX-FileCopyrightText: 2023 - 2025 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2025 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
 // SPDX-FileCopyrightText: 2023 dv4all
@@ -14,6 +14,7 @@ import SourceRsd from '~/components/cards/SourceRsd'
 import ProgrammingLanguageList from './ProgrammingLanguageList'
 import SoftwareMetrics from './SoftwareMetrics'
 import useSoftwareOverviewProps from '../useSoftwareOverviewProps'
+import ExternalLinkIcon from './ExternalLinkIcon'
 
 type SoftwareCardProps = {
   item: SoftwareOverviewItemProps
@@ -36,7 +37,7 @@ export default function SoftwareMasonryCard({item}:SoftwareCardProps){
       data-testid="software-masonry-card"
       href={pageUrl}
       className="hover:text-inherit">
-      <div className="flex-shrink-0 transition bg-base-100 shadow-md hover:shadow-lg rounded-lg hover:cursor-pointer h-full select-none flex-col">
+      <div className="flex-shrink-0 transition bg-base-100 shadow-md hover:shadow-lg rounded-lg hover:cursor-pointer h-full select-none flex-col relative group">
         {/* Cover image, show only if valid image link */}
         { validImg === false ? null
           :
@@ -50,6 +51,8 @@ export default function SoftwareMasonryCard({item}:SoftwareCardProps){
             width="100%"
           />
         }
+        {/* Requires tailwind classes relative and group */}
+        <ExternalLinkIcon domain={item.domain} />
         {/* Card content */}
         <div className="flex flex-col p-4">
           <SourceRsd source={item?.source} domain={item?.domain}/>

diff --git a/frontend/components/software/overview/list/SoftwareListItemContent.tsx b/frontend/components/software/overview/list/SoftwareListItemContent.tsx
@@ -1,5 +1,5 @@
-// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
-// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
+// SPDX-FileCopyrightText: 2023 - 2025 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2025 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
 // SPDX-FileCopyrightText: 2023 dv4all
 //
@@ -10,17 +10,12 @@ import SoftwareMetrics from '../cards/SoftwareMetrics'
 import {getImgUrl} from '../useSoftwareOverviewProps'
 
 type SoftwareOverviewListItemProps = {
-  // id:string
   brand_name: string
   short_statement: string
   image_id: string | null
-  // updated_at: string | null
   contributor_cnt: number | null
   mention_cnt: number | null
   is_published: boolean
-  // keywords: string[],
-  // prog_lang: string[],
-  // licenses: string,
   downloads?: number
   statusBanner?: JSX.Element
   domain?: string|null

diff --git a/frontend/components/software/overview/list/SourceBanner.tsx b/frontend/components/software/overview/list/SourceBanner.tsx
@@ -0,0 +1,33 @@
+// SPDX-FileCopyrightText: 2025 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2025 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+
+type SourceRSDType = Readonly<{
+  source?:string|null,
+  domain?:string|null
+}>
+
+export default function SourceBanner({source,domain}:SourceRSDType){
+
+  if (!source) return null
+
+  return (
+    <div
+      className="flex gap-2 py-1 uppercase font-medium group-hover:px-2 group-hover:bg-primary group-hover:text-primary-content"
+    >
+      <div
+        title={domain ?? source}
+        className="line-clamp-1 text-sm tracking-widest uppercase"
+      >
+        {source}
+      </div>
+      {
+        domain ? <OpenInNewIcon sx={{width:'1.25rem', height: '1.25rem'}} />
+          : null
+      }
+    </div>
+  )
+}