- Add installMethodIcons map covering integrations (existing
assets/integration-icon files), direct-connect transports (new
assets/direct-connect-icon: http/mqtt/coap/lwm2m/snmp), and gateway
connectors (new assets/gateway-connect-icon: mqtt/modbus/opc-ua/
bacnet/ble/can/ftp/ocpp/odbc/request/rest/snmp/socket/xmpp).
Direct/gateway icons are exported from the design via the Figma
REST API. The PE-only illustration is also exported.
- Replace the row of stroked buttons in the device install
connectivity selector with a card grid that mirrors the design
(276x116, 6px radius, primary border on hover/select, mask-image
driven icon rendered in primary, primary-tinted 4% surface,
inner-shadowed 48x48 white icon container, "PE Only" pill).
- Restructure the wizard so that the connection method is the first
wizard step ("Connection method"). Three placeholder steps
(Prerequisites / Configuration / Provisioning) preview the rest of
the flow until a method is picked. On selection, placeholders are
swapped for the real install steps and the stepper auto-advances;
re-clicking the already selected card is a no-op.
- Replace the inline PE-only panel with a dedicated dialog
(TbPeConnectivityMethodPromptComponent) matching the design
(500x364 white card, 140 illustration, 24px title with primary
connector name, "Try Professional Edition" link to
https://thingsboard.io/installations/, Close, top-right X). PE-only
cards open this prompt instead of advancing the wizard.
pull/15615/head
Igor Kulikov
3 months ago
@ -0,0 +1,38 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<div class="tb-pe-connectivity-prompt"> |
|||
<button mat-icon-button class="tb-pe-connectivity-prompt-close" (click)="close()" tabindex="-1"> |
|||
<mat-icon>close</mat-icon> |
|||
</button> |
|||
<img class="tb-pe-connectivity-prompt-illustration" |
|||
src="assets/iot-hub/pe-only-illustration.svg" alt=""> |
|||
<h2 class="tb-pe-connectivity-prompt-title"> |
|||
<span class="tb-pe-connectivity-prompt-connector">{{ data.connectorName }}</span> |
|||
{{ 'iot-hub.pe-connectivity-prompt-title-suffix' | translate }} |
|||
</h2> |
|||
<div class="tb-pe-connectivity-prompt-actions"> |
|||
<a mat-flat-button color="primary" |
|||
href="https://thingsboard.io/installations/" |
|||
target="_blank" rel="noopener"> |
|||
{{ 'iot-hub.pe-connectivity-prompt-try-pe' | translate }} |
|||
</a> |
|||
<button mat-button (click)="close()"> |
|||
{{ 'action.close' | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,65 @@ |
|||
/** |
|||
* 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 "../../../../../scss/constants"; |
|||
|
|||
:host { |
|||
display: block; |
|||
width: 500px; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.tb-pe-connectivity-prompt { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
text-align: center; |
|||
gap: 20px; |
|||
padding: 40px; |
|||
background: white; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
.tb-pe-connectivity-prompt-close { |
|||
position: absolute; |
|||
top: 8px; |
|||
right: 8px; |
|||
} |
|||
|
|||
.tb-pe-connectivity-prompt-illustration { |
|||
width: 140px; |
|||
height: 140px; |
|||
} |
|||
|
|||
.tb-pe-connectivity-prompt-title { |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
letter-spacing: 0.15px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
margin: 0; |
|||
} |
|||
|
|||
.tb-pe-connectivity-prompt-connector { |
|||
color: $tb-primary-color; |
|||
} |
|||
|
|||
.tb-pe-connectivity-prompt-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
///
|
|||
/// 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, Inject } from '@angular/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|||
import { Router } from '@angular/router'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
|
|||
export interface PeConnectivityMethodPromptData { |
|||
connectorName: string; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-pe-connectivity-method-prompt', |
|||
standalone: false, |
|||
templateUrl: './pe-connectivity-method-prompt.component.html', |
|||
styleUrls: ['./pe-connectivity-method-prompt.component.scss'] |
|||
}) |
|||
export class TbPeConnectivityMethodPromptComponent extends DialogComponent<TbPeConnectivityMethodPromptComponent> { |
|||
|
|||
constructor( |
|||
protected store: Store<AppState>, |
|||
protected router: Router, |
|||
protected dialogRef: MatDialogRef<TbPeConnectivityMethodPromptComponent>, |
|||
@Inject(MAT_DIALOG_DATA) public data: PeConnectivityMethodPromptData |
|||
) { |
|||
super(store, router, dialogRef); |
|||
} |
|||
|
|||
close(): void { |
|||
this.dialogRef.close(); |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 684 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 991 B |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 955 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 853 B |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 313 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 398 B |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 980 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 351 B |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 8.0 KiB |