Added Preferences UI widget

Signed-off-by: Nicholas Stenbeck <[email protected]>
eclipse-theia · Feb 14, 2020 · 38b9446 · 38b9446
1 parent d5f3262
commit 38b9446
Show file tree

Hide file tree

Showing 17 changed files with 1,841 additions and 165 deletions.
diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts
diff --git a/packages/preferences/src/browser/preference-frontend-module.ts b/packages/preferences/src/browser/preference-frontend-module.ts
@@ -17,13 +17,14 @@
 import '../../src/browser/style/index.css';
 
 import { ContainerModule, interfaces } from 'inversify';
-import { bindViewContribution, WidgetFactory, FrontendApplicationContribution } from '@theia/core/lib/browser';
-import { PreferencesContribution } from './preferences-contribution';
+import { WidgetFactory, FrontendApplicationContribution } from '@theia/core/lib/browser';
 import { createPreferencesTreeWidget } from './preference-tree-container';
 import { PreferencesMenuFactory } from './preferences-menu-factory';
 import { PreferencesFrontendApplicationContribution } from './preferences-frontend-application-contribution';
 import { PreferencesContainer, PreferencesTreeWidget, PreferencesEditorsContainer } from './preferences-tree-widget';
 import { bindPreferenceProviders } from './preference-bindings';
+import { SettingsWidget } from './ui/settings-widget';
+import { SettingsEditor } from './ui/settings-editor';
 
 import './preferences-monaco-contribution';
 
@@ -32,14 +33,18 @@ export const PreferencesWidgetFactory = Symbol('PreferencesWidgetFactory');
 export function bindPreferences(bind: interfaces.Bind, unbind: interfaces.Unbind): void {
     bindPreferenceProviders(bind, unbind);
 
-    bindViewContribution(bind, PreferencesContribution);
-
     bind(PreferencesContainer).toSelf();
     bind(WidgetFactory).toDynamicValue(({ container }) => ({
         id: PreferencesContainer.ID,
         createWidget: () => container.get(PreferencesContainer)
     }));
 
+    bind(SettingsWidget).toSelf();
+    bind(WidgetFactory).toDynamicValue(({ container }) => ({
+        id: SettingsWidget.ID,
+        createWidget: () => container.get(SettingsWidget)
+    }));
+
     bind(PreferencesWidgetFactory).toDynamicValue(({ container }) => ({
         id: PreferencesTreeWidget.ID,
         createWidget: () => createPreferencesTreeWidget(container)
@@ -52,6 +57,12 @@ export function bindPreferences(bind: interfaces.Bind, unbind: interfaces.Unbind
         createWidget: () => container.get(PreferencesEditorsContainer)
     }));
 
+    bind(SettingsEditor).toSelf();
+    bind(WidgetFactory).toDynamicValue(context => ({
+        id: SettingsEditor.ID,
+        createWidget: (): SettingsEditor => context.container.get<SettingsEditor>(SettingsEditor),
+    })).inSingletonScope();
+
     bind(PreferencesMenuFactory).toSelf();
     bind(FrontendApplicationContribution).to(PreferencesFrontendApplicationContribution).inSingletonScope();
 }

diff --git a/packages/preferences/src/browser/preferences-contribution.ts b/packages/preferences/src/browser/preferences-contribution.ts
@@ -14,77 +14,54 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { injectable, inject, named } from 'inversify';
+import { injectable } from 'inversify';
 import { MenuModelRegistry, CommandRegistry } from '@theia/core';
 import {
     CommonMenus,
-    PreferenceScope,
-    PreferenceProvider,
     AbstractViewContribution,
     CommonCommands,
     KeybindingRegistry
 } from '@theia/core/lib/browser';
-import { WorkspacePreferenceProvider } from './workspace-preference-provider';
-import { FileSystem } from '@theia/filesystem/lib/common';
-import { UserStorageService } from '@theia/userstorage/lib/browser';
-import { PreferencesContainer } from './preferences-tree-widget';
-import { EditorManager } from '@theia/editor/lib/browser';
 import { isFirefox } from '@theia/core/lib/browser';
 import { isOSX } from '@theia/core/lib/common/os';
-
+import { SettingsWidget } from './ui/settings-widget';
 @injectable()
-export class PreferencesContribution extends AbstractViewContribution<PreferencesContainer> {
-
-    @inject(UserStorageService) protected readonly userStorageService: UserStorageService;
-    @inject(PreferenceProvider) @named(PreferenceScope.Workspace) protected readonly workspacePreferenceProvider: WorkspacePreferenceProvider;
-    @inject(FileSystem) protected readonly filesystem: FileSystem;
-    @inject(EditorManager) protected readonly editorManager: EditorManager;
-
+export class SettingsContribution extends AbstractViewContribution<SettingsWidget> {
     constructor() {
         super({
-            widgetId: PreferencesContainer.ID,
-            widgetName: 'Preferences',
-            defaultWidgetOptions: { area: 'main' }
+            widgetId: SettingsWidget.ID,
+            widgetName: SettingsWidget.LABEL,
+            defaultWidgetOptions: {
+                area: 'main',
+            },
         });
     }
 
-    async registerCommands(commands: CommandRegistry): Promise<void> {
-        commands.registerCommand(CommonCommands.OPEN_PREFERENCES, {
-            isEnabled: () => true,
-            execute: (preferenceScope = PreferenceScope.User) => this.openPreferences(preferenceScope)
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(CommonCommands.OPEN_PREFERENCES, {
+            execute: () => this.openView({ reveal: true }),
         });
     }
 
     registerMenus(menus: MenuModelRegistry): void {
         menus.registerMenuAction(CommonMenus.FILE_SETTINGS_SUBMENU_OPEN, {
             commandId: CommonCommands.OPEN_PREFERENCES.id,
-            order: 'a10'
+            label: CommonCommands.OPEN_PREFERENCES.label,
+            order: 'a10',
         });
     }
 
     registerKeybindings(keybindings: KeybindingRegistry): void {
         if (isOSX && !isFirefox) {
             keybindings.registerKeybinding({
                 command: CommonCommands.OPEN_PREFERENCES.id,
-                keybinding: 'cmd+,'
+                keybinding: 'cmd+shift+,'
             });
         }
+
         keybindings.registerKeybinding({
             command: CommonCommands.OPEN_PREFERENCES.id,
-            keybinding: 'ctrl+,'
+            keybinding: 'ctrl+shift+,',
         });
     }
-
-    protected async openPreferences(preferenceScope: PreferenceScope): Promise<void> {
-        const wsUri = this.workspacePreferenceProvider.getConfigUri();
-        if (wsUri && !await this.filesystem.exists(wsUri.toString())) {
-            await this.filesystem.createFile(wsUri.toString());
-        }
-
-        const widget = await this.widget;
-        widget.preferenceScope = preferenceScope;
-        super.openView({ activate: true });
-        widget.activatePreferenceEditor(preferenceScope);
-    }
-
 }
diff --git a/packages/preferences/src/browser/style/context-menu.css b/packages/preferences/src/browser/style/context-menu.css
@@ -0,0 +1,74 @@
+/********************************************************************************
+ * Copyright (C) 2020 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.theia-settings-container .settings-context-menu-container {
+  position: relative;
+  padding-left: 5px;
+}
+
+.theia-settings-container .settings-context-menu-btn {
+  cursor: pointer;
+}
+
+.theia-settings-container .settings-context-menu {
+  position: absolute;
+  width: 140px;
+  list-style: none;
+  padding: 5px;
+  bottom: calc(100% + 10px);
+  left: -10px;
+  z-index: 9999;
+  background-color: var(--theia-menu-background);
+}
+
+.theia-settings-container .settings-context-menu:before {
+  content: "";
+  position: absolute;
+  left: 10px;
+  bottom: -10px;
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid var(--theia-menu-background);
+}
+
+.theia-settings-container .settings-context-menu li {
+  padding: 5px;
+}
+
+.theia-settings-container .settings-context-menu li:hover {
+  background-color: var(--theia-menu-selectionBackground);
+}
+
+.theia-settings-container .settings-context-menu i {
+  padding-right: 5px;
+  width: 16px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.theia-settings-container .pref-context-menu-btn {
+  margin-left: 5px;
+}
+
+.theia-settings-container .pref-context-menu-btn:hover {
+  background-color: rgba(50%, 50%, 50%, 0.1);
+}
diff --git a/packages/preferences/src/browser/style/index.css b/packages/preferences/src/browser/style/index.css
@@ -23,3 +23,126 @@
     display: flex;
     line-height: var(--theia-content-line-height) !important;
 }
+
+/* UI View */
+
+@import url("./context-menu.css");
+@import url("./navbar.css");
+@import url("./preference-array.css");
+@import url("./preference-object.css");
+@import url("./search-input.css");
+
+:root {
+  --theia-settingsSticky-height: 100px;
+}
+
+html,
+body {
+  font-family: var(--theia-ui-font-family);
+}
+
+.theia-settings-container .col {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.theia-settings-container {
+  padding: 0;
+}
+
+.theia-settings-container .settings-scope > label {
+  margin-right: 12px;
+}
+
+.theia-settings-container .settings-section {
+  padding-left: 0;
+  padding-top: calc(var(--theia-settingsSticky-height) - 5px);
+  margin-top: calc((var(--theia-settingsSticky-height) - 5px) * -1);
+}
+
+.theia-settings-container .settings-section a {
+  border: none;
+  color: var(--theia-foreground);
+  font-weight: 500;
+  outline: 0;
+  text-decoration: none;
+}
+
+.theia-settings-container .settings-section a:hover {
+  text-decoration: underline;
+}
+
+.theia-settings-container .settings-section-title {
+  font-weight: bold;
+  font-size: var(--theia-ui-font-size2);
+}
+
+.theia-settings-container li.single-pref {
+  list-style-type: none;
+  margin: 0;
+  padding: 10px 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  max-width: 600px;
+}
+
+.theia-settings-container li.single-pref input[type="text"] {
+  min-width: 200px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.theia-settings-container .settings-main {
+  position: relative;
+}
+
+.theia-settings-container .settings-main .settings-main-content {
+  margin: 0 170px;
+  min-width: 400px;
+  max-width: 600px;
+}
+
+.theia-settings-container .settings-main-sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  padding-top: 1em;
+  margin-top: -1em;
+  background-color: var(--theia-editor-background);
+  height: var(--theia-settingsSticky-height);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 1000;
+}
+
+.theia-settings-container .pref-name {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0;
+  flex: 1 0;
+}
+
+.theia-settings-container .pref-input {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0;
+  flex: 1 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
diff --git a/packages/preferences/src/browser/style/navbar.css b/packages/preferences/src/browser/style/navbar.css
@@ -0,0 +1,35 @@
+/********************************************************************************
+ * Copyright (C) 2020 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.theia-settings-container .settings-navbar {
+  position: sticky;
+  float: left;
+  list-style: none;
+  top: 1em;
+  padding: 0;
+  margin: 0;
+  width: 150px;
+}
+
+.theia-settings-container .settings-navbar li {
+  padding: 3px 8px;
+  font-weight: bold;
+}
+
+.theia-settings-container .settings-navbar li:hover {
+  background-color: var(--theia-menu-selectionBackground);
+  cursor: pointer;
+}