dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Style improvements

Browse Source
This commit is contained in:
Igor Kulikov 2023-04-11 09:52:23 +03:00
parent 12e169fae1
commit e109231678
9 changed files with 60 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
View File

@ -29,7 +29,7 @@
matTooltipPosition="above" matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.emailEnabled}" [ngClass]="{'configured': featuresInfo?.emailEnabled}"
routerLink="/settings/outgoing-mail"> routerLink="/settings/outgoing-mail">
<div class="tb-feature-text" translate>widgets.configured-features.email-feature</div> <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.emailEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.email-feature' | translate}}</div>
</a> </a>
</mat-grid-tile> </mat-grid-tile>
<mat-grid-tile class="tb-feature-tile" colspan="3"> <mat-grid-tile class="tb-feature-tile" colspan="3">
@ -38,7 +38,7 @@
matTooltipPosition="above" matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.smsEnabled}" [ngClass]="{'configured': featuresInfo?.smsEnabled}"
routerLink="/settings/notifications"> routerLink="/settings/notifications">
<div class="tb-feature-text" translate>widgets.configured-features.sms-feature</div> <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.smsEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.sms-feature' | translate}}</div>
</a> </a>
</mat-grid-tile> </mat-grid-tile>
<mat-grid-tile class="tb-feature-tile" colspan="2"> <mat-grid-tile class="tb-feature-tile" colspan="2">
@ -47,7 +47,7 @@
matTooltipPosition="above" matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.notificationEnabled}" [ngClass]="{'configured': featuresInfo?.notificationEnabled}"
routerLink="/settings/notifications"> routerLink="/settings/notifications">
<div class="tb-feature-text" translate>widgets.configured-features.slack-feature</div> <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.notificationEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.slack-feature' | translate}}</div>
</a> </a>
</mat-grid-tile> </mat-grid-tile>
<mat-grid-tile class="tb-feature-tile" colspan="2"> <mat-grid-tile class="tb-feature-tile" colspan="2">
@ -56,7 +56,7 @@
matTooltipPosition="above" matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.oauthEnabled}" [ngClass]="{'configured': featuresInfo?.oauthEnabled}"
routerLink="/security-settings/oauth2"> routerLink="/security-settings/oauth2">
<div class="tb-feature-text" translate>widgets.configured-features.oauth2-feature</div> <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.oauthEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.oauth2-feature' | translate}}</div>
</a> </a>
</mat-grid-tile> </mat-grid-tile>
<mat-grid-tile class="tb-feature-tile" colspan="2"> <mat-grid-tile class="tb-feature-tile" colspan="2">
@ -65,7 +65,7 @@
matTooltipPosition="above" matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.twoFaEnabled}" [ngClass]="{'configured': featuresInfo?.twoFaEnabled}"
routerLink="/security-settings/2fa"> routerLink="/security-settings/2fa">
<div class="tb-feature-text" translate>widgets.configured-features.2fa-feature</div> <div class="tb-feature-text"><span class="tb-feature-status">{{ featuresInfo?.twoFaEnabled ? 'check' : 'close' }}</span>{{ 'widgets.configured-features.2fa-feature' | translate}}</div>
</a> </a>
</mat-grid-tile> </mat-grid-tile>
</mat-grid-list> </mat-grid-list>

31
ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.scss
View File

@ -13,6 +13,9 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
@import "../../../../../../../scss/constants";
:host { :host {
.tb-card-content { .tb-card-content {
width: 100%; width: 100%;
@ -27,7 +30,7 @@
line-height: 20px; line-height: 20px;
letter-spacing: 0.25px; letter-spacing: 0.25px;
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
} }
@ -51,7 +54,7 @@
} }
.tb-feature-button { .tb-feature-button {
height: 48.5px; height: 50px;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
flex-direction: column; flex-direction: column;
@ -61,8 +64,8 @@
border: 1px solid rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
border-radius: 10px; border-radius: 10px;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
height: 21.5px; height: 22px;
padding: 0 8px; padding: 0 8px;
} }
&:hover { &:hover {
@ -77,12 +80,11 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
} }
&:before { .tb-feature-status {
content: "close";
display: inline-block; display: inline-block;
font-family: 'Material Icons Round'; font-family: 'Material Icons Round';
font-size: 20px; font-size: 20px;
@ -92,28 +94,25 @@
position: relative; position: relative;
background: #F4F4F4; background: #F4F4F4;
border-radius: 4px; border-radius: 4px;
width: 20px; width: 24px;
height: 20px; height: 24px;
padding: 2px; padding: 2px;
margin-right: 8px; margin-right: 8px;
vertical-align: middle; vertical-align: middle;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
width: 14px; width: 18px;
height: 14px; height: 18px;
margin-right: 4px; margin-right: 4px;
} }
} }
} }
&.configured { &.configured {
.tb-feature-text { .tb-feature-status {
&:before {
content: "check";
color: #198038; color: #198038;
background: #F3F6FA; background: #F3F6FA;
} }
} }
} }
} }
}

13
ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts
View File

@ -25,6 +25,7 @@ import { Authority } from '@shared/models/authority.enum';
import { of, Subscription } from 'rxjs'; import { of, Subscription } from 'rxjs';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { MediaBreakpoints } from '@shared/models/constants';
@Component({ @Component({
selector: 'tb-configured-features', selector: 'tb-configured-features',
@ -35,7 +36,7 @@ export class ConfiguredFeaturesComponent extends PageComponent implements OnInit
authUser = getCurrentAuthUser(this.store); authUser = getCurrentAuthUser(this.store);
featuresInfo: FeaturesInfo; featuresInfo: FeaturesInfo;
rowHeight = '48.5px'; rowHeight = '50px';
gutterSize = '12px'; gutterSize = '12px';
private observeBreakpointSubscription: Subscription; private observeBreakpointSubscription: Subscription;
@ -49,17 +50,17 @@ export class ConfiguredFeaturesComponent extends PageComponent implements OnInit
} }
ngOnInit() { ngOnInit() {
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 ? '21.5px' : '48.5px'; this.rowHeight = isMdLg ? '22px' : '50px';
this.gutterSize = isMdLg ? '8px' : '12px'; this.gutterSize = isMdLg ? '8px' : '12px';
this.observeBreakpointSubscription = this.breakpointObserver this.observeBreakpointSubscription = this.breakpointObserver
.observe('screen and (min-width: 960px) and (max-width: 1819px)') .observe(MediaBreakpoints['md-lg'])
.subscribe((state: BreakpointState) => { .subscribe((state: BreakpointState) => {
if (state.matches) { if (state.matches) {
this.rowHeight = '21.5px'; this.rowHeight = '22px';
this.gutterSize = '8px'; this.gutterSize = '8px';
} else { } else {
this.rowHeight = '48.5px'; this.rowHeight = '50px';
this.gutterSize = '12px'; this.gutterSize = '12px';
} }
this.cd.markForCheck(); this.cd.markForCheck();

13
ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.scss
View File

@ -13,6 +13,9 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
@import "../../../../../../../scss/constants";
:host { :host {
.tb-card-content { .tb-card-content {
width: 100%; width: 100%;
@ -35,7 +38,7 @@
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
position: relative; position: relative;
border-bottom: none; border-bottom: none;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
} }
@ -85,7 +88,7 @@
border: 1px solid rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
border-radius: 10px; border-radius: 10px;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
height: 18px; height: 18px;
padding: 0 8px; padding: 0 8px;
} }
@ -103,7 +106,7 @@
background: #F3F6FA; background: #F3F6FA;
border-radius: 6px; border-radius: 6px;
margin-right: 8px; margin-right: 8px;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
display: none; display: none;
} }
} }
@ -116,7 +119,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
} }
@ -135,7 +138,7 @@
padding: 8px; padding: 8px;
border: 2px dashed rgba(0, 0, 0, 0.08); border: 2px dashed rgba(0, 0, 0, 0.08);
border-radius: 10px; border-radius: 10px;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
height: 18px; height: 18px;
padding: 0 8px; padding: 0 8px;
.tb-add-icon { .tb-add-icon {

4
ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts
View File

@ -128,11 +128,11 @@ export class DocLinksWidgetComponent extends PageComponent implements OnInit, On
ngOnInit() { ngOnInit() {
this.settings = this.ctx.settings; this.settings = this.ctx.settings;
this.columns = this.settings.columns || 3; 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.rowHeight = isMdLg ? '18px' : '55px';
this.gutterSize = isMdLg ? '8px' : '12px'; this.gutterSize = isMdLg ? '8px' : '12px';
this.observeBreakpointSubscription = this.breakpointObserver this.observeBreakpointSubscription = this.breakpointObserver
.observe('screen and (min-width: 960px) and (max-width: 1819px)') .observe(MediaBreakpoints['md-lg'])
.subscribe((state: BreakpointState) => { .subscribe((state: BreakpointState) => {
if (state.matches) { if (state.matches) {
this.rowHeight = '18px'; this.rowHeight = '18px';

7
ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.scss
View File

@ -13,6 +13,9 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
@import "../../../../../../../scss/constants";
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -25,7 +28,7 @@
letter-spacing: 0.1px; letter-spacing: 0.1px;
color: rgba(0, 0, 0, 0.76); color: rgba(0, 0, 0, 0.76);
padding-bottom: 24px; padding-bottom: 24px;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
@ -89,7 +92,7 @@
color: rgba(0, 0, 0, 0.54); 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 { .tb-get-started .mat-step-label {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;

23
ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss
View File

@ -13,6 +13,9 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
@import "../../../../../../../scss/constants";
:host { :host {
.tb-card-content { .tb-card-content {
width: 100%; width: 100%;
@ -25,7 +28,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8px;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
margin-bottom: 4px; margin-bottom: 4px;
} }
} }
@ -37,14 +40,14 @@
line-height: 20px; line-height: 20px;
letter-spacing: 0.25px; letter-spacing: 0.25px;
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
} }
} }
.tb-contact-us { .tb-contact-us {
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
height: 24px; height: 24px;
font-size: 12px; font-size: 12px;
} }
@ -58,7 +61,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
padding: 4px; padding: 4px;
} }
&.up-to-date { &.up-to-date {
@ -71,7 +74,7 @@
.tb-version-info-container+.tb-version-info-container { .tb-version-info-container+.tb-version-info-container {
margin-top: 12px; margin-top: 12px;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
margin-top: 4px; margin-top: 4px;
} }
} }
@ -84,7 +87,7 @@
color: rgba(0, 0, 0, 0.76); color: rgba(0, 0, 0, 0.76);
position: relative; position: relative;
border-bottom: none; border-bottom: none;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
} }
@ -114,14 +117,14 @@
line-height: 24px; line-height: 24px;
letter-spacing: 0.15px; letter-spacing: 0.15px;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }
} }
.tb-upgrade { .tb-upgrade {
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
height: 24px; height: 24px;
font-size: 12px; font-size: 12px;
padding: 0; padding: 0;
@ -131,7 +134,7 @@
.check-icon { .check-icon {
color: #198038; color: #198038;
font-weight: 600; font-weight: 600;
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-size: 20px; font-size: 20px;
} }
} }
@ -142,7 +145,7 @@
line-height: 20px; line-height: 20px;
letter-spacing: 0.2px; letter-spacing: 0.2px;
color: rgba(0, 0, 0, 0.76); color: rgba(0, 0, 0, 0.76);
@media screen and (min-width: 960px) and (max-width: 1819px) { @media #{$mat-md-lg} {
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
} }

3
ui-ngx/src/app/shared/models/constants.ts
View File

@ -67,7 +67,8 @@ export const MediaBreakpoints = {
'gt-sm': 'screen and (min-width: 960px)', 'gt-sm': 'screen and (min-width: 960px)',
'gt-md': 'screen and (min-width: 1280px)', 'gt-md': 'screen and (min-width: 1280px)',
'gt-lg': 'screen and (min-width: 1920px)', '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'; export const helpBaseUrl = 'https://thingsboard.io';

1
ui-ngx/src/scss/constants.scss
View File

@ -27,5 +27,6 @@ $mat-gt-sm: "screen and (min-width: 960px)";
$mat-gt-md: "screen and (min-width: 1280px)"; $mat-gt-md: "screen and (min-width: 1280px)";
$mat-gt-xmd: "screen and (min-width: 1600px)"; $mat-gt-xmd: "screen and (min-width: 1600px)";
$mat-gt-xl: "screen and (min-width: 1920px)"; $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; $primary-hue-3: rgb(207, 216, 220) !default;