a
/
code-server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add helper header above extensions search 

Add a short message above the search box on the Extensions panel. This
helps explain the extension divergence to the user.

If they click dismiss, it stores an item in localStorage to prevent the
message from showing up on subsequent loads.

Co-authored-by: Asher <ash@coder.com>
This commit is contained in:
Joe Previte 2020-12-21 10:14:23 -07:00 committed by Joe
parent eae285cf93
commit d9508946b5
No known key found for this signature in database
GPG Key ID: 1F6B761444051F8B
1 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts
View File

@ -410,6 +410,38 @@ export class ExtensionsViewPaneContainer extends ViewPaneContainer implements IE
overlay.style.backgroundColor = overlayBackgroundColor; overlay.style.backgroundColor = overlayBackgroundColor;
hide(overlay); hide(overlay);
// NOTE@coder this UI element helps users understand the extension marketplace divergence
const extensionHelperLocalStorageKey = 'coder.extension-help-message';
if (localStorage.getItem(extensionHelperLocalStorageKey) === null) {
const helperHeader = append(this.root, $('.header'));
helperHeader.id = 'codeServerMarketplaceHelper';
helperHeader.style.height = 'auto';
helperHeader.style.fontWeight = '600';
helperHeader.style.padding = 'padding: 5px 16px';
helperHeader.style.position = 'relative';
helperHeader.innerHTML = `
<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-top: 0; margin-bottom: 4px">
These extensions are not official. Find additional open-source extensions
<a href="https://open-vsx.org/" target="_blank">here</a>.
See <a href="https://github.com/cdr/code-server/blob/master/doc/FAQ.md#differences-compared-to-vs-code" target="_blank">docs</a>.
</p>
</div>
`;
const dismiss = append(helperHeader, $('span'));
dismiss.innerHTML = 'Dismiss';
dismiss.style.display = 'block';
dismiss.style.textAlign = 'right';
dismiss.style.cursor = 'pointer';
dismiss.onclick = () => {
helperHeader.remove();
localStorage.setItem(extensionHelperLocalStorageKey, 'viewed');
};
}
const header = append(this.root, $('.header')); const header = append(this.root, $('.header'));
const placeholder = localize('searchExtensions', "Search Extensions in Marketplace"); const placeholder = localize('searchExtensions', "Search Extensions in Marketplace");
const searchValue = this.searchViewletState['query.value'] ? this.searchViewletState['query.value'] : ''; const searchValue = this.searchViewletState['query.value'] ? this.searchViewletState['query.value'] : '';