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"
[ngClass]="{'configured': featuresInfo?.emailEnabled}"
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>
</mat-grid-tile>
<mat-grid-tile class="tb-feature-tile" colspan="3">
@ -38,7 +38,7 @@
matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.smsEnabled}"
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>
</mat-grid-tile>
<mat-grid-tile class="tb-feature-tile" colspan="2">
@ -47,7 +47,7 @@
matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.notificationEnabled}"
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>
</mat-grid-tile>
<mat-grid-tile class="tb-feature-tile" colspan="2">
@ -56,7 +56,7 @@
matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.oauthEnabled}"
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>
</mat-grid-tile>
<mat-grid-tile class="tb-feature-tile" colspan="2">
@ -65,7 +65,7 @@
matTooltipPosition="above"
[ngClass]="{'configured': featuresInfo?.twoFaEnabled}"
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>
</mat-grid-tile>
</mat-grid-list>

35
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
* 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;
}
}
}

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 { 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();

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
* 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 {

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() {
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';

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
* 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;

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
* 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;
}

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-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';

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-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;