EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4268 core: Rename core-error-accordion

main
Noel De Martin 2024-03-18 09:30:14 +01:00
parent eb0738cb0f
commit e1be8caace
6 changed files with 36 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/components/error-info/core-error-info.html → src/core/components/error-accordion/core-error-accordion.html
View File

@ -2,5 +2,5 @@
The markup for this component is rendered dynamically using the static render() method The markup for this component is rendered dynamically using the static render() method
instead of using Angular's engine. The reason for using this approach is that this instead of using Angular's engine. The reason for using this approach is that this
allows injecting this component into HTML directly, rather than requiring Angular allows injecting this component into HTML directly, rather than requiring Angular
to control its lifecycle. to control its lifecycle. This is necessary, for example, to render within alerts.
--> -->

24
src/core/components/error-info/error-info.scss → src/core/components/error-accordion/error-accordion.scss
View File

@ -1,4 +1,4 @@
.core-error-info { .core-error-accordion {
background: var(--gray-200); background: var(--gray-200);
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
font-size: var(--body-font-size-sm); font-size: var(--body-font-size-sm);
@ -12,26 +12,26 @@
margin-bottom: 0; margin-bottom: 0;
} }
.core-error-info--code { .core-error-accordion--code {
padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2); padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
font-size: var(--body-font-size-md); font-size: var(--body-font-size-md);
} }
.core-error-info--details p { .core-error-accordion--details p {
padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2); padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
color: var(--gray-500); color: var(--gray-500);
} }
.core-error-info--checkbox { .core-error-accordion--checkbox {
display: none; display: none;
& + .core-error-info--details, & + .core-error-accordion--details,
& + .core-error-info--code + .core-error-info--details { & + .core-error-accordion--code + .core-error-accordion--details {
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 600ms ease-in-out; transition: max-height 600ms ease-in-out;
& + .core-error-info--toggle { & + .core-error-accordion--toggle {
display: flex; display: flex;
padding: var(--spacing-2); padding: var(--spacing-2);
min-height: var(--a11y-min-target-size); min-height: var(--a11y-min-target-size);
@ -48,7 +48,7 @@
width: 11px; width: 11px;
} }
.core-error-info--hide-content { .core-error-accordion--hide-content {
display: none; display: none;
} }
@ -56,15 +56,15 @@
} }
&:checked + .core-error-info--details, &:checked + .core-error-accordion--details,
&:checked + .core-error-info--code + .core-error-info--details { &:checked + .core-error-accordion--code + .core-error-accordion--details {
max-height: 110px; max-height: 110px;
& + .core-error-info--toggle .core-error-info--hide-content { & + .core-error-accordion--toggle .core-error-accordion--hide-content {
display: flex; display: flex;
} }
& + .core-error-info--toggle .core-error-info--show-content { & + .core-error-accordion--toggle .core-error-accordion--show-content {
display: none; display: none;
} }

26
src/core/components/error-info/error-info.ts → src/core/components/error-accordion/error-accordion.ts
View File

@ -23,11 +23,11 @@ import { CoreForms } from '@singletons/form';
* it can be rendered using the static render() method to get the raw HTML. * it can be rendered using the static render() method to get the raw HTML.
*/ */
@Component({ @Component({
selector: 'core-error-info', selector: 'core-error-accordion',
templateUrl: 'core-error-info.html', templateUrl: 'core-error-accordion.html',
styleUrls: ['error-info.scss'], styleUrls: ['error-accordion.scss'],
}) })
export class CoreErrorInfoComponent implements OnInit, OnChanges { export class CoreErrorAccordionComponent implements OnInit, OnChanges {
/** /**
* Render an instance of the component into an HTML string. * Render an instance of the component into an HTML string.
@ -37,24 +37,24 @@ export class CoreErrorInfoComponent implements OnInit, OnChanges {
* @returns Component HTML. * @returns Component HTML.
*/ */
static render(errorDetails: string, errorCode: string): string { static render(errorDetails: string, errorCode: string): string {
const toggleId = CoreForms.uniqueId('error-info-toggle'); const toggleId = CoreForms.uniqueId('error-accordion-toggle');
const errorCodeLabel = Translate.instant('core.errorcode', { errorCode }); const errorCodeLabel = Translate.instant('core.errorcode', { errorCode });
const hideDetailsLabel = Translate.instant('core.errordetailshide'); const hideDetailsLabel = Translate.instant('core.errordetailshide');
const showDetailsLabel = Translate.instant('core.errordetailsshow'); const showDetailsLabel = Translate.instant('core.errordetailsshow');
return ` return `
<div class="core-error-info"> <div class="core-error-accordion">
<input id="${toggleId}" type="checkbox" class="core-error-info--checkbox" /> <input id="${toggleId}" type="checkbox" class="core-error-accordion--checkbox" />
<div class="core-error-info--code"><strong>${errorCodeLabel}</strong></div> <div class="core-error-accordion--code"><strong>${errorCodeLabel}</strong></div>
<div class="core-error-info--details"> <div class="core-error-accordion--details">
<p>${errorDetails}</p> <p>${errorDetails}</p>
</div> </div>
<label for="${toggleId}" class="core-error-info--toggle" aria-hidden="true"> <label for="${toggleId}" class="core-error-accordion--toggle" aria-hidden="true">
<span class="core-error-info--hide-content"> <span class="core-error-accordion--hide-content">
${hideDetailsLabel} ${hideDetailsLabel}
<ion-icon name="chevron-up" /> <ion-icon name="chevron-up" />
</span> </span>
<span class="core-error-info--show-content"> <span class="core-error-accordion--show-content">
${showDetailsLabel} ${showDetailsLabel}
<ion-icon name="chevron-down" /> <ion-icon name="chevron-down" />
</span> </span>
@ -86,7 +86,7 @@ export class CoreErrorInfoComponent implements OnInit, OnChanges {
* Render component html in the element created by Angular. * Render component html in the element created by Angular.
*/ */
private render(): void { private render(): void {
this.element.nativeElement.innerHTML = CoreErrorInfoComponent.render(this.errorDetails, this.errorCode); this.element.nativeElement.innerHTML = CoreErrorAccordionComponent.render(this.errorDetails, this.errorCode);
} }
} }

9
src/core/features/login/pages/site/site.ts
View File

@ -40,7 +40,7 @@ import { CoreForms } from '@singletons/form';
import { AlertButton } from '@ionic/core'; import { AlertButton } from '@ionic/core';
import { CoreSiteError, CoreSiteErrorDebug } from '@classes/errors/siteerror'; import { CoreSiteError, CoreSiteErrorDebug } from '@classes/errors/siteerror';
import { CoreUserSupport } from '@features/user/services/support'; import { CoreUserSupport } from '@features/user/services/support';
import { CoreErrorInfoComponent } from '@components/error-info/error-info'; import { CoreErrorAccordionComponent } from '@components/error-accordion/error-accordion';
import { CoreUserSupportConfig } from '@features/user/classes/support/support-config'; import { CoreUserSupportConfig } from '@features/user/classes/support/support-config';
import { CoreUserGuestSupportConfig } from '@features/user/classes/support/guest-support-config'; import { CoreUserGuestSupportConfig } from '@features/user/classes/support/guest-support-config';
import { CoreLoginError } from '@classes/errors/loginerror'; import { CoreLoginError } from '@classes/errors/loginerror';
@ -421,7 +421,7 @@ export class CoreLoginSitePage implements OnInit {
} }
if (debug) { if (debug) {
errorMessage = `<p>${errorMessage}</p><div class="core-error-info-container"></div>`; errorMessage = `<p>${errorMessage}</p><div class="core-error-accordion-container"></div>`;
} }
const alertSupportConfig = supportConfig; const alertSupportConfig = supportConfig;
@ -457,9 +457,10 @@ export class CoreLoginSitePage implements OnInit {
}); });
if (debug) { if (debug) {
const containerElement = alertElement.querySelector('.core-error-info-container'); const containerElement = alertElement.querySelector('.core-error-accordion-container');
if (containerElement) { if (containerElement) {
containerElement.innerHTML = CoreErrorInfoComponent.render(debug.details, debug.code); containerElement.innerHTML = CoreErrorAccordionComponent.render(debug.details, debug.code);
} }
} }
} }

8
src/core/services/utils/dom.ts
View File

@ -52,7 +52,7 @@ import { Subscription } from 'rxjs';
import { CoreNetwork } from '@services/network'; import { CoreNetwork } from '@services/network';
import { CoreSiteError } from '@classes/errors/siteerror'; import { CoreSiteError } from '@classes/errors/siteerror';
import { CoreUserSupport } from '@features/user/services/support'; import { CoreUserSupport } from '@features/user/services/support';
import { CoreErrorInfoComponent } from '@components/error-info/error-info'; import { CoreErrorAccordionComponent } from '@components/error-accordion/error-accordion';
import { CorePlatform } from '@services/platform'; import { CorePlatform } from '@services/platform';
import { CoreCancellablePromise } from '@classes/cancellable-promise'; import { CoreCancellablePromise } from '@classes/cancellable-promise';
import { CoreLang } from '@services/lang'; import { CoreLang } from '@services/lang';
@ -1038,7 +1038,7 @@ export class CoreDomUtilsProvider {
alertOptions.buttons = error.buttons; alertOptions.buttons = error.buttons;
} else if (error instanceof CoreSiteError) { } else if (error instanceof CoreSiteError) {
if (error.debug) { if (error.debug) {
alertOptions.message = `<p>${alertOptions.message}</p><div class="core-error-info-container"></div>`; alertOptions.message = `<p>${alertOptions.message}</p><div class="core-error-accordion-container"></div>`;
} }
const supportConfig = error.supportConfig; const supportConfig = error.supportConfig;
@ -1062,10 +1062,10 @@ export class CoreDomUtilsProvider {
const alertElement = await this.showAlertWithOptions(alertOptions, autocloseTime); const alertElement = await this.showAlertWithOptions(alertOptions, autocloseTime);
if (error instanceof CoreSiteError && error.debug) { if (error instanceof CoreSiteError && error.debug) {
const containerElement = alertElement.querySelector('.core-error-info-container'); const containerElement = alertElement.querySelector('.core-error-accordion-container');
if (containerElement) { if (containerElement) {
containerElement.innerHTML = CoreErrorInfoComponent.render(error.debug.details, error.debug.code); containerElement.innerHTML = CoreErrorAccordionComponent.render(error.debug.details, error.debug.code);
} }
} }

2
src/theme/theme.scss
View File

@ -26,8 +26,8 @@
@import "components/rubrics.scss"; @import "components/rubrics.scss";
@import "components/mod-label.scss"; @import "components/mod-label.scss";
@import "components/ion-icon.scss"; @import "components/ion-icon.scss";
@import "../core/components/error-info/error-info.scss";
@import "components/videojs.scss"; @import "components/videojs.scss";
@import "../core/components/error-accordion/error-accordion.scss";
/* Some styles from 3rd party libraries. */ /* Some styles from 3rd party libraries. */
@import "bootstrap.scss"; @import "bootstrap.scss";