eclipse-sprotty · planger · Oct 18, 2021 · Oct 14, 2021
diff --git a/.gitignore b/.gitignore
@@ -5,5 +5,6 @@ node_modules/
 /artifacts/
 bundle.js
 bundle.js.map
+*.ttf
 npm-debug.log
 yarn-error.log
diff --git a/configs/webpack.config.js b/configs/webpack.config.js
@@ -41,6 +41,16 @@ module.exports = {
                 test: /\.css$/,
                 exclude: /\.useable\.css$/,
                 use: ['style-loader', 'css-loader']
+            },
+            {
+                test: /\.(ttf)$/,
+                loader: 'file-loader',
+                options: {
+                    name: '[name].[ext]',
+                    outputPath: '',
+                    publicPath: '..',
+                    postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
+                }
             }
         ]
     },

diff --git a/css/command-palette.css b/css/command-palette.css
@@ -16,6 +16,18 @@
 .command-palette {
     transition: opacity 0.3s linear;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    display: flex;
+    align-items: center;
+}
+
+.command-palette input {
+    width: 100%;
+    display: flex;
+}
+
+.command-palette span.loading {
+    position: absolute;
+    right: 5px;
 }
 
 .command-palette-suggestions {
@@ -29,6 +41,8 @@
 
 .command-palette-suggestions .icon {
     padding-right: 0.3em;
+    display: flex;
+    align-self: center;
 }
 
 .command-palette-suggestions em {
@@ -38,6 +52,7 @@
 
 .command-palette-suggestions > div {
     padding: 0 4px;
+    display: flex;
 }
 
 .command-palette-suggestions .group {

diff --git a/css/sprotty.css b/css/sprotty.css
@@ -83,3 +83,13 @@
     width: 100%;
     left: 0;
 }
+
+@keyframes spin {
+	100% {
+		transform:rotate(360deg);
+	}
+}
+
+.animation-spin {
+	animation: spin 1.5s linear infinite;
+}
diff --git a/examples/classdiagram/src/popup.ts b/examples/classdiagram/src/popup.ts
@@ -36,7 +36,7 @@ export class PopupModelProvider implements IPopupModelProvider {
                     <PreRenderedElementSchema> {
                         type: 'pre-rendered',
                         id: 'popup-title',
-                        code: `<div class="sprotty-popup-title">Class ${node.name}</div>`
+                        code: `<div class="sprotty-popup-title"><span class="fa fa-info-circle"/> Class ${node.name}</div>`
                     },
                     <PreRenderedElementSchema> {
                         type: 'pre-rendered',

diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "@types/mocha": "^5.2.7",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",
+    "@vscode/codicons": "^0.0.25",
     "chai": "^4.2.0",
     "circular-dependency-plugin": "^5.2.0",
     "core-js": "^3.2.1",
@@ -69,6 +70,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-no-null": "^1.0.2",
+    "file-loader": "^6.2.0",
     "http-server": "^0.12.3",
     "jenkins-mocha": "^8.0.0",
     "jsdom": "^15.1.1",

diff --git a/src/features/command-palette/action-providers.ts b/src/features/command-palette/action-providers.ts
@@ -55,6 +55,6 @@ export class RevealNamedElementActionProvider implements ICommandPaletteActionPr
     createSelectActions(modelRoot: SModelRoot): LabeledAction[] {
         const nameables = toArray(modelRoot.index.all().filter(element => isNameable(element)));
         return nameables.map(nameable => new LabeledAction(`Reveal ${name(nameable)}`,
-            [new SelectAction([nameable.id]), new CenterAction([nameable.id])], 'fa-eye'));
+            [new SelectAction([nameable.id]), new CenterAction([nameable.id])], 'eye'));
     }
 }
diff --git a/src/features/command-palette/command-palette.ts b/src/features/command-palette/command-palette.ts
@@ -24,6 +24,7 @@ import { SetUIExtensionVisibilityAction } from "../../base/ui-extensions/ui-exte
 import { DOMHelper } from "../../base/views/dom-helper";
 import { KeyListener } from "../../base/views/key-tool";
 import { ViewerOptions } from "../../base/views/viewer-options";
+import { codiconCSSClasses, codiconCSSString } from "../../utils/codicon";
 import { toArray } from "../../utils/iterable";
 import { matchesKeystroke } from "../../utils/keyboard";
 import { getAbsoluteClientBounds } from "../bounds/model";
@@ -42,7 +43,7 @@ export class CommandPalette extends AbstractUIExtension {
     static readonly ID = "command-palette";
     static readonly isInvokePaletteKey = (event: KeyboardEvent) => matchesKeystroke(event, 'Space', 'ctrl');
 
-    protected loadingIndicatorClasses = ['loading'];
+    protected loadingIndicatorClasses = codiconCSSClasses('loading', false, true, ['loading']);
     protected xOffset = 20;
     protected yOffset = 20;
     protected defaultWidth = 400;
@@ -184,8 +185,16 @@ export class CommandPalette extends AbstractUIExtension {
         return itemElement;
     }
 
-    protected renderIcon(itemElement: HTMLDivElement, icon: string) {
-        itemElement.innerHTML += `<span class="icon fa ${icon}"></span>`;
+    protected renderIcon(itemElement: HTMLDivElement, iconId: string) {
+        itemElement.innerHTML += `<span class="icon ${this.getCodicon(iconId)}"></span>`;
+    }
+
+    protected getFontAwesomeIcon(iconId: string) {
+        return `fa fa-${iconId}`;
+    }
+
+    protected getCodicon(iconId: string) {
+        return codiconCSSString(iconId);
     }
 
     protected filterActions(filterText: string, actions: LabeledAction[]): LabeledAction[] {

diff --git a/src/features/command-palette/di.config.ts b/src/features/command-palette/di.config.ts
@@ -13,6 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import '@vscode/codicons/dist/codicon.css';
 import { ContainerModule } from "inversify";
 import { TYPES } from "../../base/types";
 import { CommandPaletteActionProviderRegistry } from "./action-providers";

diff --git a/src/index.ts b/src/index.ts
@@ -216,6 +216,7 @@ export { modelSourceModule };
 // ------------------ Utilities ------------------
 
 export * from "./utils/browser";
+export * from "./utils/codicon";
 export * from "./utils/color";
 export * from "./utils/geometry";
 export * from "./utils/inversify";

diff --git a/src/utils/codicon.ts b/src/utils/codicon.ts
@@ -0,0 +1,36 @@
+/********************************************************************************
+ * Copyright (c) 2021 EclipseSource 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
+ ********************************************************************************/
+
+export const ACTION_ITEM = 'action-item';
+export const ANIMATION_SPIN = 'animation-spin';
+
+export function codiconCSSString(codiconId: string, actionItem = false, animationSpin = false, additionalCSS: string[] = []): string {
+    return codiconCSSClasses(codiconId, actionItem, animationSpin, additionalCSS).join(' ');
+}
+
+export function codiconCSSClasses(codiconId: string, actionItem = false, animationSpin = false, additionalCSS: string[] = []): string[] {
+    const cssClassArray = ['codicon', `codicon-${codiconId}`];
+    if (actionItem) {
+        cssClassArray.push(ACTION_ITEM);
+    }
+    if (animationSpin) {
+        cssClassArray.push(ANIMATION_SPIN);
+    }
+    if (additionalCSS.length > 0) {
+        cssClassArray.push(...additionalCSS);
+    }
+    return cssClassArray;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -176,6 +176,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
   integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
 
+"@types/json-schema@^7.0.8":
+  version "7.0.9"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
+  integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
+
 "@types/mocha@^5.2.7":
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
@@ -266,6 +271,11 @@
     "@typescript-eslint/types" "4.25.0"
     eslint-visitor-keys "^2.0.0"
 
+"@vscode/codicons@^0.0.25":
+  version "0.0.25"
+  resolved "https://registry.yarnpkg.com/@vscode/codicons/-/codicons-0.0.25.tgz#4ebc3e2c9e707ac46aea0becceda79f7738c647c"
+  integrity sha512-uqPhTdADjwoCh5Ufbv0M6TZiiP2mqbfJVB4grhVx1k+YeP03LDMOHBWPsNwGKn4/0S5Mq9o1w1GeftvR031Gzg==
+
 "@webassemblyjs/[email protected]":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -470,6 +480,11 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
   integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
 
+ajv-keywords@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
+
 ajv@^6.1.0, ajv@^6.10.2, ajv@^6.5.5:
   version "6.10.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
@@ -480,7 +495,7 @@ ajv@^6.1.0, ajv@^6.10.2, ajv@^6.5.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^6.10.0, ajv@^6.12.4:
+ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -1571,6 +1586,11 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@@ -1954,6 +1974,14 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 [email protected]:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.2.tgz#06d6e728a9ea2df2cce2f8d9e84dfcdc338ec17a"
@@ -2941,7 +2969,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.2.0:
+json5@^2.1.2, json5@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
   integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
@@ -3029,6 +3057,15 @@ [email protected], loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -4457,6 +4494,15 @@ schema-utils@^2.0.0, schema-utils@^2.0.1:
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
+schema-utils@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
+  integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 [email protected]:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/secure-compare/-/secure-compare-3.0.1.tgz#f1a0329b308b221fae37b9974f3d578d0ca999e3"