From 6d13fdf6a78903dc944fa4829236bd9aa0123cfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 31 Mar 2022 15:33:42 +0200 Subject: [PATCH 01/10] MOBILE-3833 style: Restyle spacers --- .../components/filteroptions/filteroptions.scss | 8 ++++++++ .../myoverview/components/filteroptions/filteroptions.ts | 1 + src/core/components/spacer/spacer.ts | 5 +++-- src/core/features/sitehome/pages/index/index.scss | 8 ++------ src/theme/theme.light.scss | 6 ++---- 5 files changed, 16 insertions(+), 12 deletions(-) create mode 100644 src/addons/block/myoverview/components/filteroptions/filteroptions.scss diff --git a/src/addons/block/myoverview/components/filteroptions/filteroptions.scss b/src/addons/block/myoverview/components/filteroptions/filteroptions.scss new file mode 100644 index 000000000..166260056 --- /dev/null +++ b/src/addons/block/myoverview/components/filteroptions/filteroptions.scss @@ -0,0 +1,8 @@ +ion-footer { + &::before { + display: none; + } + ion-button { + margin: 0; + } +} diff --git a/src/addons/block/myoverview/components/filteroptions/filteroptions.ts b/src/addons/block/myoverview/components/filteroptions/filteroptions.ts index 93b9d753a..ad77d9a5b 100644 --- a/src/addons/block/myoverview/components/filteroptions/filteroptions.ts +++ b/src/addons/block/myoverview/components/filteroptions/filteroptions.ts @@ -22,6 +22,7 @@ import { AddonBlockMyOverviewFilterOptions } from '../myoverview/myoverview'; @Component({ selector: 'addon-block-myoverview-filter-options', templateUrl: 'filteroptions.html', + styleUrls: ['filteroptions.scss'], }) export class AddonBlockMyOverviewFilterOptionsComponent { diff --git a/src/core/components/spacer/spacer.ts b/src/core/components/spacer/spacer.ts index e2196dd81..0bedc96bf 100644 --- a/src/core/components/spacer/spacer.ts +++ b/src/core/components/spacer/spacer.ts @@ -22,8 +22,9 @@ import { Component } from '@angular/core'; */ @Component({ selector: 'core-spacer', - template: '', - styles: [':host {--item-divider-min-height: 30px;}'], + template: '', + styles: [':host { display: block; margin: var(--spacer-vertical) var(--spacer-horizontal); \ + border-bottom: 1px solid var(--spacer-color);}'], }) export class CoreSpacerComponent { diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss index f77fee9ef..2581b9366 100644 --- a/src/core/features/sitehome/pages/index/index.scss +++ b/src/core/features/sitehome/pages/index/index.scss @@ -11,10 +11,6 @@ ion-item ion-icon { @include margin-horizontal(null, var(--margin-end)); } -core-spacer ::ng-deep .item { - border-radius: var(--medium-radius); - --horizontal-margin: 10px; - margin-left: var(--horizontal-margin); - margin-right: var(--horizontal-margin); - width: auto; +core-spacer { + --spacer-horizontal: 10px; } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 14da0eacf..944c0f5d6 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -308,10 +308,8 @@ --min-height: var(--item-divider-min-height); } - --spacer-background: var(--light); - core-spacer { - --item-divider-background: var(--spacer-background); - } + --spacer-vertical: 8px; + --spacer-color: var(--gray-300); ion-note { --color: var(--subdued-text-color); From 2ce808dfab550ec0ed35deed785baf1a3550a0b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 31 Mar 2022 16:53:24 +0200 Subject: [PATCH 02/10] MOBILE-3833 my: Move search to empty box on my overview --- .../myoverview/addon-block-myoverview.html | 5 +++++ .../myoverview/components/myoverview/myoverview.ts | 12 +++++++++++- src/core/features/courses/pages/my/my.html | 3 --- src/core/features/courses/pages/my/my.ts | 11 ----------- 4 files changed, 16 insertions(+), 15 deletions(-) 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 3718ea8e7..f0b31314a 100644 --- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html +++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html @@ -70,6 +70,11 @@ + + + {{'core.courses.searchcourses' | translate}} + diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.ts b/src/addons/block/myoverview/components/myoverview/myoverview.ts index 8c97fa6c6..4bdfa9d7a 100644 --- a/src/addons/block/myoverview/components/myoverview/myoverview.ts +++ b/src/addons/block/myoverview/components/myoverview/myoverview.ts @@ -30,6 +30,7 @@ import { AddonCourseCompletion } from '@addons/coursecompletion/services/coursec import { AddonBlockMyOverviewFilterOptionsComponent } from '../filteroptions/filteroptions'; import { IonSearchbar } from '@ionic/angular'; import moment from 'moment'; +import { CoreNavigator } from '@services/navigator'; const FILTER_PRIORITY: AddonBlockMyOverviewTimeFilters[] = ['all', 'inprogress', 'future', 'past']; @@ -88,6 +89,7 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem textFilter = ''; hasCourses = false; + searchEnabled = false; protected currentSite!: CoreSite; protected allCourses: CoreEnrolledCourseDataWithOptions[] = []; @@ -110,12 +112,13 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem // Refresh the enabled flags if enabled. this.downloadCourseEnabled = !CoreCourses.isDownloadCourseDisabledInSite(); this.downloadCoursesEnabled = !CoreCourses.isDownloadCoursesDisabledInSite(); + this.searchEnabled = !CoreCourses.isSearchCoursesDisabledInSite(); // Refresh the enabled flags if site is updated. this.updateSiteObserver = CoreEvents.on(CoreEvents.SITE_UPDATED, () => { this.downloadCourseEnabled = !CoreCourses.isDownloadCourseDisabledInSite(); this.downloadCoursesEnabled = !CoreCourses.isDownloadCoursesDisabledInSite(); - + this.searchEnabled = !CoreCourses.isSearchCoursesDisabledInSite(); }, CoreSites.getCurrentSiteId()); this.coursesObserver = CoreEvents.on( @@ -676,6 +679,13 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem this.filterCourses(); } + /** + * Go to search courses. + */ + async openSearch(): Promise { + CoreNavigator.navigateToSitePath('/list', { params : { mode: 'search' } }); + } + /** * @inheritdoc */ diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html index bf26674dc..1ea788466 100644 --- a/src/core/features/courses/pages/my/my.html +++ b/src/core/features/courses/pages/my/my.html @@ -11,9 +11,6 @@ - - - diff --git a/src/core/features/courses/pages/my/my.ts b/src/core/features/courses/pages/my/my.ts index 029225665..ad8f0a206 100644 --- a/src/core/features/courses/pages/my/my.ts +++ b/src/core/features/courses/pages/my/my.ts @@ -19,7 +19,6 @@ import { CoreCourseBlock } from '@features/course/services/course'; import { CoreCoursesDashboard, CoreCoursesDashboardProvider } from '@features/courses/services/dashboard'; import { CoreMainMenuDeepLinkManager } from '@features/mainmenu/classes/deep-link-manager'; import { IonRefresher } from '@ionic/angular'; -import { CoreNavigator } from '@services/navigator'; import { CoreSites } from '@services/sites'; import { CoreUtils } from '@services/utils/utils'; import { CoreEventObserver, CoreEvents } from '@singletons/events'; @@ -38,7 +37,6 @@ export class CoreCoursesMyCoursesPage implements OnInit, OnDestroy { @ViewChild(CoreBlockComponent) block!: CoreBlockComponent; siteName = ''; - searchEnabled = false; downloadCoursesEnabled = false; userId: number; loadedBlock?: Partial; @@ -50,7 +48,6 @@ export class CoreCoursesMyCoursesPage implements OnInit, OnDestroy { constructor() { // Refresh the enabled flags if site is updated. this.updateSiteObserver = CoreEvents.on(CoreEvents.SITE_UPDATED, () => { - this.searchEnabled = !CoreCourses.isSearchCoursesDisabledInSite(); this.downloadCoursesEnabled = !CoreCourses.isDownloadCoursesDisabledInSite(); this.loadSiteName(); @@ -63,7 +60,6 @@ export class CoreCoursesMyCoursesPage implements OnInit, OnDestroy { * @inheritdoc */ ngOnInit(): void { - this.searchEnabled = !CoreCourses.isSearchCoursesDisabledInSite(); this.downloadCoursesEnabled = !CoreCourses.isDownloadCoursesDisabledInSite(); const deepLinkManager = new CoreMainMenuDeepLinkManager(); @@ -122,13 +118,6 @@ export class CoreCoursesMyCoursesPage implements OnInit, OnDestroy { }; } - /** - * Go to search courses. - */ - async openSearch(): Promise { - CoreNavigator.navigateToSitePath('/list', { params : { mode: 'search' } }); - } - /** * Refresh the data. * From e3e54ec194adc719061c592088dee75e8cfe5005 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 31 Mar 2022 17:23:32 +0200 Subject: [PATCH 03/10] MOBILE-3833 collapsible: Fix collapsible header enabled --- src/core/directives/collapsible-header.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts index 196a2b1ce..31a4083bc 100644 --- a/src/core/directives/collapsible-header.ts +++ b/src/core/directives/collapsible-header.ts @@ -89,6 +89,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest * @inheritdoc */ ngOnInit(): void { + this.collapsible = !CoreUtils.isFalseOrZero(this.collapsible); this.init(); } @@ -117,7 +118,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest */ async ngOnChanges(changes: {[name: string]: SimpleChange}): Promise { if (changes.collapsible) { - this.enabled = !CoreUtils.isFalseOrZero(changes.collapsible.currentValue); + this.collapsible = !CoreUtils.isFalseOrZero(changes.collapsible.currentValue); + this.enabled = this.collapsible; await this.init(); From 50c3985822f659efa333a1e445986dbb47ec76ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 1 Apr 2022 09:58:11 +0200 Subject: [PATCH 04/10] MOBILE-3833 collapsible: Change collapsible visible strategy --- .../components/myoverview/myoverview.ts | 2 +- src/core/directives/collapsible-footer.ts | 18 ++-- src/core/directives/collapsible-header.ts | 86 ++++++++----------- src/core/directives/collapsible-item.ts | 27 +++--- 4 files changed, 60 insertions(+), 73 deletions(-) diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.ts b/src/addons/block/myoverview/components/myoverview/myoverview.ts index 4bdfa9d7a..d54b6c3b6 100644 --- a/src/addons/block/myoverview/components/myoverview/myoverview.ts +++ b/src/addons/block/myoverview/components/myoverview/myoverview.ts @@ -683,7 +683,7 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem * Go to search courses. */ async openSearch(): Promise { - CoreNavigator.navigateToSitePath('/list', { params : { mode: 'search' } }); + CoreNavigator.navigateToSitePath('courses/list', { params : { mode: 'search' } }); } /** diff --git a/src/core/directives/collapsible-footer.ts b/src/core/directives/collapsible-footer.ts index f0b7c90ad..e90806092 100644 --- a/src/core/directives/collapsible-footer.ts +++ b/src/core/directives/collapsible-footer.ts @@ -50,7 +50,8 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy { protected endContentScrollListener?: EventListener; protected resizeListener?: CoreEventObserver; protected slotPromise?: CoreCancellablePromise; - protected calcPending = false; + protected viewportPromise?: CoreCancellablePromise; + protected loadingHeight = false; protected pageDidEnterListener?: EventListener; protected page?: HTMLElement; @@ -85,13 +86,14 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy { * Calculate the height of the footer. */ protected async calculateHeight(): Promise { - if (!CoreDom.isElementVisible(this.element)) { - this.calcPending = true; - + if (this.loadingHeight) { + // Already calculating, return. return; } + this.loadingHeight = true; - this.calcPending = false; + this.viewportPromise = CoreDom.waitToBeInViewport(this.element); + await this.viewportPromise; this.element.classList.remove('is-active'); await CoreUtils.nextTick(); @@ -110,6 +112,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy { this.element.classList.add('is-active'); this.setBarHeight(this.initialHeight); + this.loadingHeight = false; } /** @@ -175,9 +178,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy { this.page?.addEventListener( 'ionViewDidEnter', this.pageDidEnterListener = () => { - if (this.calcPending) { - this.calculateHeight(); - } + this.calculateHeight(); }, ); } @@ -255,6 +256,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy { this.resizeListener?.off(); this.slotPromise?.cancel(); + this.viewportPromise?.cancel(); } } diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts index 31a4083bc..887918f05 100644 --- a/src/core/directives/collapsible-header.ts +++ b/src/core/directives/collapsible-header.ts @@ -13,7 +13,7 @@ // limitations under the License. import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core'; -import { CorePromisedValue } from '@classes/promised-value'; +import { CoreCancellablePromise } from '@classes/cancellable-promise'; import { CoreLoadingComponent } from '@components/loading/loading'; import { CoreTabsOutletComponent } from '@components/tabs-outlet/tabs-outlet'; import { CoreTabsComponent } from '@components/tabs/tabs'; @@ -69,17 +69,15 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest protected content?: HTMLIonContentElement; protected contentScrollListener?: EventListener; protected endContentScrollListener?: EventListener; - protected pageDidEnterListener?: EventListener; protected resizeListener?: CoreEventObserver; protected floatingTitle?: HTMLHeadingElement; protected scrollingHeight?: number; protected subscriptions: Subscription[] = []; protected enabled = true; protected isWithinContent = false; - protected enteredPromise = new CorePromisedValue(); protected mutationObserver?: MutationObserver; - protected firstEnter = true; - protected initPending = false; + protected loadingFloatingTitle = false; + protected visiblePromise?: CoreCancellablePromise; constructor(el: ElementRef) { this.collapsedHeader = el.nativeElement; @@ -106,10 +104,9 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest await Promise.all([ this.initializeCollapsedHeader(), this.initializeExpandedHeader(), - await this.enteredPromise, ]); - this.initializeFloatingTitle(); + await this.initializeFloatingTitle(); this.initializeContent(); } @@ -117,7 +114,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest * @inheritdoc */ async ngOnChanges(changes: {[name: string]: SimpleChange}): Promise { - if (changes.collapsible) { + if (changes.collapsible && !changes.collapsible.firstChange) { this.collapsible = !CoreUtils.isFalseOrZero(changes.collapsible.currentValue); this.enabled = this.collapsible; @@ -141,47 +138,16 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest if (this.content && this.endContentScrollListener) { this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener); } - if (this.page && this.pageDidEnterListener) { - this.page.removeEventListener('ionViewDidEnter', this.pageDidEnterListener); - } this.resizeListener?.off(); this.mutationObserver?.disconnect(); + this.visiblePromise?.cancel(); } /** - * Search the page element, initialize it, and wait until it's ready for the transition to trigger on scroll. + * Listen to changing events. */ - protected initializePage(): void { - if (!this.collapsedHeader.parentElement) { - throw new Error('[collapsible-header] Couldn\'t get page'); - } - - // Find element and prepare classes. - this.page = this.collapsedHeader.parentElement; - this.page.classList.add('collapsible-header-page'); - - this.page.addEventListener( - 'ionViewDidEnter', - this.pageDidEnterListener = () => { - if (this.firstEnter) { - this.firstEnter = false; - clearTimeout(timeout); - this.enteredPromise.resolve(); - } else if (this.initPending) { - this.initializeFloatingTitle(); - } - }, - ); - - // Timeout in case event is never fired. - const timeout = window.setTimeout(() => { - if (this.firstEnter) { - this.firstEnter = false; - this.enteredPromise.reject(new Error('[collapsible-header] Waiting for ionViewDidEnter timeout reached')); - } - }, 5000); - + protected listenEvents(): void { this.resizeListener = CoreDom.onWindowResize(() => { this.initializeFloatingTitle(); }, 50); @@ -216,6 +182,19 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest }); } + /** + * Search the page element, initialize it, and wait until it's ready for the transition to trigger on scroll. + */ + protected initializePage(): void { + if (!this.collapsedHeader.parentElement) { + throw new Error('[collapsible-header] Couldn\'t get page'); + } + + // Find element and prepare classes. + this.page = this.collapsedHeader.parentElement; + this.page.classList.add('collapsible-header-page'); + } + /** * Search the collapsed header element, initialize it, and wait until it's ready for the transition to trigger on scroll. */ @@ -253,6 +232,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest return; } + this.listenEvents(); + // Initialize from tabs. const tabs = CoreComponentsRegistry.resolve(this.page.querySelector('core-tabs-outlet'), CoreTabsOutletComponent); @@ -284,21 +265,22 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest /** * Initialize a floating title to mimic transitioning the title from one state to the other. */ - protected initializeFloatingTitle(): void { + protected async initializeFloatingTitle(): Promise { if (!this.page || !this.expandedHeader) { - throw new Error('[collapsible-header] Couldn\'t create floating title'); - } - - if (!CoreDom.isElementVisible(this.expandedHeader)) { - this.initPending = true; - return; } - this.initPending = false; + if (this.loadingFloatingTitle) { + // Already calculating, return. + return; + } + this.loadingFloatingTitle = true; + + this.visiblePromise = CoreDom.waitToBeVisible(this.expandedHeader); + await this.visiblePromise; this.page.classList.remove('collapsible-header-page-is-active'); - CoreUtils.nextTick(); + await CoreUtils.nextTick(); // Add floating title and measure initial position. const collapsedHeaderTitle = this.collapsedHeader.querySelector('h1') as HTMLHeadingElement; @@ -370,6 +352,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest this.collapsedFontStyles = collapsedFontStyles; this.expandedFontStyles = expandedFontStyles; this.expandedHeaderHeight = expandedHeaderHeight; + + this.loadingFloatingTitle = false; } /** diff --git a/src/core/directives/collapsible-item.ts b/src/core/directives/collapsible-item.ts index 6e95242f2..1a4950c8b 100644 --- a/src/core/directives/collapsible-item.ts +++ b/src/core/directives/collapsible-item.ts @@ -55,8 +55,9 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy { protected resizeListener?: CoreEventObserver; protected darkModeListener?: Subscription; protected domPromise?: CoreCancellablePromise; + protected visiblePromise?: CoreCancellablePromise; protected uniqueId: string; - protected calcPending = false; + protected loadingHeight = false; protected pageDidEnterListener?: EventListener; protected page?: HTMLElement; @@ -99,9 +100,7 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy { this.page?.addEventListener( 'ionViewDidEnter', this.pageDidEnterListener = () => { - if (this.calcPending) { - this.calculateHeight(); - } + this.calculateHeight(); }, ); @@ -143,20 +142,20 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy { * Calculate the height and check if we need to display show more or not. */ protected async calculateHeight(): Promise { + if (this.loadingHeight) { + // Already calculating, return. + return; + } + this.loadingHeight = true; + + this.visiblePromise = CoreDom.waitToBeVisible(this.element); + await this.visiblePromise; + // Remove max-height (if any) to calculate the real height. this.element.classList.add('collapsible-loading-height'); await this.waitFormatTextsRendered(); - if (!this.element.clientHeight) { - this.calcPending = true; - this.element.classList.remove('collapsible-loading-height'); - - return; - } - - this.calcPending = false; - this.expandedHeight = this.element.getBoundingClientRect().height; // Restore the max height now. @@ -167,6 +166,7 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy { this.setExpandButtonEnabled(enable); this.setGradientColor(); + this.loadingHeight = false; } /** @@ -298,6 +298,7 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy { this.resizeListener?.off(); this.darkModeListener?.unsubscribe(); this.domPromise?.cancel(); + this.visiblePromise?.cancel(); if (this.page && this.pageDidEnterListener) { this.page.removeEventListener('ionViewDidEnter', this.pageDidEnterListener); From bf5f9c8b99b21d16ff82ea70a116ecf112df9816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 31 Mar 2022 16:54:06 +0200 Subject: [PATCH 05/10] MOBILE-3833 my: Style Filter buttons --- .../myoverview/addon-block-myoverview.html | 16 +++++------ .../components/myoverview/myoverview.scss | 20 +++++++++++-- src/theme/theme.base.scss | 28 ++++++++++++------- src/theme/theme.light.scss | 15 +++------- 4 files changed, 47 insertions(+), 32 deletions(-) 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 f0b31314a..f2a0b892e 100644 --- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html +++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html @@ -22,6 +22,14 @@ + + + + + + + - - - - - - - diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.scss b/src/addons/block/myoverview/components/myoverview/myoverview.scss index 9c2cb0d56..06c764187 100644 --- a/src/addons/block/myoverview/components/myoverview/myoverview.scss +++ b/src/addons/block/myoverview/components/myoverview/myoverview.scss @@ -1,21 +1,35 @@ :host { ion-row.addon-block-myoverview-filter { - padding: 4px 8px 0px 8px; + margin: 8px; + padding: 0; ion-col { - padding: 0 2px; + padding: 0; } ion-button, core-combobox ::ng-deep ion-button { + --border-width: 0; + --a11y-min-target-size: 40px; margin: 0; + + .select-icon { + display: none; + } ion-icon { font-size: 20px; } } - ::ng-deep ion-searchbar { + core-combobox ::ng-deep ion-select { + margin: 0; + --a11y-min-target-size: 40px; + } + + ion-searchbar { padding: 0; + --height: 40px; } } + } diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index b10ac0d47..a162e6c0a 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -1091,20 +1091,28 @@ ion-chip { } ion-searchbar { - .searchbar-search-icon.ios { - top: 4px; - } - .searchbar-search-icon.md { - } + height: var(--height) !important; - .searchbar-input, - .sc-ion-searchbar-md.searchbar-input, - .sc-ion-searchbar-ios.searchbar-input { - @include padding-horizontal(48px); + .searchbar-input-container { + color: var(--color) !important; + height: var(--height) !important; } .searchbar-input { - @include padding-horizontal(48px); + height: var(--height) !important; + border: 1px solid var(--border-color) !important; + box-shadow: none !important; + border-radius: var(--border-radius) !important; + background: var(--background) !important; + @include padding-horizontal(var(--height) !important); + } + + .searchbar-search-icon { + @include position(null, null, null, calc(var(--height) / 4) !important); + } + + button { + @include position(null, 0 !important, null, null); } } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 944c0f5d6..f8799c64f 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -190,23 +190,16 @@ --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-height: var(--a11y-min-target-size); --ion-searchbar-color: var(--text-color); --ion-searchbar-icon-color: var(--core-input-stroke); ion-searchbar { --background: var(--ion-searchbar-background); --border-color: var(--ion-searchbar-border-color); + --color: var(--ion-searchbar-color); + --border-radius: var(--ion-searchbar-border-radius); --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(--ion-searchbar-border-color); - box-shadow: none; - border-radius: var(--ion-searchbar-border-radius); - background: var(--ion-searchbar-background) !important; - } + --height: var(--ion-searchbar-height); } --core-search-box-background: var(--ion-background-color); From dc934ffcb2363ab767f55549ad8946a567328259 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 1 Apr 2022 10:25:34 +0200 Subject: [PATCH 06/10] MOBILE-3833 my: Revert to basic filters with advanced option --- scripts/langindex.json | 5 +- .../components/components.module.ts | 2 - .../filteroptions/filteroptions.html | 58 ----- .../filteroptions/filteroptions.scss | 8 - .../components/filteroptions/filteroptions.ts | 45 ---- .../myoverview/addon-block-myoverview.html | 39 ++- .../components/myoverview/myoverview.ts | 234 +++++++----------- src/addons/block/myoverview/lang.json | 4 +- src/core/components/combobox/combobox.ts | 1 - .../components/combobox/core-combobox.html | 2 - src/core/lang.json | 1 - src/theme/theme.base.scss | 14 +- 12 files changed, 141 insertions(+), 272 deletions(-) delete mode 100644 src/addons/block/myoverview/components/filteroptions/filteroptions.html delete mode 100644 src/addons/block/myoverview/components/filteroptions/filteroptions.scss delete mode 100644 src/addons/block/myoverview/components/filteroptions/filteroptions.ts diff --git a/scripts/langindex.json b/scripts/langindex.json index aba8a3680..93ec25362 100644 --- a/scripts/langindex.json +++ b/scripts/langindex.json @@ -40,10 +40,10 @@ "addon.block_learningplans.pluginname": "block_lp", "addon.block_myoverview.all": "block_myoverview", "addon.block_myoverview.allincludinghidden": "block_myoverview", - "addon.block_myoverview.aria:favourites": "block_myoverview", - "addon.block_myoverview.aria:hiddencourses": "block_myoverview", "addon.block_myoverview.card": "block_myoverview", + "addon.block_myoverview.favourites": "block_myoverview", "addon.block_myoverview.future": "block_myoverview", + "addon.block_myoverview.hiddencourses": "block_myoverview", "addon.block_myoverview.inprogress": "block_myoverview", "addon.block_myoverview.lastaccessed": "block_myoverview", "addon.block_myoverview.list": "block_myoverview", @@ -1451,7 +1451,6 @@ "core.allparticipants": "moodle", "core.answer": "moodle", "core.answered": "quiz", - "core.applyfilters": "user", "core.areyousure": "moodle", "core.back": "moodle", "core.block.blocks": "moodle", diff --git a/src/addons/block/myoverview/components/components.module.ts b/src/addons/block/myoverview/components/components.module.ts index 49e53a2f4..c1829bd61 100644 --- a/src/addons/block/myoverview/components/components.module.ts +++ b/src/addons/block/myoverview/components/components.module.ts @@ -17,12 +17,10 @@ import { NgModule } from '@angular/core'; import { CoreSharedModule } from '@/core/shared.module'; import { CoreCoursesComponentsModule } from '@features/courses/components/components.module'; import { AddonBlockMyOverviewComponent } from './myoverview/myoverview'; -import { AddonBlockMyOverviewFilterOptionsComponent } from './filteroptions/filteroptions'; @NgModule({ declarations: [ AddonBlockMyOverviewComponent, - AddonBlockMyOverviewFilterOptionsComponent, ], imports: [ CoreSharedModule, diff --git a/src/addons/block/myoverview/components/filteroptions/filteroptions.html b/src/addons/block/myoverview/components/filteroptions/filteroptions.html deleted file mode 100644 index 2a6caf36b..000000000 --- a/src/addons/block/myoverview/components/filteroptions/filteroptions.html +++ /dev/null @@ -1,58 +0,0 @@ - - - -

{{ 'core.courses.filtermycourses' | translate }}

- - - - - - - - - - - - - {{'addon.block_myoverview.all' | translate}} - - - - {{'addon.block_myoverview.inprogress' | translate}} - - - - {{'addon.block_myoverview.future' | translate}} - - - - {{'addon.block_myoverview.past' | translate}} - - - - - - - - {{customOption.name}} - - - - - - - {{ 'addon.block_myoverview.aria:favourites' | translate }} - - - - - {{ 'addon.block_myoverview.aria:hiddencourses' | translate }} - - - - - - - {{ 'core.applyfilters' | translate }} - - diff --git a/src/addons/block/myoverview/components/filteroptions/filteroptions.scss b/src/addons/block/myoverview/components/filteroptions/filteroptions.scss deleted file mode 100644 index 166260056..000000000 --- a/src/addons/block/myoverview/components/filteroptions/filteroptions.scss +++ /dev/null @@ -1,8 +0,0 @@ -ion-footer { - &::before { - display: none; - } - ion-button { - margin: 0; - } -} diff --git a/src/addons/block/myoverview/components/filteroptions/filteroptions.ts b/src/addons/block/myoverview/components/filteroptions/filteroptions.ts deleted file mode 100644 index ad77d9a5b..000000000 --- a/src/addons/block/myoverview/components/filteroptions/filteroptions.ts +++ /dev/null @@ -1,45 +0,0 @@ -// (C) Copyright 2015 Moodle Pty Ltd. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import { Component, Input } from '@angular/core'; -import { ModalController } from '@singletons'; -import { AddonBlockMyOverviewFilterOptions } from '../myoverview/myoverview'; - -/** - * Component to render a my overview filter options. - */ -@Component({ - selector: 'addon-block-myoverview-filter-options', - templateUrl: 'filteroptions.html', - styleUrls: ['filteroptions.scss'], -}) -export class AddonBlockMyOverviewFilterOptionsComponent { - - @Input() options!: AddonBlockMyOverviewFilterOptions; - - /** - * Appl filters. - */ - apply(): void { - ModalController.dismiss(this.options); - } - - /** - * Close modal. - */ - closeModal(): void { - ModalController.dismiss(); - } - -} 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 f2a0b892e..d4328e235 100644 --- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html +++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html @@ -26,20 +26,51 @@ + (ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.courses.filtermycourses' | translate"> - + + + {{ 'addon.block_myoverview.allincludinghidden' | translate }} + + + {{ 'addon.block_myoverview.all' | translate }} + + + {{ 'addon.block_myoverview.inprogress' | translate }} + + + {{ 'addon.block_myoverview.future' | translate }} + + + {{ 'addon.block_myoverview.past' | translate }} + + + + + {{ customOption.name }} + + + + {{ 'addon.block_myoverview.favourites' | translate }} + + + {{ 'addon.block_myoverview.hiddencourses' | translate }} + + (ionCancel)="filterTextChanged($event.target)" [placeholder]="'core.courses.filtermycourses' | translate"> diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.ts b/src/addons/block/myoverview/components/myoverview/myoverview.ts index d54b6c3b6..14bb2c6ff 100644 --- a/src/addons/block/myoverview/components/myoverview/myoverview.ts +++ b/src/addons/block/myoverview/components/myoverview/myoverview.ts @@ -13,7 +13,6 @@ // limitations under the License. import { Component, OnInit, OnDestroy } from '@angular/core'; -import { ModalOptions } from '@ionic/core'; import { CoreEventObserver, CoreEvents } from '@singletons/events'; import { CoreTimeUtils } from '@services/utils/time'; import { CoreSites, CoreSitesReadingStrategy } from '@services/sites'; @@ -27,12 +26,12 @@ import { CoreUtils } from '@services/utils/utils'; import { CoreDomUtils } from '@services/utils/dom'; import { CoreTextUtils } from '@services/utils/text'; import { AddonCourseCompletion } from '@addons/coursecompletion/services/coursecompletion'; -import { AddonBlockMyOverviewFilterOptionsComponent } from '../filteroptions/filteroptions'; import { IonSearchbar } from '@ionic/angular'; import moment from 'moment'; import { CoreNavigator } from '@services/navigator'; -const FILTER_PRIORITY: AddonBlockMyOverviewTimeFilters[] = ['all', 'inprogress', 'future', 'past']; +const FILTER_PRIORITY: AddonBlockMyOverviewTimeFilters[] = + ['all', 'inprogress', 'future', 'past', 'favourite', 'allincludinghidden', 'hidden']; /** * Component to render a my overview block. @@ -59,6 +58,7 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem filters: AddonBlockMyOverviewFilterOptions = { enabled: false, show: { // Options are visible, disabled, hidden. + allincludinghidden: true, all: true, past: true, inprogress: true, @@ -68,14 +68,7 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem custom: false, }, timeFilterSelected: 'inprogress', - favouriteSelected: false, - hiddenSelected: false, customFilters: [], - count: 0, - }; - - filterModalOptions: ModalOptions = { - component: AddonBlockMyOverviewFilterOptionsComponent, }; isLayoutSwitcherAvailable = false; @@ -100,6 +93,7 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem protected fetchContentDefaultError = 'Error getting my overview data.'; protected gradePeriodAfter = 0; protected gradePeriodBefore = 0; + protected today = 0; constructor() { super('AddonBlockMyOverviewComponent'); @@ -151,43 +145,11 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem return; })); - // Wait for the migration. - await this.currentSite.getLocalSiteConfig( + promises.push(this.currentSite.getLocalSiteConfig( 'AddonBlockMyOverviewFilter', this.filters.timeFilterSelected, - ).then(async (value) => { - if (FILTER_PRIORITY.includes(value as AddonBlockMyOverviewTimeFilters)) { - this.filters.timeFilterSelected = value as AddonBlockMyOverviewTimeFilters; - - return; - } - - // Migrate setting. - this.filters.hiddenSelected = value == 'allincludinghidden' || value == 'hidden'; - - if (value == 'favourite') { - this.filters.favouriteSelected = true; - } else { - this.filters.favouriteSelected = false; - } - - return await this.saveFilters('all'); - }); - - promises.push(this.currentSite.getLocalSiteConfig( - 'AddonBlockMyOverviewFavouriteFilter', - this.filters.favouriteSelected ? 1 : 0, ).then((value) => { - this.filters.favouriteSelected = value == 1; - - return; - })); - - promises.push(this.currentSite.getLocalSiteConfig( - 'AddonBlockMyOverviewHiddenFilter', - this.filters.hiddenSelected ? 1 : 0, - ).then((value) => { - this.filters.hiddenSelected = value == 1; + this.filters.timeFilterSelected = value; return; })); @@ -315,6 +277,7 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem config?.displaygroupingallincludinghidden?.value == '1' || sampleCourse.hidden !== undefined && (!config || config.displaygroupinghidden?.value == '1'); + this.filters.show.allincludinghidden = !config || config.displaygroupingallincludinghidden?.value == '1'; this.filters.show.all = !config || config.displaygroupingall?.value == '1'; this.filters.show.inprogress = !config || config.displaygroupinginprogress?.value == '1'; this.filters.show.past = !config || config.displaygroupingpast?.value == '1'; @@ -338,10 +301,6 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem this.saveFilters('all'); } - this.filterModalOptions.componentProps = { - options: Object.assign({}, this.filters), - }; - this.filterCourses(); } @@ -475,81 +434,66 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem * Set selected courses filter. */ protected async filterCourses(): Promise { - this.filters.count = 0; - let timeFilter = this.filters.timeFilterSelected; - // Filter is not active, take the first active or all. - if (!this.filters.show[timeFilter]) { - timeFilter = FILTER_PRIORITY.find((name) => this.filters.show[name]) || 'all'; - - this.saveFilters(timeFilter); - } - - if (timeFilter !== 'all') { - this.filters.count++; - } - this.filteredCourses = this.allCourses; - const customFilterName = this.block.configsRecord?.customfiltergrouping.value; - const customFilterValue = this.filters.customSelected; - if (customFilterName && this.filters.show.custom && customFilterValue !== undefined) { - this.filters.count++; + if (this.filters.show.custom && timeFilter.startsWith('custom-')) { + // Custom filter. + const customFilterName = this.block.configsRecord?.customfiltergrouping.value; + const customFilterValue = this.filters.customFilters[timeFilter.substring(7)]?.value; - this.loaded = false; - try { - const courses = await CoreCourses.getEnrolledCoursesByCustomField(customFilterName, customFilterValue); + if (customFilterName !== undefined && customFilterValue !== undefined) { + this.loaded = false; + try { + const courses = await CoreCourses.getEnrolledCoursesByCustomField(customFilterName, customFilterValue); - const courseIds = courses.map((course) => course.id); + // Get the courses information from allincludinghidden to get the max info about the course. + const courseIds = courses.map((course) => course.id); - this.filteredCourses = this.filteredCourses.filter((course) => courseIds.includes(course.id)); - } catch (error) { - CoreDomUtils.showErrorModalDefault(error, this.fetchContentDefaultError); - } finally { - this.loaded = true; - } - } - - const onlyFavourite = this.filters.show.favourite && this.filters.favouriteSelected; - if (onlyFavourite) { - this.filters.count++; - } - - const showHidden = this.filters.show.hidden && this.filters.hiddenSelected; - if (showHidden) { - this.filters.count++; - } - - // Time filter, favourite and hidden. - const today = CoreTimeUtils.timestamp(); - - this.filteredCourses = this.filteredCourses.filter((course) => { - let include = timeFilter == 'all'; - - if (!include) { - if ((course.enddate && this.courseClassifyEndDate(course.enddate) < today) || course.completed) { - // Courses that have already ended. - include = timeFilter == 'past'; - } else if (course.startdate && this.courseClassifyStartDate(course.startdate) > today) { - // Courses that have not started yet. - include = timeFilter == 'future'; - } else { - // Courses still in progress. - include = timeFilter == 'inprogress'; + this.filteredCourses = this.filteredCourses.filter((course) => courseIds.includes(course.id)); + } catch (error) { + CoreDomUtils.showErrorModalDefault(error, this.fetchContentDefaultError); + } finally { + this.loaded = true; } } - - if (onlyFavourite) { - include = include && !!course.isfavourite; + } else { + // Filter is not active, take the first active or all. Custom is never saved. + if (!this.filters.show[timeFilter]) { + timeFilter = FILTER_PRIORITY.find((name) => this.filters.show[name]) || 'all'; } + this.saveFilters(timeFilter); - if (!showHidden) { - include = include && !course.hidden; + // Update today date. + this.today = Date.now(); + + // Apply filters. + switch(timeFilter) { + case 'allincludinghidden': + // No nothing, it's all courses. + break; + case 'all': + this.filteredCourses = this.filteredCourses.filter((course) => !course.hidden); + break; + case 'inprogress': + this.filteredCourses = this.filteredCourses.filter((course) => + !course.hidden && !this.isPastCourse(course) && !this.isFutureCourse(course)); + break; + case 'future': + this.filteredCourses = this.filteredCourses.filter((course) => !course.hidden && this.isFutureCourse(course)); + break; + case 'past': + this.filteredCourses = this.filteredCourses.filter((course) => !course.hidden && this.isPastCourse(course)); + break; + case 'favourite': + this.filteredCourses = this.filteredCourses.filter((course) => !course.hidden && course.isfavourite); + break; + case 'hidden': + this.filteredCourses = this.filteredCourses.filter((course) => course.hidden); + break; } - - return include; - }); + } // Text filter. const value = this.textFilter.trim().toLowerCase(); @@ -572,23 +516,41 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem } /** - * This function calculates the end date to use for display classification purposes, incorporating the grace period, if any. + * Calculates if course date is past. * - * @param endDate Course end date. - * @return The new enddate. + * @param course Course Object. + * @return Wether the course is past. */ - protected courseClassifyEndDate(endDate: number): number { - return moment(endDate).add(this.gradePeriodAfter, 'days').valueOf(); + protected isPastCourse(course: CoreEnrolledCourseDataWithOptions): boolean { + if (course.completed) { + return true; + } + + if (!course.enddate) { + return false; + } + + // Calculate the end date to use for display classification purposes, incorporating the grace period, if any. + const endDate = moment(course.enddate * 1000).add(this.gradePeriodAfter, 'days').valueOf(); + + return endDate < this.today; } /** - * This function calculates the start date to use for display classification purposes, incorporating the grace period, if any. + * Calculates if course date is future. * - * @param startDate Course start date. - * @return The new startdate. + * @param course Course Object. + * @return Wether the course is future. */ - protected courseClassifyStartDate(startDate: number): number { - return moment(startDate).subtract(this.gradePeriodBefore, 'days').valueOf(); + protected isFutureCourse(course: CoreEnrolledCourseDataWithOptions): boolean { + if (this.isPastCourse(course) || !course.startdate) { + return false; + } + + // Calculate the start date to use for display classification purposes, incorporating the grace period, if any. + const startDate = moment(course.startdate * 1000).subtract(this.gradePeriodBefore, 'days').valueOf(); + + return startDate > this.today; } /** @@ -630,18 +592,9 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem * @param timeFilter New time filter. * @return Promise resolved when done. */ - async saveFilters(timeFilter: AddonBlockMyOverviewTimeFilters): Promise { + async saveFilters(timeFilter: string): Promise { this.filters.timeFilterSelected = timeFilter; - - this.filterModalOptions.componentProps = { - options: Object.assign({}, this.filters), - }; - - await Promise.all([ - this.currentSite.setLocalSiteConfig('AddonBlockMyOverviewFilter', this.filters.timeFilterSelected), - this.currentSite.setLocalSiteConfig('AddonBlockMyOverviewFavouriteFilter', this.filters.favouriteSelected ? 1 : 0), - this.currentSite.setLocalSiteConfig('AddonBlockMyOverviewHiddenFilter', this.filters.hiddenSelected ? 1 : 0), - ]); + await this.currentSite.setLocalSiteConfig('AddonBlockMyOverviewFilter', timeFilter); } /** @@ -669,13 +622,13 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem } /** - * Opens display Options modal. + * Option selected save and apply filter. * + * @param selected Option selected. * @return Promise resolved when done. */ - filterOptionsChanged(modalData: AddonBlockMyOverviewFilterOptions): void { - this.filters = modalData; - this.saveFilters(this.filters.timeFilterSelected); + async filterOptionsChanged(selected: AddonBlockMyOverviewTimeFilters): Promise { + this.filters.timeFilterSelected = selected; this.filterCourses(); } @@ -698,11 +651,12 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem } type AddonBlockMyOverviewLayouts = 'card'|'list'; -type AddonBlockMyOverviewTimeFilters = 'all'|'inprogress'|'future'|'past'; +type AddonBlockMyOverviewTimeFilters = 'allincludinghidden'|'all'|'inprogress'|'future'|'past'|'favourite'|'hidden'; export type AddonBlockMyOverviewFilterOptions = { enabled: boolean; show: { + allincludinghidden: boolean; all: boolean; inprogress: boolean; future: boolean; @@ -711,15 +665,11 @@ export type AddonBlockMyOverviewFilterOptions = { hidden: boolean; custom: boolean; }; - timeFilterSelected: AddonBlockMyOverviewTimeFilters; - favouriteSelected: boolean; - hiddenSelected: boolean; + timeFilterSelected: string; customFilters: { name: string; value: string; }[]; - customSelected?: string; - count: number; }; type AddonBlockMyOverviewSortOptions = { diff --git a/src/addons/block/myoverview/lang.json b/src/addons/block/myoverview/lang.json index 8030a7813..40c94300b 100644 --- a/src/addons/block/myoverview/lang.json +++ b/src/addons/block/myoverview/lang.json @@ -1,10 +1,10 @@ { "all": "All", "allincludinghidden": "All (including archived)", - "aria:favourites": "Show starred courses only", - "aria:hiddencourses": "Show archived courses", "card": "Card", + "favourites": "Starred", "future": "Future", + "hiddencourses": "Archived", "inprogress": "In progress", "lastaccessed": "Last accessed", "list": "List", diff --git a/src/core/components/combobox/combobox.ts b/src/core/components/combobox/combobox.ts index 32e56a904..83d1f4877 100644 --- a/src/core/components/combobox/combobox.ts +++ b/src/core/components/combobox/combobox.ts @@ -53,7 +53,6 @@ export class CoreComboboxComponent { // Additional options when interface modal is selected. @Input() icon?: string; // Icon for modal interface. - @Input() badge?: number; // Badge number to show near the icon. @Input() modalOptions?: ModalOptions; // Will emit an event the value changed. @Input() listboxId = ''; diff --git a/src/core/components/combobox/core-combobox.html b/src/core/components/combobox/core-combobox.html index baa897fa3..02b0cec27 100644 --- a/src/core/components/combobox/core-combobox.html +++ b/src/core/components/combobox/core-combobox.html @@ -1,7 +1,6 @@ - {{badge}} @@ -14,7 +13,6 @@ - {{badge}} {{ label }}:
{{selection}} diff --git a/src/core/lang.json b/src/core/lang.json index a66c1a6a3..7429c930b 100644 --- a/src/core/lang.json +++ b/src/core/lang.json @@ -9,7 +9,6 @@ "allparticipants": "All participants", "answer": "Answer", "answered": "Answered", - "applyfilters": "Apply filters", "areyousure": "Are you sure?", "back": "Back", "browser": "Browser", diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index a162e6c0a..e135701a0 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -1020,10 +1020,16 @@ ion-select::part(icon) { opacity: 1; } -ion-select-popover ion-item.core-select-option-title { - cursor: pointer; - ion-radio { - display: none; +ion-select-popover { + ion-item.core-select-option-border-bottom { + border-bottom: 1px solid var(--stroke); + } + + ion-item.core-select-option-title { + cursor: pointer; + ion-radio { + display: none; + } } } From d776cbe054bb1187c59b74b022080d2f764544c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 1 Apr 2022 13:03:31 +0200 Subject: [PATCH 07/10] MOBILE-3833 format-text: Change expand image icon --- src/core/directives/format-text.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts index f134eddd6..a6f0d2f9d 100644 --- a/src/core/directives/format-text.ts +++ b/src/core/directives/format-text.ts @@ -256,7 +256,8 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncCompo button.classList.add('hidden'); button.setAttribute('aria-label', label); // Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed. - button.innerHTML = '