UI/UX enhancment

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

@ -66,17 +66,6 @@
<ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
</ion-label>
</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>
@ -158,17 +147,6 @@
<ion-badge class="start-badge main-badge" slot="end" color="danger">{{notBadge}}</ion-badge>
</ion-label>
</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-thumbnail slot="start" class="menu-thumb">

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

@ -3,11 +3,13 @@
[headerText]="'login,announcement' | translate">
</app-generic-header>
<ion-content>
<ion-searchbar (ionInput)="filterList($event)"></ion-searchbar>
<ion-list>
<div *ngFor="let item of arrList; let i = index">
<ion-card *ngIf="i === 0 && !item.isOpen" (click)="toggleAnnouncement(item)">
<ion-content style="--background:#F4F4F4;">
<ion-searchbar (ionInput)="filterList($event)" style="--background: white"></ion-searchbar>
<ion-list style="background: #f4f4f4;">
<div *ngFor="let item of arrList; let i = index"
[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">
<ion-item>
<ion-label>
@ -18,19 +20,20 @@
</ion-item>
</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-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">
<ion-card-title>{{item.title}}</ion-card-title>
</ion-card-header>
<ion-card-content>
{{item.body}}<br>
{{item.date}}
<p>{{item.body}}</p>
</ion-card-content>
</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%;">
<ion-label style="margin: 5px;">
<h2>{{item.title}}</h2>
@ -39,13 +42,16 @@
</ion-label>
</ion-item>
<ion-card *ngIf="i > 0 && item.isOpen" (click)="toggleAnnouncement(item)">
<img [src]="item.img" class="image-center">
<ion-label>
<h2 class="text-style">{{item.title}}</h2>
<p class="text-style">{{item.body}}</p>
<p class="text-style">{{item.date}}</p>
</ion-label>
<ion-card *ngIf="i > 0 && item.isOpen" (click)="toggleAnnouncement(item)" style="margin: 0px;">
<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">
</ion-card-header>
<ion-card-content>
<p>{{item.body}}</p>
</ion-card-content>
</ion-card>
</div>
</ion-list>

@ -6,4 +6,17 @@
}
.text-style{
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",
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,
isopen: false
},
@ -53,6 +53,8 @@ export class AnnouncementComponent implements OnInit {
this.arrList.forEach(element => {
if(element.title === item.title){
element.isOpen = !element.isOpen;
}else{
element.isOpen = false;
}
});
}

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

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

Loading…
Cancel
Save