Skip to content

Commit 5c27c26

Browse files
masudul-tikwebmasudul-tikweb
authored
Merge pull request #14 from microting/master
Style adjustments
2 parents ef9eab6 + 6d1373d commit 5c27c26

File tree

11 files changed

+106
-41
lines changed

11 files changed

+106
-41
lines changed

‎eform-client/src/app/common/const/icons.const.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,30 @@ export const PdfIcon = '<svg role="img" aria-hidden="true" focusable="false" dat
4949
'362.5 248 336V272C248 245.5 226.5 224 200 224H176C167.2 224 160 231.2 160 240V368zM288 224C279.2 224 272 231.2 272 240V368C272 ' +
5050
'376.8 279.2 384 288 384C296.8 384 304 376.8 304 368V320H336C344.8 320 352 312.8 352 304C352 295.2 344.8 288 336 ' +
5151
'288H304V256H336C344.8 256 352 248.8 352 240C352 231.2 344.8 224 336 224H288zM256 0L384 128H256V0z"></path></svg>';
52+
export const PasswordValidationIcon = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
53+
'<g clip-path="url(#clip0_3100_46162)">\n' +
54+
'<path d="M11.1733 13.8863C11.1733 13.8863 11.6942 13.8863 12.215 14.9974C12.215 14.9974 13.8694 12.2196 15.34 11.6641" stroke="#289694" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n' +
55+
'<path d="M14.1196 5.83203H14.1271" stroke="#289694" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n' +
56+
'<path d="M9.95264 5.83203H9.96014" stroke="#289694" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n' +
57+
'<path d="M5.78613 5.83203H5.79362" stroke="#289694" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n' +
58+
'<path d="M6.57644 9.97237H4.17354C2.78894 9.97237 1.6665 8.85308 1.6665 7.47237V4.16406C1.6665 2.78335 2.78894 1.66406 4.17354 1.66406H15.8261C17.2107 1.66406 18.3332 2.78335 18.3332 4.16406V7.60649" stroke="#289694" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>\n' +
59+
'<path d="M18.3328 13.332C18.3328 10.5706 16.088 8.33203 13.3188 8.33203C10.5496 8.33203 8.30469 10.5706 8.30469 13.332C8.30469 16.0934 10.5496 18.332 13.3188 18.332C16.088 18.332 18.3328 16.0934 18.3328 13.332Z" stroke="#289694" stroke-width="1.5" stroke-linecap="round"/>\n' +
60+
'</g>\n' +
61+
'<defs>\n' +
62+
'<clipPath id="clip0_3100_46162">\n' +
63+
'<rect width="20" height="20" fill="white"/>\n' +
64+
'</clipPath>\n' +
65+
'</defs>\n' +
66+
'</svg>\n';
67+
export const AndroidIcon = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
68+
'<path fill-rule="evenodd" clip-rule="evenodd" d="M7.86971 2.42777C8.50012 2.07567 9.22663 1.875 10 1.875C10.7734 1.875 11.4999 2.07567 12.1303 2.42777L12.5915 1.96653C12.7136 1.84449 12.9114 1.84449 13.0335 1.96653C13.1555 2.08857 13.1555 2.28643 13.0335 2.40847L12.6632 2.77872C13.7041 3.57849 14.375 4.83589 14.375 6.25H5.625C5.625 4.83589 6.29591 3.57849 7.33678 2.77872L6.96653 2.40847C6.84449 2.28643 6.84449 2.08857 6.96653 1.96653C7.08857 1.84449 7.28643 1.84449 7.40847 1.96653L7.86971 2.42777ZM8.75 4.375C8.75 4.72018 8.47018 5 8.125 5C7.77982 5 7.5 4.72018 7.5 4.375C7.5 4.02982 7.77982 3.75 8.125 3.75C8.47018 3.75 8.75 4.02982 8.75 4.375ZM11.875 5C12.2202 5 12.5 4.72018 12.5 4.375C12.5 4.02982 12.2202 3.75 11.875 3.75C11.5298 3.75 11.25 4.02982 11.25 4.375C11.25 4.72018 11.5298 5 11.875 5Z" fill="#7F868D"/>\n' +
69+
'<path d="M3.125 7.8125C3.125 7.29473 3.54473 6.875 4.0625 6.875C4.58027 6.875 5 7.29473 5 7.8125V11.5625C5 12.0803 4.58027 12.5 4.0625 12.5C3.54473 12.5 3.125 12.0803 3.125 11.5625V7.8125Z" fill="#7F868D"/>\n' +
70+
'<path d="M7.5 15V17.1875C7.5 17.7053 7.91973 18.125 8.4375 18.125C8.95527 18.125 9.375 17.7053 9.375 17.1875V15H10.625V17.1875C10.625 17.7053 11.0447 18.125 11.5625 18.125C12.0803 18.125 12.5 17.7053 12.5 17.1875V15H13.125C13.8154 15 14.375 14.4404 14.375 13.75V6.875H5.625V13.75C5.625 14.4404 6.18464 15 6.875 15H7.5Z" fill="#7F868D"/>\n' +
71+
'<path d="M15 7.8125C15 7.29473 15.4197 6.875 15.9375 6.875C16.4553 6.875 16.875 7.29473 16.875 7.8125V11.5625C16.875 12.0803 16.4553 12.5 15.9375 12.5C15.4197 12.5 15 12.0803 15 11.5625V7.8125Z" fill="#7F868D"/>\n' +
72+
'</svg>\n';
73+
export const iOSIcon = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
74+
'<path d="M18.75 10C18.75 14.83 14.8344 18.75 10 18.75C5.16562 18.75 1.25 14.83 1.25 10C1.25 5.16562 5.16562 1.25 10 1.25C14.8344 1.25 18.75 5.16562 18.75 10Z" fill="#7F868D"/>\n' +
75+
'<path d="M4.42873 13.0246H5.38441V8.59019H4.42873V13.0246ZM4.90465 8.0087C5.20019 8.0087 5.43815 7.7577 5.43815 7.44394C5.43815 7.12182 5.20019 6.875 4.90465 6.875C4.61296 6.875 4.375 7.12182 4.375 7.44394C4.375 7.7577 4.61296 8.0087 4.90465 8.0087Z" fill="white"/>\n' +
76+
'<path d="M8.72354 6.88755C7.10771 6.88755 6.09446 8.08819 6.09446 10.0084C6.09446 11.9285 7.10771 13.125 8.72354 13.125C10.3355 13.125 11.3488 11.9285 11.3488 10.0084C11.3488 8.08819 10.3355 6.88755 8.72354 6.88755ZM8.72354 7.8079C9.70992 7.8079 10.3394 8.66131 10.3394 10.0084C10.3394 11.3512 9.70992 12.2047 8.72354 12.2047C7.73331 12.2047 7.10771 11.3512 7.10771 10.0084C7.10771 8.66131 7.73331 7.8079 8.72354 7.8079Z" fill="white"/>\n' +
77+
'<path d="M11.913 11.3261C11.9552 12.4389 12.7919 13.125 14.0661 13.125C15.4056 13.125 16.25 12.4055 16.25 11.2592C16.25 10.3598 15.7741 9.85358 14.6495 9.57329L14.0124 9.41432C13.3331 9.23862 13.0529 9.00435 13.0529 8.60274C13.0529 8.10074 13.4751 7.76606 14.1007 7.76606C14.734 7.76606 15.1677 8.10492 15.2137 8.66968H16.1579C16.1349 7.6071 15.3289 6.88755 14.1084 6.88755C12.9032 6.88755 12.0473 7.61128 12.0473 8.68223C12.0473 9.54401 12.5309 10.0795 13.5518 10.3347L14.2696 10.5187C14.9681 10.6986 15.2521 10.9496 15.2521 11.3847C15.2521 11.8867 14.7877 12.2465 14.1199 12.2465C13.4444 12.2465 12.9339 11.8825 12.8725 11.3261H11.913Z" fill="white"/>\n' +
78+
'</svg>\n';

‎eform-client/src/app/modules/advanced/components/units/units-otp-code/units-otp-code.component.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<h3 mat-dialog-title>{{'Activate OTP code for' | translate}} : {{selectedUnitModel.microtingUid}}!</h3>
1+
<h1 mat-dialog-title class="align-items-center">
2+
<mat-icon class="text-warning">error</mat-icon>
3+
</h1>
24
<div mat-dialog-content>
3-
<h1 class="text-danger">{{'WARNING' | translate}}!</h1>
5+
<h1>{{'New OTP for' | translate}} #{{selectedUnitModel.microtingUid}}</h1>
46
<ul>
57
<li>{{ 'When pressing OK, you will deactivate the current device paired with this location' | translate }}.</li>
68
<li>{{ 'If there is data on the current device, this data will be lost after pressing OK' | translate }}</li>
@@ -9,16 +11,15 @@ <h1 class="text-danger">{{'WARNING' | translate}}!</h1>
911
</div>
1012
<div mat-dialog-actions class="d-flex flex-row justify-content-end">
1113
<button
12-
mat-raised-button
13-
color="warn"
14-
(click)="requestOtp()"
14+
class="btn-cancel"
15+
(click)="hide()"
1516
>
16-
{{'OK' | translate}}
17+
{{'Cancel' | translate}}
1718
</button>
1819
<button
19-
mat-raised-button
20-
(click)="hide()"
20+
class="btn-warning btn-primary--icon-left"
21+
(click)="requestOtp()"
2122
>
22-
{{'Cancel' | translate}}
23+
<span>{{'OK' | translate}}</span>
2324
</button>
2425
</div>

‎eform-client/src/app/modules/advanced/components/units/units.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
matTooltip="{{ 'Get OTP code' | translate }}"
3737
(click)="openModalUnitsOtpCode(row)"
3838
>
39-
<mat-icon>key</mat-icon>
39+
<mat-icon svgIcon="password-validation"></mat-icon>
4040
</button>
4141
</ng-container>
4242
</ng-template>

‎eform-client/src/app/modules/advanced/components/units/units.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import {Overlay} from '@angular/cdk/overlay';
1111
import { TranslateService } from '@ngx-translate/core';
1212
import {Store} from '@ngrx/store';
1313
import {selectCurrentUserClaimsSitesCreate} from 'src/app/state/auth/auth.selector';
14+
import {PasswordValidationIcon} from "src/app/common/const";
15+
import {MatIconRegistry} from "@angular/material/icon";
16+
import {DomSanitizer} from "@angular/platform-browser";
1417

1518
@Component({
1619
selector: 'app-units',
@@ -23,6 +26,8 @@ export class UnitsComponent implements OnInit {
2326
dialog = inject(MatDialog);
2427
private overlay = inject(Overlay);
2528
private translateService = inject(TranslateService);
29+
private iconRegistry = inject(MatIconRegistry);
30+
private sanitizer = inject(DomSanitizer);
2631

2732
@ViewChild('modalUnitsMove', {static: true}) modalUnitsMove;
2833
unitModels: Array<UnitDto> = [];
@@ -44,6 +49,7 @@ export class UnitsComponent implements OnInit {
4449
unitsOtpCodeComponentAfterClosedSub$: Subscription;
4550

4651
ngOnInit() {
52+
this.iconRegistry.addSvgIconLiteral('password-validation', this.sanitizer.bypassSecurityTrustHtml(PasswordValidationIcon));
4753
this.loadAllUnits();
4854
// this.getCurrentUserClaimsAsyncSub$ = this.authStateService.currentUserClaimsAsync.subscribe(x => {
4955
// if(x.sitesDelete || x.sitesUpdate) {

‎eform-client/src/app/modules/application-settings/components/admin-settings/admin-settings.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -278,15 +278,17 @@ <h4>
278278
<h4>{{ 'Languages' | translate }}</h4>
279279
</mat-card-header>
280280
<mat-card-content>
281-
<ng-container *ngFor="let language of languagesModel.languages">
282-
<p class="p-0 pb-2 m-0">
283-
<mat-checkbox
284-
[(ngModel)]="language.isActive"
285-
[ngModelOptions]="{standalone: true}">
286-
{{language.name}} ({{language.languageCode}})
287-
</mat-checkbox>
288-
</p>
289-
</ng-container>
281+
<div class="d-flex flex-wrap">
282+
<ng-container *ngFor="let language of languagesModel.languages">
283+
<p class="p-0 pb-2 m-0" style="width: 50%;">
284+
<mat-checkbox
285+
[(ngModel)]="language.isActive"
286+
[ngModelOptions]="{standalone: true}">
287+
{{language.name}} ({{language.languageCode}})
288+
</mat-checkbox>
289+
</p>
290+
</ng-container>
291+
</div>
290292
</mat-card-content>
291293
</mat-card>
292294
</div>

‎eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
matTooltip="{{ 'New OTP' | translate }}"
7070
(click)="openOtpModal(row)"
7171
>
72-
<mat-icon>key</mat-icon>
72+
<mat-icon svgIcon="password-validation"></mat-icon>
7373
</button>
7474
</ng-container>
7575
<ng-container *ngIf="!row.unitId"> N/A</ng-container>

‎eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ import {DeleteModalComponent} from 'src/app/common/modules/eform-shared/componen
1818
import {Store} from '@ngrx/store';
1919
import {selectCurrentUserClaimsDeviceUsersCreate} from 'src/app/state/auth/auth.selector';
2020
import {selectDeviceUsersFilters, selectDeviceUsersNameFilter} from "src/app/state/device-user/device-user.selector";
21+
import {MatIconRegistry} from "@angular/material/icon";
22+
import {DomSanitizer} from "@angular/platform-browser";
23+
import {PasswordValidationIcon} from "src/app/common/const";
2124

2225
@AutoUnsubscribe()
2326
@Component({
@@ -32,6 +35,8 @@ export class DeviceUsersPageComponent implements OnInit, OnDestroy {
3235
dialog = inject(MatDialog);
3336
private overlay = inject(Overlay);
3437
private translateService = inject(TranslateService);
38+
private iconRegistry = inject(MatIconRegistry);
39+
private sanitizer = inject(DomSanitizer);
3540

3641
sitesDto: Array<SiteDto>;
3742

@@ -60,6 +65,7 @@ export class DeviceUsersPageComponent implements OnInit, OnDestroy {
6065
private selectDeviceUsersNameFilter$ = this.authStore.select(selectDeviceUsersNameFilter);
6166

6267
ngOnInit() {
68+
this.iconRegistry.addSvgIconLiteral('password-validation', this.sanitizer.bypassSecurityTrustHtml(PasswordValidationIcon));
6369
this.getDeviceUsersFiltered();
6470
let actionsEnabled = false;
6571
this.selectCurrentUserClaimsDeviceUsersUpdate$.subscribe(x => {

‎eform-client/src/app/modules/device-users/components/new-otp-modal/new-otp-modal.component.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<h3 mat-dialog-title>{{'New OTP for' | translate}} {{selectedSimpleSite.unitId}}</h3>
1+
<h1 mat-dialog-title class="align-items-center">
2+
<mat-icon class="text-warning">error</mat-icon>
3+
</h1>
24
<div mat-dialog-content>
3-
<h1 class="text-danger">{{'WARNING' | translate}}!</h1>
5+
<h1>{{'New OTP for' | translate}} #{{selectedSimpleSite.unitId}}</h1>
46
<ul>
57
<li>{{ 'When pressing OK, you will deactivate the current device paired with this location' | translate }}.</li>
68
<li>{{ 'If there is data on the current device, this data will be lost after pressing OK' | translate }}</li>
@@ -9,16 +11,15 @@ <h1 class="text-danger">{{'WARNING' | translate}}!</h1>
911
</div>
1012
<div mat-dialog-actions class="d-flex flex-row justify-content-end">
1113
<button
12-
mat-raised-button
13-
color="warn"
14-
(click)="requestOtp()"
14+
class="btn-cancel"
15+
(click)="hide()"
1516
>
16-
{{'OK' | translate}}
17+
{{'Cancel' | translate}}
1718
</button>
1819
<button
19-
mat-raised-button
20-
(click)="hide()"
20+
class="btn-warning btn-primary--icon-left"
21+
(click)="requestOtp()"
2122
>
22-
{{'Cancel' | translate}}
23+
<span>{{'OK' | translate}}</span>
2324
</button>
2425
</div>

‎eform-client/src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet">
1717
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600&display=swap" rel="stylesheet">
1818
<link rel="preconnect" href="https://fonts.gstatic.com">
19+
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
1920
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
2021
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2122
</head>

‎eform-client/src/scss/styles.scss‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ body, .theme-light {
5858
--tp-th-bg: #f7f9fa;
5959
--tp-border: #EBEFF2;
6060
--tp-text: #111827;
61-
--tp-white-text: black;
61+
--tp-white-text: #0F1316;
6262
--border: #{$border-light};
6363
--icon-secondary: #{$icon-secondary-light};
6464
--bg: #{$bg-light};
@@ -452,7 +452,6 @@ ngx-material-timepicker-container {
452452
align-items: center;
453453
}
454454
span {
455-
font-family: var(--font-family);
456455
font-size: var(--Text-size-sm, 14px);
457456
font-style: normal;
458457
font-weight: 600;
@@ -507,7 +506,6 @@ ngx-material-timepicker-container {
507506
color: var(--text-header);
508507
cursor: pointer;
509508

510-
font-family: var(--font-family);
511509
font-size: var(--Text-size-sm, 14px);
512510
font-style: normal;
513511
font-weight: 600;
@@ -537,7 +535,6 @@ ngx-material-timepicker-container {
537535
cursor: pointer;
538536
border: unset;
539537

540-
font-family: var(--font-family);
541538
font-size: var(--Text-size-sm, 14px);
542539
font-style: normal;
543540
font-weight: 600;
@@ -566,7 +563,34 @@ ngx-material-timepicker-container {
566563
cursor: pointer;
567564
border: unset;
568565

569-
font-family: var(--font-family);
566+
font-size: var(--Text-size-sm, 14px);
567+
font-style: normal;
568+
font-weight: 600;
569+
line-height: var(--Text-line-height-sm, 22px); /* 157.143% */
570+
571+
&:disabled,
572+
&[disabled] {
573+
background-color: var(--border) !important;
574+
color: var(--tp-text) !important;
575+
opacity: 0.5;
576+
cursor: not-allowed !important;
577+
pointer-events: none;
578+
}
579+
}
580+
581+
.warning-btn {
582+
display: flex;
583+
height: 48px;
584+
padding: var(--312-px, 12px) var(--832-px, 32px);
585+
justify-content: center;
586+
align-items: center;
587+
gap: var(--156-px, 6px);
588+
border-radius: var(--rounded-full);
589+
background: var(--warning);
590+
color: var(--btn-delete-text);
591+
cursor: pointer;
592+
border: unset;
593+
570594
font-size: var(--Text-size-sm, 14px);
571595
font-style: normal;
572596
font-weight: 600;
@@ -593,7 +617,6 @@ ngx-material-timepicker-container {
593617
box-shadow: unset!important;
594618
h2{
595619
color: var(--text-header, #0F1316);
596-
font-family: var(--font-family, "Nunito Sans");
597620
font-size: var(--Header-size-md, 24px);
598621
font-style: normal;
599622
font-weight: 600;
@@ -669,7 +692,6 @@ ngx-material-timepicker-container {
669692

670693
a{
671694
color: var(--text-header, #0F1316);
672-
font-family: var(--font-family, "Nunito Sans");
673695
font-size: var(--Text-size-sm, 14px);
674696
font-style: normal;
675697
font-weight: 600;
@@ -678,7 +700,6 @@ ngx-material-timepicker-container {
678700

679701
.nav-link{
680702
color: var(--text-header, #0F1316);
681-
font-family: var(--font-family, "Nunito Sans");
682703
font-size: var(--Text-size-sm, 14px);
683704
font-style: normal;
684705
font-weight: 600;
@@ -715,7 +736,6 @@ ngx-material-timepicker-container {
715736
th{
716737
border-color: var(--border) !important;
717738
color: var(--text-header, #0F1316);
718-
font-family: var(--font-family, "Nunito Sans");
719739
font-size: var(--Text-size-sm, 14px);
720740
font-style: normal;
721741
font-weight: 600;
@@ -731,7 +751,6 @@ ngx-material-timepicker-container {
731751
td{
732752
border-color: var(--border) !important;
733753
color: var(--text-body);
734-
font-family: var(--font-family, "Nunito Sans");
735754
font-size: var(--Text-size-sm, 14px);
736755
font-style: normal;
737756
font-weight: 500;
@@ -751,7 +770,6 @@ ngx-material-timepicker-container {
751770
}
752771
.mat-mdc-paginator-container, .mat-mdc-select-value-text, .mat-mdc-select-arrow svg{
753772
color: var(--text-header, #0F1316);
754-
font-family: var(--font-family, "Nunito Sans");
755773
font-size: var(--Text-size-sm, 14px);
756774
font-style: normal;
757775
font-weight: 500;
@@ -781,4 +799,6 @@ ngx-material-timepicker-container {
781799

782800
.mat-mdc-card{
783801
box-shadow: unset !important;
802+
border: 1px solid var(--border) !important;
803+
//border-color: var(--border) !important;
784804
}

0 commit comments

Comments
 (0)