Adapted css and color variables in vsx-registry extension

Additionally - added an AlertMessage if there is no Server URL set in preferences - adapted fetch params in vsx-registry-api Signed-off-by: Jan Bicker <jan.bicker@typefox.io>
eclipse-theia · Jan 10, 2020 · d72e3bd · d72e3bd
1 parent dcabfa3
commit d72e3bd
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 30 deletions.
diff --git a/packages/vsx-registry/src/browser/style/index.css b/packages/vsx-registry/src/browser/style/index.css
@@ -33,52 +33,50 @@
 }
 
 .theia-vsx-registry .extension-header-container {
-    background: var(--theia-layout-color1);
     margin-bottom: 5px;
-    color: var(--theia-ui-font-color1);
 }
 
 .theia-vsx-registry .extension-button {
-    background-color: var(--theia-success-color1);
+    background-color: var(--theia-extensionButton-prominentBackground);
     padding: 2px;
     box-sizing: border-box;
-    color: var(--theia-ui-icon-font-color);
+    color: var(--theia-extensionButton-prominentForeground);
     width: 65px;
     text-align: center;
     font-size: var(--theia-ui-font-size0);
     text-transform: uppercase;
 }
 
 .theia-vsx-registry .extension-button.working {
-    background-color: var(--theia-disabled-color1);
-    color: var(--theia-ui-font-color0);
+    background-color: var(--theia-button-background);
+    color: var(--theia-button-foreground);
     width: auto;
 }
 
 .theia-vsx-registry .extension-button:hover {
     cursor: pointer;
-    background-color: var(--theia-success-color0);
+    background-color: var(--theia-extensionButton-prominentHoverBackground);
 }
 
 .theia-vsx-registry .extension-button.working:hover {
-    background-color: var(--theia-disabled-color1);
+    background-color: var(--theia-button-hoverBackground);
     cursor: default;
 }
 
 .theia-vsx-registry .extension-button.installed {
-    background-color: var(--theia-error-color1);
+    background-color: var(--theia-button-background);
 }
 
 .theia-vsx-registry .extension-button.outdated {
-    background-color: var(--theia-accent-color2);
+    background-color: var(--theia-button-background);
 }
 
 .theia-vsx-registry .extension-button.installed:hover {
-    background-color: var(--theia-error-color0);
+    background-color: var(--theia-button-hoverBackground);
 }
 
 .theia-vsx-registry .extension-button.outdated:hover {
-    background-color: var(--theia-accent-color1);
+    background-color: var(--theia-button-hoverBackground);
 }
 
 @import './vsx-registry-list.css';

diff --git a/packages/vsx-registry/src/browser/style/vsx-detail.css b/packages/vsx-registry/src/browser/style/vsx-detail.css
@@ -20,9 +20,7 @@
 }
 
 .theia-vsx-registry.vscode-extension-detail .extension-header-container {
-    background: var(--theia-layout-color0);
     padding: 15px 22px;
-    border-bottom: 3px solid var(--theia-border-color1);
 }
 
 .theia-vsx-registry.vscode-extension-detail .extension-title-container {
@@ -44,7 +42,7 @@
 }
 
 .theia-vsx-registry.vscode-extension-detail .text-divider {
-    border-right: var(--theia-ui-font-color1) 1px solid;
+    border-right: var(--theia-textSeparator-foreground) 1px solid;
     padding-right: 10px;
     box-sizing: border-box;
     margin-right: 10px;
@@ -69,7 +67,6 @@
 }
 
 .theia-vsx-registry.vscode-extension-detail .extension-documentation {
-    color: var(--theia-ui-font-color1);
     height: 100%;
     width: 100%;
 }
@@ -81,7 +78,6 @@
 .theia-vsx-registry.vscode-extension-detail a {
     font-weight: bold;
     text-decoration: none;
-    color: var(--theia-accent-color0);
 }
 
 .theia-vsx-registry.vscode-extension-detail code {
@@ -92,7 +88,7 @@
 }
 
 .theia-vsx-registry.vscode-extension-detail pre code {
-    background: var(--theia-layout-color2);
+    background: var(--theia-editor-background);
     display: block;
     padding: 10px;
 }

diff --git a/packages/vsx-registry/src/browser/style/vsx-registry-list.css b/packages/vsx-registry/src/browser/style/vsx-registry-list.css
@@ -16,7 +16,6 @@
 
 .theia-vsx-registry.extension-list {
     min-width: 250px !important;
-    background-color: var(--theia-layout-color1);
     display: flex;
     flex-direction: column;
 }
@@ -31,15 +30,8 @@
     flex: 1;
 }
 
-.theia-vsx-registry.extension-list #extension-search-field-container input {
+.theia-vsx-registry.extension-list #extension-search-field-container .theia-input {
     flex: 1;
-    font-size: var(--theia-ui-font-size1);
-    line-height: var(--theia-content-line-height);
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--theia-border-color1);
-    background: var(--theia-layout-color2);
-    color: var(--theia-ui-font-color1);
     padding-left: 5px;
 }
 
@@ -74,7 +66,6 @@
 .theia-vsx-registry.extension-list .extension-header-container {
     padding: 3px 15px;
     font-size: var(--theia-ui-font-size0);
-    background: var(--theia-layout-color1);
 }
 
 .theia-vsx-registry.extension-list .extension-header-container {

diff --git a/packages/vsx-registry/src/browser/view/list/vsx-registry-list-widget.tsx b/packages/vsx-registry/src/browser/view/list/vsx-registry-list-widget.tsx
@@ -24,6 +24,7 @@ import { VSXRegistryList } from './vsx-registry-list-component';
 import { VSCodeExtensionPart, VSXRegistryExtensionLocation } from '../../vsx-registry-types';
 import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
 import { ProgressService } from '@theia/core/lib/common';
+import { AlertMessage } from '@theia/core/lib/browser/widgets/alert-message';
 
 export const VSXRegistryListOptions = Symbol('VSCodeExtensionsListOptions');
 
@@ -72,6 +73,12 @@ export class VSXRegistryListWidget extends ReactWidget {
     }
 
     protected render(): React.ReactNode {
+        if (!this.service.apiUrlIsSet()) {
+            return <AlertMessage
+                type='WARNING'
+                header='No URL set for VSX Registry Server.'
+            />;
+        }
         return <React.Fragment>
             <VSXRegistryList
                 progressLocation='vsx-registry-list'

diff --git a/packages/vsx-registry/src/browser/view/list/vsx-registry-searchbar-widget.tsx b/packages/vsx-registry/src/browser/view/list/vsx-registry-searchbar-widget.tsx
@@ -94,6 +94,7 @@ export class VSXRegistrySearchComponent extends React.Component<VSXRegistrySearc
                         id='extensionSearchField'
                         type='text'
                         value={this.state.query}
+                        className='theia-input'
                         placeholder='Search in Open VSCode Registry'
                         onChange={this.searchFieldKeyUp}>
                     </input >

diff --git a/packages/vsx-registry/src/browser/vsx-registry-api.ts b/packages/vsx-registry/src/browser/vsx-registry-api.ts
@@ -29,7 +29,6 @@ export class VSXRegistryAPI {
         const headers: HeadersInit = { 'Content-Type': 'application/json' };
         const param: RequestInit = {
             method: req.method,
-            credentials: 'include',
             headers
         };
 

diff --git a/packages/vsx-registry/src/browser/vsx-registry-contribution.ts b/packages/vsx-registry/src/browser/vsx-registry-contribution.ts
@@ -20,6 +20,8 @@ import { AbstractViewContribution } from '@theia/core/lib/browser/shell/view-con
 import { VSXRegistryWidget } from './view/list/vsx-registry-widget';
 import { Widget } from '@theia/core/lib/browser';
 import { VSXRegistryService } from './vsx-registry-service';
+import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
+import { ColorRegistry, Color } from '@theia/core/lib/browser/color-registry';
 
 export namespace VSCodeExtensionsCommands {
     export const CLEAR_ALL: Command = {
@@ -31,7 +33,7 @@ export namespace VSCodeExtensionsCommands {
 }
 
 @injectable()
-export class VSXRegistryContribution extends AbstractViewContribution<VSXRegistryWidget> {
+export class VSXRegistryContribution extends AbstractViewContribution<VSXRegistryWidget> implements ColorContribution {
 
     @inject(MessageService) protected readonly messageService: MessageService;
     @inject(VSXRegistryService) protected readonly service: VSXRegistryService;
@@ -58,6 +60,29 @@ export class VSXRegistryContribution extends AbstractViewContribution<VSXRegistr
         });
     }
 
+    async registerColors(colors: ColorRegistry): Promise<void> {
+        colors.register(
+            {
+                id: 'extensionButton.prominentBackground', defaults: {
+                    dark: '#327e36',
+                    light: '#327e36'
+                }, description: 'Button background color for actions extension that stand out (e.g. install button).'
+            },
+            {
+                id: 'extensionButton.prominentForeground', defaults: {
+                    dark: Color.white,
+                    light: Color.white
+                }, description: 'Button foreground color for actions extension that stand out (e.g. install button).'
+            },
+            {
+                id: 'extensionButton.prominentHoverBackground', defaults: {
+                    dark: '#28632b',
+                    light: '#28632b'
+                }, description: 'Button background hover color for actions extension that stand out (e.g. install button).'
+            }
+        );
+    }
+
     protected withWidget<T>(widget: Widget | undefined = this.tryGetWidget(), fn: (widget: VSXRegistryWidget) => T): T | false {
         if (widget instanceof VSXRegistryWidget && widget.id === VSXRegistryWidget.ID) {
             return fn(widget);

diff --git a/packages/vsx-registry/src/browser/vsx-registry-frontend-module.ts b/packages/vsx-registry/src/browser/vsx-registry-frontend-module.ts
@@ -28,10 +28,12 @@ import { VSXRegistryDetailWidgetFactory } from './view/detail/vsx-registry-detai
 
 import '../../src/browser/style/index.css';
 import { bindVSXRegistryPreferences } from './vsx-registry-preferences';
+import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
 
 export default new ContainerModule(bind => {
     bindViewContribution(bind, VSXRegistryContribution);
     bind(FrontendApplicationContribution).toService(VSXRegistryContribution);
+    bind(ColorContribution).toService(VSXRegistryContribution);
 
     bind(VSXRegistrySearchbarWidget).toSelf().inSingletonScope();
     bind(VSXRegistryService).toSelf().inSingletonScope();

diff --git a/packages/vsx-registry/src/browser/vsx-registry-service.ts b/packages/vsx-registry/src/browser/vsx-registry-service.ts
@@ -33,6 +33,7 @@ export const ExtensionKeywords = Symbol('ExtensionKeyword');
 @injectable()
 export class VSXRegistryService {
     protected apiUrl: string;
+
     protected readonly toDispose = new DisposableCollection();
 
     protected readonly onDidUpdateSearchEmitter = new Emitter<void>();
@@ -72,6 +73,10 @@ export class VSXRegistryService {
         this.toDispose.dispose();
     }
 
+    apiUrlIsSet(): boolean {
+        return !!this.apiUrl;
+    }
+
     async updateSearch(param?: VSXRegistrySearchParam): Promise<void> {
         const endpoint = this.createEndpoint(['-', 'search'], param && param.query ? [{ key: 'query', value: param.query }] : undefined);
         const extensions = await this.api.getExtensions(endpoint);