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

[3.0] [WIP] Minor fixed to style (#2562)

Browse Source 
* Added support Safari browser (not support DragEvent)

* Imporovement style login page

* Change flex responsive API breakpoint

* Add support long name menu item

* Home page add link to page
This commit is contained in:
Vladyslav 2020-04-01 09:47:26 +03:00 committed by GitHub
parent bf4b690caf
commit 65e971f0e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 133 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-ngx/src/app/modules/home/menu/menu-link.component.html
View File

@ -15,10 +15,8 @@
limitations under the License. limitations under the License.
--> -->
<a class="mat-button" routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}"> <a mat-button routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
<span class="mat-button-wrapper"> <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
<mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon> <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
<mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon> <span>{{section.name | translate}}</span>
<span>{{section.name | translate}}</span>
</span>
</a> </a>

14
ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
View File

@ -15,15 +15,13 @@
limitations under the License. limitations under the License.
--> -->
<a class="mat-button tb-button-toggle" <a mat-button class="tb-button-toggle"
routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}"> routerLinkActive="tb-active" [routerLinkActiveOptions]="{exact: true}" routerLink="{{section.path}}">
<span class="mat-button-wrapper"> <mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon>
<mat-icon *ngIf="!section.isMdiIcon && section.icon != null" class="material-icons">{{section.icon}}</mat-icon> <mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon>
<mat-icon *ngIf="section.isMdiIcon && section.icon != null" [svgIcon]="section.icon"></mat-icon> <span>{{section.name | translate}}</span>
<span>{{section.name | translate}}</span> <span class=" pull-right fa fa-chevron-down tb-toggle-icon"
<span class=" pull-right fa fa-chevron-down tb-toggle-icon" [ngClass]="{'tb-toggled' : sectionActive()}"></span>
[ngClass]="{'tb-toggled' : sectionActive()}"></span>
</span>
</a> </a>
<ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [ngStyle]="{height: sectionHeight()}"> <ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [ngStyle]="{height: sectionHeight()}">
<li *ngFor="let page of section.pages"> <li *ngFor="let page of section.pages">

30
ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
View File

@ -13,6 +13,34 @@
* 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.
*/ */
:host { :host ::ng-deep {
.tb-button-toggle {
.tb-toggle-icon {
display: inline-block;
width: 15px;
margin: auto 0 auto auto;
background-size: 100% auto;
transition: transform .3s ease-in-out;
&.tb-toggled {
transform: rotateZ(180deg);
}
}
}
.tb-menu-toggle-list {
position: relative;
z-index: 1;
overflow: hidden;
transition: .75s cubic-bezier(.35, 0, .25, 1);
transition-property: height;
a.mat-button {
padding: 0 16px 0 32px;
font-weight: 500;
text-transform: none !important;
text-rendering: optimizeLegibility;
}
}
} }

43
ui-ngx/src/app/modules/home/menu/side-menu.component.scss
View File

@ -34,18 +34,8 @@
a.mat-button { a.mat-button {
text-transform: uppercase; text-transform: uppercase;
display: flex; display: flex;
width: 100%;
max-height: 40px;
padding: 0 16px;
margin: 0;
overflow: hidden; overflow: hidden;
line-height: 40px; line-height: 40px;
color: inherit;
text-align: left;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
border-radius: 0; border-radius: 0;
&:hover { &:hover {
border-bottom: none; border-bottom: none;
@ -61,6 +51,8 @@
.mat-button-wrapper { .mat-button-wrapper {
width: 100%; width: 100%;
display: inline-flex;
align-items: center;
mat-icon { mat-icon {
margin-right: 8px; margin-right: 8px;
margin-left: 0; margin-left: 0;
@ -76,35 +68,4 @@
} }
} }
} }
.tb-button-toggle {
.tb-toggle-icon {
display: inline-block;
width: 15px;
margin: auto 0 auto auto;
background-size: 100% auto;
transition: transform .3s, ease-in-out;
&.tb-toggled {
transform: rotateZ(180deg);
}
}
}
.tb-menu-toggle-list {
position: relative;
z-index: 1;
overflow: hidden;
transition: .75s cubic-bezier(.35, 0, .25, 1);
transition-property: height;
a.mat-button {
padding: 0 16px 0 32px;
font-weight: 500;
text-transform: none !important;
text-rendering: optimizeLegibility;
}
}
} }

4
ui-ngx/src/app/modules/home/pages/home-links/home-links.component.html
View File

@ -24,11 +24,11 @@
<mat-card-content> <mat-card-content>
<mat-grid-list rowHeight="170px" [cols]="section.places.length"> <mat-grid-list rowHeight="170px" [cols]="section.places.length">
<mat-grid-tile *ngFor="let place of section.places"> <mat-grid-tile *ngFor="let place of section.places">
<button mat-button mat-raised-button color="primary" class="tb-card-button" routerLink="{{place.path}}"> <a mat-raised-button color="primary" class="tb-card-button" routerLink="{{place.path}}">
<mat-icon *ngIf="!place.isMdiIcon" class="material-icons tb-mat-96">{{place.icon}}</mat-icon> <mat-icon *ngIf="!place.isMdiIcon" class="material-icons tb-mat-96">{{place.icon}}</mat-icon>
<mat-icon *ngIf="place.isMdiIcon" class="tb-mat-96" [svgIcon]="place.icon"></mat-icon> <mat-icon *ngIf="place.isMdiIcon" class="tb-mat-96" [svgIcon]="place.icon"></mat-icon>
<span translate>{{place.name}}</span> <span translate>{{place.name}}</span>
</button> </a>
</mat-grid-tile> </mat-grid-tile>
</mat-grid-list> </mat-grid-list>
</mat-card-content> </mat-card-content>

13
ui-ngx/src/app/modules/home/pages/home-links/home-links.component.scss
View File

@ -37,10 +37,17 @@
padding: 16px; padding: 16px;
} }
} }
button.tb-card-button { .tb-card-button {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 240px; max-width: 240px;
text-transform: uppercase;
&:hover {
border-bottom: none;
}
&:focus {
border-bottom: none;
}
.mat-button-wrapper { .mat-button-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -52,8 +59,8 @@
} }
span { span {
height: 18px; height: 18px;
min-height: 18px; min-height: 36px;
max-height: 18px; max-height: 36px;
padding: 0 0 20px 0; padding: 0 0 20px 0;
margin: auto; margin: auto;
font-size: 18px; font-size: 18px;

6
ui-ngx/src/app/modules/login/pages/login/create-password.component.html
View File

@ -17,7 +17,7 @@
--> -->
<div class="tb-create-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;"> <div class="tb-create-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
<mat-card fxFlex="initial" class="tb-create-password-card"> <mat-card fxFlex="initial" class="tb-create-password-card">
<mat-card-title> <mat-card-title class="layout-padding">
<span translate class="mat-headline">login.create-password</span> <span translate class="mat-headline">login.create-password</span>
</mat-card-title> </mat-card-title>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -38,8 +38,8 @@
<input matInput type="password" formControlName="password2"/> <input matInput type="password" formControlName="password2"/>
<mat-icon class="material-icons" matPrefix>lock</mat-icon> <mat-icon class="material-icons" matPrefix>lock</mat-icon>
</mat-form-field> </mat-form-field>
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center" <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
fxLayoutAlign.gt-sm="center start" class="layout-padding"> fxLayoutAlign.gt-xs="center start">
<button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)"> <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
{{ 'login.create-password' | translate }} {{ 'login.create-password' | translate }}
</button> </button>

4
ui-ngx/src/app/modules/login/pages/login/create-password.component.scss
View File

@ -17,11 +17,11 @@
:host { :host {
display: flex; display: flex;
flex: 1 1 0%; flex: 1 1 0;
.tb-create-password-content { .tb-create-password-content {
background-color: #eee; background-color: #eee;
.tb-create-password-card { .tb-create-password-card {
@media #{$mat-gt-sm} { @media #{$mat-gt-xs} {
width: 450px !important; width: 450px !important;
} }
} }

66
ui-ngx/src/app/modules/login/pages/login/login.component.html
View File

@ -15,43 +15,39 @@
limitations under the License. limitations under the License.
--> -->
<div class="tb-login-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" fxFlex> <div class="tb-login-content mat-app-background tb-dark" fxFlex fxLayoutAlign="center center">
<mat-card style="height: 100%; max-height: 600px; overflow-y: auto; overflow-x: hidden;"> <mat-card style="height: 100%; max-height: 525px; overflow-y: auto;">
<mat-card-content> <mat-card-content>
<form #loginForm="ngForm" class="tb-login-form" fxLayout="column" [formGroup]="loginFormGroup" (ngSubmit)="login()"> <form #loginForm="ngForm" class="tb-login-form" [formGroup]="loginFormGroup" (ngSubmit)="login()">
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async" fxLayout="column">
<div fxFlex fxLayout="column"> <div fxLayout="column" fxLayoutAlign="start center" style="padding: 15px 0;">
<div fxLayout="column" fxLayoutAlign="start center" style="padding: 15px 0;"> <tb-logo class="login-logo"></tb-logo>
<tb-logo class="login-logo" style="padding-bottom: 25px;"></tb-logo> </div>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span>
<div tb-toast fxLayout="column" class="layout-padding">
<span style="height: 50px;"></span>
<mat-form-field>
<mat-label translate>login.username</mat-label>
<input id="username-input" matInput type="email" autofocus formControlName="username" email required/>
<mat-icon matPrefix>email</mat-icon>
<mat-error *ngIf="loginFormGroup.get('username').invalid">
{{ 'user.invalid-email-format' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label translate>common.password</mat-label>
<input id="password-input" matInput type="password" formControlName="password"/>
<mat-icon matPrefix>lock</mat-icon>
</mat-form-field>
<div fxLayoutAlign="end center">
<button class="tb-reset-password" mat-button type="button" routerLink="/login/resetPasswordRequest">{{ 'login.forgot-password' | translate }}
</button>
</div> </div>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <div fxLayout="column" class="tb-action-button">
</mat-progress-bar> <button mat-raised-button color="accent" [disabled]="(isLoading$ | async)"
<span style="height: 4px;" *ngIf="!(isLoading$ | async)"></span> type="submit">{{ 'login.login' | translate }}</button>
<div tb-toast fxLayout="column" class="layout-padding">
<span style="height: 50px;"></span>
<mat-form-field>
<mat-label translate>login.username</mat-label>
<input id="username-input" matInput type="email" autofocus formControlName="username" email required/>
<mat-icon class="material-icons" matPrefix>email</mat-icon>
<mat-error *ngIf="loginFormGroup.get('username').invalid">
{{ 'user.invalid-email-format' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label translate>common.password</mat-label>
<input id="password-input" matInput type="password" formControlName="password"/>
<mat-icon class="material-icons" matPrefix>lock</mat-icon>
</mat-form-field>
<div fxLayout.gt-sm="column" fxLayoutAlign="space-between stretch">
<div fxLayout.gt-sm="column" fxLayoutAlign="space-between end">
<button mat-button type="button" routerLink="/login/resetPasswordRequest">{{ 'login.forgot-password' | translate }}
</button>
</div>
</div>
<div fxLayout="column" style="padding: 15px 0;">
<button mat-raised-button color="accent" [disabled]="(isLoading$ | async)"
type="submit">{{ 'login.login' | translate }}</button>
</div>
</div> </div>
</div> </div>
</fieldset> </fieldset>

15
ui-ngx/src/app/modules/login/pages/login/login.component.scss
View File

@ -17,15 +17,24 @@
:host { :host {
display: flex; display: flex;
flex: 1 1 0%; flex: 1 1 0;
.tb-login-content { .tb-login-content {
margin-top: 36px; margin-top: 36px;
margin-bottom: 76px; margin-bottom: 76px;
background-color: rgb(250,250,250); background-color: rgb(250, 250, 250);
.tb-login-form { .tb-login-form {
@media #{$mat-gt-sm} { @media #{$mat-gt-xs} {
width: 550px !important; width: 550px !important;
} }
.tb-reset-password{
padding: 0 6px;
}
.tb-action-button{
padding-top: 20px;
padding-bottom: 20px;
}
} }
} }
} }

6
ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html
View File

@ -17,7 +17,7 @@
--> -->
<div class="tb-request-password-reset-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;"> <div class="tb-request-password-reset-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
<mat-card fxFlex="initial" class="tb-request-password-reset-card"> <mat-card fxFlex="initial" class="tb-request-password-reset-card">
<mat-card-title> <mat-card-title class="layout-padding">
<span translate class="mat-headline">login.request-password-reset</span> <span translate class="mat-headline">login.request-password-reset</span>
</mat-card-title> </mat-card-title>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@ -36,8 +36,8 @@
{{ 'user.invalid-email-format' | translate }} {{ 'user.invalid-email-format' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center" <div fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="16px" fxLayoutAlign="start center"
fxLayoutAlign.gt-sm="center start" class="layout-padding"> fxLayoutAlign.gt-xs="center start">
<button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)"> <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
{{ 'login.request-password-reset' | translate }} {{ 'login.request-password-reset' | translate }}
</button> </button>

4
ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.scss
View File

@ -17,11 +17,11 @@
:host { :host {
display: flex; display: flex;
flex: 1 1 0%; flex: 1 1 0;
.tb-request-password-reset-content { .tb-request-password-reset-content {
background-color: #eee; background-color: #eee;
.tb-request-password-reset-card { .tb-request-password-reset-card {
@media #{$mat-gt-sm} { @media #{$mat-gt-xs} {
width: 450px !important; width: 450px !important;
} }
} }

10
ui-ngx/src/app/modules/login/pages/login/reset-password.component.html
View File

@ -17,11 +17,11 @@
--> -->
<div class="tb-reset-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;"> <div class="tb-reset-password-content mat-app-background tb-dark" fxLayout="row" fxLayoutAlign="center center" style="width: 100%;">
<mat-card fxFlex="initial" class="tb-reset-password-card"> <mat-card fxFlex="initial" class="tb-reset-password-card">
<mat-card-title> <mat-card-title class="layout-padding tb-card-title">
<span translate class="mat-headline">login.password-reset</span> <span translate class="mat-headline tb-card-title">login.password-reset</span>
</mat-card-title> </mat-card-title>
<mat-card-subtitle> <mat-card-subtitle *ngIf="isExpiredPassword" class="layout-padding tb-card-title">
<span *ngIf="isExpiredPassword" translate>login.expired-password-reset-message</span> <div class="tb-card-title" translate>login.expired-password-reset-message</div>
</mat-card-subtitle> </mat-card-subtitle>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
@ -42,7 +42,7 @@
<mat-icon class="material-icons" matPrefix>lock</mat-icon> <mat-icon class="material-icons" matPrefix>lock</mat-icon>
</mat-form-field> </mat-form-field>
<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center" <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px" fxLayoutAlign="start center"
fxLayoutAlign.gt-sm="center start" class="layout-padding"> fxLayoutAlign.gt-sm="center start">
<button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)"> <button mat-raised-button color="accent" type="submit" [disabled]="(isLoading$ | async)">
{{ 'login.reset-password' | translate }} {{ 'login.reset-password' | translate }}
</button> </button>

7
ui-ngx/src/app/modules/login/pages/login/reset-password.component.scss
View File

@ -17,7 +17,7 @@
:host { :host {
display: flex; display: flex;
flex: 1 1 0%; flex: 1 1 0;
.tb-reset-password-content { .tb-reset-password-content {
background-color: #eee; background-color: #eee;
.tb-reset-password-card { .tb-reset-password-card {
@ -25,5 +25,10 @@
width: 450px !important; width: 450px !important;
} }
} }
.tb-card-title{
padding-top: 0;
padding-bottom: 0;
}
} }
} }

12
ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts
View File

@ -120,7 +120,7 @@ class DraggableChip {
} }
} }
private onDragStart(event: DragEvent) { private onDragStart(event: Event | any) {
if (this.preventDrag) { if (this.preventDrag) {
event.preventDefault(); event.preventDefault();
} else { } else {
@ -136,7 +136,7 @@ class DraggableChip {
} }
} }
private onDragEnter(event: DragEvent) { private onDragEnter(event: Event | any) {
this.counter++; this.counter++;
if (this.dragging) { if (this.dragging) {
return; return;
@ -148,7 +148,7 @@ class DraggableChip {
this.chipElement.addEventListener('drop', this.dropHandler); this.chipElement.addEventListener('drop', this.dropHandler);
} }
private onDragLeave(event: DragEvent) { private onDragLeave(event: Event | any) {
this.counter--; this.counter--;
if (this.counter <= 0) { if (this.counter <= 0) {
this.counter = 0; this.counter = 0;
@ -158,14 +158,14 @@ class DraggableChip {
} }
} }
private onDragEnd(event: DragEvent) { private onDragEnd(event: Event | any) {
this.dragging = false; this.dragging = false;
globalDraggingChipListId = null; globalDraggingChipListId = null;
this.chipListElement.classList.remove(draggingClassName); this.chipListElement.classList.remove(draggingClassName);
this.chipElement.classList.remove(draggingClassName); this.chipElement.classList.remove(draggingClassName);
} }
private onDragOver(event: DragEvent) { private onDragOver(event: Event | any) {
if (this.dragging) { if (this.dragging) {
return; return;
} }
@ -203,7 +203,7 @@ class DraggableChip {
} }
private onDrop(event: DragEvent) { private onDrop(event: Event | any) {
this.counter = 0; this.counter = 0;
event.preventDefault(); event.preventDefault();
if (globalDraggingChipListId !== this.chipListElement.id) { if (globalDraggingChipListId !== this.chipListElement.id) {

13
ui-ngx/src/styles.scss
View File

@ -445,10 +445,10 @@ mat-label {
} }
.layout-padding, .layout-padding > * { .layout-padding, .layout-padding > * {
@media #{$mat-lt-md} { @media #{$mat-lt-sm} {
padding: 4px; padding: 4px;
} }
@media #{$mat-gt-sm} { @media #{$mat-gt-xs} {
padding: 8px; padding: 8px;
} }
} }
@ -473,6 +473,13 @@ mat-label {
display: block; display: block;
} }
.mat-form-field{
.mat-icon{
margin-right: 4px;
margin-left: 4px;
}
}
button.mat-menu-item { button.mat-menu-item {
overflow: hidden; overflow: hidden;
fill: #737373; fill: #737373;
@ -684,7 +691,7 @@ mat-label {
} }
.mat-icon { .mat-icon {
vertical-align: middle; vertical-align: bottom;
box-sizing: content-box; box-sizing: content-box;
&.tb-mat-16 { &.tb-mat-16 {
@include tb-mat-icon-size(16); @include tb-mat-icon-size(16);