MOBILE-3814 styles: Revisit button colors

main
Pau Ferrer Ocaña 2022-03-02 16:24:44 +01:00
parent 42bdc2ae76
commit cfaf7d5b06
42 changed files with 98 additions and 96 deletions

View File

@ -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>

View File

@ -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}}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 }}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 }}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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)">

View File

@ -25,7 +25,6 @@ interface ColorComponents {
* Ionic color names.
*/
export enum CoreIonicColorNames {
BRAND = 'brand',
PRIMARY = 'primary',
SECONDARY = 'secondary',
SUCCESS = 'success',

View File

@ -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;
/**

View File

@ -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);

View File

@ -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);

View File

@ -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);