valitydev/control-center
14
0
Fork 0
mirror of https://github.com/valitydev/control-center.git synced 2024-11-06 02:25:17 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FE-629: New Angular 12 (#279)

Browse Source
This commit is contained in:
Rinat Arsaev 2021-08-05 18:26:06 +03:00 committed by GitHub
parent 2b2fb06082
commit 493d4f8b0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
39 changed files with 14682 additions and 13681 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
angular.json
View File

@ -8,6 +8,9 @@
"schematics": { "schematics": {
"@schematics/angular:component": { "@schematics/angular:component": {
"style": "scss" "style": "scss"
},
"@schematics/angular:application": {
"strict": true
} }
}, },
"root": "", "root": "",
@ -17,12 +20,6 @@
"build": { "build": {
"builder": "@angular-devkit/build-angular:browser", "builder": "@angular-devkit/build-angular:browser",
"options": { "options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"allowedCommonJsDependencies": [ "allowedCommonJsDependencies": [
"moment", "moment",
"keycloak-js", "keycloak-js",
@ -35,20 +32,26 @@
"@rbkmoney/partial-fetcher", "@rbkmoney/partial-fetcher",
"humanize-duration" "humanize-duration"
], ],
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [ "assets": [
"src/favicon.ico",
"src/assets",
{ {
"glob": "**/*", "glob": "**/*",
"input": "./node_modules/monaco-editor/min/vs", "input": "./node_modules/monaco-editor/min/vs",
"output": "libs/vs" "output": "libs/vs"
}, }
"src/favicon.ico",
"src/assets"
], ],
"styles": [ "styles": [
"src/app/styles/core.scss", "src/app/styles/core.scss",
{ {
"input": "src/app/styles/themes/light.scss", "input": "src/app/styles/themes/light.scss",
"bundleName": "themes/light", "bundleName": "light-theme",
"inject": false "inject": false
} }
], ],
@ -56,19 +59,6 @@
}, },
"configurations": { "configurations": {
"production": { "production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [ "budgets": [
{ {
"type": "initial", "type": "initial",
@ -80,26 +70,37 @@
"maximumWarning": "6kb", "maximumWarning": "6kb",
"maximumError": "10kb" "maximumError": "10kb"
} }
] ],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
} }
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
} }
}, },
"defaultConfiguration": "production"
},
"serve": { "serve": {
"builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "control-center:build"
},
"configurations": { "configurations": {
"production": { "production": {
"browserTarget": "control-center:build:production" "browserTarget": "control-center:build:production"
} },
"development": {
"browserTarget": "control-center:build:development"
} }
}, },
"extract-i18n": { "defaultConfiguration": "development"
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "control-center:build"
}
}, },
"test": { "test": {
"builder": "@angular-devkit/build-angular:karma", "builder": "@angular-devkit/build-angular:karma",
@ -108,26 +109,29 @@
"polyfills": "src/polyfills.ts", "polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json", "tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js", "karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"], "inlineStyleLanguage": "scss",
"styles": ["src/styles.scss"], "assets": [
"scripts": [] "src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/monaco-editor/min/vs",
"output": "libs/vs"
} }
}, ],
"lint": { "styles": [
"builder": "@angular-eslint/builder:lint", "src/app/styles/core.scss",
"options": { {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] "input": "src/app/styles/themes/light.scss",
"bundleName": "light-theme",
"inject": false
} }
}, ],
"e2e": { "scripts": ["./node_modules/keycloak-js/dist/keycloak.js"]
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "control-center:serve"
}, },
"configurations": { "configurations": {
"production": { "ci": {
"devServerTarget": "control-center:serve:production" "karmaConfig": "karma-ci.conf.js"
} }
} }
} }

30
e2e/protractor.conf.js
View File

@ -1,30 +0,0 @@
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: ['./src/**/*.e2e-spec.ts'],
capabilities: {
browserName: 'chrome',
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function () {},
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json'),
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
},
};

26
e2e/src/app.e2e-spec.ts
View File

@ -1,26 +0,0 @@
import { browser, logging } from 'protractor';
import { AppPage } from './app.po';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('angular9 app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(
jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry)
);
});
});

11
e2e/src/app.po.ts
View File

@ -1,11 +0,0 @@
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo(): Promise<unknown> {
return browser.get(browser.baseUrl) as Promise<unknown>;
}
getTitleText(): Promise<string> {
return element(by.css('app-root .content span')).getText() as Promise<string>;
}
}

9
e2e/tsconfig.json
View File

@ -1,9 +0,0 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": ["jasmine", "jasminewd2", "node"]
}
}

51
karma-ci.conf.js Normal file
View File

@ -0,0 +1,51 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-spec-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
],
client: {
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/control-center'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true,
},
reporters: ['progress', 'kjhtml', 'spec'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['ChromeHeadless_no_sandbox'],
browserNoActivityTimeout: 300000,
browserDisconnectTimeout: 300000,
captureTimeout: 300000,
customLaunchers: {
ChromeHeadless_no_sandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox', '--disable-setuid-sandbox', '--headless', '--disable-gpu'],
},
},
singleRun: true,
restartOnFileChange: false,
specReporter: {
maxLogLines: 5, // limit number of lines logged per test
suppressErrorSummary: false, // do not print error summary
suppressFailed: false, // do not print information about failed tests
suppressPassed: false, // do not print information about passed tests
suppressSkipped: true, // do not print information about skipped tests
showSpecTiming: true, // print the time elapsed for each spec
failFast: false, // test would finish with error when a first fail occurs.
},
});
};

23
karma.conf.js
View File

@ -9,6 +9,7 @@ module.exports = function (config) {
require('karma-jasmine'), require('karma-jasmine'),
require('karma-chrome-launcher'), require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), require('karma-jasmine-html-reporter'),
require('karma-spec-reporter'),
require('karma-coverage-istanbul-reporter'), require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'), require('@angular-devkit/build-angular/plugins/karma'),
], ],
@ -20,13 +21,31 @@ module.exports = function (config) {
reports: ['html', 'lcovonly', 'text-summary'], reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true, fixWebpackSourcePaths: true,
}, },
reporters: ['progress', 'kjhtml'], reporters: ['progress', 'kjhtml', 'spec'],
port: 9876, port: 9876,
colors: true, colors: true,
logLevel: config.LOG_INFO, logLevel: config.LOG_INFO,
autoWatch: true, autoWatch: true,
browsers: ['Chrome'], browsers: ['ChromeHeadless_no_sandbox'],
browserNoActivityTimeout: 30 * 60 * 1000,
browserDisconnectTimeout: 30 * 60 * 1000,
captureTimeout: 300000,
customLaunchers: {
ChromeHeadless_no_sandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox', '--disable-setuid-sandbox', '--headless', '--disable-gpu'],
},
},
singleRun: false, singleRun: false,
restartOnFileChange: true, restartOnFileChange: true,
specReporter: {
maxLogLines: 5, // limit number of lines logged per test
suppressErrorSummary: false, // do not print error summary
suppressFailed: false, // do not print information about failed tests
suppressPassed: false, // do not print information about passed tests
suppressSkipped: true, // do not print information about skipped tests
showSpecTiming: true, // print the time elapsed for each spec
failFast: false, // test would finish with error when a first fail occurs.
},
}); });
}; };

27766
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

51
package.json
View File

@ -6,14 +6,13 @@
"start": "ng serve --proxy-config proxy.conf.json --port 7000", "start": "ng serve --proxy-config proxy.conf.json --port 7000",
"build": "ng build --prod", "build": "ng build --prod",
"test": "ng test", "test": "ng test",
"lint": "eslint \"src/**/*.{ts,js,html}\" --max-warnings 2138 --cache", "lint": "eslint \"src/**/*.{ts,js,html}\" --max-warnings 2133 --cache",
"lint-errors": "npm run lint -- --quiet --format codeframe", "lint-errors": "npm run lint -- --quiet --format codeframe",
"lint-fix": "npm run lint -- --fix", "lint-fix": "npm run lint -- --fix",
"prettier-preset": "prettier \"**/*.{html,js,ts,css,scss,md,json,prettierrc,svg,huskyrc}\"", "prettier-preset": "prettier \"**/*.{html,js,ts,css,scss,md,json,prettierrc,svg,huskyrc}\"",
"prettier": "npm run prettier-preset -- --list-different", "prettier": "npm run prettier-preset -- --list-different",
"prettier:fix": "npm run prettier-preset -- --write", "prettier:fix": "npm run prettier-preset -- --write",
"fix": "npm run lint-fix; npm run prettier:fix", "fix": "npm run lint-fix; npm run prettier:fix",
"e2e": "ng e2e",
"compile-thrift-deprecated": "ts-node --project tools/tsconfig.json tools/compile-thrift-deprecated", "compile-thrift-deprecated": "ts-node --project tools/tsconfig.json tools/compile-thrift-deprecated",
"compile-thrift": "ts-node --project tools/tsconfig.json tools/compile-thrift", "compile-thrift": "ts-node --project tools/tsconfig.json tools/compile-thrift",
"compile": "npm run parallel-cmd -- --names THRIFT,THRIFT_DEP \"npm run compile-thrift\" \"npm run compile-thrift-deprecated\"", "compile": "npm run parallel-cmd -- --names THRIFT,THRIFT_DEP \"npm run compile-thrift\" \"npm run compile-thrift-deprecated\"",
@ -22,22 +21,23 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "~11.0.9", "@angular/animations": "~12.1.4",
"@angular/cdk": "^11.0.4", "@angular/cdk": "^12.1.4",
"@angular/common": "^11.0.9", "@angular/common": "^12.1.4",
"@angular/compiler": "^11.0.9", "@angular/compiler": "^12.1.4",
"@angular/core": "^11.0.9", "@angular/core": "^12.1.4",
"@angular/flex-layout": "^11.0.0-beta.33", "@angular/flex-layout": "^12.0.0-beta.34",
"@angular/forms": "~11.0.9", "@angular/forms": "~12.1.4",
"@angular/material": "~11.0.4", "@angular/material": "~12.1.4",
"@angular/material-moment-adapter": "~11.0.4", "@angular/material-moment-adapter": "~12.1.4",
"@angular/platform-browser": "~11.0.9", "@angular/platform-browser": "~12.1.4",
"@angular/platform-browser-dynamic": "~11.0.9", "@angular/platform-browser-dynamic": "~12.1.4",
"@angular/platform-server": "~11.0.9", "@angular/platform-server": "~12.1.4",
"@angular/router": "~11.0.9", "@angular/router": "~12.1.4",
"@ngneat/until-destroy": "^8.0.3", "@ngneat/until-destroy": "^8.0.3",
"@rbkmoney/partial-fetcher": "~0.4.0", "@rbkmoney/partial-fetcher": "~0.4.0",
"@rbkmoney/utils": "~0.4.0", "@rbkmoney/utils": "~0.4.0",
"@rbkmoney/woody_js": "^0.1.0",
"angular-file": "3.0.1", "angular-file": "3.0.1",
"angular2-prettyjson": "3.0.1", "angular2-prettyjson": "3.0.1",
"ank-proto": "git+ssh://git@github.com:rbkmoney/ank-proto.git#d638e44eb8632fd62f0d6730294e51637babcc78", "ank-proto": "git+ssh://git@github.com:rbkmoney/ank-proto.git#d638e44eb8632fd62f0d6730294e51637babcc78",
@ -58,33 +58,29 @@
"pdfmake": "^0.1.64", "pdfmake": "^0.1.64",
"rxjs": "^6.6.3", "rxjs": "^6.6.3",
"short-uuid": "^4.1.0", "short-uuid": "^4.1.0",
"skipper-proto": "github:rbkmoney/skipper-proto#d33d87cd9080925861f755b11ee1f16378076f74", "skipper-proto": "git+ssh://git@github.com/rbkmoney/skipper-proto.git#d33d87cd9080925861f755b11ee1f16378076f74",
"thrift-ts": "git+ssh://git@github.com/rbkmoney/thrift-ts.git#b0624317043bbeb3c4882d2102e631b3b75a5abb", "thrift-ts": "git+ssh://git@github.com/rbkmoney/thrift-ts.git#b0624317043bbeb3c4882d2102e631b3b75a5abb",
"transliteration": "^2.1.8", "transliteration": "^2.1.8",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"utility-types": "^3.10.0", "utility-types": "^3.10.0",
"uuid": "~3.3.2", "uuid": "~3.3.2",
"woody_js": "git+ssh://git@github.com/rbkmoney/woody_js.git#19da32be428acf1ecb21b1e877ae2b0fadeb29e0", "zone.js": "~0.11.4"
"zone.js": "~0.10.2"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^0.1100.7", "@angular-devkit/build-angular": "^12.1.4",
"@angular-eslint/builder": "~4.0.0",
"@angular-eslint/eslint-plugin-template": "~4.0.0", "@angular-eslint/eslint-plugin-template": "~4.0.0",
"@angular-eslint/schematics": "~4.0.0",
"@angular-eslint/template-parser": "~4.0.0", "@angular-eslint/template-parser": "~4.0.0",
"@angular/cli": "^11.0.7", "@angular/cli": "^12.1.4",
"@angular/compiler-cli": "^11.0.9", "@angular/compiler-cli": "^12.1.4",
"@rbkmoney/angular-templates": "^0.2.2", "@rbkmoney/angular-templates": "^0.2.2",
"@rbkmoney/eslint-plugin": "~0.2.0", "@rbkmoney/eslint-plugin": "~0.2.0",
"@types/del": "^4.0.0", "@types/del": "^4.0.0",
"@types/glob": "^7.1.3", "@types/glob": "^7.1.3",
"@types/humanize-duration": "~3.18.0", "@types/humanize-duration": "~3.18.0",
"@types/jasmine": "~3.6.0", "@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/jwt-decode": "~2.2.1", "@types/jwt-decode": "~2.2.1",
"@types/lodash-es": "~4.17.3", "@types/lodash-es": "~4.17.3",
"@types/node": "^12.12.34", "@types/node": "^16.4.12",
"@types/pdfmake": "^0.1.9", "@types/pdfmake": "^0.1.9",
"@types/uuid": "~3.4.3", "@types/uuid": "~3.4.3",
"@typescript-eslint/parser": "~4.22.0", "@typescript-eslint/parser": "~4.22.0",
@ -97,15 +93,14 @@
"jasmine-core": "~3.6.0", "jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0", "jasmine-spec-reporter": "~5.0.0",
"jwt-decode": "~2.2.0", "jwt-decode": "~2.2.0",
"karma": "~5.1.1", "karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0", "karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2", "karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0", "karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0", "karma-jasmine-html-reporter": "^1.5.0",
"prettier": "~2.0.4", "prettier": "~2.0.4",
"protractor": "~7.0.0",
"ts-mockito": "^2.6.1", "ts-mockito": "^2.6.1",
"ts-node": "~8.8.2", "ts-node": "~8.8.2",
"typescript": "~4.0.5" "typescript": "~4.3.5"
} }
} }

4
src/app/api/thrift-connector/utils/connect-to-thrift-service.ts
View File

@ -1,6 +1,6 @@
import connectClient from '@rbkmoney/woody_js';
import { ConnectOptions } from '@rbkmoney/woody_js/src/connect-options';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import connectClient from 'woody_js';
import { ConnectOptions } from 'woody_js/src/connect-options';
import { ThriftService, ThriftServiceConnection } from './types'; import { ThriftService, ThriftServiceConnection } from './types';

2
src/app/api/thrift-connector/utils/to-connect-options.ts
View File

@ -1,4 +1,4 @@
import { ConnectOptions } from 'woody_js/src/connect-options'; import { ConnectOptions } from '@rbkmoney/woody_js/src/connect-options';
import { KeycloakToken } from '@cc/app/shared/services'; import { KeycloakToken } from '@cc/app/shared/services';

4
src/app/claim-mgt/claim/conversation/send-comment/_send-comment-theme.scss
View File

@ -1,9 +1,9 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin cc-send-comment-theme($theme) { @mixin cc-send-comment-theme($theme) {
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
.cc-send-comment-error { .cc-send-comment-error {
color: mat-color($warn, 500) !important; color: mat.get-color-from-palette($warn, 500) !important;
} }
} }

2
src/app/core/config.service.ts
View File

@ -15,7 +15,7 @@ export class ConfigService {
return new Promise((resolve) => { return new Promise((resolve) => {
this.http.get<AppConfig>('assets/appConfig.json').subscribe((config) => { this.http.get<AppConfig>('assets/appConfig.json').subscribe((config) => {
this.config = config; this.config = config;
resolve(); resolve(undefined);
}); });
}); });
} }

4
src/app/not-found/_not-found-theme.scss
View File

@ -1,9 +1,9 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin cc-not-found-theme($theme) { @mixin cc-not-found-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
.not-found { .not-found {
color: mat-color($foreground, secondary-text); color: mat.get-color-from-palette($foreground, secondary-text);
} }
} }

4
src/app/sections/chargeback-details/_chargeback-details-theme.scss
View File

@ -1,9 +1,9 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin cc-chargeback-details-theme($theme) { @mixin cc-chargeback-details-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
.cc-chargeback-details-caption { .cc-chargeback-details-caption {
color: mat-color($foreground, secondary-text); color: mat.get-color-from-palette($foreground, secondary-text);
} }
} }

4
src/app/sections/party-claim/changeset/timeline-components/timeline-item-loading/_timeline-item-loading-theme.scss
View File

@ -1,9 +1,9 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin cc-timeline-item-loading-theme($theme) { @mixin cc-timeline-item-loading-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
.cc-timeline-item-loading-text { .cc-timeline-item-loading-text {
color: mat-color($foreground, secondary-text); color: mat.get-color-from-palette($foreground, secondary-text);
} }
} }

4
src/app/sections/party-claim/party-claim-title/_party-claim-title-theme.scss
View File

@ -1,9 +1,9 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin cc-party-claim-title-theme($theme) { @mixin cc-party-claim-title-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
.cc-party-claim-title { .cc-party-claim-title {
color: mat-color($foreground, secondary-text); color: mat.get-color-from-palette($foreground, secondary-text);
} }
} }

4
src/app/sections/party/_party-theme.scss
View File

@ -1,9 +1,9 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin cc-party-theme($theme) { @mixin cc-party-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
.cc-party-header { .cc-party-header {
color: mat-color($foreground, secondary-text); color: mat.get-color-from-palette($foreground, secondary-text);
} }
} }

4
src/app/sections/payment-routing-rules/_payment-routing-rules-theme.scss
View File

@ -1,9 +1,9 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin cc-payment-routing-rules-theme($theme) { @mixin cc-payment-routing-rules-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
.cc-payment-routing-rules-caption { .cc-payment-routing-rules-caption {
color: mat-color($foreground, secondary-text); color: mat.get-color-from-palette($foreground, secondary-text);
} }
} }

2
src/app/shared/components/party-modification-creator/party-modification-target/target-table/_target-table-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin cc-target-table-theme($theme) { @mixin cc-target-table-theme($theme) {
.cc-target-table-from-claim { .cc-target-table-from-claim {
color: map-get($theme, red); color: map-get($theme, red);

2
src/app/shared/components/status/_status-theme.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
@mixin cc-status-theme($theme) { @mixin cc-status-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);

4
src/app/styles/core.scss
View File

@ -1,5 +1,5 @@
@use '~@angular/material' as mat;
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; @import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import '~@angular/material/theming';
@import './overrides/body'; @import './overrides/body';
@ -10,7 +10,7 @@
} }
@mixin cc-typography($config) { @mixin cc-typography($config) {
@include mat-core($config); @include mat.core($config);
@include cc-base-typography($config); @include cc-base-typography($config);
} }

4
src/app/styles/themes/_theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@import '../../../components/components-themes'; @import '../../../components/components-themes';
@import '../../shared/components/shared-components-themes'; @import '../../shared/components/shared-components-themes';
@ -12,7 +12,7 @@
@mixin cc-theme($theme) { @mixin cc-theme($theme) {
body.#{map-get($theme, name)} { body.#{map-get($theme, name)} {
@include angular-material-theme($theme); @include mat.all-component-themes($theme);
@include cc-party-theme($theme); @include cc-party-theme($theme);
@include cc-chargeback-details-theme($theme); @include cc-chargeback-details-theme($theme);
@include cc-components-themes($theme); @include cc-components-themes($theme);

24
src/app/styles/themes/light.scss
View File

@ -1,32 +1,32 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@import '../utils/palette'; @import '../utils/palette';
@import './theme'; @import './theme';
body.light { body.light {
background-color: mat-color($mat-gray, 50); background-color: mat.get-color-from-palette(mat.$gray-palette, 50);
} }
$theme: ( $theme: (
primary: mat-palette($mat-indigo), primary: mat.define-palette(mat.$indigo-palette),
accent: mat-palette($mat-pink), accent: mat.define-palette(mat.$pink-palette),
warn: mat-palette($mat-red), warn: mat.define-palette(mat.$red-palette),
is-dark: false, is-dark: false,
foreground: $mat-light-theme-foreground, foreground: mat.$light-theme-foreground-palette,
background: $mat-light-theme-background, background: mat.$light-theme-background-palette,
/* /*
* Custom * Custom
* *
*/ name: 'light', */ name: 'light',
gray: mat-palette($mat-grey), gray: mat.define-palette(mat.$grey-palette),
success-base: mat-color(mat-palette($cc-success), 400), success-base: mat.get-color-from-palette(mat.define-palette($cc-success), 400),
pending-base: mat-color(mat-palette($cc-pending), 800), pending-base: mat.get-color-from-palette(mat.define-palette($cc-pending), 800),
warn-base: mat-color(mat-palette($cc-warn), 300), warn-base: mat.get-color-from-palette(mat.define-palette($cc-warn), 300),
white: white, white: white,
blue: #0366d6, blue: #0366d6,
orange: #dbab09, orange: #dbab09,
red: #cb2431, red: #cb2431,
green: #2cbe4e, green: #2cbe4e,
neutral: mat-palette($mat-grey), neutral: mat.define-palette(mat.$grey-palette),
); );
@include cc-theme($theme); @include cc-theme($theme);

50
src/app/styles/utils/_typography.scss
View File

@ -1,20 +1,20 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@function cc-typography-config( @function cc-typography-config(
$font-family: 'Roboto, "Helvetica Neue", sans-serif', $font-family: 'Roboto, "Helvetica Neue", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300, $letter-spacing: -0.05em), $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
$display-3: mat-typography-level(56px, 56px, 400, $letter-spacing: -0.02em), $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
$display-2: mat-typography-level(45px, 48px, 400, $letter-spacing: -0.005em), $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
$display-1: mat-typography-level(34px, 40px, 400), $display-1: mat.define-typography-level(34px, 40px, 400),
$headline: mat-typography-level(24px, 32px, 400), $headline: mat.define-typography-level(24px, 32px, 400),
$title: mat-typography-level(20px, 32px, 500), $title: mat.define-typography-level(20px, 32px, 500),
$subheading-2: mat-typography-level(16px, 28px, 400), $subheading-2: mat.define-typography-level(16px, 28px, 400),
$subheading-1: mat-typography-level(15px, 24px, 400), $subheading-1: mat.define-typography-level(15px, 24px, 400),
$body-2: mat-typography-level(14px, 24px, 500), $body-2: mat.define-typography-level(14px, 24px, 500),
$body-1: mat-typography-level(14px, 20px, 400), $body-1: mat.define-typography-level(14px, 20px, 400),
$caption: mat-typography-level(12px, 20px, 400), $caption: mat.define-typography-level(12px, 20px, 400),
$button: mat-typography-level(14px, 14px, 500), $button: mat.define-typography-level(14px, 14px, 500),
$input: mat-typography-level(14px, 1.15, 400) $input: mat.define-typography-level(14px, 1.15, 400)
) { ) {
// Declare an initial map with all of the levels. // Declare an initial map with all of the levels.
$config: ( $config: (
@ -72,35 +72,35 @@
@mixin cc-base-typography($config, $selector: '.cc-typography') { @mixin cc-base-typography($config, $selector: '.cc-typography') {
.cc-headline, .cc-headline,
#{$selector} h1 { #{$selector} h1 {
@include mat-typography-level-to-styles($config, headline); @include mat.typography-level($config, headline);
margin: 0; margin: 0;
} }
.cc-title, .cc-title,
#{$selector} h2 { #{$selector} h2 {
@include mat-typography-level-to-styles($config, title); @include mat.typography-level($config, title);
margin: 0; margin: 0;
} }
.cc-subheading-2, .cc-subheading-2,
#{$selector} h3 { #{$selector} h3 {
@include mat-typography-level-to-styles($config, subheading-2); @include mat.typography-level($config, subheading-2);
margin: 0; margin: 0;
} }
.cc-subheading-1, .cc-subheading-1,
#{$selector} h4 { #{$selector} h4 {
@include mat-typography-level-to-styles($config, subheading-1); @include mat.typography-level($config, subheading-1);
margin: 0; margin: 0;
} }
.cc-body-2 { .cc-body-2 {
@include mat-typography-level-to-styles($config, body-2); @include mat.typography-level($config, body-2);
} }
.cc-body-1, .cc-body-1,
#{$selector} { #{$selector} {
@include mat-typography-level-to-styles($config, body-1); @include mat.typography-level($config, body-1);
p { p {
margin: 0; margin: 0;
@ -108,29 +108,29 @@
} }
.cc-caption { .cc-caption {
@include mat-typography-level-to-styles($config, caption); @include mat.typography-level($config, caption);
} }
.cc-display-4, .cc-display-4,
#{$selector} .cc-display-4 { #{$selector} .cc-display-4 {
@include mat-typography-level-to-styles($config, display-4); @include mat.typography-level($config, display-4);
margin: 0; margin: 0;
} }
#{$selector} .cc-display-3 { #{$selector} .cc-display-3 {
@include mat-typography-level-to-styles($config, display-3); @include mat.typography-level($config, display-3);
margin: 0; margin: 0;
} }
.cc-display-2, .cc-display-2,
#{$selector} .cc-display-2 { #{$selector} .cc-display-2 {
@include mat-typography-level-to-styles($config, display-2); @include mat.typography-level($config, display-2);
margin: 0; margin: 0;
} }
.cc-display-1, .cc-display-1,
#{$selector} .cc-display-1 { #{$selector} .cc-display-1 {
@include mat-typography-level-to-styles($config, display-1); @include mat.typography-level($config, display-1);
margin: 0; margin: 0;
} }
} }

2
src/app/theme-manager/index.ts
View File

@ -1,3 +1,3 @@
export * from './theme-manager.service'; export * from './theme-manager.service';
export * from './theme-manager.module'; export * from './theme-manager.module';
export * from './theme-name'; export * from './types/theme-name';

2
src/app/theme-manager/theme-manager.module.ts
View File

@ -1,10 +1,8 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { SettingsModule } from '../settings';
import { ThemeManager } from './theme-manager.service'; import { ThemeManager } from './theme-manager.service';
@NgModule({ @NgModule({
imports: [SettingsModule],
providers: [ThemeManager], providers: [ThemeManager],
}) })
export class ThemeManagerModule {} export class ThemeManagerModule {}

40
src/app/theme-manager/theme-manager.service.ts
View File

@ -1,57 +1,35 @@
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core'; import { Inject, Injectable } from '@angular/core';
import { SettingsService } from '../settings'; import { ThemeName } from './types/theme-name';
import { ThemeName } from './theme-name'; import { createStyleElement } from './utils/create-style-element';
const THEME_POSTFIX = 'theme';
@Injectable() @Injectable()
export class ThemeManager { export class ThemeManager {
current: ThemeName; current: ThemeName;
private static readonly key = 'theme';
private element: HTMLScriptElement | HTMLLinkElement; private element: HTMLScriptElement | HTMLLinkElement;
constructor(private settingsService: SettingsService, @Inject(DOCUMENT) private doc: Document) { constructor(@Inject(DOCUMENT) private doc: Document) {
const name = this.settingsService.get(ThemeManager.key); this.change(ThemeName.Light);
const correctedName = this.getCorrectName(name);
this.change(correctedName);
} }
change(name: ThemeName) { change(name: ThemeName): void {
this.removeCurrent(); this.removeCurrent();
this.set(name); this.set(name);
} }
private getCorrectName(theme: ThemeName | string): ThemeName {
if (!Object.values<string>(ThemeName).includes(theme)) {
return this.current || ThemeName.Light;
}
return theme as ThemeName;
}
private set(name: ThemeName) { private set(name: ThemeName) {
this.element = this.createElement(name); this.element = createStyleElement(`${name}-${THEME_POSTFIX}.css`);
this.doc.head.appendChild(this.element); this.doc.head.appendChild(this.element);
this.doc.body.classList.add(name); this.doc.body.classList.add(name);
this.settingsService.set(ThemeManager.key, name);
this.current = name; this.current = name;
} }
private removeCurrent() { private removeCurrent() {
if (this.doc.head.contains(this.element)) { if (this.doc.head.contains(this.element)) this.doc.head.removeChild(this.element);
this.doc.head.removeChild(this.element);
}
this.doc.body.classList.remove(this.current); this.doc.body.classList.remove(this.current);
} }
private createElement(name: ThemeName): HTMLLinkElement | HTMLScriptElement {
return this.createStyleElement(`themes/${name}.css`);
}
private createStyleElement(url: string): HTMLLinkElement {
const styleElement = document.createElement('link');
styleElement.href = url;
styleElement.rel = 'stylesheet';
return styleElement;
}
} }

0
src/app/theme-manager/theme-name.ts → src/app/theme-manager/types/theme-name.ts
View File

6
src/app/theme-manager/utils/create-style-element.ts Normal file
View File

@ -0,0 +1,6 @@
export function createStyleElement(url: string): HTMLLinkElement {
const styleElement = document.createElement('link');
styleElement.href = url;
styleElement.rel = 'stylesheet';
return styleElement;
}

2
src/app/thrift-services/services/thrift/thrift-service.ts
View File

@ -1,7 +1,7 @@
import { NgZone } from '@angular/core'; import { NgZone } from '@angular/core';
import connectClient from '@rbkmoney/woody_js';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { timeout } from 'rxjs/operators'; import { timeout } from 'rxjs/operators';
import connectClient from 'woody_js';
import { KeycloakTokenInfoService } from '../../../keycloak-token-info.service'; import { KeycloakTokenInfoService } from '../../../keycloak-token-info.service';

4
src/components/details-item/_details-item-theme.scss
View File

@ -1,9 +1,9 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin cc-details-item-theme($theme) { @mixin cc-details-item-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
.cc-details-item-title { .cc-details-item-title {
color: mat-color($foreground, secondary-text); color: mat.get-color-from-palette($foreground, secondary-text);
} }
} }

12
src/components/pretty-json/pretty-json.component.ts
View File

@ -5,7 +5,7 @@ import { Component, Input } from '@angular/core';
templateUrl: './pretty-json.component.html', templateUrl: './pretty-json.component.html',
styles: [ styles: [
` `
:host /deep/ * { :host ::ng-deep * {
font-family: Menlo, Monaco, 'Courier New', monospace; font-family: Menlo, Monaco, 'Courier New', monospace;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
@ -13,23 +13,23 @@ import { Component, Input } from '@angular/core';
letter-spacing: 0px; letter-spacing: 0px;
} }
:host /deep/ .string { :host ::ng-deep .string {
color: #0451a5; color: #0451a5;
} }
:host /deep/ .number { :host ::ng-deep .number {
color: #09885a; color: #09885a;
} }
:host /deep/ .boolean { :host ::ng-deep .boolean {
color: #0451a5; color: #0451a5;
} }
:host /deep/ .null { :host ::ng-deep .null {
color: #0451a5; color: #0451a5;
} }
:host /deep/ .key { :host ::ng-deep .key {
color: #a31515; color: #a31515;
} }

3
src/components/timeline/_timeline-theme.scss
View File

@ -1,8 +1,9 @@
@use '~@angular/material' as mat;
@import './timeline-item/timeline-item-badge/timeline-item-badge-theme'; @import './timeline-item/timeline-item-badge/timeline-item-badge-theme';
@mixin cc-timeline-theme($theme) { @mixin cc-timeline-theme($theme) {
$neutral: map-get($theme, neutral); $neutral: map-get($theme, neutral);
$line-color: mat-color($neutral, 200); $line-color: mat.get-color-from-palette($neutral, 200);
.cc-timeline { .cc-timeline {
border-bottom-color: $line-color; border-bottom-color: $line-color;

4
src/components/timeline/timeline-item/timeline-item-badge/_timeline-item-badge-theme.scss
View File

@ -1,4 +1,4 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin cc-timeline-item-badge-theme($theme) { @mixin cc-timeline-item-badge-theme($theme) {
$blue: map-get($theme, blue); $blue: map-get($theme, blue);
@ -9,7 +9,7 @@
$neutral: map-get($theme, neutral); $neutral: map-get($theme, neutral);
.cc-timeline-item-badge { .cc-timeline-item-badge {
background-color: mat-color($neutral, 200); background-color: mat.get-color-from-palette($neutral, 200);
&.primary { &.primary {
background-color: $blue; background-color: $blue;

4
src/components/timeline/timeline.component.scss
View File

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
$size: 36px; $size: 36px;
$line-size: 2px; $line-size: 2px;
@ -15,6 +13,6 @@ $line-size: 2px;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: $line-size; width: $line-size;
left: $size / 2 - $line-size / 2; left: $size * 0.5 - $line-size * 0.5;
} }
} }

2
tools/compile-thrift-deprecated.ts
View File

@ -6,7 +6,7 @@ import * as path from 'path';
import * as config from '../thrift-config.json'; import * as config from '../thrift-config.json';
const ROOT_DIR = path.join(__dirname, '..'); const ROOT_DIR = path.join(__dirname, '..');
const THRIFT_PATH = 'woody_js/dist/thrift'; const THRIFT_PATH = '@rbkmoney/woody_js/dist/thrift';
const OUTPUT_PATH = './src/app/thrift-services'; const OUTPUT_PATH = './src/app/thrift-services';
const GEN_MODEL_DIR = 'gen-model'; const GEN_MODEL_DIR = 'gen-model';

8
tools/compile-thrift.ts
View File

@ -1,8 +1,8 @@
import { exec } from 'child_process';
import * as path from 'path';
import * as fs from 'fs';
import * as chalk from 'chalk'; import * as chalk from 'chalk';
import { exec } from 'child_process';
import * as del from 'del'; import * as del from 'del';
import * as fs from 'fs';
import * as path from 'path';
import * as configDefinition from '../thrift-config.json'; import * as configDefinition from '../thrift-config.json';
@ -84,7 +84,7 @@ async function compileService(definitionFilePath: string, outputPath: string) {
try { try {
log(`Compiling service: ${definitionFilePath}`); log(`Compiling service: ${definitionFilePath}`);
await execute( await execute(
`thrift -r -gen js:node,runtime_package=woody_js/dist/thrift -o ${outputPath} ${definitionFilePath};` `thrift -r -gen js:node,runtime_package=@rbkmoney/woody_js/dist/thrift -o ${outputPath} ${definitionFilePath};`
); );
} catch (err) { } catch (err) {
log(`Service: ${definitionFilePath} ${chalk.red('compilation failed')}`); log(`Service: ${definitionFilePath} ${chalk.red('compilation failed')}`);

1
tsconfig.json
View File

@ -16,6 +16,7 @@
"lib": ["esnext", "dom"], "lib": ["esnext", "dom"],
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"skipLibCheck": false,
"paths": { "paths": {
"@cc/components/*": ["src/components/*"], "@cc/components/*": ["src/components/*"],
"@cc/utils/*": ["src/utils/*"], "@cc/utils/*": ["src/utils/*"],