UI/UX enhancment

zohaib-huawei-q2
enadhilal 5 years ago
parent 782ed41226
commit 94af746ae2

@ -67,17 +67,6 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item (click)="openAnnouncement()">
<ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 25px !important;" src="../assets/imgs/bell.png" item-left>
</ion-thumbnail>
<ion-label class="changepassword" >
{{ts.trPK('login','announcement')}}
<ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
</ion-label>
</ion-item>
</ion-list> </ion-list>
<div class="" style="text-align:center"> <div class="" style="text-align:center">
@ -159,17 +148,6 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item (click)="openAnnouncement()">
<ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 25px !important;" src="../assets/imgs/ID_ico_menu.png" item-left>
</ion-thumbnail>
<ion-label class="changepassword" >
{{ts.trPK('login','announcement')}}
<ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
</ion-label>
</ion-item>
<!-- <ion-item (click)="profile()"> <!-- <ion-item (click)="profile()">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-thumbnail slot="start" class="menu-thumb">
<img width="30" src="../assets/imgs/profile_icon.png" item-left> <img width="30" src="../assets/imgs/profile_icon.png" item-left>

@ -250,9 +250,4 @@ export class AppComponent implements OnInit {
} else {} } else {}
}); });
} }
public openAnnouncement(){
this.cs.openAnnouncement();
this.menu.toggle();
}
} }

@ -3,11 +3,13 @@
[headerText]="'login,announcement' | translate"> [headerText]="'login,announcement' | translate">
</app-generic-header> </app-generic-header>
<ion-content> <ion-content style="--background:#F4F4F4;">
<ion-searchbar (ionInput)="filterList($event)"></ion-searchbar> <ion-searchbar (ionInput)="filterList($event)" style="--background: white"></ion-searchbar>
<ion-list> <ion-list style="background: #f4f4f4;">
<div *ngFor="let item of arrList; let i = index"> <div *ngFor="let item of arrList; let i = index"
<ion-card *ngIf="i === 0 && !item.isOpen" (click)="toggleAnnouncement(item)"> [ngClass]="i>0 && !item.Open ? 'class-dev-close': 'class-dev-open'"
style="background: white; margin: 20px; padding: 0px;">
<ion-card *ngIf="i === 0 && !item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<img [src]="item.img" class="image-center"> <img [src]="item.img" class="image-center">
<ion-item> <ion-item>
<ion-label> <ion-label>
@ -18,19 +20,20 @@
</ion-item> </ion-item>
</ion-card> </ion-card>
<ion-card *ngIf="i === 0 && item.isOpen" (click)="toggleAnnouncement(item)"> <ion-card *ngIf="i === 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<ion-card-header style="background: transparent;"> <ion-card-header style="background: transparent;">
<ion-card-title style="font-size: 20px; margin: 5px;">{{item.title}} <br>
<p style="font-size: 12px; color: gray;">{{item.date}}</p>
</ion-card-title>
<img [src]="item.img" class="image-center"> <img [src]="item.img" class="image-center">
<ion-card-title>{{item.title}}</ion-card-title>
</ion-card-header> </ion-card-header>
<ion-card-content> <ion-card-content>
{{item.body}}<br> <p>{{item.body}}</p>
{{item.date}}
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>
<ion-item *ngIf="i > 0 && !item.isOpen" (click)="toggleAnnouncement(item)"> <ion-item *ngIf="i > 0 && !item.isOpen" (click)="toggleAnnouncement(item)" lines='none'
style="border: 1px solid lightgray; border-radius: 30px; height: 100px;">
<img [src]="item.img" style="width: 30%;"> <img [src]="item.img" style="width: 30%;">
<ion-label style="margin: 5px;"> <ion-label style="margin: 5px;">
<h2>{{item.title}}</h2> <h2>{{item.title}}</h2>
@ -39,13 +42,16 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-card *ngIf="i > 0 && item.isOpen" (click)="toggleAnnouncement(item)"> <ion-card *ngIf="i > 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<img [src]="item.img" class="image-center"> <ion-card-header style="background: transparent;">
<ion-label> <ion-card-title style="font-size: 20px; margin: 5px;">{{item.title}} <br>
<h2 class="text-style">{{item.title}}</h2> <p style="font-size: 12px; color: gray;">{{item.date}}</p>
<p class="text-style">{{item.body}}</p> </ion-card-title>
<p class="text-style">{{item.date}}</p> <img [src]="item.img" class="image-center">
</ion-label> </ion-card-header>
<ion-card-content>
<p>{{item.body}}</p>
</ion-card-content>
</ion-card> </ion-card>
</div> </div>
</ion-list> </ion-list>

@ -7,3 +7,16 @@
.text-style{ .text-style{
margin: 5px; margin: 5px;
} }
.class-dev-close{
border: 1px solid lightgray;
border-radius: 30px;
}
.class-dev-open{}
.class-item-open{
border: 1px solid lightgray;
border-radius: 30px;
height: 100px;
}
.class-item-close{}

@ -19,7 +19,7 @@ export class AnnouncementComponent implements OnInit {
{ {
title:"External Visit", title:"External Visit",
body:"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).", body:"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
img:"../assets/imgs/IDTOP.png", img:"../assets/imgs/M.png",
date: this.dt, date: this.dt,
isopen: false isopen: false
}, },
@ -53,6 +53,8 @@ export class AnnouncementComponent implements OnInit {
this.arrList.forEach(element => { this.arrList.forEach(element => {
if(element.title === item.title){ if(element.title === item.title){
element.isOpen = !element.isOpen; element.isOpen = !element.isOpen;
}else{
element.isOpen = false;
} }
}); });
} }

@ -63,6 +63,8 @@
</app-services-button> </app-services-button>
<app-services-button (click)="offersDiscount()" title="Offers & Discount" > <app-services-button (click)="offersDiscount()" title="Offers & Discount" >
</app-services-button> </app-services-button>
<app-services-button (click)="openAnnouncement()" title="Announcemnt" >
</app-services-button>
</ion-slide> </ion-slide>
</ion-slides> </ion-slides>
</ion-grid> </ion-grid>

@ -788,4 +788,7 @@ export class HomePage implements OnInit {
offersDiscount() { offersDiscount() {
this.common.navigateForward('/offersdiscount/home'); this.common.navigateForward('/offersdiscount/home');
} }
openAnnouncement(){
this.common.openAnnouncement();
}
} }

Loading…
Cancel
Save