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> </ion-toolbar>
<core-navbar-buttons slot="end"> <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 }} {{ 'core.done' | translate }}
</ion-button> </ion-button>
</core-navbar-buttons> </core-navbar-buttons>

View File

@ -11,7 +11,7 @@
</ion-title> </ion-title>
<ion-buttons slot="end"> <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"> (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-icon name="fas-circle-exclamation" slot="icon-only" aria-hidden="true" />
</ion-button> </ion-button>

View File

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

View File

@ -11,7 +11,8 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<core-navbar-buttons slot="end"> <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-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
</ion-button> </ion-button>
<core-context-menu> <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"> [attr.aria-controls]="uniqueId">
<ion-icon [name]="icon" slot="icon-only" aria-hidden="true" /> <ion-icon [name]="icon" slot="icon-only" aria-hidden="true" />
</ion-button> </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. * 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: * Example usage:
* *
* <core-navbar-buttons slot="end"> * <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-icon name="funnel" slot="icon-only" aria-hidden="true"></ion-icon>
* </ion-button> * </ion-button>
* </core-navbar-buttons> * </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 * https://github.com/ionic-team/ionic-framework/blob/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8/BREAKING.md#css-utilities
*/ */
[hidden] { [hidden], .hidden {
display: none !important; display: none !important;
} }