Website link with icon on header

OpenConceptLab · Dec 10, 2020 · 4f5e1f0 · 4f5e1f0
1 parent 9b7e74e
commit 4f5e1f0
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 4 deletions.
diff --git a/src/components/collections/CollectionHomeHeader.jsx b/src/components/collections/CollectionHomeHeader.jsx
@@ -11,6 +11,7 @@ import CollectionButton from '../common/CollectionButton';
 import VersionButton from '../common/VersionButton';
 import LastUpdatedOnLabel from '../common/LastUpdatedOnLabel';
 import ExternalIdLabel from '../common/ExternalIdLabel';
+import LinkLabel from '../common/LinkLabel';
 import PublicAccessChip from '../common/PublicAccessChip';
 import CustomAttributesPopup from '../common/CustomAttributesPopup';
 import CollapsibleAttributes from '../common/CollapsibleAttributes';
@@ -74,7 +75,6 @@ const CollectionHomeHeader = ({
             <HeaderAttribute label="Short Code" value={collection.short_code} gridClass="col-md-12" />
             <HeaderAttribute label="Name" value={collection.name} gridClass="col-md-12" />
             <HeaderAttribute label="Description" value={collection.description} gridClass="col-md-12" />
-            <HeaderAttribute label="Website" value={collection.website} gridClass="col-md-12" type="url" />
           </div>
           <div className="col-md-7 no-side-padding">
             <HeaderAttribute label="Collection Type" value={collection.collection_type} gridClass="col-md-12" />
@@ -104,6 +104,12 @@ const CollectionHomeHeader = ({
             </React.Fragment>
           }
           <div className='col-md-12 no-side-padding flex-vertical-center' style={{paddingTop: '10px'}}>
+            {
+              collection.website &&
+              <span>
+                <LinkLabel link={collection.website} iconSize='medium' noContainerClass />
+              </span>
+            }
             <span>
               <LastUpdatedOnLabel
                 date={collection.updated_on}

diff --git a/src/components/common/LinkLabel.jsx b/src/components/common/LinkLabel.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link as LinkIcon } from '@material-ui/icons';
+
+const STYLES = {
+  medium: {
+    icon: {width: '9.5pt', marginTop: '-3px', marginRight: '4px'},
+    fontSize: '9.5pt',
+  },
+  small: {
+    icon: {width: '8pt', marginTop: '-4px', marginRight: '4px'},
+    fontSize: '8pt',
+  }
+}
+
+const LinkLabel = props => {
+  const containerClass = props.noContainerClass ? '' : 'col-sm-12 no-side-padding';
+  const styles = STYLES[props.iconSize || 'small']
+  return (
+    <div className={`${containerClass} resource-metadata`} style={{fontSize: styles.fontSize}}>
+      <span>
+        <LinkIcon style={styles.icon} />
+      </span>
+      <span className='ellipsis-text' style={{maxWidth: '300px'}}>
+        <a style={{color: 'inherit'}} href={props.link} target='_blank' rel='noreferrer noopener'>{props.link}</a>
+      </span>
+    </div>
+  )
+}
+
+export default LinkLabel;
diff --git a/src/components/orgs/OrgHomeHeader.jsx b/src/components/orgs/OrgHomeHeader.jsx
@@ -9,6 +9,7 @@ import OwnerButton from '../common/OwnerButton';
 import LastUpdatedOnLabel from '../common/LastUpdatedOnLabel';
 import ExternalIdLabel from '../common/ExternalIdLabel';
 import LocationLabel from '../common/LocationLabel';
+import LinkLabel from '../common/LinkLabel';
 import CustomAttributesPopup from '../common/CustomAttributesPopup';
 import PublicAccessChip from '../common/PublicAccessChip';
 import HeaderAttribute from '../common/HeaderAttribute';
@@ -38,7 +39,6 @@ const OrgHomeHeader = ({ org, url }) => {
             }
           </div>
           <HeaderAttribute label="Company" value={org.company} gridClass="col-md-12" />
-          <HeaderAttribute label="Website" value={org.website} gridClass="col-md-12" type="url" />
           <HeaderAttribute label="Custom Attributes" value={!isEmpty(org.extras) && <CustomAttributesPopup attributes={org.extras} />} gridClass="col-md-12" />
           <div className='col-md-12 no-side-padding flex-vertical-center' style={{paddingTop: '10px'}}>
             {
@@ -47,6 +47,12 @@ const OrgHomeHeader = ({ org, url }) => {
                 <LocationLabel location={org.location} noContainerClass iconSize="medium" />
               </span>
             }
+            {
+              org.website &&
+              <span style={{marginRight: '10px'}}>
+                <LinkLabel link={org.website} iconSize='medium' noContainerClass />
+              </span>
+            }
             <span>
               <LastUpdatedOnLabel
                 label='Created'

diff --git a/src/components/sources/SourceHomeHeader.jsx b/src/components/sources/SourceHomeHeader.jsx
@@ -11,6 +11,7 @@ import SourceButton from '../common/SourceButton';
 import VersionButton from '../common/VersionButton';
 import LastUpdatedOnLabel from '../common/LastUpdatedOnLabel';
 import ExternalIdLabel from '../common/ExternalIdLabel';
+import LinkLabel from '../common/LinkLabel';
 import PublicAccessChip from '../common/PublicAccessChip';
 import CustomAttributesPopup from '../common/CustomAttributesPopup';
 import CollapsibleAttributes from '../common/CollapsibleAttributes';
@@ -68,7 +69,6 @@ const SourceHomeHeader = ({
             }
           </div>
           <HeaderAttribute label="Description" value={source.description} gridClass="col-md-12" />
-          <HeaderAttribute label="Website" value={source.website} gridClass="col-md-12" type='url' />
           <HeaderAttribute label="Source Type" value={source.source_type} gridClass="col-md-12" />
           <HeaderAttribute label="Default Locale" value={source.default_locale} gridClass="col-md-12" />
           <HeaderAttribute label="Supported Locale" value={source.supported_locales.join(', ')} gridClass="col-md-12" />
@@ -94,7 +94,13 @@ const SourceHomeHeader = ({
             </React.Fragment>
           }
           <div className='col-md-12 no-side-padding flex-vertical-center' style={{paddingTop: '10px'}}>
-            <span>
+            {
+              source.website &&
+              <span>
+                <LinkLabel link={source.website} iconSize='medium' noContainerClass />
+              </span>
+            }
+            <span style={{marginLeft: '10px'}}>
               <LastUpdatedOnLabel
                 date={source.updated_on}
                 by={source.updated_by}