Feedbacks | Concept Locales | External ID styles

OpenConceptLab · Oct 15, 2024 · 588692a · 588692a
1 parent d2182ee
commit 588692a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/src/components/common/ExternalIdLabel.jsx b/src/components/common/ExternalIdLabel.jsx
@@ -7,7 +7,7 @@ import ExternalIdIcon from './ExternalIdIcon'
 import { OperationsContext } from '../app/LayoutContext';
 import { copyToClipboard } from '../../common/utils'
 
-const ExternalIdLabel = ({ value, style }) => {
+const ExternalIdLabel = ({ value, style, iconStyle }) => {
   const { t } = useTranslation()
   const { setAlert } = React.useContext(OperationsContext);
   const getValue = () => {
@@ -26,14 +26,14 @@ const ExternalIdLabel = ({ value, style }) => {
   return (
     <Tooltip title={t('common.click_to_copy')}>
       <span style={{display: 'flex', alignItems: 'center', cursor: 'copy', ...style}} onClick={onClick}>
-      <ExternalIdIcon size='small' sx={{marginTop: '4px', width: '18px', height: '18px'}} />
-      <span style={{marginRight: '4px', fontSize: '12px', colors: SECONDARY_COLORS.main}}>
-        {t('concept.form.external_id')}
+        <ExternalIdIcon size='small' sx={{marginTop: '4px', width: '18px', height: '18px', ...iconStyle}} />
+        <span style={{marginRight: '4px', fontSize: '12px', colors: SECONDARY_COLORS.main}}>
+          {t('concept.form.external_id')}
+        </span>
+        <span style={{fontSize: '12px', color: SECONDARY_COLORS['50']}}>
+          {getValue()}
+        </span>
       </span>
-      <span style={{fontSize: '12px', color: SECONDARY_COLORS['50']}}>
-        {getValue()}
-      </span>
-    </span>
     </Tooltip>
   )
 }

diff --git a/src/components/concepts/Locales.jsx b/src/components/concepts/Locales.jsx
@@ -15,6 +15,7 @@ import { groupBy, forEach, has, compact, without, keys, orderBy, map } from 'lod
 import { toFullAPIURL, copyURL } from '../../common/utils';
 import TagCountLabel from '../common/TagCountLabel';
 import { OperationsContext } from '../app/LayoutContext';
+import ExternalIdLabel from '../common/ExternalIdLabel';
 
 const borderColor = 'rgba(0, 0, 0, 0.12)'
 
@@ -78,7 +79,7 @@ const LocaleItem = ({ locale, url }) => {
       >
         <ListItemText
           primary={<LocalePrimary locale={locale} />}
-          secondary={externalID}
+          secondary={externalID ? <ExternalIdLabel value={externalID} style={{marginTop: '4px'}} iconStyle={{marginTop: '2px'}} /> : undefined}
           sx={{
             margin: '2px 0',
             '.MuiListItemText-primary': {