Browse Source
- Add TbIotHubMarkdownComponent (home/components/iot-hub) wrapping tb-markdown with applyDefaultMarkdownStyle=false, the IoT Hub item link compile module, and forwarded lineNumbers / fallbackToPlainMarkdown coerced-boolean inputs. - Carry the readme/description typography (h1..h6, p, ul/ol, li, a, img, code, code-wrapper / clipboard-btn, pre[language] with Prism tokens and line-numbers, tables) so callers don't have to override the default markdown styles. Tunes ported from the design: list margins, 6px heading bottom padding, table widths and padding, clipboard offsets, etc. - Replace tb-markdown with tb-iot-hub-markdown in the item detail dialog (description + readme + changelog), the install / update dialog error blocks, and the solution install dialog. Drop the inline .dlg-readme markdown overrides and the .dlg-description ::ng-deep block, leaving only the dlg-readme layout tweak and a padding:0 reset for .dlg-description. - Solution install dialog drops the now-redundant itemLinkCompileModules field + IotHubItemLinkModule import and the .table-wrapper ::ng-deep override; the iot-hub-markdown component carries those styles itself.pull/15615/head
Igor Kulikov
5 months ago
12 changed files with 512 additions and 195 deletions
@ -0,0 +1,23 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2026 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<tb-markdown [data]="data" |
|||
[applyDefaultMarkdownStyle]="false" |
|||
[additionalCompileModules]="itemLinkCompileModules" |
|||
[lineNumbers]="lineNumbers" |
|||
[fallbackToPlainMarkdown]="fallbackToPlainMarkdown"> |
|||
</tb-markdown> |
|||
@ -0,0 +1,378 @@ |
|||
/** |
|||
* Copyright © 2016-2026 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
// Shared markdown styles for IoT Hub readme/description content. |
|||
// Originally in iot-hub-item-detail-dialog.component.scss (.dlg-readme). |
|||
:host { |
|||
display: block; |
|||
font-size: 14px; |
|||
line-height: 24px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.76); |
|||
|
|||
::ng-deep tb-markdown .tb-markdown-view { |
|||
padding: 16px 24px 24px; |
|||
&.table-wrapper { |
|||
padding: 0; |
|||
} |
|||
&:not(.table-wrapper) { |
|||
> :first-child { |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
|
|||
// Headings: design 20px SemiBold, line-height 24, tracking 0.1. |
|||
h1, h2, h3, h4, h5, h6 { |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
line-height: 24px; |
|||
letter-spacing: 0.1px; |
|||
color: rgba(0, 0, 0, 0.76); |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
> h1, > h2, > h3, > h4, > h5, > h6 { |
|||
padding: 0 0 6px; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 24px; |
|||
line-height: 32px; |
|||
padding-right: 0; |
|||
} |
|||
|
|||
// Paragraphs: design 14px Regular, tracking 0.2, line-height 24. |
|||
p { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
line-height: 24px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.76); |
|||
margin: 0; |
|||
} |
|||
|
|||
> p, > div { |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
|
|||
p + p { |
|||
margin-top: 8px; |
|||
} |
|||
|
|||
h1 + p, h2 + p, h3 + p, |
|||
h1 + ul, h2 + ul, h3 + ul, |
|||
h1 + ol, h2 + ol, h3 + ol { |
|||
margin-top: 8px; |
|||
} |
|||
|
|||
// Lists: design ms-21 per li, 14px, line-height 24. |
|||
ul, ol { |
|||
padding-left: 21px; |
|||
padding-right: 0; |
|||
margin: 0; |
|||
font-size: 14px; |
|||
line-height: 24px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.76); |
|||
|
|||
+ h1, + h2, + h3, + h4, + h5, + h6 { |
|||
padding-top: 0; |
|||
margin-top: 20px; |
|||
} |
|||
} |
|||
|
|||
ul { |
|||
margin-top: 8px; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
li { |
|||
padding-bottom: 4px; |
|||
margin-bottom: 0; |
|||
line-height: 24px; |
|||
} |
|||
|
|||
// Images — ported from markdown.component.scss. |
|||
img { |
|||
max-width: 100%; |
|||
} |
|||
|
|||
// Links — ported from markdown.component.scss. |
|||
a { |
|||
font-weight: 500; |
|||
color: #2a7dec; |
|||
text-decoration: none; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
color: #2a7dec; |
|||
text-decoration: underline; |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
// Inline code — ported from markdown.component.scss. |
|||
code:not([class*=language-]) { |
|||
color: #eb5757; |
|||
font-family: monospace; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
// Code-wrapper + clipboard button — ported from markdown.component.scss |
|||
// so the inline copy affordance and hover state work without |
|||
// depending on the default markdown styles. |
|||
div.code-wrapper { |
|||
position: relative; |
|||
|
|||
button.clipboard-btn { |
|||
pointer-events: none; |
|||
outline: none; |
|||
position: absolute; |
|||
width: 206px; |
|||
height: 32px; |
|||
top: 0; |
|||
right: 0; |
|||
background: 0 0; |
|||
border: none; |
|||
user-select: none; |
|||
|
|||
&.multiline { |
|||
right: 6px; |
|||
} |
|||
|
|||
p { |
|||
padding: 6px 8px 0; |
|||
top: 1px; |
|||
transition: .2s; |
|||
color: #2a7dec; |
|||
background: rgba(255, 255, 255, .85); |
|||
backdrop-filter: blur(4px); |
|||
opacity: 0; |
|||
font-weight: 500; |
|||
right: 32px; |
|||
position: absolute; |
|||
} |
|||
|
|||
div { |
|||
background-color: #fff; |
|||
position: absolute; |
|||
width: 38px; |
|||
height: 28px; |
|||
top: 3px; |
|||
right: 3px; |
|||
padding: 8px 10px 0; |
|||
|
|||
img { |
|||
position: initial; |
|||
width: 18px; |
|||
height: 18px; |
|||
filter: invert(51%) sepia(6%) saturate(172%) hue-rotate(177deg) brightness(94%) contrast(92%); |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
cursor: pointer; |
|||
|
|||
pre[class*="language-"] { |
|||
border: solid 1px #2a7dec; |
|||
} |
|||
|
|||
button.clipboard-btn { |
|||
p { |
|||
opacity: 1; |
|||
} |
|||
|
|||
div img { |
|||
filter: invert(49%) sepia(97%) saturate(3730%) hue-rotate(200deg) brightness(95%) contrast(95%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
th, td { |
|||
div.code-wrapper { |
|||
display: inline-block; |
|||
width: 100%; |
|||
|
|||
button.clipboard-btn { |
|||
top: -6px; |
|||
padding: 0 3px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Code blocks (Prism) — ported from markdown.component.scss. |
|||
pre[class*="language-"] { |
|||
font-size: 14px; |
|||
border: 1px solid rgba(42, 125, 236, .2); |
|||
border-radius: 4px; |
|||
background: 0 0; |
|||
padding: 8px 16px; |
|||
color: #212529; |
|||
|
|||
.token.atrule, .token.attr-value, .token.keyword { |
|||
color: #2a7dec; |
|||
} |
|||
|
|||
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { |
|||
color: #eb5757; |
|||
} |
|||
|
|||
.token.punctuation { |
|||
color: #212529; |
|||
} |
|||
|
|||
&.line-numbers { |
|||
padding-left: 66px; |
|||
|
|||
> code span.line-numbers-rows { |
|||
top: -11px; |
|||
bottom: -11px; |
|||
left: -66px; |
|||
width: 50px; |
|||
border: none; |
|||
padding: 8px 12px 8px 18px; |
|||
text-align: right; |
|||
background: #f9fbff; |
|||
|
|||
> span:before { |
|||
color: rgba(33, 37, 41, .6); |
|||
padding-right: 0; |
|||
} |
|||
} |
|||
|
|||
&.no-line-numbers { |
|||
padding-left: 16px; |
|||
|
|||
> code span.line-numbers-rows { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Tables — ported from markdown.component.scss since |
|||
// applyDefaultMarkdownStyle is false on tb-markdown. |
|||
> table { |
|||
width: 100%; |
|||
border: 1px solid rgba(42, 125, 236, .2); |
|||
border-radius: 4px; |
|||
border-collapse: unset; |
|||
border-spacing: 0; |
|||
margin-top: 20px; |
|||
margin-bottom: 20px; |
|||
overflow: hidden; |
|||
table-layout: fixed; |
|||
|
|||
&.auto { |
|||
table-layout: auto; |
|||
} |
|||
|
|||
> thead { |
|||
background-color: #f9fbff; |
|||
color: rgba(33, 37, 41, .6); |
|||
|
|||
> tr > th { |
|||
border-bottom: 1px solid rgba(42, 125, 236, .2); |
|||
font-size: 14px; |
|||
padding: 8px 12px; |
|||
text-align: left; |
|||
margin: 0; |
|||
@media screen and (max-width: 400px) { |
|||
font-size: 12px; |
|||
padding: 8px 4px; |
|||
code:not([class*=language-]) { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
> tbody { |
|||
> tr:not(:last-child) > td { |
|||
border-bottom: 1px solid rgba(42, 125, 236, .2); |
|||
} |
|||
|
|||
> tr > td { |
|||
font-size: 14px; |
|||
padding: 8px 12px; |
|||
text-align: left; |
|||
margin: 0; |
|||
color: rgba(15, 22, 29, 0.8); |
|||
@media screen and (max-width: 400px) { |
|||
font-size: 12px; |
|||
padding: 8px 4px; |
|||
code:not([class*=language-]) { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
th, td { |
|||
font-size: 14px; |
|||
padding: 8px; |
|||
margin: 0; |
|||
text-align: left; |
|||
} |
|||
|
|||
td[align=center], th[align=center] { |
|||
text-align: center; |
|||
} |
|||
|
|||
td[align=right], th[align=right] { |
|||
text-align: right; |
|||
} |
|||
|
|||
tr td div { |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
} |
|||
|
|||
.tb-doc-link-btn { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
padding: 8px 16px; |
|||
margin: 4px 8px 4px 0; |
|||
border: 1px solid rgba(0, 0, 0, 0.12); |
|||
border-radius: 6px; |
|||
background: #fff; |
|||
color: rgba(0, 0, 0, 0.76); |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
line-height: 20px; |
|||
text-decoration: none; |
|||
cursor: pointer; |
|||
|
|||
i.material-icons { |
|||
font-size: 18px; |
|||
line-height: 18px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
} |
|||
|
|||
&:hover { |
|||
background: rgba(0, 0, 0, 0.04); |
|||
border-color: rgba(0, 0, 0, 0.24); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,40 @@ |
|||
///
|
|||
/// Copyright © 2016-2026 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, Input, Type } from '@angular/core'; |
|||
import { coerceBoolean } from '@shared/decorators/coercion'; |
|||
import { IotHubItemLinkModule } from './iot-hub-item-link-card/iot-hub-item-link.module'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-iot-hub-markdown', |
|||
standalone: false, |
|||
templateUrl: './iot-hub-markdown.component.html', |
|||
styleUrls: ['./iot-hub-markdown.component.scss'] |
|||
}) |
|||
export class TbIotHubMarkdownComponent { |
|||
|
|||
@Input() data: string | undefined; |
|||
|
|||
@Input() |
|||
@coerceBoolean() |
|||
lineNumbers = false; |
|||
|
|||
@Input() |
|||
@coerceBoolean() |
|||
fallbackToPlainMarkdown = false; |
|||
|
|||
readonly itemLinkCompileModules: Type<any>[] = [IotHubItemLinkModule]; |
|||
} |
|||
Loading…
Reference in new issue