Browse Source

UI: Home page mobile view improvements

pull/8359/head
Igor Kulikov 4 years ago
parent
commit
029aca6b33
  1. 6
      ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.html
  2. 16
      ui-ngx/src/app/modules/home/components/widget/lib/home-page/configured-features.component.ts
  3. 3
      ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html
  4. 37
      ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html
  5. 19
      ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.scss
  6. 806
      ui-ngx/src/app/modules/home/pages/home-links/sys_admin_home_page.raw
  7. 85
      ui-ngx/src/app/shared/layout/layout.directives.ts
  8. 34
      ui-ngx/src/app/shared/shared.module.ts
  9. 2
      ui-ngx/src/assets/locale/locale.constant-en_US.json

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

@ -41,7 +41,7 @@
<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">
<mat-grid-tile class="tb-feature-tile" [colspan]="bottomColspan">
<a class="tb-feature-button" fxFlex
[matTooltip]="featureTooltip(featuresInfo?.notificationEnabled)"
matTooltipPosition="above"
@ -50,7 +50,7 @@
<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">
<mat-grid-tile class="tb-feature-tile" [colspan]="bottomColspan">
<a class="tb-feature-button" fxFlex
[matTooltip]="featureTooltip(featuresInfo?.oauthEnabled)"
matTooltipPosition="above"
@ -59,7 +59,7 @@
<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">
<mat-grid-tile class="tb-feature-tile" [colspan]="lastColspan">
<a class="tb-feature-button" fxFlex
[matTooltip]="featureTooltip(featuresInfo?.twoFaEnabled)"
matTooltipPosition="above"

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

@ -38,6 +38,8 @@ export class ConfiguredFeaturesComponent extends PageComponent implements OnInit
featuresInfo: FeaturesInfo;
rowHeight = '50px';
gutterSize = '12px';
bottomColspan = 2;
lastColspan = 2;
private observeBreakpointSubscription: Subscription;
@ -51,18 +53,28 @@ export class ConfiguredFeaturesComponent extends PageComponent implements OnInit
ngOnInit() {
const isMdLg = this.breakpointObserver.isMatched(MediaBreakpoints['md-lg']);
const isLtMd = this.breakpointObserver.isMatched(MediaBreakpoints['lt-md']);
this.rowHeight = isMdLg ? '22px' : '50px';
this.gutterSize = isMdLg ? '8px' : '12px';
this.bottomColspan = isLtMd ? 3 : 2;
this.lastColspan = isLtMd ? 6 : 2;
this.observeBreakpointSubscription = this.breakpointObserver
.observe(MediaBreakpoints['md-lg'])
.observe([MediaBreakpoints['md-lg'], MediaBreakpoints['lt-md']])
.subscribe((state: BreakpointState) => {
if (state.matches) {
if (state.breakpoints[MediaBreakpoints['md-lg']]) {
this.rowHeight = '22px';
this.gutterSize = '8px';
} else {
this.rowHeight = '50px';
this.gutterSize = '12px';
}
if (state.breakpoints[MediaBreakpoints['lt-md']]) {
this.bottomColspan = 3;
this.lastColspan = 6;
} else {
this.bottomColspan = 2;
this.lastColspan = 2;
}
this.cd.markForCheck();
}
);

3
ui-ngx/src/app/modules/home/components/widget/lib/home-page/getting-started-widget.component.html

@ -18,8 +18,7 @@
<div class="tb-title" translate>widgets.getting-started.get-started</div>
<div class="tb-get-started-container">
<mat-stepper #matStepper class="tb-get-started" orientation="vertical" [linear]="false"
[selectedIndex]="gettingStarted.lastSelectedIndex"
(selectionChange)="updateSelectedIndex($event)">
(selectionChange)="updateSelectedIndex($event)">
<ng-template matStepperIcon="edit" let-index="index">
{{ index + 1 }}
</ng-template>

37
ui-ngx/src/app/modules/home/components/widget/lib/home-page/version-info.component.html

@ -22,24 +22,41 @@
</div>
<a mat-button color="primary" class="tb-contact-us" href="https://thingsboard.io/docs/contact-us/" target="_blank">{{ 'widgets.version-info.contact-us' | translate }}</a>
</div>
<div fxLayout="column" fxFlex>
<div class="tb-version-info-container" fxFlex>
<div class="tb-card-header">
<a class="tb-version-link" [href]="updateMessage?.currentVersionReleaseNotesUrl" target="_blank">{{ 'widgets.version-info.current-version' | translate }}</a>
<div fxLayout="row" fxLayoutGap="8px" fxLayout.gt-md-lg="column" fxFlex>
<div class="tb-version-info-container" fxLayout="row" fxFlex>
<div fxFlex fxLayout="column" fxLayoutAlign="space-evenly stretch">
<div class="tb-card-header">
<a class="tb-version-link" [href]="updateMessage?.currentVersionReleaseNotesUrl" target="_blank">
<span fxHide.md-lg translate>widgets.version-info.current-version</span>
<span fxHide.lt-md fxHide.gt-md-lg translate>widgets.version-info.current</span>
</a>
</div>
<div class="tb-version">{{ updateMessage?.currentVersion }}</div>
<div fxHide.gt-md-lg style="height: 24px;">
</div>
</div>
<div class="tb-version">{{ updateMessage?.currentVersion }}</div>
</div>
<div class="tb-version-info-container" fxFlex *ngIf="updateMessage?.updateAvailable; else versionUpToDate">
<div class="tb-card-header">
<a class="tb-version-link" [href]="updateMessage?.latestVersionReleaseNotesUrl" target="_blank">{{ 'widgets.version-info.available-version' | translate }}</a>
<div class="tb-version-info-container" fxLayout="row" fxFlex *ngIf="updateMessage?.updateAvailable; else versionUpToDate">
<div fxFlex fxLayout="column" fxLayoutAlign="space-evenly stretch">
<div class="tb-card-header">
<a class="tb-version-link" [href]="updateMessage?.latestVersionReleaseNotesUrl" target="_blank">
<span fxHide.md-lg translate>widgets.version-info.available-version</span>
<span fxHide.lt-md fxHide.gt-md-lg translate>widgets.version-info.available</span>
</a>
</div>
<div class="tb-version">{{ updateMessage?.latestVersion }}</div>
<div fxHide.gt-md-lg fxLayout="row" fxLayoutAlign="end end">
<a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
</div>
</div>
<div fxHide.lt-md fxHide.md-lg fxLayout="column" fxLayoutAlign="center">
<a mat-flat-button color="primary" class="tb-upgrade" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">{{ 'widgets.version-info.upgrade' | translate }}</a>
</div>
<div class="tb-version">{{ updateMessage?.latestVersion }}</div>
</div>
</div>
</div>
<ng-template #versionUpToDate>
<div class="tb-version-info-container up-to-date" fxFlex>
<div class="tb-version-info-container up-to-date" fxFlex fxLayout="column" fxLayoutAlign="space-evenly center">
<div class="material-icons-round check-icon">check</div>
<div class="up-to-date-text" translate>widgets.version-info.version-is-up-to-date</div>
</div>

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

@ -58,24 +58,20 @@
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04);
border-radius: 10px;
padding: 8px 16px 4px 16px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
overflow: hidden;
white-space: nowrap;
@media #{$mat-lt-md} {
padding: 16px;
}
@media #{$mat-md-lg} {
padding: 4px;
}
&.up-to-date {
box-shadow: none;
border: none;
align-items: center;
background: #F3F6FA;
}
}
.tb-version-info-container+.tb-version-info-container {
margin-top: 12px;
@media #{$mat-md-lg} {
margin-top: 4px;
white-space: initial;
text-align: center;
}
}
@ -128,6 +124,7 @@
height: 24px;
font-size: 12px;
padding: 0;
overflow: hidden;
}
}

806
ui-ngx/src/app/modules/home/pages/home-links/sys_admin_home_page.raw

File diff suppressed because it is too large

85
ui-ngx/src/app/shared/layout/layout.directives.ts

@ -0,0 +1,85 @@
///
/// Copyright © 2016-2023 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///
import { Directive } from '@angular/core';
import { BREAKPOINT, LayoutAlignDirective, LayoutDirective, LayoutGapDirective, ShowHideDirective } from '@angular/flex-layout';
const TB_BREAKPOINTS = [
{
alias: 'md-lg',
mediaQuery: 'screen and (min-width: 960px) and (max-width: 1819px)',
priority: 750
},
{
alias: 'gt-md-lg',
mediaQuery: 'screen and (min-width: 1820px)',
priority: -600
}
];
export const TbBreakPointsProvider = {
provide: BREAKPOINT,
useValue: TB_BREAKPOINTS,
multi: true
};
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
@Directive({selector: '[fxLayout.md-lg]', inputs: ['fxLayout.md-lg']})
export class MdLgLayoutDirective extends LayoutDirective {
protected inputs = ['fxLayout.md-lg'];
}
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
@Directive({selector: '[fxLayoutAlign.md-lg]', inputs: ['fxLayoutAlign.md-lg']})
export class MdLgLayoutAlignDirective extends LayoutAlignDirective {
protected inputs = ['fxLayoutAlign.md-lg'];
}
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
@Directive({selector: '[fxLayoutGap.md-lg]', inputs: ['fxLayoutGap.md-lg']})
export class MdLgLayoutGapDirective extends LayoutGapDirective {
protected inputs = ['fxLayoutGap.md-lg'];
}
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
@Directive({selector: '[fxHide.md-lg]', inputs: ['fxHide.md-lg']})
export class MdLgShowHideDirective extends ShowHideDirective {
protected inputs = ['fxHide.md-lg'];
}
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
@Directive({selector: '[fxLayout.gt-md-lg]', inputs: ['fxLayout.gt-md-lg']})
export class GtMdLgLayoutDirective extends LayoutDirective {
protected inputs = ['fxLayout.gt-md-lg'];
}
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
@Directive({selector: '[fxLayoutAlign.gt-md-lg]', inputs: ['fxLayoutAlign.gt-md-lg']})
export class GtMdLgLayoutAlignDirective extends LayoutAlignDirective {
protected inputs = ['fxLayoutAlign.gt-md-lg'];
}
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
@Directive({selector: '[fxLayoutGap.gt-md-lg]', inputs: ['fxLayoutGap.gt-md-lg']})
export class GtMdLgLayoutGapDirective extends LayoutGapDirective {
protected inputs = ['fxLayoutGap.gt-md-lg'];
}
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property,@angular-eslint/directive-selector
@Directive({selector: '[fxHide.gt-md-lg]', inputs: ['fxHide.gt-md-lg']})
export class GtMdLgShowHideDirective extends ShowHideDirective {
protected inputs = ['fxHide.gt-md-lg'];
}

34
ui-ngx/src/app/shared/shared.module.ts

@ -176,6 +176,17 @@ import { NotificationComponent } from '@shared/components/notification/notificat
import { TemplateAutocompleteComponent } from '@shared/components/notification/template-autocomplete.component';
import { SlackConversationAutocompleteComponent } from '@shared/components/slack-conversation-autocomplete.component';
import { DateAgoPipe } from '@shared/pipe/date-ago.pipe';
import {
TbBreakPointsProvider,
MdLgLayoutDirective,
MdLgLayoutAlignDirective,
MdLgLayoutGapDirective,
MdLgShowHideDirective,
GtMdLgLayoutDirective,
GtMdLgLayoutAlignDirective,
GtMdLgLayoutGapDirective,
GtMdLgShowHideDirective
} from '@shared/layout/layout.directives';
export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
return markedOptionsService;
@ -222,7 +233,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
useValue: {
hideSingleSelectionIndicator: true
}
}
},
TbBreakPointsProvider
],
declarations: [
FooterComponent,
@ -327,7 +339,15 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
NotificationComponent,
TemplateAutocompleteComponent,
SlackConversationAutocompleteComponent,
DateAgoPipe
DateAgoPipe,
MdLgLayoutDirective,
MdLgLayoutAlignDirective,
MdLgLayoutGapDirective,
MdLgShowHideDirective,
GtMdLgLayoutDirective,
GtMdLgLayoutAlignDirective,
GtMdLgLayoutGapDirective,
GtMdLgShowHideDirective
],
imports: [
CommonModule,
@ -541,7 +561,15 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
NotificationComponent,
TemplateAutocompleteComponent,
SlackConversationAutocompleteComponent,
DateAgoPipe
DateAgoPipe,
MdLgLayoutDirective,
MdLgLayoutAlignDirective,
MdLgLayoutGapDirective,
MdLgShowHideDirective,
GtMdLgLayoutDirective,
GtMdLgLayoutAlignDirective,
GtMdLgLayoutGapDirective,
GtMdLgShowHideDirective
]
})
export class SharedModule { }

2
ui-ngx/src/assets/locale/locale.constant-en_US.json

@ -5130,7 +5130,9 @@
"title": "Version",
"contact-us": "Contact us",
"current-version": "Current version",
"current": "Current",
"available-version": "Available version",
"available": "Available",
"upgrade": "Upgrade",
"version-is-up-to-date": "Version is up to date"
},

Loading…
Cancel
Save