doneit-web/src/app/shared/header/header.page.html

<div class="header-container header-fix">
  <div class="main-tab pb-10 ion-toolbar header-color">

    <div class="mobile pt-20 d-flex  div-top-header justify-space-between">

      <div title="Pesquisa" *ngIf="!hideSearchBtn" class="div-search viewport-font-size">
        <div (click)="openSearch()">
          <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-45-em"
            src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
          <ion-icon *ngIf=" ThemeService.currentTheme == 'default' " class="font-45-em"
            src='assets/images/icons-search.svg'></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-45-em"
            src='assets/images/theme/gov/icons-search.svg'></ion-icon>
        </div>
      </div>

      <div class="div-logo align-center justify-center">
        <div class="logo-icon pr-10-rem">
          <img *ngIf="ThemeService.currentTheme == 'default' " src='assets/images/logo-no-bg.png' alt='logo'>
          <img *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.png' alt='logo'>
          <img *ngIf="ThemeService.currentTheme == 'doneIt'" src="assets/images/theme/doneIt/governoangola_A1.png"
            alt='logo' />
        </div>
        <div *ngIf="ThemeService.currentTheme == 'gov'"
          class="logo-description d-flex align-center justify-content-center">
          <div class="logo-description-content">
            <p class="logo-description-text tp-5">{{ environment.logoLabel }}</p>

            <div class="add-line"></div>
            <p class="logo-description-text tp-5">GABINETE DIGITAL</p>
          </div>
        </div>
        <div *ngIf="ThemeService.currentTheme == 'default' "
          class="logo-description d-flex align-center justify-content-center">
          <div class="logo-description-content">
            <p class="logo-description-text tp-5 color-white">{{ environment.logoLabel }}</p>
            <div class="add-line-white"></div>
            <p class="logo-description-text tp-5 color-white">GABINETE DIGITAL</p>
          </div>
        </div>
      </div>

      <div title="Perfil" class="div-profile cursor-pointer viewport-font-size " (click)="openProfile()">

        <!-- <div *ngIf="this.NotificationHolderService.notificationList.length > 0" class="icon-badge">{{NotificationHolderService.notificationList.length}}</div> -->
        <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon font-45-em" src='assets/images/theme/doneIt/icons-profile.svg'></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon font-45-em" src='assets/images/icons-profile.svg'></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon font-45-em" src='assets/images/theme/gov/icons-profile.svg'></ion-icon> -->

        <div *ngIf="profilePicture == ''" class="profile-image">
          <img *ngIf="loggeduser.RoleDescription == 'Presidente da República' " class="profile-image"
            src='assets/images/presidente.png'>
          <img *ngIf="loggeduser.RoleDescription == 'Ministro e Director do Gabinete do PR' " class="profile-image"
            src='assets/images/ministro.png'>
          <img *ngIf="loggeduser.RoleDescription == 'Secretário Geral' " class="profile-image"
            src='assets/images/secretaria_geral.png'>

          <ion-icon
            *ngIf="loggeduser.RoleDescription != 'Presidente da República'&& loggeduser.RoleDescription != 'Ministro e Director do Gabinete do PR' && loggeduser.RoleDescription != 'Secretário Geral' "
            class="icon font-45-em" src='assets/images/theme/gov/icons-profile.svg'></ion-icon>
        </div>


        <div *ngIf="profilePicture != ''" class="profile-image">
          <img class="profile-image image-prety" src={{profilePicture}}>
        </div>



        <div class="profile-text">
          <div *ngIf="NotificationHolderService.notificationList.length > 0" class="icon-badge" style="right: -6px;top: 38px;top: -6px;">
            {{NotificationHolderService.notificationList.length}} </div>
        </div>
      </div>
    </div>

    <div class="desktop mx-20">
      <div class="d-flex justify-space-between align-center">
        <div tab="events" class="div-logo height-fit-content">
          <div class="logo-icon pr-10-rem">
            <img *ngIf="ThemeService.currentTheme == 'default'" src='assets/images/logo-no-bg.png' alt='logo'>
            <img *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.png'
              alt='logo'>
            <img *ngIf="ThemeService.currentTheme == 'doneIt' "
              src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A1.png' alt='logo'>
          </div>
          <div class="logo-description d-flex align-center justify-content-center">

            <div class="logo-description-content">

              <div *ngIf="ThemeService.currentTheme == 'gov' " class="logo-description-content">

                <p class="logo-description-text">{{ environment.logoLabel }}</p>
                <div class="add-line"></div>
                <p class="logo-description-text">GABINETE DIGITAL</p>
              </div>

              <div *ngIf="ThemeService.currentTheme == 'default'  " class="logo-description-content">

                <p class="logo-description-text" style="color: white;">GABINETE DIGITAL</p>
                <div class="add-line" style="border-bottom: 1px solid white;"></div>
              </div>

            </div>
          </div>
        </div>

        <div class="d-flex flex-1 pr-20 pl-50"
          *ngIf="p.userPermissionCount([permissionList.Agenda.access, permissionList.Gabinete.access, permissionList.Actions.access, permissionList.Chat.access]) >= 2 || (p.userPermission([permissionList.Agenda.access]) &&  loggeduser.OwnerCalendars.length != 0) || p.userPermission([permissionList.Gabinete.access])">

          <div
            *ngIf="p.userPermission([permissionList.Agenda.access]) || p.userPermission([permissionList.Gabinete.access])"
            class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/events')"
            [class.active]="ActiveTabService.pages.home">

            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' "
              class="font-40-rem" src='assets/images/icons-nav-home-active-black.svg'></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem"
              src='assets/images/theme/gov/icons-nav-home-active-black.svg'></ion-icon>

            <span>Início</span>
          </div>

          <div *ngIf="p.userPermission([permissionList.Agenda.access])"
            class="tab mr-20 d-flex align-center cursor-pointer" (click)="changeRoute('/home/agenda')"
            [class.active]="ActiveTabService.pages.agenda">
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' "
              class="font-40-rem" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem"
              src='assets/images/theme/gov/icons-nav-agenda-inactive.svg'></ion-icon>

            <span>Agenda</span>
          </div>

          <div *ngIf="p.userPermission([permissionList.Gabinete.access])"
            class="tab mr-20  d-flex align-center cursor-pointer" (click)="changeRoute('/home/gabinete-digital')"
            [class.active]="ActiveTabService.pages.gabinete">

            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' "
              class="font-40-rem" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem"
              src='assets/images/theme/gov/icons-nav-home-dk.svg'></ion-icon>
            <span>Gabinete</span>
          </div>

          <div *ngIf="p.userPermission([permissionList.Actions.access])"
            class="tab mr-20  d-flex align-center cursor-pointer" (click)="changeRoute('/home/publications')"
            [class.active]="ActiveTabService.pages.publication">
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' "
              class="font-40-rem" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem"
              src='assets/images/theme/gov/icons-nav-a-es-inactive.svg'></ion-icon>
            <span>Acções</span>
          </div>

          <div *ngIf="p.userPermission([permissionList.Chat.access])"
            class="tab mr-20  d-flex align-center cursor-pointer" (click)="changeRoute('/home/chat')"
            [class.active]="ActiveTabService.pages.chat">
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' "
              class="font-40-rem" src='assets/images/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem"
              src='assets/images/theme/gov/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
            <span>Chat</span>
          </div>
        </div>

        <div class="header-btns d-flex">
          <div title="Pesquisa" *ngIf="!hideSearchBtn" class="mr-20 d-flex align-center cursor-pointer">
            <div style="padding-top: 5px;" (click)="openSearch();showSearch=true" *ngIf="!showSearch">
              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'doneIt' " class="font-45-rem"
                src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'default' " class="font-45-rem"
                src='assets/images/icons-search.svg'></ion-icon>
              <ion-icon title="Perfil" *ngIf="ThemeService.currentTheme == 'gov' " class="font-45-rem"
                src='assets/images/theme/gov/icons-search.svg'></ion-icon>
            </div>
            <button title="Fechar" class="btn-no-color" (click)="closeSearch();showSearch=false;searchSubject=''"
              *ngIf="showSearch">
              <ion-icon *ngIf="ThemeService.currentTheme == 'default' || ThemeService.currentTheme == 'doneIt' "
                class="font-40-rem" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-40-rem" name="restaurant-outline"
                src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
            </button>

            <div *ngIf="showSearch">
              <div class="d-flex search-input-container ml-10 justify-between" *ngIf="showSearch">
                <!-- <div class="icon" (click)="basicSearch()">
                  <ion-icon class="icon-z" slot="end" name="search"></ion-icon>
                </div> -->
                <div class="input-text d-flex ion-align-items-center">
                  <ion-input (keyup.enter)="basicSearch()" [(ngModel)]='searchSubject' (ngModelChange)="dynamicSearch()"
                    class="search-input text-black" type="search" placeholder="Pesquisar assunto"></ion-input>
                </div>

                <!-- <div class="icon" (click)="clearSearchInput()">
                  <ion-icon title="Limpar" *ngIf="ThemeService.currentTheme == 'default' "name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
                  <ion-icon title="Limpar" *ngIf="ThemeService.currentTheme == 'doneIt' "name="restaurant-outline"  src="assets/images/theme/doneIt/icons-search.svg"></ion-icon>
                  <ion-icon title="Limpar" *ngIf="ThemeService.currentTheme == 'gov' " name="restaurant-outline" src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
                </div> -->
                <div (click)="basicSearch()" class="d-flex align-center icon">

                  <ion-icon class="icon-z" slot="end" src="assets/images/theme/gov/search.svg"></ion-icon>

                </div>
              </div>
            </div>
          </div>

          <div title="Perfil" class="div-profile d-flex cursor-pointer font-45-rem" (click)="openProfile()">
            <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default'  " class="icon" src='assets/images/icons-profile.svg'></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt'  " class="icon" src='assets/images/theme/doneIt/icons-profile.svg'></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon" src='assets/images/theme/gov/icons-profile.svg'></ion-icon> -->

            <div *ngIf="profilePicture == ''" class="profile-image">
              <img *ngIf="loggeduser.RoleDescription == 'Presidente da República' " class="profile-image"
                src='assets/images/presidente.png'>
              <img *ngIf="loggeduser.RoleDescription == 'Ministro e Director do Gabinete do PR' " class="profile-image"
                src='assets/images/ministro.png'>
              <img *ngIf="loggeduser.RoleDescription == 'Secretário Geral' " class="profile-image"
                src='assets/images/secretaria_geral.png'>

              <ion-icon
                *ngIf="loggeduser.RoleDescription != 'Presidente da República'&& loggeduser.RoleDescription != 'Ministro e Director do Gabinete do PR' && loggeduser.RoleDescription != 'Secretário Geral' "
                class="icon" src='assets/images/theme/gov/icons-profile.svg'></ion-icon>
            </div>


            <div *ngIf="profilePicture != ''" class="profile-image">
              <img class="profile-image font-45-em image-prety" src={{profilePicture}}>
            </div>

            <div class="profile-text">
              <div *ngIf="NotificationHolderService.notificationList.length > 0" class="icon-badge" style="right: -6px;top: 38px;top: -6px;">
                {{NotificationHolderService.notificationList.length}} </div>
            </div>

          </div>
        </div>
      </div>

    </div>

  </div>
  <div [class.header-bottom-line]="ThemeService.currentTheme == 'gov'" style="height: 5px;"></div>
</div>