Browse Source

feat(iot-hub): add note/warn/error callout boxes for markdown instructions

Template syntax:
  ${note(This is an informational note.)}
  ${warn(All code examples require ThingsBoard Library version **0.10.2**.)}
  ${error(This device is not compatible with ThingsBoard CE.)}

Renders as styled callout boxes with Material Icons:
- note: blue background, info icon
- warn: amber background, warning icon
- error: red/pink background, error icon
pull/15508/head
Andrii Shvaika 6 months ago
parent
commit
dd81e7c0a3
  1. 35
      ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
  2. 8
      ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts

35
ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss

@ -154,6 +154,41 @@
}
}
.tb-callout {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-radius: 4px;
border: 1px solid;
margin: 12px 0;
font-size: 14px;
line-height: 20px;
.tb-callout-icon {
font-size: 20px;
flex-shrink: 0;
}
&.tb-callout-note {
background: #e3f2fd;
border-color: #90caf9;
color: #1565c0;
}
&.tb-callout-warn {
background: #fff8e1;
border-color: #ffe082;
color: #f57f17;
}
&.tb-callout-error {
background: #fce4ec;
border-color: #ef9a9a;
color: #c62828;
}
}
.tb-gallery {
display: flex;
flex-wrap: wrap;

8
ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts

@ -394,6 +394,14 @@ export class TbDeviceInstallDialogComponent extends DialogComponent<TbDeviceInst
if (key === 'gateway.downloadButton') {
return '<a href="#" data-action="download-gateway-docker-compose" class="tb-download-btn">⬇ Download docker-compose.yml</a>';
}
// Callout boxes: ${note(...)}, ${warn(...)}, ${error(...)}
const calloutMatch = key.match(/^(note|warn|error)\((.+)\)$/s);
if (calloutMatch) {
const type = calloutMatch[1];
const text = calloutMatch[2];
const icons: Record<string, string> = { note: 'info_outline', warn: 'warning_amber', error: 'error_outline' };
return `<div class="tb-callout tb-callout-${type}"><i class="material-icons tb-callout-icon">${icons[type]}</i><span class="tb-callout-text">${text}</span></div>`;
}
// Image gallery: ${images.gallery(path1,path2,path3)}
const galleryMatch = key.match(/^images\.gallery\((.+)\)$/);
if (galleryMatch) {

Loading…
Cancel
Save