diff --git a/.gitignore b/.gitignore index 48cee782..e782f1f5 100644 --- 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 index cff15ca2..9af74644 100644 --- 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 index 40a49f87..5ef95bb3 100644 --- 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 index 856537ca..1a04b7fe 100644 --- 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 index 7b17a03e..a96d1718 100644 --- a/examples/classdiagram/src/popup.ts +++ b/examples/classdiagram/src/popup.ts @@ -36,7 +36,7 @@ export class PopupModelProvider implements IPopupModelProvider { { type: 'pre-rendered', id: 'popup-title', - code: `
Class ${node.name}
` + code: `
Class ${node.name}
` }, { type: 'pre-rendered', diff --git a/package.json b/package.json index 2751d3de..ac050459 100644 --- 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 index 77096a7c..6733c78d 100644 --- 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 index 7ffde09d..2965f3e9 100644 --- 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 += ``; + protected renderIcon(itemElement: HTMLDivElement, iconId: string) { + itemElement.innerHTML += ``; + } + + 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 index 8d3c15ac..b9068b01 100644 --- 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 index aa90e0da..d2f419b9 100644 --- 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 new file mode 100644 index 00000000..5622508d --- /dev/null +++ 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 index cf56425c..ed2c59fe 100644 --- 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/ast@1.8.5": 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" + file-saver@2.0.2: 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 @@ loader-utils@1.2.3, 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" + secure-compare@3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/secure-compare/-/secure-compare-3.0.1.tgz#f1a0329b308b221fae37b9974f3d578d0ca999e3"