MOBILE-4569 styles: Hide ion-buttons on toolbar (error in Ionic)

main
Pau Ferrer Ocaña 2024-07-09 10:48:50 +02:00
parent 6bb6aa4da3
commit 4427f91b63
7 changed files with 9 additions and 9 deletions

View File

@ -13,7 +13,7 @@
</ion-toolbar>
<core-navbar-buttons slot="end">
<ion-button [hidden]="!canSaveGrades" fill="clear" (click)="submitGrade()">
<ion-button [class.hidden]="!canSaveGrades" fill="clear" (click)="submitGrade()">
{{ 'core.done' | translate }}
</ion-button>
</core-navbar-buttons>

View File

@ -11,7 +11,7 @@
</ion-title>
<ion-buttons slot="end">
<ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [hidden]="!autoSaveError"
<ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [class.hidden]="!autoSaveError"
(click)="showConnectionError($event)" [ariaLabel]="'addon.mod_quiz.connectionerror' | translate" aria-haspopup="dialog">
<ion-icon name="fas-circle-exclamation" slot="icon-only" aria-hidden="true" />
</ion-button>

View File

@ -10,8 +10,7 @@
</h1>
</ion-title>
<ion-buttons slot="end" [hidden]="!loaded">
<ion-button *ngIf="assessmentId && access.assessingallowed" fill="clear" (click)="saveAssessment()"
[ariaLabel]="'core.save' | translate">
<ion-button *ngIf="assessmentId && access.assessingallowed" fill="clear" (click)="saveAssessment()">
{{ 'core.save' | translate }}
</ion-button>
<ion-button *ngIf="canAddFeedback" fill="clear" (click)="saveEvaluation()">

View File

@ -11,7 +11,8 @@
</ion-toolbar>
</ion-header>
<core-navbar-buttons slot="end">
<ion-button [hidden]="!canDeleteNotes" slot="end" fill="clear" (click)="toggleDelete()" [ariaLabel]="'core.toggledelete' | translate">
<ion-button [class.hidden]="!canDeleteNotes" slot="end" fill="clear" (click)="toggleDelete()"
[ariaLabel]="'core.toggledelete' | translate">
<ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
</ion-button>
<core-context-menu>

View File

@ -1,4 +1,4 @@
<ion-button [hidden]="hideMenu" fill="clear" [ariaLabel]="ariaLabel" (click)="showContextMenu($event)" aria-haspopup="true"
<ion-button [class.hidden]="hideMenu" fill="clear" [ariaLabel]="ariaLabel" (click)="showContextMenu($event)" aria-haspopup="true"
[attr.aria-controls]="uniqueId">
<ion-icon [name]="icon" slot="icon-only" aria-hidden="true" />
</ion-button>

View File

@ -40,12 +40,12 @@ const BUTTON_HIDDEN_CLASS = 'core-navbar-button-hidden';
*
* You can use the [hidden] input to hide all the inner buttons if a certain condition is met.
*
* IMPORTANT: Do not use *ngIf in the buttons inside this component, it can cause problems. Please use [hidden] instead.
* IMPORTANT: Do not use *ngIf in the buttons inside this component, it can cause problems. Please use [class.hidden] instead.
*
* Example usage:
*
* <core-navbar-buttons slot="end">
* <ion-button [hidden]="!buttonShown" [attr.aria-label]="Do something" (click)="action()">
* <ion-button [class.hidden]="!buttonShown" [ariaLabel]="Do something" (click)="action()">
* <ion-icon name="funnel" slot="icon-only" aria-hidden="true"></ion-icon>
* </ion-button>
* </core-navbar-buttons>

View File

@ -488,7 +488,7 @@ video::-webkit-media-text-track-display {
/**
* https://github.com/ionic-team/ionic-framework/blob/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8/BREAKING.md#css-utilities
*/
[hidden] {
[hidden], .hidden {
display: none !important;
}