ux(datasheet): soften the purchase link — "Buy" becomes a localized "Product page"
The word "Buy" on a solid button read as an ad inside a work dialog. The link is really a pointer to the part's product page, so it now says that — localized in all nine languages — with an external-link icon instead of a shopping cart. Same URL, same placement, in both the part inspector and the picker hover card.
This commit is contained in:
parent
16c3089c5f
commit
b1c9c41849
|
|
@ -20,6 +20,7 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import ReactMarkdown from 'react-markdown';
|
import ReactMarkdown from 'react-markdown';
|
||||||
import remarkGfm from 'remark-gfm';
|
import remarkGfm from 'remark-gfm';
|
||||||
import type { PropertyDescriptor } from '../types/component-metadata';
|
import type { PropertyDescriptor } from '../types/component-metadata';
|
||||||
|
|
@ -114,6 +115,7 @@ export const ComponentInfoBody: React.FC<{
|
||||||
/** false = doc/description + tags + Buy only (the dialog has its own props UI). */
|
/** false = doc/description + tags + Buy only (the dialog has its own props UI). */
|
||||||
showProps?: boolean;
|
showProps?: boolean;
|
||||||
}> = ({ data, showProps = true }) => {
|
}> = ({ data, showProps = true }) => {
|
||||||
|
const { t: translate } = useTranslation();
|
||||||
const doc = useComponentDoc(data.id);
|
const doc = useComponentDoc(data.id);
|
||||||
|
|
||||||
const visibleProps = data.properties.filter((p) => !HIDDEN_PROPS.has(p.name));
|
const visibleProps = data.properties.filter((p) => !HIDDEN_PROPS.has(p.name));
|
||||||
|
|
@ -178,11 +180,11 @@ export const ComponentInfoBody: React.FC<{
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<circle cx="9" cy="21" r="1" />
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||||
<circle cx="20" cy="21" r="1" />
|
<polyline points="15 3 21 3 21 9" />
|
||||||
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
|
<line x1="10" y1="14" x2="21" y2="3" />
|
||||||
</svg>
|
</svg>
|
||||||
Buy
|
{translate('editor.inspector.productPage')}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -788,11 +788,11 @@ export const PartInspectorDialog: React.FC<PartInspectorDialogProps> = ({
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<circle cx="9" cy="21" r="1" />
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||||
<circle cx="20" cy="21" r="1" />
|
<polyline points="15 3 21 3 21 9" />
|
||||||
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
|
<line x1="10" y1="14" x2="21" y2="3" />
|
||||||
</svg>
|
</svg>
|
||||||
Buy
|
{t('editor.inspector.productPage')}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -392,7 +392,8 @@
|
||||||
"inspector": {
|
"inspector": {
|
||||||
"propertiesTab": "Eigenschaften",
|
"propertiesTab": "Eigenschaften",
|
||||||
"datasheetTab": "Datenblatt",
|
"datasheetTab": "Datenblatt",
|
||||||
"examplesTitle": "Beispielprojekte"
|
"examplesTitle": "Beispielprojekte",
|
||||||
|
"productPage": "Produktseite"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"about": {
|
"about": {
|
||||||
|
|
|
||||||
|
|
@ -394,7 +394,8 @@
|
||||||
"inspector": {
|
"inspector": {
|
||||||
"propertiesTab": "Properties",
|
"propertiesTab": "Properties",
|
||||||
"datasheetTab": "Datasheet",
|
"datasheetTab": "Datasheet",
|
||||||
"examplesTitle": "Example projects"
|
"examplesTitle": "Example projects",
|
||||||
|
"productPage": "Product page"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"about": {
|
"about": {
|
||||||
|
|
|
||||||
|
|
@ -394,7 +394,8 @@
|
||||||
"inspector": {
|
"inspector": {
|
||||||
"propertiesTab": "Propiedades",
|
"propertiesTab": "Propiedades",
|
||||||
"datasheetTab": "Ficha técnica",
|
"datasheetTab": "Ficha técnica",
|
||||||
"examplesTitle": "Proyectos de ejemplo"
|
"examplesTitle": "Proyectos de ejemplo",
|
||||||
|
"productPage": "Ver producto"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"about": {
|
"about": {
|
||||||
|
|
|
||||||
|
|
@ -392,7 +392,8 @@
|
||||||
"inspector": {
|
"inspector": {
|
||||||
"propertiesTab": "Propriétés",
|
"propertiesTab": "Propriétés",
|
||||||
"datasheetTab": "Fiche technique",
|
"datasheetTab": "Fiche technique",
|
||||||
"examplesTitle": "Projets d’exemple"
|
"examplesTitle": "Projets d’exemple",
|
||||||
|
"productPage": "Page produit"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"about": {
|
"about": {
|
||||||
|
|
|
||||||
|
|
@ -392,7 +392,8 @@
|
||||||
"inspector": {
|
"inspector": {
|
||||||
"propertiesTab": "Proprietà",
|
"propertiesTab": "Proprietà",
|
||||||
"datasheetTab": "Scheda tecnica",
|
"datasheetTab": "Scheda tecnica",
|
||||||
"examplesTitle": "Progetti di esempio"
|
"examplesTitle": "Progetti di esempio",
|
||||||
|
"productPage": "Pagina prodotto"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"about": {
|
"about": {
|
||||||
|
|
|
||||||
|
|
@ -392,7 +392,8 @@
|
||||||
"inspector": {
|
"inspector": {
|
||||||
"propertiesTab": "プロパティ",
|
"propertiesTab": "プロパティ",
|
||||||
"datasheetTab": "データシート",
|
"datasheetTab": "データシート",
|
||||||
"examplesTitle": "サンプルプロジェクト"
|
"examplesTitle": "サンプルプロジェクト",
|
||||||
|
"productPage": "製品ページ"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"about": {
|
"about": {
|
||||||
|
|
|
||||||
|
|
@ -392,7 +392,8 @@
|
||||||
"inspector": {
|
"inspector": {
|
||||||
"propertiesTab": "Propriedades",
|
"propertiesTab": "Propriedades",
|
||||||
"datasheetTab": "Ficha técnica",
|
"datasheetTab": "Ficha técnica",
|
||||||
"examplesTitle": "Projetos de exemplo"
|
"examplesTitle": "Projetos de exemplo",
|
||||||
|
"productPage": "Página do produto"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"about": {
|
"about": {
|
||||||
|
|
|
||||||
|
|
@ -392,7 +392,8 @@
|
||||||
"inspector": {
|
"inspector": {
|
||||||
"propertiesTab": "Свойства",
|
"propertiesTab": "Свойства",
|
||||||
"datasheetTab": "Спецификация",
|
"datasheetTab": "Спецификация",
|
||||||
"examplesTitle": "Примеры проектов"
|
"examplesTitle": "Примеры проектов",
|
||||||
|
"productPage": "Страница товара"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"about": {
|
"about": {
|
||||||
|
|
|
||||||
|
|
@ -392,7 +392,8 @@
|
||||||
"inspector": {
|
"inspector": {
|
||||||
"propertiesTab": "属性",
|
"propertiesTab": "属性",
|
||||||
"datasheetTab": "数据手册",
|
"datasheetTab": "数据手册",
|
||||||
"examplesTitle": "示例项目"
|
"examplesTitle": "示例项目",
|
||||||
|
"productPage": "产品页面"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"about": {
|
"about": {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue