From 7bf7379a05583e16fd2d32270c4e3b768c796908 Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Wed, 8 Dec 2021 10:48:23 +0100 Subject: [PATCH] feat(console): codemirror code editor for actions (#2736) * feat: codemirror code editor * cleanup * lint * mat import * lint --- console/package-lock.json | 393 +++--------------- console/package.json | 2 + .../action-table/action-table.component.ts | 84 ++-- .../src/app/pages/actions/actions.module.ts | 2 + .../add-action-dialog.component.html | 11 +- .../add-action-dialog.component.scss | 9 +- .../add-action-dialog.component.ts | 157 +++---- console/src/component-themes.scss | 4 + console/src/main.ts | 8 +- console/src/styles.scss | 244 ++++++----- console/src/styles/codemirror.scss | 149 +++++++ 11 files changed, 492 insertions(+), 571 deletions(-) create mode 100644 console/src/styles/codemirror.scss diff --git a/console/package-lock.json b/console/package-lock.json index 1f27922357..b0b02adbc4 100644 --- a/console/package-lock.json +++ b/console/package-lock.json @@ -20,6 +20,7 @@ "@angular/platform-browser-dynamic": "~13.0.2", "@angular/router": "~13.0.2", "@angular/service-worker": "~13.0.2", + "@ctrl/ngx-codemirror": "^5.1.1", "@grpc/grpc-js": "^1.3.2", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", @@ -27,6 +28,7 @@ "@types/google-protobuf": "^3.15.3", "@types/uuid": "^8.3.0", "angular-oauth2-oidc": "^13.0.1", + "codemirror": "^5.64.0", "cors": "^2.8.5", "file-saver": "^2.0.5", "google-proto-files": "^2.5.0", @@ -2522,6 +2524,20 @@ "node": ">=4.0.0" } }, + "node_modules/@ctrl/ngx-codemirror": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@ctrl/ngx-codemirror/-/ngx-codemirror-5.1.1.tgz", + "integrity": "sha512-MAByA/cJBZY3yv/cpO87mF9Q24/ptCWf2Pr4n4V1w3G0ya5cKAIyHwIfvJ5nJz/4Gj2i2O/pteDWkyxrbyICoA==", + "dependencies": { + "@types/codemirror": "^5.60.5", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": ">=12.0.0-0", + "@angular/forms": ">=12.0.0-0", + "codemirror": ">=5.63.3" + } + }, "node_modules/@ctrl/tinycolor": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz", @@ -3449,6 +3465,14 @@ "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==", "dev": true }, + "node_modules/@types/codemirror": { + "version": "5.60.5", + "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.5.tgz", + "integrity": "sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==", + "dependencies": { + "@types/tern": "*" + } + }, "node_modules/@types/component-emitter": { "version": "1.2.11", "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz", @@ -3490,8 +3514,7 @@ "node_modules/@types/estree": { "version": "0.0.50", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz", - "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==", - "dev": true + "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==" }, "node_modules/@types/file-saver": { "version": "2.0.4", @@ -3588,6 +3611,14 @@ "integrity": "sha512-OFUilxQg+rWL2FMxtmIgCkUDlJB6pskkpvmew7yeXfzzsOBb5rc+y2+DjHm+r3r1ZPPcJefK3DveNSYWGiy68g==", "dev": true }, + "node_modules/@types/tern": { + "version": "0.23.4", + "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz", + "integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==", + "dependencies": { + "@types/estree": "*" + } + }, "node_modules/@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", @@ -5268,6 +5299,11 @@ "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==", "dev": true }, + "node_modules/codemirror": { + "version": "5.64.0", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.64.0.tgz", + "integrity": "sha512-fqr6CtDQdJ6iNMbD8NX2gH2G876nNDk+TO1rrYkgWnqQdO3O1Xa9tK6q+psqhJJgE5SpbaDcgdfLmukoUVE8pg==" + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -6686,19 +6722,6 @@ "esbuild-windows-arm64": "0.13.12" } }, - "node_modules/esbuild-android-arm64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.12.tgz", - "integrity": "sha512-TSVZVrb4EIXz6KaYjXfTzPyyRpXV5zgYIADXtQsIenjZ78myvDGaPi11o4ZSaHIwFHsuwkB6ne5SZRBwAQ7maw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ] - }, "node_modules/esbuild-darwin-64": { "version": "0.13.12", "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.12.tgz", @@ -6712,162 +6735,6 @@ "darwin" ] }, - "node_modules/esbuild-darwin-arm64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.12.tgz", - "integrity": "sha512-JvAMtshP45Hd8A8wOzjkY1xAnTKTYuP/QUaKp5eUQGX+76GIie3fCdUUr2ZEKdvpSImNqxiZSIMziEiGB5oUmQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/esbuild-freebsd-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.12.tgz", - "integrity": "sha512-r6On/Skv9f0ZjTu6PW5o7pdXr8aOgtFOEURJZYf1XAJs0IQ+gW+o1DzXjVkIoT+n1cm3N/t1KRJfX71MPg/ZUA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ] - }, - "node_modules/esbuild-freebsd-arm64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.12.tgz", - "integrity": "sha512-F6LmI2Q1gii073kmBE3NOTt/6zLL5zvZsxNLF8PMAwdHc+iBhD1vzfI8uQZMJA1IgXa3ocr3L3DJH9fLGXy6Yw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ] - }, - "node_modules/esbuild-linux-32": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.12.tgz", - "integrity": "sha512-U1UZwG3UIwF7/V4tCVAo/nkBV9ag5KJiJTt+gaCmLVWH3bPLX7y+fNlhIWZy8raTMnXhMKfaTvWZ9TtmXzvkuQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/esbuild-linux-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.12.tgz", - "integrity": "sha512-YpXSwtu2NxN3N4ifJxEdsgd6Q5d8LYqskrAwjmoCT6yQnEHJSF5uWcxv783HWN7lnGpJi9KUtDvYsnMdyGw71Q==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/esbuild-linux-arm": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.12.tgz", - "integrity": "sha512-SyiT/JKxU6J+DY2qUiSLZJqCAftIt3uoGejZ0HDnUM2MGJqEGSGh7p1ecVL2gna3PxS4P+j6WAehCwgkBPXNIw==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/esbuild-linux-arm64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.12.tgz", - "integrity": "sha512-sgDNb8kb3BVodtAlcFGgwk+43KFCYjnFOaOfJibXnnIojNWuJHpL6aQJ4mumzNWw8Rt1xEtDQyuGK9f+Y24jGA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/esbuild-linux-mips64le": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.12.tgz", - "integrity": "sha512-qQJHlZBG+QwVIA8AbTEtbvF084QgDi4DaUsUnA+EolY1bxrG+UyOuGflM2ZritGhfS/k7THFjJbjH2wIeoKA2g==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/esbuild-linux-ppc64le": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.12.tgz", - "integrity": "sha512-2dSnm1ldL7Lppwlo04CGQUpwNn5hGqXI38OzaoPOkRsBRWFBozyGxTFSee/zHFS+Pdh3b28JJbRK3owrrRgWNw==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/esbuild-netbsd-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.12.tgz", - "integrity": "sha512-D4raxr02dcRiQNbxOLzpqBzcJNFAdsDNxjUbKkDMZBkL54Z0vZh4LRndycdZAMcIdizC/l/Yp/ZsBdAFxc5nbA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ] - }, - "node_modules/esbuild-openbsd-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.12.tgz", - "integrity": "sha512-KuLCmYMb2kh05QuPJ+va60bKIH5wHL8ypDkmpy47lzwmdxNsuySeCMHuTv5o2Af1RUn5KLO5ZxaZeq4GEY7DaQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ] - }, - "node_modules/esbuild-sunos-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.12.tgz", - "integrity": "sha512-jBsF+e0woK3miKI8ufGWKG3o3rY9DpHvCVRn5eburMIIE+2c+y3IZ1srsthKyKI6kkXLvV4Cf/E7w56kLipMXw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ] - }, "node_modules/esbuild-wasm": { "version": "0.13.12", "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.13.12.tgz", @@ -6880,45 +6747,6 @@ "node": ">=8" } }, - "node_modules/esbuild-windows-32": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.12.tgz", - "integrity": "sha512-L9m4lLFQrFeR7F+eLZXG82SbXZfUhyfu6CexZEil6vm+lc7GDCE0Q8DiNutkpzjv1+RAbIGVva9muItQ7HVTkQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/esbuild-windows-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.12.tgz", - "integrity": "sha512-k4tX4uJlSbSkfs78W5d9+I9gpd+7N95W7H2bgOMFPsYREVJs31+Q2gLLHlsnlY95zBoPQMIzHooUIsixQIBjaQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/esbuild-windows-arm64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.12.tgz", - "integrity": "sha512-2tTv/BpYRIvuwHpp2M960nG7uvL+d78LFW/ikPItO+2GfK51CswIKSetSpDii+cjz8e9iSPgs+BU4o8nWICBwQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -19543,6 +19371,15 @@ "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==", "dev": true }, + "@ctrl/ngx-codemirror": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@ctrl/ngx-codemirror/-/ngx-codemirror-5.1.1.tgz", + "integrity": "sha512-MAByA/cJBZY3yv/cpO87mF9Q24/ptCWf2Pr4n4V1w3G0ya5cKAIyHwIfvJ5nJz/4Gj2i2O/pteDWkyxrbyICoA==", + "requires": { + "@types/codemirror": "^5.60.5", + "tslib": "^2.3.0" + } + }, "@ctrl/tinycolor": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz", @@ -20283,6 +20120,14 @@ "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==", "dev": true }, + "@types/codemirror": { + "version": "5.60.5", + "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.5.tgz", + "integrity": "sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==", + "requires": { + "@types/tern": "*" + } + }, "@types/component-emitter": { "version": "1.2.11", "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz", @@ -20324,8 +20169,7 @@ "@types/estree": { "version": "0.0.50", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz", - "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==", - "dev": true + "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==" }, "@types/file-saver": { "version": "2.0.4", @@ -20422,6 +20266,14 @@ "integrity": "sha512-OFUilxQg+rWL2FMxtmIgCkUDlJB6pskkpvmew7yeXfzzsOBb5rc+y2+DjHm+r3r1ZPPcJefK3DveNSYWGiy68g==", "dev": true }, + "@types/tern": { + "version": "0.23.4", + "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz", + "integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==", + "requires": { + "@types/estree": "*" + } + }, "@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", @@ -21707,6 +21559,11 @@ } } }, + "codemirror": { + "version": "5.64.0", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.64.0.tgz", + "integrity": "sha512-fqr6CtDQdJ6iNMbD8NX2gH2G876nNDk+TO1rrYkgWnqQdO3O1Xa9tK6q+psqhJJgE5SpbaDcgdfLmukoUVE8pg==" + }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -22832,13 +22689,6 @@ "esbuild-windows-arm64": "0.13.12" } }, - "esbuild-android-arm64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.12.tgz", - "integrity": "sha512-TSVZVrb4EIXz6KaYjXfTzPyyRpXV5zgYIADXtQsIenjZ78myvDGaPi11o4ZSaHIwFHsuwkB6ne5SZRBwAQ7maw==", - "dev": true, - "optional": true - }, "esbuild-darwin-64": { "version": "0.13.12", "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.12.tgz", @@ -22846,117 +22696,12 @@ "dev": true, "optional": true }, - "esbuild-darwin-arm64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.12.tgz", - "integrity": "sha512-JvAMtshP45Hd8A8wOzjkY1xAnTKTYuP/QUaKp5eUQGX+76GIie3fCdUUr2ZEKdvpSImNqxiZSIMziEiGB5oUmQ==", - "dev": true, - "optional": true - }, - "esbuild-freebsd-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.12.tgz", - "integrity": "sha512-r6On/Skv9f0ZjTu6PW5o7pdXr8aOgtFOEURJZYf1XAJs0IQ+gW+o1DzXjVkIoT+n1cm3N/t1KRJfX71MPg/ZUA==", - "dev": true, - "optional": true - }, - "esbuild-freebsd-arm64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.12.tgz", - "integrity": "sha512-F6LmI2Q1gii073kmBE3NOTt/6zLL5zvZsxNLF8PMAwdHc+iBhD1vzfI8uQZMJA1IgXa3ocr3L3DJH9fLGXy6Yw==", - "dev": true, - "optional": true - }, - "esbuild-linux-32": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.12.tgz", - "integrity": "sha512-U1UZwG3UIwF7/V4tCVAo/nkBV9ag5KJiJTt+gaCmLVWH3bPLX7y+fNlhIWZy8raTMnXhMKfaTvWZ9TtmXzvkuQ==", - "dev": true, - "optional": true - }, - "esbuild-linux-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.12.tgz", - "integrity": "sha512-YpXSwtu2NxN3N4ifJxEdsgd6Q5d8LYqskrAwjmoCT6yQnEHJSF5uWcxv783HWN7lnGpJi9KUtDvYsnMdyGw71Q==", - "dev": true, - "optional": true - }, - "esbuild-linux-arm": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.12.tgz", - "integrity": "sha512-SyiT/JKxU6J+DY2qUiSLZJqCAftIt3uoGejZ0HDnUM2MGJqEGSGh7p1ecVL2gna3PxS4P+j6WAehCwgkBPXNIw==", - "dev": true, - "optional": true - }, - "esbuild-linux-arm64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.12.tgz", - "integrity": "sha512-sgDNb8kb3BVodtAlcFGgwk+43KFCYjnFOaOfJibXnnIojNWuJHpL6aQJ4mumzNWw8Rt1xEtDQyuGK9f+Y24jGA==", - "dev": true, - "optional": true - }, - "esbuild-linux-mips64le": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.12.tgz", - "integrity": "sha512-qQJHlZBG+QwVIA8AbTEtbvF084QgDi4DaUsUnA+EolY1bxrG+UyOuGflM2ZritGhfS/k7THFjJbjH2wIeoKA2g==", - "dev": true, - "optional": true - }, - "esbuild-linux-ppc64le": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.12.tgz", - "integrity": "sha512-2dSnm1ldL7Lppwlo04CGQUpwNn5hGqXI38OzaoPOkRsBRWFBozyGxTFSee/zHFS+Pdh3b28JJbRK3owrrRgWNw==", - "dev": true, - "optional": true - }, - "esbuild-netbsd-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.12.tgz", - "integrity": "sha512-D4raxr02dcRiQNbxOLzpqBzcJNFAdsDNxjUbKkDMZBkL54Z0vZh4LRndycdZAMcIdizC/l/Yp/ZsBdAFxc5nbA==", - "dev": true, - "optional": true - }, - "esbuild-openbsd-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.12.tgz", - "integrity": "sha512-KuLCmYMb2kh05QuPJ+va60bKIH5wHL8ypDkmpy47lzwmdxNsuySeCMHuTv5o2Af1RUn5KLO5ZxaZeq4GEY7DaQ==", - "dev": true, - "optional": true - }, - "esbuild-sunos-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.12.tgz", - "integrity": "sha512-jBsF+e0woK3miKI8ufGWKG3o3rY9DpHvCVRn5eburMIIE+2c+y3IZ1srsthKyKI6kkXLvV4Cf/E7w56kLipMXw==", - "dev": true, - "optional": true - }, "esbuild-wasm": { "version": "0.13.12", "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.13.12.tgz", "integrity": "sha512-eGdiSewbnJffEvyA0qQmr+w3HurBMVp4QhOfICzeeoL9naC8qC3PFaw6hZaqSgks5DXnQONtUGUFLsX3eXpq8A==", "dev": true }, - "esbuild-windows-32": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.12.tgz", - "integrity": "sha512-L9m4lLFQrFeR7F+eLZXG82SbXZfUhyfu6CexZEil6vm+lc7GDCE0Q8DiNutkpzjv1+RAbIGVva9muItQ7HVTkQ==", - "dev": true, - "optional": true - }, - "esbuild-windows-64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.12.tgz", - "integrity": "sha512-k4tX4uJlSbSkfs78W5d9+I9gpd+7N95W7H2bgOMFPsYREVJs31+Q2gLLHlsnlY95zBoPQMIzHooUIsixQIBjaQ==", - "dev": true, - "optional": true - }, - "esbuild-windows-arm64": { - "version": "0.13.12", - "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.12.tgz", - "integrity": "sha512-2tTv/BpYRIvuwHpp2M960nG7uvL+d78LFW/ikPItO+2GfK51CswIKSetSpDii+cjz8e9iSPgs+BU4o8nWICBwQ==", - "dev": true, - "optional": true - }, "escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", diff --git a/console/package.json b/console/package.json index 818cad27c5..6317067bd2 100644 --- a/console/package.json +++ b/console/package.json @@ -10,6 +10,7 @@ }, "private": true, "dependencies": { + "@ctrl/ngx-codemirror": "^5.1.1", "@angular/animations": "~13.0.2", "@angular/cdk": "~13.0.2", "@angular/common": "~13.0.2", @@ -28,6 +29,7 @@ "@types/file-saver": "^2.0.2", "@types/google-protobuf": "^3.15.3", "@types/uuid": "^8.3.0", + "codemirror": "^5.64.0", "angular-oauth2-oidc": "^13.0.1", "cors": "^2.8.5", "file-saver": "^2.0.5", diff --git a/console/src/app/pages/actions/action-table/action-table.component.ts b/console/src/app/pages/actions/action-table/action-table.component.ts index 0b080e3657..65a2e92990 100644 --- a/console/src/app/pages/actions/action-table/action-table.component.ts +++ b/console/src/app/pages/actions/action-table/action-table.component.ts @@ -20,7 +20,7 @@ import { AddActionDialogComponent } from '../add-action-dialog/add-action-dialog @Component({ selector: 'cnsl-action-table', templateUrl: './action-table.component.html', - styleUrls: ['./action-table.component.scss'] + styleUrls: ['./action-table.component.scss'], }) export class ActionTableComponent implements OnInit { @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent; @@ -34,8 +34,12 @@ export class ActionTableComponent implements OnInit { @Output() public changedSelection: EventEmitter> = new EventEmitter(); public ActionState: any = ActionState; - constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog, - private toast: ToastService) { + constructor( + public translate: TranslateService, + private mgmtService: ManagementService, + private dialog: MatDialog, + private toast: ToastService, + ) { this.selection.changed.subscribe(() => { this.changedSelection.emit(this.selection.selected); }); @@ -45,7 +49,6 @@ export class ActionTableComponent implements OnInit { this.getData(10, 0); } - public isAllSelected(): boolean { const numSelected = this.selection.selected.length; const numRows = this.dataSource.data.length; @@ -53,39 +56,42 @@ export class ActionTableComponent implements OnInit { } public masterToggle(): void { - this.isAllSelected() ? - this.selection.clear() : - this.dataSource.data.forEach(row => this.selection.select(row)); + this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach((row) => this.selection.select(row)); } - public changePage(event: PageEvent): void { this.getData(event.pageSize, event.pageIndex * event.pageSize); } public deleteKey(action: Action.AsObject): void { - this.mgmtService.deleteAction(action.id).then(() => { - this.selection.clear(); - this.toast.showInfo('FLOWS.TOAST.SELECTEDKEYSDELETED', true); - this.getData(10, 0); - }).catch(error => { - this.toast.showError(error); - }); + this.mgmtService + .deleteAction(action.id) + .then(() => { + this.selection.clear(); + this.toast.showInfo('FLOWS.TOAST.SELECTEDKEYSDELETED', true); + this.getData(10, 0); + }) + .catch((error) => { + this.toast.showError(error); + }); } public openAddAction(): void { const dialogRef = this.dialog.open(AddActionDialogComponent, { data: {}, - width: '400px', + width: '500px', }); dialogRef.afterClosed().subscribe((req: CreateActionRequest) => { if (req) { - this.mgmtService.createAction(req).then(resp => { - this.refreshPage(); - }).catch((error: any) => { - this.toast.showError(error); - }); + this.mgmtService + .createAction(req) + .then((resp) => { + this.refreshPage(); + }) + .catch((error: any) => { + this.toast.showError(error); + }); } }); } @@ -95,31 +101,37 @@ export class ActionTableComponent implements OnInit { data: { action: action, }, - width: '400px', + width: '500px', }); dialogRef.afterClosed().subscribe((req: UpdateActionRequest) => { if (req) { - this.mgmtService.updateAction(req).then(resp => { - this.refreshPage(); - }).catch((error: any) => { - this.toast.showError(error); - }); + this.mgmtService + .updateAction(req) + .then((resp) => { + this.refreshPage(); + }) + .catch((error: any) => { + this.toast.showError(error); + }); } }); } private async getData(limit: number, offset: number): Promise { this.loadingSubject.next(true); - - this.mgmtService.listActions(limit, offset).then(resp => { - this.actionsResult = resp; - this.dataSource.data = this.actionsResult.resultList; - this.loadingSubject.next(false); - }).catch((error: any) => { - this.toast.showError(error); - this.loadingSubject.next(false); - }); + + this.mgmtService + .listActions(limit, offset) + .then((resp) => { + this.actionsResult = resp; + this.dataSource.data = this.actionsResult.resultList; + this.loadingSubject.next(false); + }) + .catch((error: any) => { + this.toast.showError(error); + this.loadingSubject.next(false); + }); } public refreshPage(): void { diff --git a/console/src/app/pages/actions/actions.module.ts b/console/src/app/pages/actions/actions.module.ts index 16436da9fa..9d3746d92e 100644 --- a/console/src/app/pages/actions/actions.module.ts +++ b/console/src/app/pages/actions/actions.module.ts @@ -9,6 +9,7 @@ import { MatIconModule } from '@angular/material/icon'; import { MatSelectModule } from '@angular/material/select'; import { MatTableModule } from '@angular/material/table'; import { MatTooltipModule } from '@angular/material/tooltip'; +import { CodemirrorModule } from '@ctrl/ngx-codemirror'; import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; import { FormFieldModule } from 'src/app/modules/form-field/form-field.module'; @@ -55,6 +56,7 @@ import { AddFlowDialogComponent } from './add-flow-dialog/add-flow-dialog.compon DragDropModule, InfoSectionModule, HasFeaturePipeModule, + CodemirrorModule, ], }) export class ActionsModule {} diff --git a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.html b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.html index 5af1f09782..01262855ce 100644 --- a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.html +++ b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.html @@ -2,17 +2,16 @@ {{'FLOWS.DIALOG.UPDATE.TITLE' | translate}}
- - {{'FLOWS.NAME' | translate}} - - {{'FLOWS.SCRIPT' | translate}} - - + {{'FLOWS.TIMEOUTINSEC' | translate}} diff --git a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss index 3b18576054..7b6d0f2477 100644 --- a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss +++ b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss @@ -1,3 +1,5 @@ +@use '@angular/material' as mat; + .title { font-size: 1.2rem; margin-top: 0; @@ -8,8 +10,11 @@ font-size: .9rem; } -.script { - min-height: 200px; +@mixin action-dialog-theme($theme) { + $primary: map-get($theme, primary); + $primary-color: mat.get-color-from-palette($primary, 500); + $is-dark-theme: map-get($theme, is-dark); + $foreground: map-get($theme, foreground); } .action { diff --git a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts index d1e41a76f2..aa545c376a 100644 --- a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts +++ b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts @@ -1,99 +1,104 @@ import { Component, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Duration } from 'google-protobuf/google/protobuf/duration_pb'; +import { mapTo } from 'rxjs'; import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component'; import { Action } from 'src/app/proto/generated/zitadel/action_pb'; import { CreateActionRequest, UpdateActionRequest } from 'src/app/proto/generated/zitadel/management_pb'; import { ManagementService } from 'src/app/services/mgmt.service'; import { ToastService } from 'src/app/services/toast.service'; - @Component({ - selector: 'cnsl-add-action-dialog', - templateUrl: './add-action-dialog.component.html', - styleUrls: ['./add-action-dialog.component.scss'], + selector: 'cnsl-add-action-dialog', + templateUrl: './add-action-dialog.component.html', + styleUrls: ['./add-action-dialog.component.scss'], }) export class AddActionDialogComponent { - public name: string = ''; - public script: string = ''; - public durationInSec: number = 10; - public allowedToFail: boolean = false; + public name: string = ''; + public script: string = ''; + public durationInSec: number = 10; + public allowedToFail: boolean = false; - public id: string = ''; - - constructor( - private toast: ToastService, - private mgmtService: ManagementService, - private dialog: MatDialog, - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any, - ) { - if (data && data.action) { - const action: Action.AsObject = data.action; - this.name = action.name; - this.script = action.script; - if (action.timeout?.seconds) { - this.durationInSec = action.timeout?.seconds; - } - this.allowedToFail = action.allowedToFail; - this.id = action.id; - } - } + public id: string = ''; - public closeDialog(): void { - this.dialogRef.close(false); - } + public opened$ = this.dialogRef.afterOpened().pipe(mapTo(true)); - public closeDialogWithSuccess(): void { - if (this.id) { - const req = new UpdateActionRequest(); - req.setId(this.id); - req.setName(this.name); - req.setScript(this.script); - - const duration = new Duration(); - duration.setNanos(0); - duration.setSeconds(this.durationInSec); - - req.setAllowedToFail(this.allowedToFail); - - req.setTimeout(duration) - this.dialogRef.close(req); - } else { - const req = new CreateActionRequest(); - req.setName(this.name); - req.setScript(this.script); - - const duration = new Duration(); - duration.setNanos(0); - duration.setSeconds(this.durationInSec); - - req.setAllowedToFail(this.allowedToFail); - - req.setTimeout(duration) - this.dialogRef.close(req); + constructor( + private toast: ToastService, + private mgmtService: ManagementService, + private dialog: MatDialog, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any, + ) { + if (data && data.action) { + const action: Action.AsObject = data.action; + this.name = action.name; + this.script = action.script; + if (action.timeout?.seconds) { + this.durationInSec = action.timeout?.seconds; } + this.allowedToFail = action.allowedToFail; + this.id = action.id; } + } - public deleteAndCloseDialog(): void { - const dialogRef = this.dialog.open(WarnDialogComponent, { - data: { - confirmKey: 'ACTIONS.CLEAR', - cancelKey: 'ACTIONS.CANCEL', - titleKey: 'FLOWS.DIALOG.DELETEACTION.TITLE', - descriptionKey: 'FLOWS.DIALOG.DELETEACTION.DESCRIPTION', - }, - width: '400px', - }); + public closeDialog(): void { + this.dialogRef.close(false); + } - dialogRef.afterClosed().subscribe(resp => { - if (resp) { - this.mgmtService.deleteAction(this.id).then(resp => { + public closeDialogWithSuccess(): void { + if (this.id) { + const req = new UpdateActionRequest(); + req.setId(this.id); + req.setName(this.name); + req.setScript(this.script); + + const duration = new Duration(); + duration.setNanos(0); + duration.setSeconds(this.durationInSec); + + req.setAllowedToFail(this.allowedToFail); + + req.setTimeout(duration); + this.dialogRef.close(req); + } else { + const req = new CreateActionRequest(); + req.setName(this.name); + req.setScript(this.script); + + const duration = new Duration(); + duration.setNanos(0); + duration.setSeconds(this.durationInSec); + + req.setAllowedToFail(this.allowedToFail); + + req.setTimeout(duration); + this.dialogRef.close(req); + } + } + + public deleteAndCloseDialog(): void { + const dialogRef = this.dialog.open(WarnDialogComponent, { + data: { + confirmKey: 'ACTIONS.DELETE', + cancelKey: 'ACTIONS.CANCEL', + titleKey: 'FLOWS.DIALOG.DELETEACTION.TITLE', + descriptionKey: 'FLOWS.DIALOG.DELETEACTION.DESCRIPTION', + }, + width: '400px', + }); + + dialogRef.afterClosed().subscribe((resp) => { + if (resp) { + this.mgmtService + .deleteAction(this.id) + .then((resp) => { this.dialogRef.close(); - }).catch((error: any) => { + }) + .catch((error: any) => { this.toast.showError(error); }); - } - }); - } + } + }); + } } diff --git a/console/src/component-themes.scss b/console/src/component-themes.scss index 7f397f08ca..6016382bcb 100644 --- a/console/src/component-themes.scss +++ b/console/src/component-themes.scss @@ -24,6 +24,8 @@ @import 'src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss'; @import 'src/app/modules/info-row/info-row.component.scss'; @import 'src/app/modules/idp-create/idp-type-radio/idp-type-radio.component.scss'; +@import 'src/app/pages/actions/add-action-dialog/add-action-dialog.component'; +@import './styles/codemirror.scss'; @mixin component-themes($theme) { @include avatar-theme($theme); @@ -52,4 +54,6 @@ @include owned-project-grid-theme($theme); @include granted-project-grid-theme($theme); @include info-row-theme($theme); + @include action-dialog-theme($theme); + @include codemirror-theme($theme); } diff --git a/console/src/main.ts b/console/src/main.ts index 371f8cc511..883e7f296d 100644 --- a/console/src/main.ts +++ b/console/src/main.ts @@ -1,4 +1,4 @@ - +import 'codemirror/mode/javascript/javascript'; import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; @@ -7,9 +7,9 @@ import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { - enableProdMode(); + enableProdMode(); } platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch(err => console.error(err)); + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/console/src/styles.scss b/console/src/styles.scss index 52519e6211..ef6b5ceafb 100644 --- a/console/src/styles.scss +++ b/console/src/styles.scss @@ -1,5 +1,6 @@ @use '@angular/material' as mat; +@import '~codemirror/lib/codemirror'; @import './component-themes'; @import '@angular/material/theming'; @@ -23,22 +24,21 @@ } $caos-dark-primary: ( - 50 : var(--theme-dark-primary-50), - 100 : var(--theme-dark-primary-100), - 200 : var(--theme-dark-primary-200), - 300 : var(--theme-dark-primary-300), - 400 : var(--theme-dark-primary-400), - 500 : var(--theme-dark-primary-500), - 600 : var(--theme-dark-primary-600), - 700 : var(--theme-dark-primary-700), - 800 : var(--theme-dark-primary-800), - 900 : var(--theme-dark-primary-900), - A100 : var(--theme-dark-primary-A100), - A200 : var(--theme-dark-primary-A200), - A400 : var(--theme-dark-primary-A400), - A700 : var(--theme-dark-primary-A700), - contrast: - ( + 50: var(--theme-dark-primary-50), + 100: var(--theme-dark-primary-100), + 200: var(--theme-dark-primary-200), + 300: var(--theme-dark-primary-300), + 400: var(--theme-dark-primary-400), + 500: var(--theme-dark-primary-500), + 600: var(--theme-dark-primary-600), + 700: var(--theme-dark-primary-700), + 800: var(--theme-dark-primary-800), + 900: var(--theme-dark-primary-900), + A100: var(--theme-dark-primary-A100), + A200: var(--theme-dark-primary-A200), + A400: var(--theme-dark-primary-A400), + A700: var(--theme-dark-primary-A700), + contrast: ( 50: var(--theme-dark-primary-contrast-50), 100: var(--theme-dark-primary-contrast-100), 200: var(--theme-dark-primary-contrast-200), @@ -52,27 +52,26 @@ $caos-dark-primary: ( A100: var(--theme-dark-primary-contrast-A100), A200: var(--theme-dark-primary-contrast-A200), A400: var(--theme-dark-primary-contrast-A400), - A700: var(--theme-dark-primary-contrast-A700) - ) + A700: var(--theme-dark-primary-contrast-A700), + ), ); $caos-light-primary: ( - 50 : var(--theme-light-primary-50), - 100 : var(--theme-light-primary-100), - 200 : var(--theme-light-primary-200), - 300 : var(--theme-light-primary-300), - 400 : var(--theme-light-primary-400), - 500 : var(--theme-light-primary-500), - 600 : var(--theme-light-primary-600), - 700 : var(--theme-light-primary-700), - 800 : var(--theme-light-primary-800), - 900 : var(--theme-light-primary-900), - A100 : var(--theme-light-primary-A100), - A200 : var(--theme-light-primary-A200), - A400 : var(--theme-light-primary-A400), - A700 : var(--theme-light-primary-A700), - contrast: - ( + 50: var(--theme-light-primary-50), + 100: var(--theme-light-primary-100), + 200: var(--theme-light-primary-200), + 300: var(--theme-light-primary-300), + 400: var(--theme-light-primary-400), + 500: var(--theme-light-primary-500), + 600: var(--theme-light-primary-600), + 700: var(--theme-light-primary-700), + 800: var(--theme-light-primary-800), + 900: var(--theme-light-primary-900), + A100: var(--theme-light-primary-A100), + A200: var(--theme-light-primary-A200), + A400: var(--theme-light-primary-A400), + A700: var(--theme-light-primary-A700), + contrast: ( 50: var(--theme-light-primary-contrast-50), 100: var(--theme-light-primary-contrast-100), 200: var(--theme-light-primary-contrast-200), @@ -86,27 +85,26 @@ $caos-light-primary: ( A100: var(--theme-light-primary-contrast-A100), A200: var(--theme-light-primary-contrast-A200), A400: var(--theme-light-primary-contrast-A400), - A700: var(--theme-light-primary-contrast-A700) - ) + A700: var(--theme-light-primary-contrast-A700), + ), ); $caos-dark-background: ( - 50 : var(--theme-dark-background-50), - 100 : var(--theme-dark-background-100), - 200 : var(--theme-dark-background-200), - 300 : var(--theme-dark-background-300), - 400 : var(--theme-dark-background-400), - 500 : var(--theme-dark-background-500), - 600 : var(--theme-dark-background-600), - 700 : var(--theme-dark-background-700), - 800 : var(--theme-dark-background-800), - 900 : var(--theme-dark-background-900), - A100 : var(--theme-dark-background-A100), - A200 : var(--theme-dark-background-A200), - A400 : var(--theme-dark-background-A400), - A700 : var(--theme-dark-background-A700), - contrast: - ( + 50: var(--theme-dark-background-50), + 100: var(--theme-dark-background-100), + 200: var(--theme-dark-background-200), + 300: var(--theme-dark-background-300), + 400: var(--theme-dark-background-400), + 500: var(--theme-dark-background-500), + 600: var(--theme-dark-background-600), + 700: var(--theme-dark-background-700), + 800: var(--theme-dark-background-800), + 900: var(--theme-dark-background-900), + A100: var(--theme-dark-background-A100), + A200: var(--theme-dark-background-A200), + A400: var(--theme-dark-background-A400), + A700: var(--theme-dark-background-A700), + contrast: ( 50: var(--theme-dark-background-contrast-50), 100: var(--theme-dark-background-contrast-100), 200: var(--theme-dark-background-contrast-200), @@ -120,27 +118,26 @@ $caos-dark-background: ( A100: var(--theme-dark-background-contrast-A100), A200: var(--theme-dark-background-contrast-A200), A400: var(--theme-dark-background-contrast-A400), - A700: var(--theme-dark-background-contrast-A700) - ) + A700: var(--theme-dark-background-contrast-A700), + ), ); $caos-light-background: ( - 50 : var(--theme-light-background-50), - 100 : var(--theme-light-background-100), - 200 : var(--theme-light-background-200), - 300 : var(--theme-light-background-300), - 400 : var(--theme-light-background-400), - 500 : var(--theme-light-background-500), - 600 : var(--theme-light-background-600), - 700 : var(--theme-light-background-700), - 800 : var(--theme-light-background-800), - 900 : var(--theme-light-background-900), - A100 : var(--theme-light-background-A100), - A200 : var(--theme-light-background-A200), - A400 : var(--theme-light-background-A400), - A700 : var(--theme-light-background-A700), - contrast: - ( + 50: var(--theme-light-background-50), + 100: var(--theme-light-background-100), + 200: var(--theme-light-background-200), + 300: var(--theme-light-background-300), + 400: var(--theme-light-background-400), + 500: var(--theme-light-background-500), + 600: var(--theme-light-background-600), + 700: var(--theme-light-background-700), + 800: var(--theme-light-background-800), + 900: var(--theme-light-background-900), + A100: var(--theme-light-background-A100), + A200: var(--theme-light-background-A200), + A400: var(--theme-light-background-A400), + A700: var(--theme-light-background-A700), + contrast: ( 50: var(--theme-light-background-contrast-50), 100: var(--theme-light-background-contrast-100), 200: var(--theme-light-background-contrast-200), @@ -154,27 +151,26 @@ $caos-light-background: ( A100: var(--theme-light-background-contrast-A100), A200: var(--theme-light-background-contrast-A200), A400: var(--theme-light-background-contrast-A400), - A700: var(--theme-light-background-contrast-A700) - ) + A700: var(--theme-light-background-contrast-A700), + ), ); $caos-dark-warn: ( - 50 : var(--theme-dark-warn-50), - 100 : var(--theme-dark-warn-100), - 200 : var(--theme-dark-warn-200), - 300 : var(--theme-dark-warn-300), - 400 : var(--theme-dark-warn-400), - 500 : var(--theme-dark-warn-500), - 600 : var(--theme-dark-warn-600), - 700 : var(--theme-dark-warn-700), - 800 : var(--theme-dark-warn-800), - 900 : var(--theme-dark-warn-900), - A100 : var(--theme-dark-warn-A100), - A200 : var(--theme-dark-warn-A200), - A400 : var(--theme-dark-warn-A400), - A700 : var(--theme-dark-warn-A700), - contrast: - ( + 50: var(--theme-dark-warn-50), + 100: var(--theme-dark-warn-100), + 200: var(--theme-dark-warn-200), + 300: var(--theme-dark-warn-300), + 400: var(--theme-dark-warn-400), + 500: var(--theme-dark-warn-500), + 600: var(--theme-dark-warn-600), + 700: var(--theme-dark-warn-700), + 800: var(--theme-dark-warn-800), + 900: var(--theme-dark-warn-900), + A100: var(--theme-dark-warn-A100), + A200: var(--theme-dark-warn-A200), + A400: var(--theme-dark-warn-A400), + A700: var(--theme-dark-warn-A700), + contrast: ( 50: var(--theme-dark-warn-contrast-50), 100: var(--theme-dark-warn-contrast-100), 200: var(--theme-dark-warn-contrast-200), @@ -188,27 +184,26 @@ $caos-dark-warn: ( A100: var(--theme-dark-warn-contrast-A100), A200: var(--theme-dark-warn-contrast-A200), A400: var(--theme-dark-warn-contrast-A400), - A700: var(--theme-dark-warn-contrast-A700) - ) + A700: var(--theme-dark-warn-contrast-A700), + ), ); $caos-light-warn: ( - 50 : var(--theme-light-warn-50), - 100 : var(--theme-light-warn-100), - 200 : var(--theme-light-warn-200), - 300 : var(--theme-light-warn-300), - 400 : var(--theme-light-warn-400), - 500 : var(--theme-light-warn-500), - 600 : var(--theme-light-warn-600), - 700 : var(--theme-light-warn-700), - 800 : var(--theme-light-warn-800), - 900 : var(--theme-light-warn-900), - A100 : var(--theme-light-warn-A100), - A200 : var(--theme-light-warn-A200), - A400 : var(--theme-light-warn-A400), - A700 : var(--theme-light-warn-A700), - contrast: - ( + 50: var(--theme-light-warn-50), + 100: var(--theme-light-warn-100), + 200: var(--theme-light-warn-200), + 300: var(--theme-light-warn-300), + 400: var(--theme-light-warn-400), + 500: var(--theme-light-warn-500), + 600: var(--theme-light-warn-600), + 700: var(--theme-light-warn-700), + 800: var(--theme-light-warn-800), + 900: var(--theme-light-warn-900), + A100: var(--theme-light-warn-A100), + A200: var(--theme-light-warn-A200), + A400: var(--theme-light-warn-A400), + A700: var(--theme-light-warn-A700), + contrast: ( 50: var(--theme-light-warn-contrast-50), 100: var(--theme-light-warn-contrast-100), 200: var(--theme-light-warn-contrast-200), @@ -222,8 +217,8 @@ $caos-light-warn: ( A100: var(--theme-light-warn-contrast-A100), A200: var(--theme-light-warn-contrast-A200), A400: var(--theme-light-warn-contrast-A400), - A700: var(--theme-light-warn-contrast-A700) - ) + A700: var(--theme-light-warn-contrast-A700), + ), ); $caos-dark-theme-background: ( @@ -244,7 +239,7 @@ $caos-dark-theme-background: ( tooltip: map_get($mat-gray, 700), infosection: map_get($caos-dark-background, 300), warninfosection: #4f566b, - successinfosection: #4f566b + successinfosection: #4f566b, ); $caos-light-theme-background: ( @@ -265,7 +260,7 @@ $caos-light-theme-background: ( tooltip: map_get($mat-gray, 700), infosection: #e4e4e4, warninfosection: #ffc1c1, - successinfosection: #cbf4c9 + successinfosection: #cbf4c9, ); $caos-dark-theme-foreground: ( @@ -286,7 +281,7 @@ $caos-dark-theme-foreground: ( slider-off-active: rgba(white, .38), infosection: #f0f0f0, warninfosection: #ffc1c1, - successinfosection: #cbf4c9 + successinfosection: #cbf4c9, ); $caos-light-theme-foreground: ( @@ -307,7 +302,7 @@ $caos-light-theme-foreground: ( slider-off-active: rgba(black, .38), infosection: #4a4a4a, warninfosection: #620e0e, - successinfosection: #0e6245 + successinfosection: #0e6245, ); $caos-dark-app-theme: ( @@ -316,7 +311,7 @@ $caos-dark-app-theme: ( warn: mat-palette($caos-dark-warn), is-dark: true, foreground: $caos-dark-theme-foreground, - background: $caos-dark-theme-background + background: $caos-dark-theme-background, ); $caos-light-app-theme: ( @@ -325,10 +320,13 @@ $caos-light-app-theme: ( warn: mat-palette($caos-light-warn), is-dark: false, foreground: $caos-light-theme-foreground, - background: $caos-light-theme-background + background: $caos-light-theme-background, ); -$custom-typography: mat.define-typography-config($font-family: 'Lato'); +$custom-typography: + mat.define-typography-config( + $font-family: 'Lato', + ); @include mat.core($custom-typography); @include component-themes($caos-dark-app-theme); @@ -443,14 +441,14 @@ body { 'Lato', -apple-system, BlinkMacSystemFont, - "Segoe UI", - "Roboto", - "Oxygen", - "Ubuntu", - "Cantarell", - "Fira Sans", - "Droid Sans", - "Helvetica Neue", + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', sans-serif; } diff --git a/console/src/styles/codemirror.scss b/console/src/styles/codemirror.scss new file mode 100644 index 0000000000..0a57d522a5 --- /dev/null +++ b/console/src/styles/codemirror.scss @@ -0,0 +1,149 @@ +/* + Name: material + Author: Mattia Astorino (http://github.com/equinusocio) + Website: https://material-theme.site/ +*/ + +@mixin codemirror-theme($theme) { + $is-dark-theme: map-get($theme, is-dark); + + .cm-s-material.CodeMirror { + background-color: if($is-dark-theme, #00000020, #263238); + color: #eff; + font-size: 14px; + border-radius: 4px; + border: 1px solid if($is-dark-theme, #403e3e, #00000040); + } +} + +.cm-s-material .CodeMirror-gutters { + background: #263238; + color: #546e7a; + border: none; +} + +.cm-s-material .CodeMirror-guttermarker, +.cm-s-material .CodeMirror-guttermarker-subtle, +.cm-s-material .CodeMirror-linenumber { + color: #546e7a; +} + +.cm-s-material .CodeMirror-cursor { + border-left: 1px solid #fc0; +} + +.cm-s-material.cm-fat-cursor .CodeMirror-cursor { + background-color: #5d6d5c80 !important; +} + +.cm-s-material .cm-animate-fat-cursor { + background-color: #5d6d5c80 !important; +} + +.cm-s-material div.CodeMirror-selected { + background: rgba(128, 203, 196, .2); +} + +.cm-s-material.CodeMirror-focused div.CodeMirror-selected { + background: rgba(128, 203, 196, .2); +} + +.cm-s-material .CodeMirror-line::selection, +.cm-s-material .CodeMirror-line > span::selection, +.cm-s-material .CodeMirror-line > span > span::selection { + background: rgba(128, 203, 196, .2); +} + +.cm-s-material .CodeMirror-line::-moz-selection, +.cm-s-material .CodeMirror-line > span::-moz-selection, +.cm-s-material .CodeMirror-line > span > span::-moz-selection { + background: rgba(128, 203, 196, .2); +} + +.cm-s-material .CodeMirror-activeline-background { + background: rgba(0, 0, 0, .5); +} + +.cm-s-material .cm-keyword { + color: #c792ea; +} + +.cm-s-material .cm-operator { + color: #89ddff; +} + +.cm-s-material .cm-variable-2 { + color: #eff; +} + +// .cm-s-material .cm-variable-3, +// .cm-s-material .cm-type { +// color: #f07178; +// } + +.cm-s-material .cm-builtin { + color: #ffcb6b; +} + +.cm-s-material .cm-atom { + color: #f78c6c; +} + +.cm-s-material .cm-number { + color: #ff5370; +} + +.cm-s-material .cm-def { + color: #82aaff; +} + +.cm-s-material .cm-string { + color: #c3e88d; +} + +.cm-s-material .cm-string-2 { + color: #f07178; +} + +.cm-s-material .cm-comment { + color: #546e7a; +} + +.cm-s-material .cm-variable { + color: #f07178; +} + +.cm-s-material .cm-tag { + color: #ff5370; +} + +.cm-s-material .cm-meta { + color: #ffcb6b; +} + +.cm-s-material .cm-attribute { + color: #c792ea; +} + +.cm-s-material .cm-property { + color: #c792ea; +} + +.cm-s-material .cm-qualifier { + color: #decb6b; +} + +.cm-s-material .cm-variable-3, +.cm-s-material .cm-type { + color: #decb6b; +} + +.cm-s-material .cm-error { + color: rgba(255, 255, 255, 1); + background-color: #ff5370; +} + +.cm-s-material .CodeMirror-matchingbracket { + text-decoration: underline; + color: white !important; +}