From ec867198332615007e3a4ba440f8b60117f1600a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 29 Nov 2022 10:46:20 +0100 Subject: [PATCH] MOBILE-4270 chore: Final deprecation of CoreIconComponent --- src/core/components/components.module.ts | 3 - src/core/components/icon/icon.scss | 128 ----------------------- src/core/components/icon/icon.ts | 116 -------------------- src/core/components/tests/icon.test.ts | 36 ------- upgrade.txt | 4 + 5 files changed, 4 insertions(+), 283 deletions(-) delete mode 100644 src/core/components/icon/icon.scss delete mode 100644 src/core/components/icon/icon.ts delete mode 100644 src/core/components/tests/icon.test.ts diff --git a/src/core/components/components.module.ts b/src/core/components/components.module.ts index f0cfb2cef..4609c0f04 100644 --- a/src/core/components/components.module.ts +++ b/src/core/components/components.module.ts @@ -33,7 +33,6 @@ import { CoreDynamicComponent } from './dynamic-component/dynamic-component'; import { CoreEmptyBoxComponent } from './empty-box/empty-box'; import { CoreFileComponent } from './file/file'; import { CoreFilesComponent } from './files/files'; -import { CoreIconComponent } from './icon/icon'; import { CoreIframeComponent } from './iframe/iframe'; import { CoreInfiniteLoadingComponent } from './infinite-loading/infinite-loading'; import { CoreInputErrorsComponent } from './input-errors/input-errors'; @@ -82,7 +81,6 @@ import { CoreSheetModalComponent } from '@components/sheet-modal/sheet-modal'; CoreFileComponent, CoreFilesComponent, CoreGroupSelectorComponent, - CoreIconComponent, CoreIframeComponent, CoreInfiniteLoadingComponent, CoreInputErrorsComponent, @@ -136,7 +134,6 @@ import { CoreSheetModalComponent } from '@components/sheet-modal/sheet-modal'; CoreFileComponent, CoreFilesComponent, CoreGroupSelectorComponent, - CoreIconComponent, CoreIframeComponent, CoreInfiniteLoadingComponent, CoreInputErrorsComponent, diff --git a/src/core/components/icon/icon.scss b/src/core/components/icon/icon.scss deleted file mode 100644 index cc3176c14..000000000 --- a/src/core/components/icon/icon.scss +++ /dev/null @@ -1,128 +0,0 @@ -:host { - margin: 0; -} - -:host-context([dir=rtl]).icon-flip-rtl { - transform: scaleX(-1); -} - -:host-context(ion-item.md) ion-icon { - &[slot] { - color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54); - font-size: 24px; - margin-top: 12px; - margin-bottom: 12px; - } - &[slot=start] { - margin-right: 32px; - } - &[slot=end] { - margin-left: 16px; - } - - @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { - &[slot=start] { - margin-right: unset; - -webkit-margin-end: 32px; - margin-inline-end: 32px; - } - } - - @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { - &[slot=end] { - margin-left: unset; - -webkit-margin-start: 16px; - margin-inline-start: 16px; - } - } -} - -:host-context(ion-item.ios) ion-icon { - &[slot] { - font-size: 1.6em; - } - &[slot=start] { - margin-top: 7px; - margin-bottom: 7px; - margin-left: 0; - margin-right: 20px; - } - &[slot=end] { - margin-top: 7px; - margin-bottom: 7px; - margin-left: 10px; - margin-right: 10px; - } - - @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { - &[slot=start] { - margin-left: unset; - margin-right: unset; - -webkit-margin-start: 0; - margin-inline-start: 0; - -webkit-margin-end: 20px; - margin-inline-end: 20px; - } - } - - @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { - &[slot=end] { - margin-left: unset; - margin-right: unset; - -webkit-margin-start: 10px; - margin-inline-start: 10px; - -webkit-margin-end: 10px; - margin-inline-end: 10px; - } - } -} - -:host-context(ion-item.ion-color) { - color: var(--ion-color-contrast); -} - -:host-context(ion-button.md) ion-icon, -:host-context(ion-button.ios) ion-icon { - &[slot] { - font-size: 1.4em; - pointer-events: none; - - } - &[slot=start] { - margin-left: -0.3em; - margin-right: 0.3em; - margin-top: 0; - margin-bottom: 0; - } - &[slot=end] { - margin-left: 0.3em; - margin-right: -0.2em; - margin-top: 0; - margin-bottom: 0; - } - &[slot=icon-only] { - font-size: 1.8em; - } - - @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { - &[slot=start] { - margin-left: unset; - margin-right: unset; - -webkit-margin-start: -0.3em; - margin-inline-start: -0.3em; - -webkit-margin-end: 0.3em; - margin-inline-end: 0.3em; - } - } - - @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) { - &[slot=end] { - margin-left: unset; - margin-right: unset; - -webkit-margin-start: 0.3em; - margin-inline-start: 0.3em; - -webkit-margin-end: -0.2em; - margin-inline-end: -0.2em; - } - } -} diff --git a/src/core/components/icon/icon.ts b/src/core/components/icon/icon.ts deleted file mode 100644 index 6850c88d6..000000000 --- a/src/core/components/icon/icon.ts +++ /dev/null @@ -1,116 +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, OnChanges, ElementRef, SimpleChange } from '@angular/core'; -import { CoreLogger } from '@singletons/logger'; - -/** - * Core Icon is a component that enables the posibility to add fontawesome icon to the html. It - * To use fontawesome just place the full icon name with the fa- prefix and - * the component will detect it. - * - * Check available icons at https://fontawesome.com/icons?d=gallery&m=free - * - * @deprecated since 3.9.3. Please use instead. - */ -@Component({ - selector: 'core-icon', - template: '', - styleUrls: ['icon.scss'], -}) -export class CoreIconComponent implements OnChanges { - - // Common params. - @Input() name = ''; - @Input() color?: string; - @Input() slash?: boolean; // Display a red slash over the icon. - - // FontAwesome params. - @Input('fixed-width') fixedWidth?: boolean; // eslint-disable-line @angular-eslint/no-input-rename - - @Input() label?: string; - @Input() flipRtl?: boolean; // Whether to flip the icon in RTL. Defaults to false. - - protected element: HTMLElement; - - constructor( - el: ElementRef, - ) { - this.element = el.nativeElement; - - CoreLogger.getInstance('CoreIconComponent').error('CoreIconComponent is deprecated. Please use ion-icon instead.'); - } - - /** - * Detect changes on input properties. - */ - ngOnChanges(changes: {[name: string]: SimpleChange}): void { - if (!changes.name || !this.name) { - return; - } - - setTimeout(() => { - this.updateIcon(this.element.children[0]); - }); - } - - protected updateIcon(iconElement: Element): void { - !this.label && iconElement.setAttribute('aria-hidden', 'true'); - !this.label && iconElement.setAttribute('role', 'presentation'); - this.label && iconElement.setAttribute('aria-label', this.label); - this.label && iconElement.setAttribute('title', this.label); - - const attrs = this.element.attributes; - for (let i = attrs.length - 1; i >= 0; i--) { - if (attrs[i].name != 'name') { - iconElement.setAttribute(attrs[i].name, attrs[i].value); - } - } - - if (this.isTrueProperty(this.slash)) { - iconElement.classList.add('icon-slash'); - } else { - iconElement.classList.remove('icon-slash'); - } - - if (this.isTrueProperty(this.flipRtl)) { - iconElement.classList.add('icon-flip-rtl'); - } else { - iconElement.classList.remove('icon-flip-rtl'); - } - - if (this.isTrueProperty(this.fixedWidth)) { - iconElement.classList.add('fa-fw'); - } else { - iconElement.classList.remove('fa-fw'); - } - } - - /** - * Check if the value is true or on. - * - * @param val Value to be checked. - * @returns If has a value equivalent to true. - */ - isTrueProperty(val: unknown): boolean { - if (typeof val === 'string') { - val = val.toLowerCase().trim(); - - return (val === 'true' || val === 'on' || val === ''); - } - - return !!val; - } - -} diff --git a/src/core/components/tests/icon.test.ts b/src/core/components/tests/icon.test.ts deleted file mode 100644 index 8efe2fcc6..000000000 --- a/src/core/components/tests/icon.test.ts +++ /dev/null @@ -1,36 +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 { CoreIconComponent } from '@components/icon/icon'; - -import { renderWrapperComponent } from '@/testing/utils'; - -describe('CoreIconComponent', () => { - - it('should render', async () => { - // Act - const fixture = await renderWrapperComponent(CoreIconComponent, 'core-icon', { name: 'fa-thumbs-up' }); - - // Assert - expect(fixture.nativeElement.innerHTML.trim()).not.toHaveLength(0); - - const icon = fixture.nativeElement.querySelector('ion-icon'); - const name = icon?.getAttribute('name') || icon?.getAttribute('ng-reflect-name') || ''; - - expect(icon).not.toBeNull(); - expect(name).toEqual('fa-thumbs-up'); - expect(icon?.getAttribute('role')).toEqual('presentation'); - }); - -}); diff --git a/upgrade.txt b/upgrade.txt index 809b24292..8e951b16e 100644 --- a/upgrade.txt +++ b/upgrade.txt @@ -1,6 +1,10 @@ This files describes API changes in the Moodle Mobile app, information provided here is intended especially for developers. +=== 4.2.0 === + +- CoreIconComponent has been removed after deprecation period: Use CoreFaIconDirective instead. + === 4.1.0 === - Zoom levels changed from "normal / low / high" to " none / medium / high".