From 24269fa4d5aa3cda94620fc4cff23674a58e5492 Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Fri, 5 Mar 2021 14:54:10 +0100 Subject: [PATCH] Add search in header --- src/app/pages/search/search.page.html | 8 ++++---- src/app/pages/search/search.page.ts | 7 +++++++ src/app/shared/header/header.page.html | 18 +++++++++++++++-- src/app/shared/header/header.page.scss | 22 ++++++++++++++++++++ src/app/shared/header/header.page.ts | 28 +++++++++++++++++++++++--- src/global.scss | 14 +++++++++++++ src/style/main.scss | 19 +++++++++++++++++ 7 files changed, 107 insertions(+), 9 deletions(-) diff --git a/src/app/pages/search/search.page.html b/src/app/pages/search/search.page.html index d0251c0f4..417ece95a 100644 --- a/src/app/pages/search/search.page.html +++ b/src/app/pages/search/search.page.html @@ -4,7 +4,7 @@
-
+
@@ -30,7 +30,7 @@
-
+
  • @@ -101,13 +101,13 @@
    -

    Palavras mais pesquisadas

    -
    +
    diff --git a/src/app/pages/search/search.page.ts b/src/app/pages/search/search.page.ts index c19572d3e..d0aed5e1f 100644 --- a/src/app/pages/search/search.page.ts +++ b/src/app/pages/search/search.page.ts @@ -64,6 +64,13 @@ export class SearchPage implements OnInit { this.windowWidth = window.innerWidth + window['dynamicSearch'] = (search:string) =>{ + this.searchSubject = search; + } + window['searchTriger'] = () =>{ + this.basicSearch(); + } + } wordCloud(){ diff --git a/src/app/shared/header/header.page.html b/src/app/shared/header/header.page.html index 34e1a1ab2..cc80d9061 100644 --- a/src/app/shared/header/header.page.html +++ b/src/app/shared/header/header.page.html @@ -52,8 +52,22 @@
    -
    - +
    + + + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    diff --git a/src/app/shared/header/header.page.scss b/src/app/shared/header/header.page.scss index fa2a8c031..45668c108 100644 --- a/src/app/shared/header/header.page.scss +++ b/src/app/shared/header/header.page.scss @@ -40,4 +40,26 @@ .active{ border-top: 7px solid white; +} + + +.search-input-container{ + background-color: white; + border-radius: 27.5px; + border: solid 1px #ebebeb; + .icon{ + color: #797979; + width: 45px; + height: 45px; + display: flex; + justify-content: center; + font-size: 25px; + align-items: center; + } + .input-text{ + width: 100%; + } + .icon-z{ + width: 20px; + } } \ No newline at end of file diff --git a/src/app/shared/header/header.page.ts b/src/app/shared/header/header.page.ts index ecbbf27fa..7457655b9 100644 --- a/src/app/shared/header/header.page.ts +++ b/src/app/shared/header/header.page.ts @@ -12,6 +12,8 @@ import { ProfileComponent } from '../headers/header-no-search/profile/profile.co export class HeaderPage implements OnInit { profile: string = 'mdgpr'; + searchSubject: string = ''; + showSearch:false; constructor( private router: Router,private modalController: ModalController, @@ -33,7 +35,7 @@ export class HeaderPage implements OnInit { async openSearch() { const modal = await this.modalController.create({ component: SearchPage, - cssClass: 'group-messages modal-desktop', + cssClass: 'group-messages modal-desktop search-modal search-modal-to-desktop', componentProps: { } }); @@ -45,7 +47,6 @@ export class HeaderPage implements OnInit { } - async openProfile() { const enterAnimation = (baseEl: any) => { @@ -83,5 +84,26 @@ export class HeaderPage implements OnInit { return await modal.present(); } -} + async dynamicSearch(){ + console.log('dynamic') + window['dynamicSearch'](this.searchSubject) + } + + async closeSearch(){ + document.querySelectorAll('.search-modal').forEach((e)=>e.remove()) + + } + + /** + * @description set empty value to searchSubject + */ + clearSearchInput(){ + this.searchSubject = ""; + window['dynamicSearch'](this.searchSubject) + } + + async basicSearch(){ + window['searchTriger']() + } +} \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index f610c7dbc..fad48c493 100644 --- a/src/global.scss +++ b/src/global.scss @@ -339,3 +339,17 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent- } } + +.search-modal-to-desktop{ + padding-top: 0px; + top: 75px; + .modal-wrapper{ + transform: none !important; + width: 100%; + height: 100%; + box-shadow: none !important; + .ion-page { + transform: none !important; + } + } +} \ No newline at end of file diff --git a/src/style/main.scss b/src/style/main.scss index 566e8e627..c124b2278 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -313,12 +313,22 @@ .m-auto {margin: 0 auto;} .text-bold {font-weight: 700;} +.text-bold {font-weight: 700;} + .text-blue {color: #0d89d1;} .text-red {color: #d30a0a;} .text-dark-blue {color: #061b52;} .text-grey {color: #797979;} .text-white {color: white;} .text-black {color: black;} + +.background-blue {background-color: #0d89d1;} +.background-red {background: #d30a0a;} +.background-dark-blue {background: #061b52;} +.background-grey {background: #797979;} +.background-white {background: white;} +.background-black {background: black;} + .text-center {text-align: center;} .width-100{width: 100%;} @@ -326,6 +336,15 @@ .height-fit-content{height: fit-content;} .width-50{width: 50%;} +.border-t-radius{ + border-top-left-radius: 25px; + border-top-right-radius: 25px; +} +.border-b-radius{ + border-bottom-left-radius: 25px; + border-bottom-right-radius: 25px; +} + // system spacing