MOBILE-3320 format-text: Improve missing images
parent
6700f92a53
commit
3c4b4c3786
|
@ -224,6 +224,7 @@ export class CoreFormatTextDirective implements OnChanges {
|
||||||
const button = document.createElement('button');
|
const button = document.createElement('button');
|
||||||
|
|
||||||
button.classList.add('core-image-viewer-icon');
|
button.classList.add('core-image-viewer-icon');
|
||||||
|
button.classList.add('hidden');
|
||||||
button.setAttribute('aria-label', label);
|
button.setAttribute('aria-label', label);
|
||||||
// Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
|
// Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
|
||||||
button.innerHTML = '<ion-icon name="fas-search" aria-hidden="true" src="assets/fonts/font-awesome/solid/search.svg">\
|
button.innerHTML = '<ion-icon name="fas-search" aria-hidden="true" src="assets/fonts/font-awesome/solid/search.svg">\
|
||||||
|
@ -236,6 +237,14 @@ export class CoreFormatTextDirective implements OnChanges {
|
||||||
});
|
});
|
||||||
|
|
||||||
img.parentNode?.appendChild(button);
|
img.parentNode?.appendChild(button);
|
||||||
|
|
||||||
|
if (img.complete && img.naturalWidth > 0) {
|
||||||
|
// Image has already loaded, show the button.
|
||||||
|
button.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
// Show the button when the image is loaded.
|
||||||
|
img.onload = () => button.classList.remove('hidden');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -189,6 +189,10 @@ core-format-text {
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -521,11 +521,6 @@ ion-avatar ion-img, ion-avatar img {
|
||||||
img[core-external-content]:not([src]) {
|
img[core-external-content]:not([src]) {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
img[alt] {
|
|
||||||
text-indent: -999999px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Activity modules
|
// Activity modules
|
||||||
.core-module-icon {
|
.core-module-icon {
|
||||||
|
|
Loading…
Reference in New Issue