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

MOBILE-4059 core: Fix error-info for long errors

Browse Source
This commit is contained in:
Noel De Martin 2022-11-22 17:27:10 +01:00
parent de28040df2
commit e08d5e06c3
3 changed files with 18 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/core/components/error-info/error-info.scss
View File

@ -12,24 +12,22 @@
margin-bottom: 0;
}
.core-error-info--content {
.core-error-info--code {
padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
font-size: var(--font-size-normal);
}
.core-error-info--code {
font-size: var(--font-size-normal);
}
.core-error-info--details {
color: var(--gray-500);
}
.core-error-info--details p {
padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
color: var(--gray-500);
}
.core-error-info--checkbox {
display: none;
& + .core-error-info--content {
max-height: calc(var(--font-size-sm) + 2 * var(--spacing-2));
& + .core-error-info--details,
& + .core-error-info--code + .core-error-info--details {
max-height: 0;
overflow: hidden;
transition: max-height 600ms ease-in-out;
@ -58,8 +56,9 @@
}
&:checked + .core-error-info--content {
max-height: 150px;
&:checked + .core-error-info--details,
&:checked + .core-error-info--code + .core-error-info--details {
max-height: 110px;
& + .core-error-info--toggle .core-error-info--hide-content {
display: flex;
@ -73,16 +72,4 @@
}
&.has-error-code .core-error-info--checkbox {
& + .core-error-info--content {
max-height: calc(var(--font-size-normal) + 2 * var(--spacing-2));
}
&:checked + .core-error-info--content {
max-height: 170px;
}
}
}

10
src/core/components/error-info/error-info.ts
View File

@ -40,16 +40,16 @@ export class CoreErrorInfoComponent implements OnInit, OnChanges {
*/
static render(errorDetails: string, errorCode?: string): string {
const toggleId = CoreForms.uniqueId('error-info-toggle');
const errorCodeLabel = Translate.instant('core.errorcode');
const errorCodeLabel = Translate.instant('core.errorcode', { errorCode });
const hideDetailsLabel = Translate.instant('core.errordetailshide');
const showDetailsLabel = Translate.instant('core.errordetailsshow');
return `
<div class="core-error-info ${errorCode ? 'has-error-code' : ''}">
<div class="core-error-info">
<input id="${toggleId}" type="checkbox" class="core-error-info--checkbox" />
<div class="core-error-info--content">
${errorCode ? `<p class="core-error-info--code"><strong>${errorCodeLabel}: ${errorCode}</strong></p>` : ''}
<p class="core-error-info--details">${errorDetails}</p>
${errorCode ? `<div class="core-error-info--code"><strong>${errorCodeLabel}</strong></div>` : ''}
<div class="core-error-info--details">
<p>${errorDetails}</p>
</div>
<label for="${toggleId}" class="core-error-info--toggle" aria-hidden="true">
<span class="core-error-info--hide-content">

2
src/core/lang.json
View File

@ -102,7 +102,7 @@
"endonesteptour": "Got it",
"error": "Error",
"errorchangecompletion": "An error occurred while changing the completion status. Please try again.",
"errorcode": "Error code",
"errorcode": "Error code: {{errorCode}}",
"errordeletefile": "Error deleting the file. Please try again.",
"errordetailshide": "Hide error details",
"errordetailsshow": "Show error details",