diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
index 92eb69a34..e76d98387 100644
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -22,7 +22,7 @@
-
+
@@ -48,14 +48,15 @@
- 1">
-
-
-
- {{ 'addon.block_myoverview.'+layout | translate }}
-
-
-
+
+
+
+
+
+
+
@@ -73,13 +74,12 @@
-
+
+ [layout]="layout">
diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.ts b/src/addons/block/myoverview/components/myoverview/myoverview.ts
index 5b676a067..b7201c44c 100644
--- a/src/addons/block/myoverview/components/myoverview/myoverview.ts
+++ b/src/addons/block/myoverview/components/myoverview/myoverview.ts
@@ -76,10 +76,8 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
component: AddonBlockMyOverviewFilterOptionsComponent,
};
- layouts: AddonBlockMyOverviewLayoutOptions = {
- options: [],
- selected: 'card',
- };
+ isLayoutSwitcherAvailable = false;
+ layout: AddonBlockMyOverviewLayouts = 'list';
sort: AddonBlockMyOverviewSortOptions = {
shortnameEnabled: false,
@@ -142,9 +140,9 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
promises.push(this.currentSite.getLocalSiteConfig(
'AddonBlockMyOverviewLayout',
- this.layouts.selected,
+ this.layout,
).then((value) => {
- this.layouts.selected = value;
+ this.layout = value;
return;
}));
@@ -340,10 +338,10 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
* @param layouts Config available layouts.
*/
protected loadLayouts(layouts?: string[]): void {
- this.layouts.options = [];
+ const layoutsOptions: AddonBlockMyOverviewLayouts[] = [];
if (layouts === undefined) {
- this.layouts.options = ['card', 'list'];
+ this.isLayoutSwitcherAvailable = true;
return;
}
@@ -354,19 +352,21 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
}
const validLayout: AddonBlockMyOverviewLayouts = layout == 'summary' ? 'list' : layout as AddonBlockMyOverviewLayouts;
- if (!this.layouts.options.includes(validLayout)) {
- this.layouts.options.push(validLayout);
+ if (!layoutsOptions.includes(validLayout)) {
+ layoutsOptions.push(validLayout);
}
});
- // If no layout is available use card.
- if (this.layouts.options.length == 0) {
- this.layouts.options = ['card'];
+ // If no layout is available use list.
+ if (layoutsOptions.length == 0) {
+ layoutsOptions.push('list');
}
- if (!this.layouts.options.includes(this.layouts.selected)) {
- this.layouts.selected = this.layouts.options[0];
+ if (!layoutsOptions.includes(this.layout)) {
+ this.layout = layoutsOptions[0];
}
+
+ this.isLayoutSwitcherAvailable = layoutsOptions.length > 1;
}
/**
@@ -632,15 +632,15 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
}
/**
- * Saves layout value.
+ * Toggle layout value.
*
* @param layout New layout.
* @return Promise resolved when done.
*/
- async saveLayout(layout: AddonBlockMyOverviewLayouts): Promise {
- this.layouts.selected = layout;
+ async toggleLayout(layout: AddonBlockMyOverviewLayouts): Promise {
+ this.layout = layout;
- await this.currentSite.setLocalSiteConfig('AddonBlockMyOverviewLayout', this.layouts.selected);
+ await this.currentSite.setLocalSiteConfig('AddonBlockMyOverviewLayout', this.layout);
}
/**
@@ -702,11 +702,6 @@ export type AddonBlockMyOverviewFilterOptions = {
count: number;
};
-type AddonBlockMyOverviewLayoutOptions = {
- options: AddonBlockMyOverviewLayouts[];
- selected: AddonBlockMyOverviewLayouts;
-};
-
type AddonBlockMyOverviewSortOptions = {
shortnameEnabled: boolean;
selected: string;
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.ts b/src/addons/storagemanager/pages/course-storage/course-storage.ts
index 962737dc6..fdfef8253 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.ts
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.ts
@@ -549,7 +549,14 @@ export class AddonStorageManagerCourseStoragePage implements OnInit, OnDestroy {
* Prefetch the whole course.
*/
async prefetchCourse(): Promise {
- const course = await CoreCourses.getCourse(this.courseId);
+ const courses = await CoreCourses.getUserCourses(true);
+ let course = courses.find((course) => course.id == this.courseId);
+ if (!course) {
+ course = await CoreCourses.getCourse(this.courseId);
+ }
+ if (!course) {
+ return;
+ }
try {
await CoreCourseHelper.confirmAndPrefetchCourse(
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index 9bf0f92a9..00d3893a6 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -20,7 +20,7 @@
{{ 'core.settings.spaceusagehelp' | translate }}
-
@@ -31,8 +31,8 @@
{{ 'addon.storagemanager.coursesspaceusage' | translate }}
{{ totalSize | coreBytesToSize }}
-
+
@@ -55,7 +55,8 @@
{{ course.totalSize | coreBytesToSize }}
-
+
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.ts b/src/addons/storagemanager/pages/courses-storage/courses-storage.ts
index 300e9f16c..0697c31aa 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.ts
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.ts
@@ -103,8 +103,13 @@ export class AddonStorageManagerCoursesStoragePage implements OnInit, OnDestroy
/**
* Delete all courses that have been downloaded.
+ *
+ * @param event: Event Object.
*/
- async deleteCompletelyDownloadedCourses(): Promise {
+ async deleteCompletelyDownloadedCourses(event: Event): Promise {
+ event.preventDefault();
+ event.stopPropagation();
+
try {
await CoreDomUtils.showDeleteConfirm('core.course.confirmdeletestoreddata');
} catch (error) {
@@ -132,9 +137,13 @@ export class AddonStorageManagerCoursesStoragePage implements OnInit, OnDestroy
/**
* Delete course.
*
+ * @param event: Event Object.
* @param course Course to delete.
*/
- async deleteCourse(course: DownloadedCourse): Promise {
+ async deleteCourse(event: Event, course: DownloadedCourse): Promise {
+ event.preventDefault();
+ event.stopPropagation();
+
try {
await CoreDomUtils.showDeleteConfirm('core.course.confirmdeletestoreddata');
} catch (error) {
@@ -242,9 +251,12 @@ export class AddonStorageManagerCoursesStoragePage implements OnInit, OnDestroy
/**
* Deletes files of a site and the tables that can be cleared.
*
- * @param siteData Site object with space usage.
+ * @param event: Event Object.
*/
- async deleteSiteStorage(): Promise {
+ async deleteSiteStorage(event: Event): Promise {
+ event.preventDefault();
+ event.stopPropagation();
+
try {
const siteName = CoreSites.getRequiredCurrentSite().getSiteName();
diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss
index 037d35189..7bbd14a23 100644
--- a/src/core/components/combobox/combobox.scss
+++ b/src/core/components/combobox/combobox.scss
@@ -55,9 +55,8 @@ ion-button {
color: var(--color);
text-overflow: ellipsis;
white-space: nowrap;
- min-height: 26px;
+ min-height: var(--a11y-min-target-size);
overflow: hidden;
- margin: 8px;
box-shadow: var(--box-shadow);
&:focus,
@@ -71,6 +70,7 @@ ion-select {
border-style: var(--border-style);
border-width: var(--border-width);
border-radius: var(--core-combobox-radius);
+ margin: 8px;
&::part(icon) {
margin: var(--icon-margin);
@@ -103,9 +103,9 @@ ion-select {
ion-button {
border-radius: var(--core-combobox-radius);
+ margin: 4px 8px;
flex: 1;
- min-height: 45px;
&::part(native) {
text-transform: none;
diff --git a/src/core/components/combobox/combobox.ts b/src/core/components/combobox/combobox.ts
index c66579939..32e56a904 100644
--- a/src/core/components/combobox/combobox.ts
+++ b/src/core/components/combobox/combobox.ts
@@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { Translate } from '@singletons';
import { ModalOptions } from '@ionic/core';
import { CoreDomUtils } from '@services/utils/dom';
@@ -40,7 +40,6 @@ import { IonSelect } from '@ionic/angular';
selector: 'core-combobox',
templateUrl: 'core-combobox.html',
styleUrls: ['combobox.scss'],
- encapsulation: ViewEncapsulation.ShadowDom,
})
export class CoreComboboxComponent {
diff --git a/src/core/components/combobox/core-combobox.html b/src/core/components/combobox/core-combobox.html
index 6b3d2ceb2..baa897fa3 100644
--- a/src/core/components/combobox/core-combobox.html
+++ b/src/core/components/combobox/core-combobox.html
@@ -1,4 +1,4 @@
-
+
0" slot="start">{{badge}}
diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
index 41216f198..51cb1e650 100644
--- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
+++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
@@ -6,12 +6,27 @@
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -46,8 +61,8 @@
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index 24345e414..d6bc0342e 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -54,6 +54,7 @@ ion-card {
display: flex;
flex-direction: column;
align-items: center;
+ z-index: 2;
ion-spinner {
margin-top: 4px;
@@ -156,7 +157,7 @@ ion-card.core-course-list-card {
ion-icon.course-icon {
color: white;
- opacity: 50%;
+ opacity: 0.5;
position: absolute;
left: 0;
right: 0;
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.ts b/src/core/features/courses/components/course-list-item/course-list-item.ts
index 73d73d61e..5f8043b2c 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.ts
+++ b/src/core/features/courses/components/course-list-item/course-list-item.ts
@@ -55,7 +55,6 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
};
showSpinner = false;
- downloadCourseEnabled = false;
courseOptionMenuEnabled = false;
progress = -1;
completionUserTracked: boolean | undefined = false;
@@ -63,7 +62,6 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
protected courseStatus = CoreConstants.NOT_DOWNLOADED;
protected isDestroyed = false;
protected courseStatusObserver?: CoreEventObserver;
- protected siteUpdatedObserver?: CoreEventObserver;
protected element: HTMLElement;
@@ -93,31 +91,12 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
}
if (this.isEnrolled) {
- if (this.showDownload) {
- this.initPrefetchCourse();
- }
-
- this.downloadCourseEnabled = !CoreCourses.isDownloadCourseDisabledInSite();
-
- if (this.downloadCourseEnabled) {
- this.initPrefetchCourse();
- }
-
// This field is only available from 3.6 onwards.
this.courseOptionMenuEnabled = (this.layout != 'listwithenrol' && this.layout != 'summarycard') &&
this.course.isfavourite !== undefined;
- // Refresh the enabled flag if site is updated.
- this.siteUpdatedObserver = CoreEvents.on(CoreEvents.SITE_UPDATED, () => {
- const wasEnabled = this.downloadCourseEnabled;
+ this.initPrefetchCourse();
- this.downloadCourseEnabled = !CoreCourses.isDownloadCourseDisabledInSite();
-
- if (!wasEnabled && this.downloadCourseEnabled) {
- // Download course is enabled now, initialize it.
- this.initPrefetchCourse();
- }
- }, CoreSites.getCurrentSiteId());
} else if ('enrollmentmethods' in this.course) {
this.enrolmentIcons = [];
@@ -169,9 +148,7 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
* @inheritdoc
*/
ngOnChanges(): void {
- if (this.showDownload && this.isEnrolled) {
- this.initPrefetchCourse();
- }
+ this.initPrefetchCourse();
this.updateCourseFields();
}
@@ -203,7 +180,12 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
/**
* Initialize prefetch course.
*/
- async initPrefetchCourse(): Promise {
+ async initPrefetchCourse(forceInit = false): Promise {
+ if (!this.isEnrolled || !this.showDownload ||
+ (this.courseOptionMenuEnabled && !forceInit)) {
+ return;
+ }
+
if (this.courseStatusObserver !== undefined) {
// Already initialized.
return;
@@ -306,6 +288,8 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
event.preventDefault();
event.stopPropagation();
+ this.initPrefetchCourse(true);
+
const popoverData = await CoreDomUtils.openPopover({
component: CoreCoursesCourseOptionsMenuComponent,
componentProps: {
@@ -414,7 +398,6 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
ngOnDestroy(): void {
this.isDestroyed = true;
this.courseStatusObserver?.off();
- this.siteUpdatedObserver?.off();
}
}
diff --git a/src/core/features/search/components/search-box/search-box.scss b/src/core/features/search/components/search-box/search-box.scss
index 9649ae962..950c685b5 100644
--- a/src/core/features/search/components/search-box/search-box.scss
+++ b/src/core/features/search/components/search-box/search-box.scss
@@ -1,5 +1,5 @@
:host {
- min-height: 61px;
+ min-height: var(--a11y-min-target-size);
display: block;
position: relative;
@@ -10,6 +10,10 @@
z-index: 4;
margin-top: 8px;
margin-bottom: 8px;
+ --border-color: var(--core-search-box-border-color);
+ --border-radius: var(--core-search-box-border-radius);
+ --background: var(--core-search-box-background);
+ --color: var(--core-search-box-border-color);
}
ion-button.button {
@@ -19,6 +23,8 @@
.core-search-history {
max-height: calc(-120px + 80vh);
overflow-y: auto;
+ background: var(--core-search-box-background);
+ --ion-item-background: var(--core-search-box-background);
.item:hover {
--background: var(--light);
@@ -40,5 +46,7 @@
ion-item {
--min-height: var(--a11y-min-target-size);
+ --border-width: 0px;
+ --background: var(--core-search-box-background);
}
}
diff --git a/src/core/features/settings/services/settings-helper.ts b/src/core/features/settings/services/settings-helper.ts
index 5ae1d8ed8..4dfc9eb3e 100644
--- a/src/core/features/settings/services/settings-helper.ts
+++ b/src/core/features/settings/services/settings-helper.ts
@@ -119,7 +119,7 @@ export class CoreSettingsHelperProvider {
const title = Translate.instant('core.settings.deletesitefilestitle');
const message = Translate.instant('core.settings.deletesitefiles', { sitename: siteName });
- await CoreDomUtils.showConfirm(message, title);
+ await CoreDomUtils.showConfirm(message, title, Translate.instant('core.delete'));
const site = await CoreSites.getSite(siteId);
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 38dc3ccd9..36488a6a7 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -201,6 +201,7 @@ ion-header ion-toolbar {
.in-toolbar.button-clear {
--color: var(--core-header-toolbar-color);
--ion-toolbar-color: var(--core-header-toolbar-color);
+ --border-radius: var(--huge-radius);
}
.button.button-clear,
@@ -264,9 +265,15 @@ button,
min-width: var(--a11y-min-target-size);
}
+ion-button {
+ margin: 4px 8px;
+}
+
ion-button.button-outline {
- --border-width: 1px;
- --background: var(--contrast-background);
+ --border-width: var(--core-input-border-width);
+ --border-color: var(--core-input-stroke);
+ --background: var(--core-input-background);
+ --color: var(--text-color);
}
ion-button.button-solid {
@@ -313,12 +320,7 @@ ion-button.button.button-clear.button-has-icon-only {
ion-button.button.button-solid,
ion-button.button.button-outline {
- --border-radius: var(--small-radius);
-}
-
-// Clear buttons will be black.
-ion-button.button-clear {
- --primary: var(--primary);
+ --border-radius: var(--core-input-radius);
}
[role="button"],
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 1d55e6631..9f06651c1 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -37,16 +37,19 @@
--ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-dark-rgb};
--subdued-text-color: var(--gray-400);
+ --stroke: var(--gray-700);
+
+ --contrast-background: black;
--ion-card-color: var(--text-color);
--ion-card-background: var(--ion-item-background);
- --contrast-background: black;
-
- --stroke: var(--gray-700);
--ion-border-color: var(--stroke);
--ion-item-border-color: var(--stroke);
+ --core-input-stroke: var(--gray-700);
+ --core-input-background: var(--gray-900);
+
ion-content {
--background: var(--ion-background-color);
--background-alternative: var(--gray-900);
@@ -80,9 +83,18 @@
--item-divider-color: var(--text-color);
--spacer-background: var(--gray-700);
- --core-combobox-background: var(--ion-item-background);
- --core-combobox-color: var(--gray-100);
- --core-combobox-border-color: var(--stroke);
+ --ion-searchbar-background: var(--ion-background-color);
+ --ion-searchbar-border-color: var(--core-input-stroke);
+ --ion-searchbar-color: var(--text-color);
+ --ion-searchbar-icon-color: var(--core-input-stroke);
+
+ --core-search-box-background: var(--ion-background-color);
+ --core-search-box-border-color: var(--core-input-stroke);
+ --core-search-box-color: var(--text-color);
+
+ --core-combobox-background: var(--core-input-background);
+ --core-combobox-color: var(--text-color);
+ --core-combobox-border-color: var(--core-input-stroke);
--core-login-background: var(--gray-900);
--core-login-text-color: var(--white);
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 9a0b55bc0..39eb96a05 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -43,40 +43,44 @@
--ion-color-step-950: var(--gray-900);
--ion-color-step-1000: var(--black);
- --text-color: #{$text-color};
- --background-color: #{$background-color};
-
- --core-online-color: #5cb85c;
-
- --stroke: var(--gray-300);
- --ion-border-color: var(--stroke);
- --ion-item-border-color: var(--stroke);
-
@each $color-name, $unused in $colors {
@include generate-color($color-name, $colors);
}
--brand-color: var(--brand);
- --small-radius: 4px;
- --medium-radius: 8px;
- --big-radius: 16px;
- --huge-radius: 24px;
-
// Accessibility vars.
--a11y-min-target-size: 44px;
--a11y-focus-color: var(--primary);
--a11y-focus-width: 2px;
--zoom-level: 100%;
+ --small-radius: 4px;
+ --medium-radius: 8px;
+ --big-radius: 16px;
+ --huge-radius: 24px;
+
+ --text-color: #{$text-color};
+ --background-color: #{$background-color};
+ --stroke: var(--gray-300);
+
+ --core-online-color: #5cb85c;
+
+ --ion-background-color: var(--background-color);
+ --ion-item-border-color: var(--stroke);
+ --ion-background-color-rgb: #{$background-color-rgb};
+ --ion-border-color: var(--stroke);
+
+ --core-input-stroke: var(--gray-400);
+ --core-input-background: var(--ion-background-color);
+ --core-input-radius: var(--small-radius);
+ --core-input-border-width: 1px;
+
--module-icon-size: 24px;
--module-icon-radius: var(--medium-radius);
--list-item--max-width: 768px;
- --ion-background-color: var(--background-color);
- --ion-background-color-rgb: #{$background-color-rgb};
-
--contrast-background: white;
--ion-text-color: var(--text-color);
@@ -155,16 +159,40 @@
--border-width: 0 0 var(--core-header-toolbar-border-width) 0;
}
+ --ion-searchbar-background: var(--ion-background-color);
+ --ion-searchbar-border-color: var(--core-input-stroke);
+ --ion-searchbar-border-radius: var(--core-input-radius);
+ --ion-searchbar-color: var(--text-color);
+ --ion-searchbar-icon-color: var(--core-input-stroke);
ion-searchbar {
- --background: var(--ion-item-background);
+ --background: var(--ion-searchbar-background);
+ --border-color: var(--ion-searchbar-border-color);
+ --icon-color: var(--ion-searchbar-icon-color);
+
+ .searchbar-input-container {
+ color: var(--ion-searchbar-color) !important;
+ }
.searchbar-input {
height: var(--a11y-min-target-size);
- border: 1px solid var(--stroke);
+ border: 1px solid var(--ion-searchbar-border-color);
box-shadow: none;
- border-radius: var(--medium-radius);
+ border-radius: var(--ion-searchbar-border-radius);
+ background: var(--ion-searchbar-background) !important;
}
}
+ --core-search-box-background: var(--ion-background-color);
+ --core-search-box-border-color: var(--core-input-stroke);
+ --core-search-box-border-radius: var(--core-input-radius);
+ --core-search-box-color: var(--text-color);
+
+ --core-combobox-background: var(--core-input-background);
+ --core-combobox-color: var(--text-color);
+ --core-combobox-border-color: var(--core-input-stroke);
+ --core-combobox-border-width: var(--core-input-border-width);
+ --core-combobox-radius: var(--core-input-radius);
+ --core-combobox-box-shadow: none;
+
ion-action-sheet {
--button-color: var(--ion-text-color);
--button-color-selected: var(--ion-text-color);
@@ -252,13 +280,6 @@
--min-width: var(--a11y-min-target-size);
}
- --core-combobox-background: var(--ion-item-background);
- --core-combobox-color: var(--gray-900);
- --core-combobox-border-color: var(--stroke);
- --core-combobox-border-width: 1px;
- --core-combobox-radius: var(--medium-radius);
- --core-combobox-box-shadow: none;
-
--selected-item-color: var(--primary);
--selected-item-border-width: 5px;