diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html index e9d90ba548828385c705940819ee23a0f0ca7e19..610d7f01f46e5ac4e436fe05c611bcb36696f0d8 100644 --- a/src/app/pages/explorer-page/explorer-page.component.html +++ b/src/app/pages/explorer-page/explorer-page.component.html @@ -15,7 +15,8 @@ </p> <a (click)="collabsData = !collabsData" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options"> <span class="icon"> - <i class="fas fa-angle-down" aria-hidden="true"></i> + <i *ngIf="collabsData" class="fas fa-angle-up" aria-hidden="true"></i> + <i *ngIf="!collabsData" class="fas fa-angle-down" aria-hidden="true"></i> </span> </a> </header> @@ -39,8 +40,8 @@ </p> <a (click)="collabsOverview= !collabsOverview" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options"> <span class="icon"> - <i class="fas fa-angle-down" aria-hidden="true"></i> - </span> + <i *ngIf="collabsOverview" class="fas fa-angle-up" aria-hidden="true"></i> + <i *ngIf="!collabsOverview" class="fas fa-angle-down" aria-hidden="true"></i> </span> </a> </header> <div *ngIf="collabsOverview"> @@ -78,7 +79,8 @@ </p> <a (click)="collabsQuery = !collabsQuery" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options"> <span class="icon"> - <i class="fas fa-angle-down" aria-hidden="true"></i> + <i *ngIf="collabsQuery" class="fas fa-angle-up" aria-hidden="true"></i> + <i *ngIf="!collabsQuery" class="fas fa-angle-down" aria-hidden="true"></i> </span> </a> </header > @@ -103,7 +105,8 @@ </p> <a (click)="collabsDFilter = !collabsDFilter" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options"> <span class="icon"> - <i class="fas fa-angle-down" aria-hidden="true"></i> + <i *ngIf="collabsDFilter" class="fas fa-angle-up" aria-hidden="true"></i> + <i *ngIf="!collabsDFilter" class="fas fa-angle-down" aria-hidden="true"></i> </span> </a> </header> @@ -188,13 +191,14 @@ <div class="card bar-large"> <header class="card-header"> <p class="card-header-title"> - <span class="icon"> + <span class="icon "> <i class="fas fa-info" aria-hidden="true"></i> </span> {{currentProteinAc}} </p> <a (click)="collabsDetails = !collabsDetails" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options"> <span class="icon"> - <i class="fas fa-angle-down" aria-hidden="true"></i> + <i *ngIf="collabsDetails" class="fas fa-angle-up" aria-hidden="true"></i> + <i *ngIf="!collabsDetails" class="fas fa-angle-down" aria-hidden="true"></i> </span> </a> </header> @@ -248,7 +252,8 @@ </p> <a (click)="collabsAnalysis = !collabsAnalysis" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options"> <span class="icon"> - <i class="fas fa-angle-down" aria-hidden="true"></i> + <i *ngIf="collabsAnalysis" class="fas fa-angle-up" aria-hidden="true"></i> + <i *ngIf="!collabsAnalysis" class="fas fa-angle-down" aria-hidden="true"></i> </span> </a> </header> @@ -277,7 +282,8 @@ </p> <a (click)="collabsTask = !collabsTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options"> <span class="icon"> - <i class="fas fa-angle-down" aria-hidden="true"></i> + <i *ngIf="collabsSelection" class="fas fa-angle-up" aria-hidden="true"></i> + <i *ngIf="!collabsSelection" class="fas fa-angle-down" aria-hidden="true"></i> </span> </a> </header> @@ -306,9 +312,10 @@ <i class="fas fa-filter" aria-hidden="true"></i> </span> Selection </p> - <a (click)="collabsSelection = !collabsSelection" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options"> + <a (click)="collabsSelection = !collabsSelection" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options"> <span class="icon"> - <i class="fas fa-angle-down" aria-hidden="true"></i> + <i *ngIf="collabsSelection" class="fas fa-angle-up" aria-hidden="true"></i> + <i *ngIf="!collabsSelection" class="fas fa-angle-down" aria-hidden="true"></i> </span> </a> </header>