MOBILE-3814 styles: Revisit button colors
parent
42bdc2ae76
commit
cfaf7d5b06
|
@ -5,7 +5,7 @@
|
|||
<div slot="end" class="flex-row">
|
||||
<!-- Download all courses. -->
|
||||
<div *ngIf="downloadCoursesEnabled && filteredCourses.length > 1" class="core-button-spinner">
|
||||
<ion-button *ngIf="!prefetchCoursesData.loading" fill="clear" color="dark" (click)="prefetchCourses()"
|
||||
<ion-button *ngIf="!prefetchCoursesData.loading" fill="clear" (click)="prefetchCourses()"
|
||||
[attr.aria-label]="prefetchCoursesData.statusTranslatable | translate">
|
||||
<ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true">
|
||||
</ion-icon>
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
</ion-row>
|
||||
</ion-col>
|
||||
<ion-col class="addon-block-timeline-activity-action ion-no-padding" *ngIf="event.action?.actionable">
|
||||
<ion-button fill="outline" color="medium" (click)="action($event, event.action.url)" [title]="event.action.name">
|
||||
<ion-button fill="outline" (click)="action($event, event.action.url)" [title]="event.action.name">
|
||||
{{event.action.name}}
|
||||
<ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
|
||||
{{event.action.itemcount}}
|
||||
|
|
|
@ -118,7 +118,7 @@
|
|||
<ion-label>
|
||||
<p class="item-heading">{{ 'addon.calendar.reminders' | translate }}</p>
|
||||
</ion-label>
|
||||
<ion-button fill="clear" color="dark" (click)="addReminder()" slot="end"
|
||||
<ion-button fill="clear" (click)="addReminder()" slot="end"
|
||||
[attr.aria-label]="'addon.calendar.setnewreminder' | translate">
|
||||
<ion-icon name="fas-plus" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
|
|
@ -120,7 +120,7 @@
|
|||
</ion-item>
|
||||
<ion-item *ngIf="moduleUrl">
|
||||
<ion-label>
|
||||
<ion-button expand="block" color="primary" [href]="moduleUrl" core-link capture="true">
|
||||
<ion-button expand="block" [href]="moduleUrl" core-link capture="true">
|
||||
{{ 'addon.calendar.gotoactivity' | translate }}
|
||||
</ion-button>
|
||||
</ion-label>
|
||||
|
@ -148,7 +148,7 @@
|
|||
<ng-container *ngIf="event.timestart > currentTime">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<ion-button expand="block" color="primary" (click)="addReminder()">
|
||||
<ion-button expand="block" (click)="addReminder()">
|
||||
{{ 'addon.calendar.setnewreminder' | translate }}
|
||||
</ion-button>
|
||||
</ion-label>
|
||||
|
|
|
@ -157,7 +157,7 @@
|
|||
<ion-button expand="block" class="ion-text-wrap ion-margin-bottom" (click)="confirmContactRequest()">
|
||||
{{ 'addon.messages.acceptandaddcontact' | translate }}
|
||||
</ion-button>
|
||||
<ion-button expand="block" class="ion-text-wrap ion-margin-bottom" color="light" (click)="declineContactRequest()">
|
||||
<ion-button expand="block" class="ion-text-wrap ion-margin-bottom" fill="outline" (click)="declineContactRequest()">
|
||||
{{ 'addon.messages.decline' | translate }}
|
||||
</ion-button>
|
||||
</div>
|
||||
|
|
|
@ -103,27 +103,26 @@
|
|||
<ion-label>
|
||||
<div *ngIf="!unsupportedEditPlugins.length && !showErrorStatementEdit">
|
||||
<!-- If has offline data, show edit. -->
|
||||
<ion-button expand="block" class="ion-text-wrap" color="primary" *ngIf="hasOffline" (click)="goToEdit()">
|
||||
<ion-button expand="block" class="ion-text-wrap" *ngIf="hasOffline" (click)="goToEdit()">
|
||||
{{ 'addon.mod_assign.editsubmission' | translate }}
|
||||
</ion-button>
|
||||
<!-- If no submission or is new, show add submission. -->
|
||||
<ion-button expand="block" class="ion-text-wrap" color="primary" *ngIf="!hasOffline &&
|
||||
(!userSubmission || !userSubmission!.status || userSubmission!.status == statusNew)"
|
||||
(click)="goToEdit()">
|
||||
<ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()" *ngIf="!hasOffline &&
|
||||
(!userSubmission || !userSubmission!.status || userSubmission!.status == statusNew)">
|
||||
{{ 'addon.mod_assign.addsubmission' | translate }}
|
||||
</ion-button>
|
||||
<!-- If reopened, show addfromprevious and addnewattempt. -->
|
||||
<ng-container *ngIf="!hasOffline && userSubmission?.status == statusReopened">
|
||||
<ion-button *ngIf="!isPreviousAttemptEmpty" expand="block" class="ion-text-wrap" color="primary"
|
||||
(click)="copyPrevious()">
|
||||
<ion-button *ngIf="!isPreviousAttemptEmpty" expand="block" class="ion-text-wrap" (click)="copyPrevious()">
|
||||
{{ 'addon.mod_assign.addnewattemptfromprevious' | translate }}
|
||||
</ion-button>
|
||||
<ion-button expand="block" class="ion-text-wrap" color="primary" (click)="goToEdit()">
|
||||
<ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()">
|
||||
{{ 'addon.mod_assign.addnewattempt' | translate }}
|
||||
</ion-button>
|
||||
</ng-container>
|
||||
<!-- Else show editsubmission. -->
|
||||
<ion-button expand="block" class="ion-text-wrap" color="primary" *ngIf="!hasOffline && userSubmission && userSubmission!.status &&
|
||||
<ion-button expand="block" class="ion-text-wrap" *ngIf="!hasOffline &&
|
||||
userSubmission && userSubmission!.status &&
|
||||
userSubmission!.status != statusNew &&
|
||||
userSubmission!.status != statusReopened" (click)="goToEdit()">
|
||||
{{ 'addon.mod_assign.editsubmission' | translate }}
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
</ion-label>
|
||||
<div slot="end">
|
||||
<div class="ion-text-end">
|
||||
<ion-button fill="clear" *ngIf="canEdit" (click)="editComment()" color="dark" [attr.aria-label]="'core.edit' | translate">
|
||||
<ion-button fill="clear" *ngIf="canEdit" (click)="editComment()" [attr.aria-label]="'core.edit' | translate">
|
||||
<ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
<div collapsible-footer *ngIf="!showLoading" slot="fixed">
|
||||
<div class="list-item-limited-width" *ngIf="chat">
|
||||
<ion-button class="ion-margin ion-text-wrap" expand="block" color="primary" (click)="enterChat()">
|
||||
<ion-button class="ion-margin ion-text-wrap" expand="block" (click)="enterChat()">
|
||||
{{ 'addon.mod_chat.enterchat' | translate }}
|
||||
</ion-button>
|
||||
</div>
|
||||
|
|
|
@ -1,24 +1,27 @@
|
|||
<ion-button *ngIf="action == 'more'" fill="clear" (click)="viewEntry()" [attr.aria-label]="'addon.mod_data.more' | translate">
|
||||
<ion-button size="small" *ngIf="action == 'more'" fill="clear" (click)="viewEntry()" [attr.aria-label]="'addon.mod_data.more' | translate">
|
||||
<ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<ion-button *ngIf="action == 'edit'" fill="clear" (click)="editEntry()" [attr.aria-label]="'core.edit' | translate">
|
||||
<ion-button size="small" *ngIf="action == 'edit'" fill="clear" (click)="editEntry()" [attr.aria-label]="'core.edit' | translate">
|
||||
<ion-icon name="fas-cog" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<ion-button *ngIf="action == 'delete' && !entry.deleted" fill="clear" (click)="deleteEntry()" [attr.aria-label]="'core.delete' | translate">
|
||||
<ion-button size="small" *ngIf="action == 'delete' && !entry.deleted" fill="clear" color="danger" (click)="deleteEntry()"
|
||||
[attr.aria-label]="'core.delete' | translate">
|
||||
<ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<ion-button *ngIf="action == 'delete' && entry.deleted" fill="clear" (click)="undoDelete()" [attr.aria-label]="'core.restore' | translate">
|
||||
<ion-button size="small" *ngIf="action == 'delete' && entry.deleted" fill="clear" color="danger" (click)="undoDelete()"
|
||||
[attr.aria-label]="'core.restore' | translate">
|
||||
<ion-icon name="fas-undo-alt" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<ion-button *ngIf="action == 'approve'" fill="clear" (click)="approveEntry()" [attr.aria-label]="'addon.mod_data.approve' | translate">
|
||||
<ion-button size="small" *ngIf="action == 'approve'" fill="clear" (click)="approveEntry()"
|
||||
[attr.aria-label]="'addon.mod_data.approve' | translate">
|
||||
<ion-icon name="fas-thumbs-up" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<ion-button *ngIf="action == 'disapprove'" fill="clear" (click)="disapproveEntry()"
|
||||
<ion-button size="small" *ngIf="action == 'disapprove'" fill="clear" (click)="disapproveEntry()"
|
||||
[attr.aria-label]="'addon.mod_data.disapprove' | translate">
|
||||
<ion-icon name="far-thumbs-down" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
|
|
@ -72,8 +72,8 @@
|
|||
|
||||
<!-- Reset search. -->
|
||||
<ng-container *ngIf="search.searching && !isEmpty">
|
||||
<ion-item (click)="searchReset()" button detail="false">
|
||||
<ion-label color="primary">
|
||||
<ion-item (click)="searchReset()" button detail="false" *ngIf="!foundRecordsTranslationData">
|
||||
<ion-label color="info">
|
||||
{{ 'addon.mod_data.resetsettings' | translate}}
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
|
|
@ -64,7 +64,7 @@
|
|||
<div collapsible-footer *ngIf="entryLoaded && hasPrevious || hasNext" slot="fixed">
|
||||
<ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap">
|
||||
<ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto">
|
||||
<ion-button [disabled]="!hasPrevious" fill="clear" color="dark" [attr.aria-label]="'core.previous' | translate"
|
||||
<ion-button [disabled]="!hasPrevious" fill="clear" [attr.aria-label]="'core.previous' | translate"
|
||||
(click)="gotoEntry(offset! -1)">
|
||||
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
@ -72,7 +72,7 @@
|
|||
<ion-col class="ion-text-center">
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
|
||||
<ion-button [disabled]="!hasNext" fill="clear" color="dark" [attr.aria-label]=" 'core.next' | translate"
|
||||
<ion-button [disabled]="!hasNext" fill="clear" [attr.aria-label]=" 'core.next' | translate"
|
||||
(click)="gotoEntry(offset! + 1)">
|
||||
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
|
|
@ -57,7 +57,7 @@
|
|||
[courseId]="courseId">
|
||||
</core-format-text>
|
||||
</p>
|
||||
<ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear" color="dark"
|
||||
<ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear"
|
||||
[attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)">
|
||||
<ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
|
||||
</ion-icon>
|
||||
|
|
|
@ -19,8 +19,8 @@
|
|||
[attr.aria-label]="'addon.mod_forum.unread' | translate">
|
||||
<ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
|
||||
</ion-note>
|
||||
<ion-button *ngIf="optionsMenuEnabled" fill="clear" color="dark"
|
||||
[attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event)">
|
||||
<ion-button *ngIf="optionsMenuEnabled" fill="clear" [attr.aria-label]="('core.displayoptions' | translate)"
|
||||
(click)="showOptionsMenu($event)">
|
||||
<ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
|
||||
</ion-icon>
|
||||
</ion-button>
|
||||
|
@ -47,8 +47,8 @@
|
|||
[attr.aria-label]="'addon.mod_forum.unread' | translate">
|
||||
<ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
|
||||
</ion-note>
|
||||
<ion-button *ngIf="optionsMenuEnabled" fill="clear" color="dark"
|
||||
[attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event)">
|
||||
<ion-button *ngIf="optionsMenuEnabled" fill="clear" [attr.aria-label]="('core.displayoptions' | translate)"
|
||||
(click)="showOptionsMenu($event)">
|
||||
<ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ng-container>
|
||||
|
|
|
@ -116,7 +116,7 @@
|
|||
<div collapsible-footer *ngIf="loaded && numPages > 1" slot="fixed">
|
||||
<ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap">
|
||||
<ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto" *ngIf="!showAll">
|
||||
<ion-button [disabled]="previousPage < 0" fill="clear" color="dark" [attr.aria-label]="'core.previous' | translate"
|
||||
<ion-button [disabled]="previousPage < 0" fill="clear" [attr.aria-label]="'core.previous' | translate"
|
||||
(click)="changePage(previousPage)">
|
||||
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
@ -129,7 +129,7 @@
|
|||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto" *ngIf="!showAll">
|
||||
<ion-button [disabled]="nextPage >= numPages" fill="clear" color="dark" [attr.aria-label]="'core.next' | translate"
|
||||
<ion-button [disabled]="nextPage >= numPages" fill="clear" [attr.aria-label]="'core.next' | translate"
|
||||
(click)="changePage(nextPage)">
|
||||
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
<p class="item-heading ion-text-wrap">{{ 'addon.storagemanager.totaldownloads' | translate }}</p>
|
||||
<ion-badge color="light">{{ totalSize | coreBytesToSize }}</ion-badge>
|
||||
</ion-label>
|
||||
<ion-button slot="end" (click)="deleteForCourse()" [disabled]="totalSize == 0" color="danger" fill="outline">
|
||||
<ion-button slot="end" (click)="deleteForCourse()" [disabled]="totalSize == 0" color="danger" fill="clear">
|
||||
<ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
|
||||
{ name: title }">
|
||||
</ion-icon>
|
||||
|
@ -48,7 +48,7 @@
|
|||
</p>
|
||||
</ion-label>
|
||||
<div class="storage-buttons" slot="end" *ngIf="section.totalSize > 0 || downloadEnabled">
|
||||
<ion-button (click)="deleteForSection(section)" *ngIf="section.totalSize > 0" color="danger" fill="outline">
|
||||
<ion-button (click)="deleteForSection(section)" *ngIf="section.totalSize > 0" color="danger" fill="clear">
|
||||
<ion-icon name="fas-trash" slot="icon-only"
|
||||
[attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }">
|
||||
</ion-icon>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
</ion-label>
|
||||
<ion-button fill="clear" color="danger" slot="end" (click)="deleteSiteStorage($event)"
|
||||
[hidden]="spaceUsage.spaceUsage! + spaceUsage.cacheEntries! <= 0"
|
||||
[attr.aria-label]="'addon.storagemanager.deleteallsitedata' | translate" fill="outline">
|
||||
[attr.aria-label]="'addon.storagemanager.deleteallsitedata' | translate">
|
||||
<ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
|
@ -37,7 +37,7 @@
|
|||
<ion-badge color="light">{{ totalSize | coreBytesToSize }}</ion-badge>
|
||||
</ion-label>
|
||||
<ion-button slot="end" (click)="deleteCompletelyDownloadedCourses($event)"
|
||||
[disabled]="completelyDownloadedCourses.length === 0" color="danger" fill="outline">
|
||||
[disabled]="completelyDownloadedCourses.length === 0" color="danger" fill="clear">
|
||||
<ion-icon name="fas-trash" slot="icon-only" ariaLabel="{{ 'addon.storagemanager.deletecourses' | translate }}">
|
||||
</ion-icon>
|
||||
</ion-button>
|
||||
|
|
|
@ -1,14 +1,13 @@
|
|||
<ng-container *ngIf="enabled && !loading">
|
||||
<!-- Download button. -->
|
||||
<ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark" @coreShowHideAnimation
|
||||
<ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" @coreShowHideAnimation
|
||||
[attr.aria-label]="(statusTranslatable || 'core.download') | translate">
|
||||
<ion-icon slot="icon-only" name="fas-cloud-download-alt" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<!-- Refresh button. -->
|
||||
<ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
|
||||
(click)="download($event, true)" color="primary" @coreShowHideAnimation
|
||||
[attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
|
||||
(click)="download($event, true)" @coreShowHideAnimation [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
|
||||
<ion-icon slot="icon-only" name="fam-cloud-refresh" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
|
|
|
@ -12,8 +12,7 @@
|
|||
(action)="download()">
|
||||
</core-download-refresh>
|
||||
|
||||
<ion-button fill="clear" *ngIf="isDownloaded && isIOS" (click)="openFile($event, true)" color="dark"
|
||||
[title]="openButtonLabel | translate">
|
||||
<ion-button fill="clear" *ngIf="isDownloaded && isIOS" (click)="openFile($event, true)" [title]="openButtonLabel | translate">
|
||||
<ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<ion-button fill="clear" color="dark" (click)="scroll('backward')" [hidden]="scrollPosition === 'hidden'"
|
||||
[disabled]="scrollPosition === 'start'" [attr.aria-label]="'core.scrollbackward' | translate" [attr.aria-controls]="targetId">
|
||||
<ion-button fill="clear" (click)="scroll('backward')" [hidden]="scrollPosition === 'hidden'" [disabled]="scrollPosition === 'start'"
|
||||
[attr.aria-label]="'core.scrollbackward' | translate" [attr.aria-controls]="targetId">
|
||||
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<ion-button fill="clear" color="dark" (click)="scroll('forward')" [hidden]="scrollPosition === 'hidden'"
|
||||
[disabled]="scrollPosition === 'end'" [attr.aria-label]="'core.scrollforward' | translate" [attr.aria-controls]="targetId">
|
||||
<ion-button fill="clear" (click)="scroll('forward')" [hidden]="scrollPosition === 'hidden'" [disabled]="scrollPosition === 'end'"
|
||||
[attr.aria-label]="'core.scrollforward' | translate" [attr.aria-controls]="targetId">
|
||||
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
|
|
@ -13,8 +13,8 @@
|
|||
[src]="safeUrl" [attr.allowfullscreen]="allowFullscreen ? 'allowfullscreen' : null">
|
||||
</iframe>
|
||||
|
||||
<ion-button *ngIf="!loading && displayHelp" color="dark" expand="block" fill="clear" (click)="openIframeHelpModal()"
|
||||
aria-haspopup="dialog" class="core-button-as-link core-iframe-help">
|
||||
<ion-button *ngIf="!loading && displayHelp" expand="block" fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog"
|
||||
class="core-button-as-link core-iframe-help">
|
||||
{{ 'core.iframehelp' | translate }}
|
||||
</ion-button>
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
<ng-container *ngIf="manage">
|
||||
<ion-button *ngIf="!editMode" fill="clear" [core-suppress-events] (onClick)="activateEdit($event)"
|
||||
[attr.aria-label]="'core.edit' | translate" color="dark">
|
||||
[attr.aria-label]="'core.edit' | translate">
|
||||
<ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
<ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap" *ngIf="items.length > 1">
|
||||
<ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto">
|
||||
<ion-button [disabled]="previousIndex < 0" fill="clear" color="dark" [attr.aria-label]="previousTitle"
|
||||
(click)="navigate(previousIndex)">
|
||||
<ion-button [disabled]="previousIndex < 0" fill="clear" [attr.aria-label]="previousTitle" (click)="navigate(previousIndex)">
|
||||
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
|
@ -10,7 +9,7 @@
|
|||
</core-progress-bar>
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
|
||||
<ion-button [disabled]="nextIndex < 0" fill="clear" color="dark" [attr.aria-label]="nextTitle" (click)="navigate(nextIndex)">
|
||||
<ion-button [disabled]="nextIndex < 0" fill="clear" [attr.aria-label]="nextTitle" (click)="navigate(nextIndex)">
|
||||
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
|
|
|
@ -7,6 +7,6 @@
|
|||
</textarea>
|
||||
<ion-button fill="clear" size="large" 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" flip-rtl></ion-icon>
|
||||
<ion-icon name="send" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
|
||||
</ion-button>
|
||||
</form>
|
||||
|
|
|
@ -27,13 +27,13 @@
|
|||
|
||||
<ion-buttons class="ion-padding core-course-section-nav-buttons safe-area-padding-horizontal list-item-limited-width"
|
||||
*ngIf="displayCourseIndex && (previousSection || nextSection)">
|
||||
<ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" color="primary" fill="solid" expand="block"
|
||||
<ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="solid" expand="block"
|
||||
[attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
|
||||
<ion-icon name="fas-arrow-left" slot="start" aria-hidden="true"></ion-icon>
|
||||
<core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</ion-button>
|
||||
<ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" color="primary" fill="solid" expand="block"
|
||||
<ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" fill="solid" expand="block"
|
||||
[attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
|
||||
<core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
|
@ -49,7 +49,7 @@
|
|||
|
||||
<!-- Course Index button. -->
|
||||
<ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="loaded && displayCourseIndex">
|
||||
<ion-fab-button (click)="openCourseIndex()" [attr.aria-label]="'core.course.courseindex' | translate">
|
||||
<ion-fab-button (click)="openCourseIndex()" [attr.aria-label]="'core.course.courseindex' | translate" color="secondary">
|
||||
<ion-icon name="fas-list-ul" aria-hidden="true"></ion-icon>
|
||||
<span class="sr-only">{{'core.course.courseindex' | translate }}</span>
|
||||
</ion-fab-button>
|
||||
|
|
|
@ -7,8 +7,8 @@
|
|||
<ion-icon *ngIf="completion?.offline" name="fas-sync" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
|
||||
slot="end"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button *ngIf="!completion.state" color="dark" fill="outline" [attr.aria-label]="accessibleDescription"
|
||||
(click)="completionClicked($event)" class="ion-text-wrap" [class.chip]="mode == 'basic'">
|
||||
<ion-button *ngIf="!completion.state" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
|
||||
class="ion-text-wrap" [class.chip]="mode == 'basic'">
|
||||
{{ 'core.course.completion_manual:markdone' | translate }}
|
||||
<ion-icon *ngIf="completion?.offline" name="fas-sync" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
|
||||
slot="end"></ion-icon>
|
||||
|
@ -16,7 +16,7 @@
|
|||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!completion.istrackeduser">
|
||||
<ion-button disabled="true" color="dark" fill="outline" class="ion-text-wrap" [class.chip]="mode == 'basic'">
|
||||
<ion-button disabled="true" fill="outline" class="ion-text-wrap" [class.chip]="mode == 'basic'">
|
||||
{{ 'core.course.completion_manual:markdone' | translate }}
|
||||
</ion-button>
|
||||
</ng-container>
|
||||
|
|
|
@ -2,13 +2,13 @@
|
|||
<ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap" *ngIf="previousModule || nextModule">
|
||||
<ion-col size="auto" class="ion-no-padding core-course-module-navigation-arrow">
|
||||
<ion-button fill="clear" class="core-course-previous-module" [disabled]="!previousModule" (click)="goToActivity(false)"
|
||||
[attr.aria-label]="'core.course.gotopreviousactivity' | translate" color="dark">
|
||||
[attr.aria-label]="'core.course.gotopreviousactivity' | translate">
|
||||
<ion-icon name="fas-arrow-left" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col size="auto" class="ion-no-padding core-course-module-navigation-arrow">
|
||||
<ion-button fill="clear" class="core-course-next-module" [disabled]="!nextModule" (click)="goToActivity(true)"
|
||||
[attr.aria-label]="'core.course.gotonextactivity' | translate" color="dark">
|
||||
[attr.aria-label]="'core.course.gotonextactivity' | translate">
|
||||
<ion-icon name="fas-arrow-right" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
</h1>
|
||||
</ion-label>
|
||||
<ion-button fill="clear" *ngIf="displayOptions.displayOpenInBrowser" [href]="externalUrl" core-link [showBrowserWarning]="false"
|
||||
color="dark" [attr.aria-label]="'core.openinbrowser' | translate" slot="end">
|
||||
[attr.aria-label]="'core.openinbrowser' | translate" slot="end">
|
||||
<ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
|
@ -80,7 +80,7 @@
|
|||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-button fill="outline" expand="block" *ngIf="canPrefetch && displayOptions.displayPrefetch" class="ion-text-wrap"
|
||||
(click)="prefetch()" color="primary" [disabled]="prefetchDisabled">
|
||||
(click)="prefetch()" [disabled]="prefetchDisabled">
|
||||
<ion-icon *ngIf="!prefetchLoading" name="fas-cloud-download-alt" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-spinner *ngIf="prefetchLoading" slot="start" aria-hidden="true"></ion-spinner>
|
||||
<ion-label>
|
||||
|
@ -197,14 +197,14 @@
|
|||
</core-loading>
|
||||
</ion-content>
|
||||
<ion-footer *ngIf="loaded && isOnline && displayOptions.displayRefresh">
|
||||
<ion-button class="ion-margin" *ngIf="!hasOffline" (click)="refresh()" expand="block">
|
||||
<ion-button class="ion-margin" *ngIf="!hasOffline" (click)="refresh()" expand="block" fill="outline">
|
||||
<ion-icon name="fas-redo-alt" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>
|
||||
{{ 'core.refresh' | translate }}
|
||||
</ion-label>
|
||||
</ion-button>
|
||||
|
||||
<ion-button class="ion-margin" *ngIf="hasOffline" (click)="sync()" expand="block">
|
||||
<ion-button class="ion-margin" *ngIf="hasOffline" (click)="sync()" expand="block" fill="outline">
|
||||
<ion-icon name="fas-sync-alt" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>
|
||||
{{ 'core.settings.synchronizenow' | translate }}
|
||||
|
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
<div class="core-module-buttons-more">
|
||||
<!-- Buttons defined by the module handler. -->
|
||||
<ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark"
|
||||
<ion-button fill="clear" *ngFor="let button of module.handlerData.buttons"
|
||||
[hidden]="button.hidden || module.handlerData.spinner" class="core-animate-show-hide"
|
||||
(click)="buttonClicked($event, button)" [attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">
|
||||
<ion-icon [name]="button.icon" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
<core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
|
||||
</core-format-text>
|
||||
</h2>
|
||||
<ion-chip color="brand" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
|
||||
<ion-chip color="primary" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
|
||||
<span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
|
||||
<ion-label>
|
||||
<core-format-text [text]="course.categoryname" contextLevel="coursecat" [contextInstanceId]="course.categoryid">
|
||||
|
@ -61,7 +61,7 @@
|
|||
</p>
|
||||
</div>
|
||||
</ion-label>
|
||||
<ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false" color="dark"
|
||||
<ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
|
||||
[attr.aria-label]="'core.openinbrowser' | translate" slot="end">
|
||||
<ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<ion-buttons slot="end">
|
||||
<ion-button fill="clear" *ngIf="module.url && module.uservisible && !unsupported" [href]="module.url" core-link
|
||||
[showBrowserWarning]="false" color="dark" [attr.aria-label]="'core.openinbrowser' | translate">
|
||||
[showBrowserWarning]="false" [attr.aria-label]="'core.openinbrowser' | translate">
|
||||
<ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<div class="core-button-spinner" *ngIf="courseOptionMenuEnabled">
|
||||
<!-- Options menu. -->
|
||||
<ion-button fill="clear" color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
|
||||
<ion-button fill="clear" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
|
||||
[attr.aria-label]="('core.displayoptions' | translate)">
|
||||
<ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
@ -66,7 +66,7 @@
|
|||
color="success" role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
|
||||
</p>
|
||||
|
||||
<ion-chip color="brand" *ngIf="course.categoryname"
|
||||
<ion-chip color="primary" *ngIf="course.categoryname"
|
||||
class="core-course-category core-course-additional-info ion-text-nowrap">
|
||||
<span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
|
||||
<ion-label>
|
||||
|
|
|
@ -47,7 +47,7 @@
|
|||
name="fam-cloud-done" color="success" role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
|
||||
|
||||
<!-- Options menu. -->
|
||||
<ion-button fill="clear" color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
|
||||
<ion-button fill="clear" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
|
||||
[attr.aria-label]="('core.displayoptions' | translate)">
|
||||
<ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
<!-- Download all courses. -->
|
||||
<div *ngIf="downloadCoursesEnabled && myOverviewBlock && myOverviewBlock.filteredCourses.length > 1"
|
||||
class="core-button-spinner">
|
||||
<ion-button *ngIf="!myOverviewBlock.prefetchCoursesData.loading" fill="clear" color="dark"
|
||||
<ion-button *ngIf="!myOverviewBlock.prefetchCoursesData.loading" fill="clear"
|
||||
(click)="myOverviewBlock.prefetchCourses()"
|
||||
[attr.aria-label]="myOverviewBlock.prefetchCoursesData.statusTranslatable | translate">
|
||||
<ion-icon [name]="myOverviewBlock.prefetchCoursesData.icon" slot="icon-only" aria-hidden="true">
|
||||
|
|
|
@ -62,7 +62,7 @@
|
|||
</form>
|
||||
|
||||
<!-- Forgotten password option. -->
|
||||
<ion-button *ngIf="showForgottenPassword" expand="block" fill="clear" color="dark"
|
||||
<ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
|
||||
class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
|
||||
{{ 'core.login.forgotten' | translate }}
|
||||
</ion-button>
|
||||
|
|
|
@ -76,7 +76,7 @@
|
|||
</form>
|
||||
|
||||
<!-- Forgotten password option. -->
|
||||
<ion-button *ngIf="showForgottenPassword && !isOAuth" expand="block" fill="clear" color="dark"
|
||||
<ion-button *ngIf="showForgottenPassword && !isOAuth" expand="block" fill="clear"
|
||||
class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
|
||||
{{ 'core.login.forgotten' | translate }}
|
||||
</ion-button>
|
||||
|
|
|
@ -110,7 +110,7 @@
|
|||
|
||||
<!-- Help. -->
|
||||
<ion-button class="ion-margin-top core-login-need-help core-button-as-link ion-text-wrap" (click)="showHelp()"
|
||||
aria-haspopup="dialog" expand="block" fill="clear" color="dark">
|
||||
aria-haspopup="dialog" expand="block" fill="clear">
|
||||
{{ 'core.needhelp' | translate }}
|
||||
</ion-button>
|
||||
</div>
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
<ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap" lines="full">
|
||||
<core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="!canChangeProfilePicture">
|
||||
<ion-button class="edit-avatar" *ngIf="canChangeProfilePicture" (click)="changeProfilePicture()"
|
||||
[attr.aria-label]="'core.user.newpicture' | translate" fill="clear" color="dark">
|
||||
[attr.aria-label]="'core.user.newpicture' | translate" fill="clear">
|
||||
<ion-icon slot="icon-only" name="fas-pen" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</core-user-avatar>
|
||||
|
@ -94,7 +94,7 @@
|
|||
</a></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap" *ngIf="interests" class="core-user-profile-interests">
|
||||
<ion-item class="ion-text-wrap core-user-profile-interests" *ngIf="interests">
|
||||
<ion-label>
|
||||
<h2>{{ 'core.user.interests' | translate}}</h2>
|
||||
<ion-badge *ngFor="let interest of interests" role="link" (click)="openInterest(interest)">
|
||||
|
|
|
@ -25,7 +25,6 @@ interface ColorComponents {
|
|||
* Ionic color names.
|
||||
*/
|
||||
export enum CoreIonicColorNames {
|
||||
BRAND = 'brand',
|
||||
PRIMARY = 'primary',
|
||||
SECONDARY = 'secondary',
|
||||
SUCCESS = 'success',
|
||||
|
|
|
@ -17,7 +17,7 @@ $gray-900: #1d2125 !default; // Copy text
|
|||
$black: #000000 !default; // Avoid usage
|
||||
|
||||
$blue: #0f6cbf !default;
|
||||
$cyan: #008196 !default;
|
||||
$cyan: #008196 !default; // Not used.
|
||||
$green: #357a32 !default;
|
||||
$red: #ca3120 !default;
|
||||
$yellow: #f0ad4e !default;
|
||||
|
@ -39,19 +39,19 @@ $ion-item-background-rgb: color-to-rgb-list($ion-item-background) !default;
|
|||
$ion-item-background-dark: $gray-900 !default;
|
||||
$ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-400 !default;
|
||||
$primary: $brand-color !default;
|
||||
$secondary: $gray-300 !default;
|
||||
$danger: $red !default;
|
||||
$warning: $yellow !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$info: $blue !default;
|
||||
$light: $gray-100 !default;
|
||||
$medium: $gray-600 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$colors: (
|
||||
primary: (light: $primary),
|
||||
secondary: (light: $secondary),
|
||||
primary: (light: $primary, dark: $primary),
|
||||
secondary: (light: $secondary, dark: $gray-700),
|
||||
success: (light: $success),
|
||||
warning: (light: $warning),
|
||||
danger: (light: $danger),
|
||||
|
@ -59,7 +59,6 @@ $colors: (
|
|||
light: (light: $light, dark: $dark),
|
||||
medium: (light: $medium, dark: $gray-200),
|
||||
dark: (light: $dark, dark: $light),
|
||||
brand: (light: $brand-color, dark: $brand-color),
|
||||
) !default;
|
||||
|
||||
/**
|
||||
|
|
|
@ -370,6 +370,10 @@ ion-button.button.button-clear.button-has-icon-only {
|
|||
--border-radius: var(--huge-radius);
|
||||
}
|
||||
|
||||
ion-button.button.button-clear {
|
||||
--color: var(--dark);
|
||||
}
|
||||
|
||||
ion-button.button.button-solid,
|
||||
ion-button.button.button-outline {
|
||||
--border-radius: var(--core-input-radius);
|
||||
|
|
|
@ -65,7 +65,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
--core-link-color: var(--primary-tint);
|
||||
--core-link-color: var(--info-tint);
|
||||
|
||||
--core-header-toolbar-background: var(--gray-900);
|
||||
--core-header-toolbar-color: var(--white);
|
||||
|
|
|
@ -47,7 +47,8 @@
|
|||
@include generate-color($color-name, $colors);
|
||||
}
|
||||
|
||||
--brand-color: var(--brand);
|
||||
--brand-color: var(--primary);
|
||||
--brand-contrast: var(--primary-contrast);
|
||||
|
||||
// Accessibility vars.
|
||||
--a11y-min-target-size: 44px;
|
||||
|
@ -112,9 +113,9 @@
|
|||
|
||||
--core-bottom-tabs-background: var(--white);
|
||||
--core-bottom-tabs-color: var(--gray-700);
|
||||
--core-bottom-tabs-color-selected: var(--brand);
|
||||
--core-bottom-tabs-color-selected: var(--brand-color);
|
||||
--core-bottom-tabs-background-selected: transparent;
|
||||
--core-bottom-tabs-badge-color: var(--brand);
|
||||
--core-bottom-tabs-badge-color: var(--brand-color);
|
||||
--core-bottom-tabs-badge-text-color: var(--brand-contrast);
|
||||
--bottom-tabs-size: 48px;
|
||||
--side-tabs-size: 56px;
|
||||
|
@ -125,7 +126,7 @@
|
|||
--background-selected: var(--core-bottom-tabs-background-selected);
|
||||
}
|
||||
|
||||
--core-link-color: var(--primary);
|
||||
--core-link-color: var(--info);
|
||||
a {
|
||||
color: var(--core-link-color);
|
||||
}
|
||||
|
@ -202,7 +203,7 @@
|
|||
ion-action-sheet {
|
||||
--button-color: var(--ion-text-color);
|
||||
--button-color-selected: var(--ion-text-color);
|
||||
--title-border-color: var(--brand);
|
||||
--title-border-color: var(--brand-color);
|
||||
|
||||
.action-sheet-title {
|
||||
--color: var(--ion-text-color);
|
||||
|
@ -224,7 +225,7 @@
|
|||
--core-tab-color: var(--subdued-text-color);
|
||||
--core-tab-border-color: var(--stroke);
|
||||
--core-tab-color-active: var(--dark);
|
||||
--core-tab-border-color-active: var(--brand);
|
||||
--core-tab-border-color-active: var(--brand-color);
|
||||
--core-tab-font-weight-active: normal;
|
||||
--core-tabs-height: 48px;
|
||||
core-tabs, core-tabs-outlet {
|
||||
|
@ -238,7 +239,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
--core-loading-spinner: var(--brand);
|
||||
--core-loading-spinner: var(--brand-color);
|
||||
ion-loading {
|
||||
--spinner-color: var(--core-loading-spinner);
|
||||
}
|
||||
|
@ -249,7 +250,7 @@
|
|||
}
|
||||
|
||||
--core-progressbar-height: 8px;
|
||||
--core-progressbar-color: var(--brand);
|
||||
--core-progressbar-color: var(--brand-color);
|
||||
--core-progressbar-text-color: var(--medium);
|
||||
--core-progressbar-background: var(--brand-tint);
|
||||
|
||||
|
@ -303,7 +304,7 @@
|
|||
--core-login-input-background: var(--white);
|
||||
--core-login-input-color: var(--gray-900);
|
||||
|
||||
--core-star-color: var(--brand);
|
||||
--core-star-color: var(--brand-color);
|
||||
|
||||
--core-large-avatar-size: 90px;
|
||||
--core-avatar-size: var(--a11y-min-target-size);
|
||||
|
|
Loading…
Reference in New Issue