EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3745 buttons: Add min target size to buttons

main
Pau Ferrer Ocaña 2021-05-06 11:33:10 +02:00
parent f108d0a8d8
commit f11fd7b08d
8 changed files with 49 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
View File

@ -1,4 +1,4 @@
<ion-item-divider>
<ion-item-divider sticky="true">
<ion-label>
<h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
</ion-label>

2
src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
View File

@ -1,4 +1,4 @@
<ion-item-divider>
<ion-item-divider sticky="true">
<ion-label>
<h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
</ion-label>

8
src/addons/mod/quiz/pages/player/player.html
View File

@ -10,8 +10,9 @@
</ion-title>
<ion-buttons slot="end">
<ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [hidden]="!autoSaveError" (click)="showConnectionError($event)"
[attr.aria-label]="'addon.mod_quiz.connectionerror' | translate" aria-haspopup="dialog">
<ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [hidden]="!autoSaveError"
(click)="showConnectionError($event)" [attr.aria-label]="'addon.mod_quiz.connectionerror' | translate"
aria-haspopup="dialog">
<ion-icon name="fas-exclamation-circle" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button *ngIf="navigation.length" [attr.aria-label]="'addon.mod_quiz.opentoc' | translate"
@ -30,7 +31,8 @@
</core-timer>
</ion-title>
<ion-buttons slot="end">
<ion-button fill="clear" *ngIf="previousPage >= 0" (click)="changePage(previousPage)" [attr.aria-label]="'core.previous' | translate">
<ion-button fill="clear" *ngIf="previousPage >= 0" (click)="changePage(previousPage)"
[attr.aria-label]="'core.previous' | translate">
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button *ngIf="nextPage >= -1" (click)="changePage(nextPage)" [attr.aria-label]="'core.next' | translate">

14
src/core/components/send-message-form/core-send-message-form.html
View File

@ -1,11 +1,9 @@
<form #messageForm>
<textarea class="core-send-message-input" [autofocus]="showKeyboard" [placeholder]="placeholder" rows="1" core-auto-rows
[(ngModel)]="message" name="message" (onResize)="textareaResized()" (keydown.enter)="enterClicked($event)"
(keydown.control.enter)="enterClicked($event, 'control')" (keydown.meta.enter)="enterClicked($event, 'meta')"></textarea>
<ion-buttons>
<ion-button fill="clear" type="submit" [disabled]="!message || sendDisabled"
[attr.aria-label]="'core.send' | translate" [core-suppress-events] (onClick)="submitForm($event)">
<ion-icon name="send" color="dark" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</ion-buttons>
[(ngModel)]="message" name="message" (onResize)="textareaResized()" (keyup.enter)="enterClicked($event)"
(keyup.control.enter)="enterClicked($event, 'control')" (keyup.meta.enter)="enterClicked($event, 'meta')"></textarea>
<ion-button fill="clear" size="large" type="submit" [disabled]="!message || sendDisabled"
[attr.aria-label]="'core.send' | translate" [core-suppress-events] (click)="submitForm($event)">
<ion-icon name="send" color="dark" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button>
</form>

17
src/core/components/send-message-form/send-message-form.scss
View File

@ -6,28 +6,19 @@
display: flex;
align-items: center;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
.core-send-message-input {
appearance: none;
display: block;
width: 100%;
min-height: 28px;
border: 0;
font-family: inherit;
background: var(--core-send-message-input-background);
color: var(--core-send-message-input-color);
border-radius: 5px;
margin: 0 5px;
}
.core-send-message-button {
margin: 0;
padding: 0;
display: none;
min-height: 0;
align-self: self-end;
border-radius: 21px;
line-height: 20px;
padding: 9px 12px 11px;
margin: 5px 10px;
}
}

3
src/core/features/login/pages/sites/sites.html
View File

@ -7,7 +7,8 @@
<ion-title>{{ 'core.settings.sites' | translate }}</ion-title>
<ion-buttons slot="end">
<ion-button fill="clear" *ngIf="sites && sites.length > 0" (click)="toggleDelete()" [attr.aria-label]="'core.delete' | translate">
<ion-button fill="clear" *ngIf="sites && sites.length > 0" (click)="toggleDelete()"
[attr.aria-label]="'core.delete' | translate">
<ion-icon slot="icon-only" name="fas-pen" aria-hidden="true"></ion-icon>
</ion-button>
<ion-button router-direction="forward" routerLink="/settings"

39
src/theme/theme.base.scss
View File

@ -124,6 +124,27 @@ ion-button.button-small ion-icon.faicon[slot] {
transform: scaleX(-1);
}
// Buttons.
ion-button {
min-height: var(--a11y-min-target-size);
min-width: var(--a11y-min-target-size);
}
[role="button"] {
cursor: pointer;
[disabled],
[aria-disabled="true"] {
cursor: auto;
}
}
.core-iframe-help ion-button {
text-transform: none;
text-decoration: underline;
--color: initial;
}
// Ionic alert.
ion-alert.core-alert-network-error .alert-head,
div.core-iframe-network-error {
@ -452,6 +473,10 @@ ion-select::part(text) {
}
}
textarea {
min-height: var(--a11y-min-target-size);
}
textarea:not([core-auto-rows]) {
height: 200px;
}
@ -468,14 +493,6 @@ ion-back-button.md::part(text) {
display: none;
}
[role="button"] {
cursor: pointer;
[disabled],
[aria-disabled="true"] {
cursor: auto;
}
}
.core-media-adapt-width {
max-width: 100%;
@ -488,9 +505,3 @@ img.core-media-adapt-width {
audio.core-media-adapt-width {
width: 100%;
}
.core-iframe-help ion-button {
text-transform: none;
text-decoration: underline;
--color: initial;
}

5
src/theme/theme.light.scss
View File

@ -62,6 +62,9 @@
@include generate-color($color-name);
}
// Accessibility vars.
--a11y-min-target-size: 44px;
--ion-text-color: #{$text-color};
--ion-text-color-rgb: 58,58,58;
--ion-card-color: var(--ion-text-color);
@ -156,6 +159,7 @@
ion-item-divider {
--background: var(--gray-lighter);
--color: inherit;
min-height: calc(var(--a11y-min-target-size) + 8px);
}
--core-combobox-background: var(--custom-combobox-background, var(--ion-item-background));
@ -221,4 +225,5 @@
--core-question-feedback-background-color: var(--yellow-light);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark);
}