Browse Source
- Custom paginator: page number buttons (40px, rounded-4, primary active), centered pages, items-per-page outlined dropdown (77x40) - Update dialog: extract to separate HTML/SCSS, match install dialog style - Home component: add updateItem method and bind (updateClick) on cards - Browse: reload installed items on 'updated' result from detail dialog - Items page: add "Become a Creator" footer with divider, update paddings - Export hero images: dashboards, solution templates (PNG), devices, widgets - Update device library description from designpull/15508/head
Igor Kulikov
6 months ago
16 changed files with 794 additions and 194 deletions
@ -0,0 +1,64 @@ |
|||
<!-- |
|||
|
|||
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-iot-hub-install-content"> |
|||
@switch (state) { |
|||
@case ('confirm') { |
|||
<h2 class="tb-iot-hub-install-title">{{ 'iot-hub.update-confirm-title' | translate:{ name: data.itemName } }}</h2> |
|||
<p class="tb-iot-hub-install-desc">{{ 'iot-hub.update-desc' | translate }}</p> |
|||
} |
|||
@case ('updating') { |
|||
<h2 class="tb-iot-hub-install-title">{{ 'iot-hub.update-confirm-title' | translate:{ name: data.itemName } }}</h2> |
|||
<p class="tb-iot-hub-install-desc">{{ 'iot-hub.update-desc' | translate }}</p> |
|||
} |
|||
@case ('success') { |
|||
<h2 class="tb-iot-hub-install-title">{{ 'iot-hub.update-success-title' | translate }}</h2> |
|||
<p class="tb-iot-hub-install-desc">{{ 'iot-hub.update-success-desc' | translate:{ name: data.itemName } }}</p> |
|||
} |
|||
@case ('error') { |
|||
<h2 class="tb-iot-hub-install-title">{{ 'iot-hub.update-error-title' | translate }}</h2> |
|||
<p class="tb-iot-hub-install-desc">{{ 'iot-hub.update-error-message' | translate:{ name: data.itemName } }}</p> |
|||
<div class="tb-iot-hub-error-details">{{ errorMessage }}</div> |
|||
} |
|||
} |
|||
</div> |
|||
<mat-dialog-actions align="end"> |
|||
@switch (state) { |
|||
@case ('confirm') { |
|||
<button mat-button (click)="cancel()">{{ 'action.cancel' | translate }}</button> |
|||
<button mat-flat-button color="primary" (click)="update()">{{ 'iot-hub.update' | translate }}</button> |
|||
} |
|||
@case ('updating') { |
|||
<button mat-button disabled>{{ 'action.cancel' | translate }}</button> |
|||
<button mat-flat-button color="primary" disabled> |
|||
<mat-spinner diameter="18" class="tb-iot-hub-inline-spinner"></mat-spinner> |
|||
{{ 'iot-hub.updating' | translate }} |
|||
</button> |
|||
} |
|||
@case ('success') { |
|||
<button mat-button (click)="close()">{{ (entityDetailsUrl ? 'action.cancel' : 'action.close') | translate }}</button> |
|||
@if (entityDetailsUrl) { |
|||
<button mat-flat-button color="primary" (click)="openEntityDetails()"> |
|||
{{ 'iot-hub.open-details' | translate }} |
|||
</button> |
|||
} |
|||
} |
|||
@case ('error') { |
|||
<button mat-button (click)="close()">{{ 'action.close' | translate }}</button> |
|||
} |
|||
} |
|||
</mat-dialog-actions> |
|||
@ -0,0 +1,57 @@ |
|||
/** |
|||
* 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-iot-hub-install-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20px; |
|||
padding: 24px; |
|||
} |
|||
|
|||
.tb-iot-hub-install-title { |
|||
font-size: 20px; |
|||
font-weight: 600; |
|||
line-height: 24px; |
|||
letter-spacing: 0.1px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
margin: 0; |
|||
} |
|||
|
|||
.tb-iot-hub-install-desc { |
|||
color: rgba(0, 0, 0, 0.54); |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.2px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.tb-iot-hub-inline-spinner { |
|||
display: inline-block; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.tb-iot-hub-error-details { |
|||
max-height: 200px; |
|||
overflow-y: auto; |
|||
padding: 12px; |
|||
background: #f5f5f5; |
|||
border-radius: 4px; |
|||
font-family: monospace; |
|||
font-size: 12px; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
white-space: pre-wrap; |
|||
word-break: break-word; |
|||
} |
|||
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 309 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 74 KiB |
Loading…
Reference in new issue