diff --git a/plugin.json b/plugin.json index f9dd3f91..399bf0fa 100644 --- a/plugin.json +++ b/plugin.json @@ -5,7 +5,7 @@ "homepage_url": "https://github.com/mattermost/mattermost-plugin-demo", "support_url": "https://github.com/mattermost/mattermost-plugin-demo/issues", "icon_path": "assets/icon.svg", - "version": "0.10.3", + "version": "0.11.1", "min_server_version": "7.9.0", "server": { "executables": { diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 7c22b61c..2f1e363e 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -14,7 +14,10 @@ "submenu.menu": "Submenu Example", "submenu.second": "Second Item", "submenu.third": "Third Item", + "tooltip.description": "This is a sample description. Visit {link} for more details.", "tooltip.message": "This is a custom tooltip from the Demo Plugin", + "tooltip.sharedVia": "Shared via {link}", + "tooltip.title": "Demo Link Preview", "useractions.action": "Action", "useractions.demo": "Demo Plugin: " } diff --git a/webapp/i18n/es.json b/webapp/i18n/es.json index 13dae662..5b21785c 100644 --- a/webapp/i18n/es.json +++ b/webapp/i18n/es.json @@ -8,7 +8,10 @@ "sidebar.demo": "Complemento de Demostración:", "sidebar.disabled": "Discapacitado", "sidebar.enabled": "Habilitado", + "tooltip.description": "Esta es una descripción de ejemplo. Visite {link} para más detalles.", "tooltip.message": "Esta es una información sobre herramientas personalizada del complemento de demostración", + "tooltip.sharedVia": "Compartido a través de {link}", + "tooltip.title": "Vista previa del enlace de demostración", "useractions.action": "Acción", "useractions.demo": "Complemento de Demostración: ", "submenu.menu": "Ejemplo de submenú", diff --git a/webapp/src/components/link_tooltip/link_tooltip.jsx b/webapp/src/components/link_tooltip/link_tooltip.jsx index 8c64c958..d0bf48f9 100644 --- a/webapp/src/components/link_tooltip/link_tooltip.jsx +++ b/webapp/src/components/link_tooltip/link_tooltip.jsx @@ -9,30 +9,89 @@ export default class LinkTooltip extends React.PureComponent { } render() { - if (!this.props.href.includes('www.test.com')) { + let hostname; + try { + hostname = new URL(this.props.href).hostname.toLowerCase(); + } catch { + return null; + } + + if (hostname !== 'example.com' && !hostname.endsWith('.example.com')) { return null; } const style = getStyle(this.props.theme); return ( -
- - +
+
+ + +
+
+ + + + +

+ + {'example.com'} + + ), + }} + /> +

+ +

+ + {'the original page'} + + ), + }} + /> +

+
); } } const getStyle = (theme) => ({ - configuration: { + container: { borderRadius: '4px', boxShadow: 'rgba(61, 60, 64, 0.1) 0px 17px 50px 0px, rgba(61, 60, 64, 0.1) 0px 12px 15px 0px', fontSize: '14px', @@ -42,6 +101,30 @@ const getStyle = (theme) => ({ color: theme.centerChannelColor, backgroundColor: theme.centerChannelBg, }, + header: { + marginBottom: '8px', + }, + body: { + paddingLeft: '4px', + }, + titleLink: { + display: 'block', + fontWeight: '600', + fontSize: '14px', + textDecoration: 'none', + color: theme.centerChannelColor, + }, + sharedVia: { + fontSize: '12px', + marginTop: '4px', + color: hexToRGB(theme.centerChannelColor, '0.64'), + }, + description: { + fontSize: '12px', + marginTop: '8px', + lineHeight: '1.25', + color: theme.centerChannelColor, + }, }); const iconStyles = {