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

main
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; margin-bottom: 0;
} }
.core-error-info--content { .core-error-info--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(--font-size-normal);
}
.core-error-info--code { .core-error-info--details p {
font-size: var(--font-size-normal); padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
} color: var(--gray-500);
.core-error-info--details {
color: var(--gray-500);
}
} }
.core-error-info--checkbox { .core-error-info--checkbox {
display: none; display: none;
& + .core-error-info--content { & + .core-error-info--details,
max-height: calc(var(--font-size-sm) + 2 * var(--spacing-2)); & + .core-error-info--code + .core-error-info--details {
max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 600ms ease-in-out; transition: max-height 600ms ease-in-out;
@ -58,8 +56,9 @@
} }
&:checked + .core-error-info--content { &:checked + .core-error-info--details,
max-height: 150px; &:checked + .core-error-info--code + .core-error-info--details {
max-height: 110px;
& + .core-error-info--toggle .core-error-info--hide-content { & + .core-error-info--toggle .core-error-info--hide-content {
display: flex; 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 { static render(errorDetails: string, errorCode?: string): string {
const toggleId = CoreForms.uniqueId('error-info-toggle'); 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 hideDetailsLabel = Translate.instant('core.errordetailshide');
const showDetailsLabel = Translate.instant('core.errordetailsshow'); const showDetailsLabel = Translate.instant('core.errordetailsshow');
return ` 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" /> <input id="${toggleId}" type="checkbox" class="core-error-info--checkbox" />
<div class="core-error-info--content"> ${errorCode ? `<div class="core-error-info--code"><strong>${errorCodeLabel}</strong></div>` : ''}
${errorCode ? `<p class="core-error-info--code"><strong>${errorCodeLabel}: ${errorCode}</strong></p>` : ''} <div class="core-error-info--details">
<p class="core-error-info--details">${errorDetails}</p> <p>${errorDetails}</p>
</div> </div>
<label for="${toggleId}" class="core-error-info--toggle" aria-hidden="true"> <label for="${toggleId}" class="core-error-info--toggle" aria-hidden="true">
<span class="core-error-info--hide-content"> <span class="core-error-info--hide-content">

2
src/core/lang.json
View File

@ -102,7 +102,7 @@
"endonesteptour": "Got it", "endonesteptour": "Got it",
"error": "Error", "error": "Error",
"errorchangecompletion": "An error occurred while changing the completion status. Please try again.", "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.", "errordeletefile": "Error deleting the file. Please try again.",
"errordetailshide": "Hide error details", "errordetailshide": "Hide error details",
"errordetailsshow": "Show error details", "errordetailsshow": "Show error details",