design fixes share

MOE_DEV_NEW_TEMPORARY_DESIGN
Sultan Khan 5 years ago
parent f9576048a0
commit a707c46952

@ -48,6 +48,7 @@
"@ionic-native/native-storage": "^5.17.0",
"@ionic-native/nfc": "^5.30.0",
"@ionic-native/open-native-settings": "^5.14.0",
"@ionic-native/social-sharing": "^5.34.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/sqlite": "^5.18.0",
"@ionic-native/status-bar": "^5.0.0",
@ -94,6 +95,7 @@
"cordova-plugin-themeablebrowser": "^0.2.18",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-wifiwizard2": "^3.1.1",
"cordova-plugin-x-socialsharing": "^6.0.3",
"cordova-sqlite-storage": "^3.4.0",
"cordova-support-google-services": "^1.3.2",
"cordova.plugins.diagnostic": "^5.0.1",
@ -215,11 +217,12 @@
"GOOGLE_PLAY_SERVICES_VERSION": "+"
},
"phonegap-nfc": {},
"wifiwizard2": {}
"wifiwizard2": {},
"cordova-plugin-x-socialsharing": {}
},
"platforms": [
"android",
"ios"
]
}
}
}

@ -193,6 +193,7 @@ margin-bottom: 70px;
margin: 1px;
border-radius: 15px;
background: #fff;
height: 115px;
}
.sale-icon ion-icon{
@ -202,7 +203,7 @@ margin-bottom: 70px;
margin-top:5px;
margin-top: 5px;
margin-bottom: 0;
font-size: 12px;
font-size: 14px;
font-weight: bold;
}
.add-details{

@ -66,7 +66,7 @@
<div class="box-icon">
<div class="sale-icon">
<div class="top">
<img src="assets/imgs/itemsforsale/electronic appliances.svg">
<img src="assets/imgs/itemsforsale/electronic_appliances.svg">
</div>
<div class="bottom-icon">
<p>Electronic Appliance</p>
@ -76,7 +76,7 @@
<div class="box-icon">
<div class="sale-icon">
<div class="top">
<img src="assets/imgs/itemsforsale/electronic appliances.svg">
<img src="assets/imgs/itemsforsale/fashion.svg">
</div>
<div class="bottom-icon">
<p>Fashion & Beauty</p>

@ -177,4 +177,7 @@ ion-card-content{
}
.details-text{
white-space: normal;
}
}
ion-card-content ion-icon{
font-size: 25px;
}

@ -363,7 +363,7 @@
<ion-col size="4">
<img class="req_info" src="assets/imgs/req info.svg"
(click)="openRequestInfoDel(actionHistory, 'REQUEST_INFO')" />
<img class="req_info" src="assets/imgs/delegate.svg"
<img class="req_info deligate" src="assets/imgs/delegate.svg"
(click)="openRequestInfoDel(actionHistory, 'DELEGATE')" />
</ion-col>

@ -100,13 +100,15 @@
text-align: left;
}
.req_info{
width: 20px;
height: 20px;
width: 25px;
height: 25px;
display: inline-block;
margin: 15px 10px 0px 0px;
margin: 0;
}
.deligate{
margin-left:10px;
}
.actionBtn{
--border-radius: 50% !important;
height: 55px;

@ -0,0 +1,32 @@
<app-generic-header
showImage="false"
showBack="false"
navigate="false"
backlink="false"
[headerText]="'general,filter-offers' | translate" (onBackClick)="closeModal()">
</app-generic-header>
<ion-content>
<div class="container-icon" *ngIf="categories.length>0">
<ion-item *ngFor="let key of categories" (click)="filterOffers(key)" [ngClass]="{'active':activeClass==key.name }">
<ion-label>
{{key.name}}
</ion-label>
<ion-thumbnail slot="start">
<img [src]="key.icon">
</ion-thumbnail>
</ion-item>
</div>
<ion-footer >
<div class="centerDiv">
<ion-button class="footer-button" ion-button (click)="applyFilters()">
{{ts.trPK('general','apply-filters')}} </ion-button>
</div>
</ion-footer>
</ion-content>

@ -0,0 +1,33 @@
ion-label{
font-size: 14px !important;
}
ion-thumbnail img{
width: 40px;
height: 40px;
margin: 10px;
}
.active::before{
position: absolute;
right: 10px;
top: 15px;
padding: 0px;
background: #3cc353;
padding: 3px 2px 2px 3px;
border-radius: 60%;
font-size: 12px;
color: #fff;
content: '';
width: 20px;
height: 20px;
text-align: center;
z-index: 2;
}
.footer-button{
background: var(--newgreen)!important;border-radius: 10px; --background: transparent;
width: 80%;
}
ion-footer{
position: fixed;
bottom: 0;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FilterComponent } from './filter.component';
describe('FilterComponent', () => {
let component: FilterComponent;
let fixture: ComponentFixture<FilterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FilterComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FilterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,101 @@
import { AfterViewInit, Component, OnInit } from '@angular/core';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { OfferDiscountService } from '../services/service';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.scss'],
})
export class FilterComponent implements AfterViewInit {
segment: any = '1';
categoriesObj: any;
categories: any = [];
offersData: any = [];
activeClass: any;
tempSearch: any = [];
searchText: String;
public activeKey = {}
constructor(public ts: TranslatorService, public modalController: ModalController, public cs: CommonService, public offersService: OfferDiscountService) { }
ngAfterViewInit(): void {
this.getOfferDiscount();
}
openDetails(offer) {
this.cs.sharedService.setSharedData(offer, OfferDiscountService.selected_offers);
var related = this.offersData.filter((res) => res.rowID != offer.rowID);
this.cs.sharedService.setSharedData(related, OfferDiscountService.related_offers);
this.cs.navigateForward('/offersdiscount/offer-details');
}
getOfferDiscount() {
this.cs.startLoading();
this.offersService.getOffers({}, () => { }, this.ts.trPK('general', 'retry')).subscribe((res) => {
var data = JSON.parse(res['Mohemm_ITG_ResponseItem']);
this.cs.stopLoading();
if (data['result'])
this.displayOffers(data['result']);
});
}
displayOffers(data) {
if (data['data']) {
var parseJSON = data['data'];
var offers = JSON.parse(parseJSON)
this.categoriesObj = this.groupBy(offers, TranslatorService.getCurrentDirection() == 'ltr' ? 'categoryName_en' : 'categoryName_ar');
// = Object.keys(this.categoriesObj);
for (var x in this.categoriesObj) {
for (var y in offers) {
if (x == offers[y].categoryName_en && this.categories.filter(item => item.name.includes(x)) == false) {
this.categories.push({
name: x,
icon: offers[y].icon
})
}
}
}
this.filterOffers(this.categories[0]);
}
}
groupBy(xs, key) {
return xs.reduce((rv, x) => {
(rv[x[key.trim()]] = rv[x[key]] || []).push(x);
return rv
}, {});
};
filterOffers(key) {
this.activeKey = key;
this.activeClass = key.name;
this.offersData = this.categoriesObj[key.name];
this.tempSearch = JSON.parse(JSON.stringify(this.offersData));
}
checkDate(date) {
return new Date(date) >= new Date()
}
getDotted(temp) {
return temp.substring(0, 60) + " ...";
}
search(t) {
this.offersData = this.tempSearch.filter((post, index) => {
if (post.Title.toLowerCase().indexOf(t.toLowerCase()) > -1)
return true;
});
}
applyFilters() {
this.cs.sharedService.setSharedData(this.activeKey, OfferDiscountService.selected_filters);
this.cs.back();
}
}

@ -25,8 +25,8 @@
<ion-col size="10">
<p class="filterText"> {{ts.trPK('itemforsale','browse-categories')}}</p>
</ion-col>
<ion-col size="2">
<img src="assets/imgs/itemsforsale/filter.svg">
<ion-col size="2" (click)="openModel()">
<img class='filter' src="assets/imgs/itemsforsale/filter.svg">
</ion-col>
</ion-row>
</ion-grid>
@ -70,7 +70,7 @@
<p class="offer-valid"> {{ts.trPK('general','expired')}}</p>
</ion-col>
<ion-col size="2" *ngIf="checkDate(item['End Date']) ==false">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-icon name="arrow-round-forward" class="arrow-icon"></ion-icon>
</ion-col>
</ion-row>

@ -20,44 +20,44 @@
.SearchtextBox{
margin: 10px;
border-radius: 20px;
--border-radius: 25px;
}
.filterText{
margin: 5px 15px 5px;
font-size: 18px;
font-size: 16px;
font-weight: bold;
}
.container-icon{
padding: 0 10px 0px;
position: relative;
white-space:nowrap;
overflow-x:auto;
padding: 0 10px 10px;
position: relative;
white-space: nowrap;
overflow-x: auto;
}
.box-icon{
width:90px;
height: 90px;
// height: 90px;
margin: 0px;
display: inline-block;
}
.sale-icon{
box-shadow: 1px 1px 5px 1px #cccc;
padding: 0px;
margin: 3px;
border-radius: 8px;
padding: 5px;
margin: 5px;
border-radius: 10px;
background: #fff;
position: relative;
}
.sale-icon ion-icon{
font-size: 25px;
}
.sale-icon p{
margin-top: 5px;
margin-top: 0px;
margin-bottom: 5px;
text-transform: capitalize;
font-size: 17px;
text-align: center;
font-size: 14px;
text-align: left;
}
.bottom-icon{
text-overflow: clip;
@ -66,39 +66,26 @@
padding:1px;
font-weight: bold;
}
ion-card{
margin:5px;
}
ion-card-header{
background: #fff;
}
ion-card-header img{
margin: 15px auto;
height: 85px;
}
.dark{
display: block;
margin: 2px;
font-size: 15px;
font-weight: bold;
border-radius: 6px;
height: 150px;
}
ion-card-title{
font-weight: bold;
font-size: 18px;
}
ion-card-content{
padding: 5px;
}
.orange{
color: orange;
}
.red{
color:rgb(172, 9, 9)
}
.green{
color:#00AE4D;
color:#1FA169;
font-weight: bold;
}
ion-segment-button ion-label{
padding: 0;
@ -139,10 +126,10 @@ margin: 5px;
.active .top::before{
position: absolute;
right: 0px;
top: -3px;
top: 2px;
padding: 0px;
background: #3cc353;
padding:2px 3px 4px 3px;
padding: 2px 3px 4px 3px;
border-radius: 60%;
font-size: 10px;
color: #fff;
@ -151,12 +138,42 @@ margin: 5px;
height: 12px;
text-align: center;
}
ion-content{
--background:#F5F5F5 ;
}
.top{
text-align: center;
text-align: left;
position: relative;
}
.top img{
height:40px
height: 35px;
margin: 5px 5px 0px 5px;
}
.filter{
position: absolute;
right: 20px;
}
ion-card-content{
padding: 0 15px 0px 15px;
}
ion-card{
margin: 0px;
--background: #fff;
--border-radius: 53px;
border-radius: 10px;
}
.red{
color: #de1717;
font-weight: bold;
margin-left: -5px;
}
.arrow-icon{
margin-top: 0px;
font-size: 25px;
color: #0298df;
}
ion-card-content strong{
font-size: 14px;
}

@ -1,7 +1,10 @@
import { AfterViewInit, Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ModalController } from '@ionic/angular';
import { connectableObservableDescriptor } from 'rxjs/internal/observable/ConnectableObservable';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { FilterComponent } from '../filter/filter.component';
import { OfferDiscountService } from '../services/service';
@Component({
@ -17,14 +20,25 @@ export class HomeComponent implements AfterViewInit {
activeClass: any;
tempSearch: any = [];
searchText: String;
constructor(public ts: TranslatorService, public cs: CommonService, public offersService: OfferDiscountService) { }
constructor(public ts: TranslatorService, public modalController: ModalController, public cs: CommonService, public offersService: OfferDiscountService, public route: ActivatedRoute) {
this.route
.params.subscribe(val => {
setTimeout(() => {
this.ionEnter();
}, 100);
});
}
ngAfterViewInit(): void {
this.getOfferDiscount();
}
ionEnter() {
let activeClass = this.cs.sharedService.getSharedData(OfferDiscountService.selected_filters);
if (activeClass) {
this.filterOffers(activeClass);
}
}
openDetails(offer) {
this.cs.sharedService.setSharedData(offer, OfferDiscountService.selected_offers);
@ -93,4 +107,13 @@ export class HomeComponent implements AfterViewInit {
});
}
async openModel() {
// const modal = await this.modalController.create({
// component: FilterComponent,
// });
// modal.cssClass = "filter-modal"
// modal.present();
this.cs.navigateForward('/offersdiscount/filter-page');
}
}

@ -35,7 +35,16 @@
</ion-row>
<h1> {{details.Discount}} {{ts.trPK('general','discount')}}</h1>
<ion-row>
<ion-col size="10">
<h1> {{details.Discount}} {{ts.trPK('general','discount')}}</h1>
</ion-col>
<ion-col size="2">
<div class="right-align">
<ion-icon name="share" class="share-icon" (click)="share()"></ion-icon>
</div>
</ion-col>
</ion-row>
</div>
@ -49,7 +58,7 @@
{{ts.trPK('itemforsale','related-offers')}}
</strong>
</p>
<ion-row *ngIf="related">
<ion-row *ngIf="related" class="related-offers-container">
<ion-col size="6" *ngFor="let item of related">
<ion-card class="related-card">
<ion-card-header>
@ -63,6 +72,7 @@
<strong class="dark">
{{item.Discount}} {{ts.trPK('general','discount')}}
</strong>
<ion-row [class]="checkDate(item['End Date']) ==true ? 'green' : 'red'">
<ion-col size="10" *ngIf="checkDate(item['End Date']) ==true">
<p class="offer-valid">{{ts.trPK('general','offer-valid')}}</p>
@ -71,7 +81,7 @@
<p class="offer-valid"> {{ts.trPK('general','expired')}}</p>
</ion-col>
<ion-col size="2" *ngIf="checkDate(item['End Date']) ==false">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-icon name="arrow-round-forward" class="arrow-icon"></ion-icon>
</ion-col>
</ion-row>

@ -12,7 +12,7 @@ export class OfferDetailsComponent implements OnInit {
public details: any;
public direction: String;
public related: any;
constructor(public ts: TranslatorService, public cs: CommonService, public offersService: OfferDiscountService) { }
constructor(public ts: TranslatorService, private socialSharing: SocialSharing, public cs: CommonService, public offersService: OfferDiscountService) { }
ngOnInit() {
this.direction = TranslatorService.getCurrentDirection();
@ -26,4 +26,7 @@ export class OfferDetailsComponent implements OnInit {
getDotted(temp) {
return temp.substring(0, 75) + " ...";
}
share() {
this.socialSharing.share(this.details.Description, this.details.Title, this.details.Banner_Image)
}
}

@ -10,6 +10,7 @@ import { HomeComponent } from './home/home.component';
import { OfferDetailsComponent } from './offer-details/offer-details.component';
import { HmgCommonModule } from '../hmg-common/hmg-common.module';
import { OfferDiscountService } from './services/service';
import { FilterComponent } from './filter/filter.component';
const routes: Routes = [
@ -25,6 +26,10 @@ const routes: Routes = [
path: 'offer-details',
component: OfferDetailsComponent
},
{
path: 'filter-page',
component: FilterComponent
},
],
}
];
@ -39,7 +44,8 @@ const routes: Routes = [
HmgCommonModule,
RouterModule.forChild(routes)
],
declarations: [OffersdiscountPage, HomeComponent, OfferDetailsComponent],
declarations: [OffersdiscountPage, HomeComponent, OfferDetailsComponent, FilterComponent],
entryComponents: [FilterComponent],
providers: [OfferDiscountService]
})
export class OffersdiscountPageModule { }

@ -11,6 +11,7 @@ export class OfferDiscountService {
public static getSuborinateStatus = 'Services/ERP.svc/REST/GET_SUBORDINATES_ATTD_STATUS';
public static selected_offers = 'selected-offers';
public static related_offers = 'related-offers';
public static selected_filters = 'selected-filters';
constructor(
public con: ConnectorService,
private authService: AuthenticationService,

@ -225,6 +225,14 @@
"en": "Offers & Discount",
"ar": "العروض والخصومات"
},
"filter-offers": {
"en": "Filter Offers & Discounts",
"ar": "تصفية العروض والخصومات"
},
"apply-filters": {
"en": "Apply Filters",
"ar": "تطبيق المرشحات"
},
"discount": {
"en": "Discount",
"ar": "خصم"

@ -1586,3 +1586,6 @@ ion-segment-button {
width: 75%;
margin: auto;
}
.filter-modal .modal-wrapper{
border-radius: 0px !important;
}
Loading…
Cancel
Save