Improvement view on mobile device

This commit is contained in:
Vladyslav_Prykhodko 2020-04-06 11:04:03 +03:00
parent 56bb0f6071
commit 2ca4b78cf9
24 changed files with 102 additions and 106 deletions

View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar color="primary">
<h2 translate>audit-log.audit-log-details</h2>
<span fxFlex></span>
<button mat-button mat-icon-button
@ -33,10 +33,8 @@
<div #failureDetailsEditor [fxShow]="displayFailureDetails" class="tb-audit-log-failure-details">
</div>
</div>
<div mat-dialog-actions fxLayout="row">
<span fxFlex></span>
<div mat-dialog-actions fxLayoutAlign="end center">
<button mat-button color="primary"
style="margin-right: 20px;"
type="button"
[disabled]="(isLoading$ | async)"
[mat-dialog-close]="false" cdkFocusInitial>

View File

@ -33,7 +33,7 @@
</mat-drawer>
<mat-drawer-content>
<div class="mat-padding tb-entity-table tb-absolute-fill">
<div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
<div fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
<mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools">
<span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
@ -41,10 +41,9 @@
<tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
(ngModelChange)="onTimewindowChange()"
asButton historyOnly></tb-timewindow>
<span fxFlex *ngIf="!entitiesTableConfig.headerComponent ||
entitiesTableConfig.useTimePageLink"></span>
<span fxFlex *ngIf="!entitiesTableConfig.headerComponent || entitiesTableConfig.useTimePageLink"></span>
<div [fxShow]="addEnabled()">
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
<button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
(click)="addEntity($event)"
matTooltip="{{ translations.add | translate }}"
@ -52,7 +51,7 @@
<mat-icon>add</mat-icon>
</button>
<ng-template #addActions>
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
<button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
[fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
(click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
@ -61,7 +60,7 @@
<mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon>
</button>
<ng-template #addActionsMenu>
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
<button mat-icon-button [disabled]="isLoading$ | async"
matTooltip="{{ translations.add | translate }}"
matTooltipPosition="above"
[matMenuTriggerFor]="addActionsMenu">
@ -79,20 +78,20 @@
</ng-template>
</ng-template>
</div>
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
<button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
matTooltip="{{ actionDescriptor.name }}"
matTooltipPosition="above"
(click)="actionDescriptor.onAction($event)">
<mat-icon>{{actionDescriptor.icon}}</mat-icon>
</button>
<button mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
<button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
matTooltip="{{ 'action.refresh' | translate }}"
matTooltipPosition="above">
<mat-icon>refresh</mat-icon>
</button>
<button *ngIf="entitiesTableConfig.searchEnabled"
mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
matTooltip="{{ translations.search | translate }}"
matTooltipPosition="above">
<mat-icon>search</mat-icon>
@ -101,7 +100,7 @@
</mat-toolbar>
<mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
<div class="mat-toolbar-tools">
<button mat-button mat-icon-button
<button mat-icon-button
matTooltip="{{ translations.search | translate }}"
matTooltipPosition="above">
<mat-icon>search</mat-icon>
@ -112,7 +111,7 @@
[(ngModel)]="pageLink.textSearch"
placeholder="{{ translations.search | translate }}"/>
</mat-form-field>
<button mat-button mat-icon-button (click)="exitFilterMode()"
<button mat-icon-button (click)="exitFilterMode()"
matTooltip="{{ 'action.close' | translate }}"
matTooltipPosition="above">
<mat-icon>close</mat-icon>
@ -125,7 +124,7 @@
{{ translate.get(translations.selectedEntities, {count: dataSource.selection.selected.length}) | async }}
</span>
<span fxFlex></span>
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
<button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
matTooltip="{{ actionDescriptor.name }}"
matTooltipPosition="above"
@ -167,7 +166,7 @@
<mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
<mat-cell *matCellDef="let entity; let row = index"
[ngStyle]="cellStyle(entity, column, row)">
<button mat-button mat-icon-button [disabled]="isLoading$ | async"
<button mat-icon-button [disabled]="isLoading$ | async"
[fxShow]="column.actionDescriptor.isEnabled(entity)"
matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
matTooltipPosition="above"

View File

@ -14,12 +14,12 @@
/// limitations under the License.
///
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
import {Authority} from '@shared/models/authority.enum';
import {AssetsTableConfigResolver} from './assets-table-config.resolver';
import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
import { Authority } from '@shared/models/authority.enum';
import { AssetsTableConfigResolver } from './assets-table-config.resolver';
const routes: Routes = [
{

View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-details-buttons">
<div class="tb-details-buttons" fxLayout.xs="column">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'makePublic')"
@ -40,7 +40,7 @@
[fxShow]="!hideDelete() && !isEdit">
{{'asset.delete' | translate }}
</button>
<div fxLayout="row">
<div fxLayout="row" fxLayout.xs="column">
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onAssetIdCopied($event)"

View File

@ -14,16 +14,16 @@
/// limitations under the License.
///
import {Component} from '@angular/core';
import {Store} from '@ngrx/store';
import {AppState} from '@core/core.state';
import {EntityComponent} from '../../components/entity/entity.component';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {EntityType} from '@shared/models/entity-type.models';
import {NULL_UUID} from '@shared/models/id/has-uuid';
import {ActionNotificationShow} from '@core/notification/notification.actions';
import {TranslateService} from '@ngx-translate/core';
import {AssetInfo} from '@app/shared/models/asset.models';
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { EntityComponent } from '../../components/entity/entity.component';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { EntityType } from '@shared/models/entity-type.models';
import { NULL_UUID } from '@shared/models/id/has-uuid';
import { ActionNotificationShow } from '@core/notification/notification.actions';
import { TranslateService } from '@ngx-translate/core';
import { AssetInfo } from '@app/shared/models/asset.models';
@Component({
selector: 'tb-asset',

View File

@ -14,14 +14,14 @@
/// limitations under the License.
///
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {SharedModule} from '@shared/shared.module';
import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
import {AssetComponent} from './asset.component';
import {AssetTableHeaderComponent} from './asset-table-header.component';
import {AssetRoutingModule} from './asset-routing.module';
import {HomeComponentsModule} from '@modules/home/components/home-components.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '@shared/shared.module';
import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
import { AssetComponent } from './asset.component';
import { AssetTableHeaderComponent } from './asset-table-header.component';
import { AssetRoutingModule } from './asset-routing.module';
import { HomeComponentsModule } from '@modules/home/components/home-components.module';
import { AssetTabsComponent } from '@home/pages/asset/asset-tabs.component';
@NgModule({

View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-details-buttons">
<div class="tb-details-buttons" fxLayout.xs="column">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'manageUsers')"
@ -46,7 +46,7 @@
[fxShow]="!hideDelete() && !isEdit && !isPublic">
{{'customer.delete' | translate }}
</button>
<div fxLayout="row">
<div fxLayout="row" fxLayout.xs="column">
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onCustomerIdCopied($event)"

View File

@ -19,10 +19,9 @@ import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Customer } from '@shared/models/customer.model';
import {Tenant} from '@app/shared/models/tenant.model';
import {ActionNotificationShow} from '@app/core/notification/notification.actions';
import {TranslateService} from '@ngx-translate/core';
import {ContactBasedComponent} from '../../components/entity/contact-based.component';
import { ActionNotificationShow } from '@app/core/notification/notification.actions';
import { TranslateService } from '@ngx-translate/core';
import { ContactBasedComponent } from '../../components/entity/contact-based.component';
@Component({
selector: 'tb-customer',

View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-details-buttons">
<div class="tb-details-buttons" fxLayout.xs="column">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')"

View File

@ -14,21 +14,20 @@
/// limitations under the License.
///
import {Component} from '@angular/core';
import {Store} from '@ngrx/store';
import {AppState} from '@core/core.state';
import {EntityComponent} from '../../components/entity/entity.component';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {ActionNotificationShow} from '@core/notification/notification.actions';
import {TranslateService} from '@ngx-translate/core';
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { EntityComponent } from '../../components/entity/entity.component';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActionNotificationShow } from '@core/notification/notification.actions';
import { TranslateService } from '@ngx-translate/core';
import {
Dashboard,
isPublicDashboard,
getDashboardAssignedCustomersText,
isCurrentPublicDashboardCustomer,
DashboardInfo
isPublicDashboard
} from '@shared/models/dashboard.models';
import {DashboardService} from '@core/http/dashboard.service';
import { DashboardService } from '@core/http/dashboard.service';
@Component({
selector: 'tb-dashboard-form',

View File

@ -18,7 +18,6 @@ import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { DeviceInfo } from '@shared/models/device.models';
import { EntityType } from '@shared/models/entity-type.models';
import { EntityTabsComponent } from '../../components/entity/entity-tabs.component';
@Component({

View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-details-buttons">
<div class="tb-details-buttons" fxLayout.xs="column">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'makePublic')"
@ -40,13 +40,13 @@
[fxShow]="!isEdit">
{{ (deviceScope === 'customer_user' ? 'device.view-credentials' : 'device.manage-credentials') | translate }}
</button>
<button mat-raised-button color="primary"
<button mat-raised-button color="primary" fxFlex.xs
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit">
{{'device.delete' | translate }}
</button>
<div fxLayout="row">
<div fxLayout="row" fxLayout.xs="column">
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onDeviceIdCopied($event)"

View File

@ -14,22 +14,18 @@
/// limitations under the License.
///
import { Component, OnInit } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { EntityComponent } from '../../components/entity/entity.component';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { User } from '@shared/models/user.model';
import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';
import { map } from 'rxjs/operators';
import { Authority } from '@shared/models/authority.enum';
import {DeviceInfo} from '@shared/models/device.models';
import {EntityType} from '@shared/models/entity-type.models';
import {NULL_UUID} from '@shared/models/id/has-uuid';
import {ActionNotificationShow} from '@core/notification/notification.actions';
import {TranslateService} from '@ngx-translate/core';
import {DeviceService} from '@core/http/device.service';
import {ClipboardService} from 'ngx-clipboard';
import { DeviceInfo } from '@shared/models/device.models';
import { EntityType } from '@shared/models/entity-type.models';
import { NULL_UUID } from '@shared/models/id/has-uuid';
import { ActionNotificationShow } from '@core/notification/notification.actions';
import { TranslateService } from '@ngx-translate/core';
import { DeviceService } from '@core/http/device.service';
import { ClipboardService } from 'ngx-clipboard';
@Component({
selector: 'tb-device',

View File

@ -17,12 +17,12 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '@shared/shared.module';
import {DeviceComponent} from '@modules/home/pages/device/device.component';
import {DeviceRoutingModule} from './device-routing.module';
import {DeviceTableHeaderComponent} from '@modules/home/pages/device/device-table-header.component';
import {DeviceCredentialsDialogComponent} from '@modules/home/pages/device/device-credentials-dialog.component';
import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
import {HomeComponentsModule} from '@modules/home/components/home-components.module';
import { DeviceComponent } from '@modules/home/pages/device/device.component';
import { DeviceRoutingModule } from './device-routing.module';
import { DeviceTableHeaderComponent } from '@modules/home/pages/device/device-table-header.component';
import { DeviceCredentialsDialogComponent } from '@modules/home/pages/device/device-credentials-dialog.component';
import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
import { HomeComponentsModule } from '@modules/home/components/home-components.module';
import { DeviceTabsComponent } from '@home/pages/device/device-tabs.component';
@NgModule({

View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-details-buttons">
<div class="tb-details-buttons" fxLayout.xs="column">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'makePublic')"
@ -40,7 +40,7 @@
[fxShow]="!hideDelete() && !isEdit">
{{'entity-view.delete' | translate }}
</button>
<div fxLayout="row">
<div fxLayout="row" fxLayout.xs="column">
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onEntityViewIdCopied($event)"

View File

@ -16,7 +16,7 @@
-->
<form style="min-width: 400px;">
<mat-toolbar fxLayout="row" color="primary">
<mat-toolbar color="primary">
<h2 translate>user.activation-link</h2>
<span fxFlex></span>
<button mat-button mat-icon-button
@ -29,11 +29,11 @@
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
<div class="mat-content mat-padding" fxLayout="column">
<div class="mat-content" fxLayout="column">
<span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span>
<div fxLayout="row" fxLayoutAlign="start center">
<pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
<button mat-button mat-icon-button
<button mat-icon-button
color="primary"
ngxClipboard
cbContent="{{ activationLink }}"
@ -45,10 +45,8 @@
</div>
</div>
</div>
<div mat-dialog-actions fxLayout="row">
<span fxFlex></span>
<div mat-dialog-actions fxLayoutAlign="end center">
<button mat-button color="primary"
style="margin-right: 20px;"
type="button"
cdkFocusInitial
[disabled]="(isLoading$ | async)"

View File

@ -16,7 +16,6 @@
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { TranslateService } from '@ngx-translate/core';

View File

@ -15,12 +15,12 @@
limitations under the License.
-->
<form (ngSubmit)="add()" style="width: 600px;">
<form (ngSubmit)="add()" style="min-width: 450px;">
<mat-toolbar color="primary">
<h2 translate>user.add</h2>
<span fxFlex></span>
<div [tb-help]="'user'"></div>
<button mat-button mat-icon-button
<button mat-icon-button
(click)="cancel()"
type="button">
<mat-icon class="material-icons">close</mat-icon>

View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-details-buttons">
<div class="tb-details-buttons" fxLayout.xs="column">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'disableAccount')"

View File

@ -14,13 +14,13 @@
/// limitations under the License.
///
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { EntityComponent } from '../../components/entity/entity.component';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { User } from '@shared/models/user.model';
import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';
import { selectAuth } from '@core/auth/auth.selectors';
import { map } from 'rxjs/operators';
import { Authority } from '@shared/models/authority.enum';
import { isUndefined } from '@core/utils';

View File

@ -21,7 +21,7 @@ import { UserComponent } from '@modules/home/pages/user/user.component';
import { UserRoutingModule } from '@modules/home/pages/user/user-routing.module';
import { AddUserDialogComponent } from '@modules/home/pages/user/add-user-dialog.component';
import { ActivationLinkDialogComponent } from '@modules/home/pages/user/activation-link-dialog.component';
import {HomeComponentsModule} from '@modules/home/components/home-components.module';
import { HomeComponentsModule } from '@modules/home/components/home-components.module';
import { UserTabsComponent } from '@home/pages/user/user-tabs.component';
@NgModule({

View File

@ -26,9 +26,9 @@ import { Observable } from 'rxjs';
import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
import { WidgetService } from '@core/http/widget.service';
import { WidgetEditorComponent } from '@home/pages/widget/widget-editor.component';
import { map, share } from 'rxjs/operators';
import { map } from 'rxjs/operators';
import { toWidgetInfo, WidgetInfo } from '@home/models/widget-component.models';
import { Widget, widgetType, WidgetType } from '@app/shared/models/widget.models';
import { widgetType, WidgetType } from '@app/shared/models/widget.models';
import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
import { WidgetsData } from '@home/models/dashboard-component.models';
import { NULL_UUID } from '@shared/models/id/has-uuid';

View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-details-buttons">
<div class="tb-details-buttons" fxLayout.xs="column">
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'open')"

View File

@ -679,18 +679,18 @@ mat-label {
}
.mat-toolbar-tools {
font-size: 20px;
//font-size: 20px;
letter-spacing: .005em;
box-sizing: border-box;
//box-sizing: border-box;
font-weight: 400;
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
height: 64px;
max-height: 64px;
//height: 64px;
//max-height: 64px;
padding: 0 16px;
margin: 0;
//margin: 0;
}
.mat-icon {
@ -782,6 +782,11 @@ mat-label {
.mat-toolbar {
line-height: normal;
h1, h2, h3, h4, h5, h6 {
overflow: hidden;
text-overflow: ellipsis;
}
}
mat-toolbar *, mat-toolbar :after, mat-toolbar :before {
@ -817,6 +822,9 @@ mat-label {
.mat-dialog-actions {
margin-bottom: 0;
padding: 8px 8px 8px 16px;
button:last-of-type{
margin-right: 20px;
}
}
}
}
@ -843,7 +851,7 @@ mat-label {
}
.tb-fullscreen-dialog {
@media #{$mat-lt-md} {
@media #{$mat-lt-sm} {
min-height: 100%;
min-width: 100%;
max-width: none !important;
@ -904,6 +912,7 @@ mat-label {
display: flex;
height: calc(100% - 60px);
text-transform: uppercase;
text-align: center;
}