diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
index 62a6b68ba7..35a5b4ec9d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
@@ -29,7 +29,7 @@
matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.emailEnabled}"
routerLink="/settings/outgoing-mail">
- widgets.configured-features.email-feature
+ {{ featuresInfo?.emailEnabled ? 'check' : 'close' }}{{ 'widgets.configured-features.email-feature' | translate}}
@@ -38,7 +38,7 @@
matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.smsEnabled}"
routerLink="/settings/notifications">
- widgets.configured-features.sms-feature
+ {{ featuresInfo?.smsEnabled ? 'check' : 'close' }}{{ 'widgets.configured-features.sms-feature' | translate}}
@@ -47,7 +47,7 @@
matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.notificationEnabled}"
routerLink="/settings/notifications">
- widgets.configured-features.slack-feature
+ {{ featuresInfo?.notificationEnabled ? 'check' : 'close' }}{{ 'widgets.configured-features.slack-feature' | translate}}
@@ -56,7 +56,7 @@
matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.oauthEnabled}"
routerLink="/security-settings/oauth2">
- widgets.configured-features.oauth2-feature
+ {{ featuresInfo?.oauthEnabled ? 'check' : 'close' }}{{ 'widgets.configured-features.oauth2-feature' | translate}}
@@ -65,7 +65,7 @@
matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.twoFaEnabled}"
routerLink="/security-settings/2fa">
- widgets.configured-features.2fa-feature
+ {{ featuresInfo?.twoFaEnabled ? 'check' : 'close' }}{{ 'widgets.configured-features.2fa-feature' | translate}}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.scss
index 1844f0f0c0..485cc2a4b6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.scss
@@ -13,6 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+@import "../../../../../../../scss/constants";
+
:host {
.tb-card-content {
width: 100%;
@@ -27,7 +30,7 @@
line-height: 20px;
letter-spacing: 0.25px;
color: rgba(0, 0, 0, 0.54);
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-size: 12px;
line-height: 16px;
}
@@ -51,7 +54,7 @@
}
.tb-feature-button {
- height: 48.5px;
+ height: 50px;
display: flex;
overflow: hidden;
flex-direction: column;
@@ -61,8 +64,8 @@
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
border-radius: 10px;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
- height: 21.5px;
+ @media #{$mat-md-lg} {
+ height: 22px;
padding: 0 8px;
}
&:hover {
@@ -77,12 +80,11 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-size: 11px;
line-height: 16px;
}
- &:before {
- content: "close";
+ .tb-feature-status {
display: inline-block;
font-family: 'Material Icons Round';
font-size: 20px;
@@ -92,27 +94,24 @@
position: relative;
background: #F4F4F4;
border-radius: 4px;
- width: 20px;
- height: 20px;
+ width: 24px;
+ height: 24px;
padding: 2px;
margin-right: 8px;
vertical-align: middle;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-size: 14px;
line-height: 14px;
- width: 14px;
- height: 14px;
+ width: 18px;
+ height: 18px;
margin-right: 4px;
}
}
}
&.configured {
- .tb-feature-text {
- &:before {
- content: "check";
- color: #198038;
- background: #F3F6FA;
- }
+ .tb-feature-status {
+ color: #198038;
+ background: #F3F6FA;
}
}
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts
index 9f07d3d59b..6814ca3731 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts
@@ -25,6 +25,7 @@ import { Authority } from '@shared/models/authority.enum';
import { of, Subscription } from 'rxjs';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { TranslateService } from '@ngx-translate/core';
+import { MediaBreakpoints } from '@shared/models/constants';
@Component({
selector: 'tb-configured-features',
@@ -35,7 +36,7 @@ export class ConfiguredFeaturesComponent extends PageComponent implements OnInit
authUser = getCurrentAuthUser(this.store);
featuresInfo: FeaturesInfo;
- rowHeight = '48.5px';
+ rowHeight = '50px';
gutterSize = '12px';
private observeBreakpointSubscription: Subscription;
@@ -49,17 +50,17 @@ export class ConfiguredFeaturesComponent extends PageComponent implements OnInit
}
ngOnInit() {
- const isMdLg = this.breakpointObserver.isMatched('screen and (min-width: 960px) and (max-width: 1819px)');
- this.rowHeight = isMdLg ? '21.5px' : '48.5px';
+ const isMdLg = this.breakpointObserver.isMatched(MediaBreakpoints['md-lg']);
+ this.rowHeight = isMdLg ? '22px' : '50px';
this.gutterSize = isMdLg ? '8px' : '12px';
this.observeBreakpointSubscription = this.breakpointObserver
- .observe('screen and (min-width: 960px) and (max-width: 1819px)')
+ .observe(MediaBreakpoints['md-lg'])
.subscribe((state: BreakpointState) => {
if (state.matches) {
- this.rowHeight = '21.5px';
+ this.rowHeight = '22px';
this.gutterSize = '8px';
} else {
- this.rowHeight = '48.5px';
+ this.rowHeight = '50px';
this.gutterSize = '12px';
}
this.cd.markForCheck();
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.scss
index e155ea4f7c..ddc5a40eec 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.scss
@@ -13,6 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+@import "../../../../../../../scss/constants";
+
:host {
.tb-card-content {
width: 100%;
@@ -35,7 +38,7 @@
color: rgba(0, 0, 0, 0.54);
position: relative;
border-bottom: none;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-size: 12px;
line-height: 16px;
}
@@ -85,7 +88,7 @@
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
border-radius: 10px;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
height: 18px;
padding: 0 8px;
}
@@ -103,7 +106,7 @@
background: #F3F6FA;
border-radius: 6px;
margin-right: 8px;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
display: none;
}
}
@@ -116,7 +119,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-size: 11px;
line-height: 16px;
}
@@ -135,7 +138,7 @@
padding: 8px;
border: 2px dashed rgba(0, 0, 0, 0.08);
border-radius: 10px;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
height: 18px;
padding: 0 8px;
.tb-add-icon {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts
index 2eed04224f..1c7c5885b5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts
@@ -128,11 +128,11 @@ export class DocLinksWidgetComponent extends PageComponent implements OnInit, On
ngOnInit() {
this.settings = this.ctx.settings;
this.columns = this.settings.columns || 3;
- const isMdLg = this.breakpointObserver.isMatched('screen and (min-width: 960px) and (max-width: 1819px)');
+ const isMdLg = this.breakpointObserver.isMatched(MediaBreakpoints['md-lg']);
this.rowHeight = isMdLg ? '18px' : '55px';
this.gutterSize = isMdLg ? '8px' : '12px';
this.observeBreakpointSubscription = this.breakpointObserver
- .observe('screen and (min-width: 960px) and (max-width: 1819px)')
+ .observe(MediaBreakpoints['md-lg'])
.subscribe((state: BreakpointState) => {
if (state.matches) {
this.rowHeight = '18px';
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss
index 234a8facca..193fb5e793 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss
@@ -13,6 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+@import "../../../../../../../scss/constants";
+
:host {
display: flex;
flex-direction: column;
@@ -25,7 +28,7 @@
letter-spacing: 0.1px;
color: rgba(0, 0, 0, 0.76);
padding-bottom: 24px;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-weight: 500;
font-size: 14px;
line-height: 20px;
@@ -89,7 +92,7 @@
color: rgba(0, 0, 0, 0.54);
}
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
.tb-get-started .mat-step-label {
font-size: 12px;
line-height: 16px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss
index 2116676fe7..31e49f2351 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss
@@ -13,6 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+@import "../../../../../../../scss/constants";
+
:host {
.tb-card-content {
width: 100%;
@@ -25,7 +28,7 @@
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
margin-bottom: 4px;
}
}
@@ -37,14 +40,14 @@
line-height: 20px;
letter-spacing: 0.25px;
color: rgba(0, 0, 0, 0.54);
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-size: 12px;
line-height: 16px;
}
}
.tb-contact-us {
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
height: 24px;
font-size: 12px;
}
@@ -58,7 +61,7 @@
display: flex;
flex-direction: column;
justify-content: space-evenly;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
padding: 4px;
}
&.up-to-date {
@@ -71,7 +74,7 @@
.tb-version-info-container+.tb-version-info-container {
margin-top: 12px;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
margin-top: 4px;
}
}
@@ -84,7 +87,7 @@
color: rgba(0, 0, 0, 0.76);
position: relative;
border-bottom: none;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-size: 11px;
line-height: 16px;
}
@@ -114,14 +117,14 @@
line-height: 24px;
letter-spacing: 0.15px;
color: rgba(0, 0, 0, 0.87);
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-size: 12px;
line-height: 14px;
}
}
.tb-upgrade {
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
height: 24px;
font-size: 12px;
padding: 0;
@@ -131,7 +134,7 @@
.check-icon {
color: #198038;
font-weight: 600;
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-size: 20px;
}
}
@@ -142,7 +145,7 @@
line-height: 20px;
letter-spacing: 0.2px;
color: rgba(0, 0, 0, 0.76);
- @media screen and (min-width: 960px) and (max-width: 1819px) {
+ @media #{$mat-md-lg} {
font-size: 11px;
line-height: 16px;
}
diff --git a/ui-ngx/src/app/shared/models/constants.ts b/ui-ngx/src/app/shared/models/constants.ts
index a93df2e3fd..74eefbcd14 100644
--- a/ui-ngx/src/app/shared/models/constants.ts
+++ b/ui-ngx/src/app/shared/models/constants.ts
@@ -67,7 +67,8 @@ export const MediaBreakpoints = {
'gt-sm': 'screen and (min-width: 960px)',
'gt-md': 'screen and (min-width: 1280px)',
'gt-lg': 'screen and (min-width: 1920px)',
- 'gt-xl': 'screen and (min-width: 5001px)'
+ 'gt-xl': 'screen and (min-width: 5001px)',
+ 'md-lg': 'screen and (min-width: 960px) and (max-width: 1819px)'
};
export const helpBaseUrl = 'https://thingsboard.io';
diff --git a/ui-ngx/src/scss/constants.scss b/ui-ngx/src/scss/constants.scss
index 8638619a96..f19480ecef 100644
--- a/ui-ngx/src/scss/constants.scss
+++ b/ui-ngx/src/scss/constants.scss
@@ -27,5 +27,6 @@ $mat-gt-sm: "screen and (min-width: 960px)";
$mat-gt-md: "screen and (min-width: 1280px)";
$mat-gt-xmd: "screen and (min-width: 1600px)";
$mat-gt-xl: "screen and (min-width: 1920px)";
+$mat-md-lg: "screen and (min-width: 960px) and (max-width: 1819px)";
$primary-hue-3: rgb(207, 216, 220) !default;