Add div for inner extension helper text

The theme callback would set innerHTML on the header which wipes out the
dismiss button. With an inner div we can replace the inner HTML without
worrying about other elements in the header.

Closes #2799.
This commit is contained in:
Asher 2021-03-01 13:29:19 -06:00
parent a5edbcb6b6
commit 6dd8b63f4c
No known key found for this signature in database
GPG Key ID: D63C1EF81242354A
1 changed files with 5 additions and 1 deletions

View File

@ -466,11 +466,14 @@ export class ExtensionsViewPaneContainer extends ViewPaneContainer implements IE
helperHeader.style.fontWeight = '600'; helperHeader.style.fontWeight = '600';
helperHeader.style.padding = 'padding: 5px 16px'; helperHeader.style.padding = 'padding: 5px 16px';
helperHeader.style.position = 'relative'; helperHeader.style.position = 'relative';
const helperText = append(helperHeader, $('div'));
// We call this function because it gives us access to the current theme // We call this function because it gives us access to the current theme
// Then we can apply the link color to the links in the helper header // Then we can apply the link color to the links in the helper header
registerThemingParticipant((theme) => { registerThemingParticipant((theme) => {
const linkColor = theme.getColor(textLinkForeground); const linkColor = theme.getColor(textLinkForeground);
helperHeader.innerHTML = ` helperText.innerHTML = `
<div style="margin-bottom: 8px;"> <div style="margin-bottom: 8px;">
<p style="margin-bottom: 0; display: flex; align-items: center"><span class="codicon codicon-warning" style="margin-right: 2px; color: #C4A103"></span>WARNING</p> <p style="margin-bottom: 0; display: flex; align-items: center"><span class="codicon codicon-warning" style="margin-right: 2px; color: #C4A103"></span>WARNING</p>
<p style="margin-top: 0; margin-bottom: 4px"> <p style="margin-top: 0; margin-bottom: 4px">
@ -481,6 +484,7 @@ export class ExtensionsViewPaneContainer extends ViewPaneContainer implements IE
</div> </div>
`; `;
}); });
const dismiss = append(helperHeader, $('span')); const dismiss = append(helperHeader, $('span'));
dismiss.innerHTML = 'Dismiss'; dismiss.innerHTML = 'Dismiss';
dismiss.style.display = 'block'; dismiss.style.display = 'block';