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

110
angular.json
View File

@ -8,6 +8,9 @@
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
@ -17,12 +20,6 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"allowedCommonJsDependencies": [
"moment",
"keycloak-js",
@ -35,20 +32,26 @@
"@rbkmoney/partial-fetcher",
"humanize-duration"
],
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/monaco-editor/min/vs",
"output": "libs/vs"
},
"src/favicon.ico",
"src/assets"
}
],
"styles": [
"src/app/styles/core.scss",
{
"input": "src/app/styles/themes/light.scss",
"bundleName": "themes/light",
"bundleName": "light-theme",
"inject": false
}
],
@ -56,19 +59,6 @@
},
"configurations": {
"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": [
{
"type": "initial",
@ -80,26 +70,37 @@
"maximumWarning": "6kb",
"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": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "control-center:build"
},
"configurations": {
"production": {
"browserTarget": "control-center:build:production"
},
"development": {
"browserTarget": "control-center:build:development"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "control-center:build"
}
},
"defaultConfiguration": "development"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
@ -108,26 +109,29 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"scripts": []
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "control-center:serve"
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/monaco-editor/min/vs",
"output": "libs/vs"
}
],
"styles": [
"src/app/styles/core.scss",
{
"input": "src/app/styles/themes/light.scss",
"bundleName": "light-theme",
"inject": false
}
],
"scripts": ["./node_modules/keycloak-js/dist/keycloak.js"]
},
"configurations": {
"production": {
"devServerTarget": "control-center:serve:production"
"ci": {
"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-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-spec-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
],
@ -20,13 +21,31 @@ module.exports = function (config) {
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true,
},
reporters: ['progress', 'kjhtml'],
reporters: ['progress', 'kjhtml', 'spec'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
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,
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.
},
});
};

27838
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

53
package.json
View File

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

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) {
$warn: map-get($theme, warn);
.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) => {
this.http.get<AppConfig>('assets/appConfig.json').subscribe((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) {
$foreground: map-get($theme, foreground);
.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) {
$foreground: map-get($theme, foreground);
.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) {
$foreground: map-get($theme, foreground);
.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) {
$foreground: map-get($theme, foreground);
.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) {
$foreground: map-get($theme, foreground);
.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) {
$foreground: map-get($theme, foreground);
.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) {
.cc-target-table-from-claim {
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) {
$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/theming';
@import './overrides/body';
@ -10,7 +10,7 @@
}
@mixin cc-typography($config) {
@include mat-core($config);
@include mat.core($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 '../../shared/components/shared-components-themes';
@ -12,7 +12,7 @@
@mixin cc-theme($theme) {
body.#{map-get($theme, name)} {
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
@include cc-party-theme($theme);
@include cc-chargeback-details-theme($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 './theme';
body.light {
background-color: mat-color($mat-gray, 50);
background-color: mat.get-color-from-palette(mat.$gray-palette, 50);
}
$theme: (
primary: mat-palette($mat-indigo),
accent: mat-palette($mat-pink),
warn: mat-palette($mat-red),
primary: mat.define-palette(mat.$indigo-palette),
accent: mat.define-palette(mat.$pink-palette),
warn: mat.define-palette(mat.$red-palette),
is-dark: false,
foreground: $mat-light-theme-foreground,
background: $mat-light-theme-background,
foreground: mat.$light-theme-foreground-palette,
background: mat.$light-theme-background-palette,
/*
* Custom
*
*/ name: 'light',
gray: mat-palette($mat-grey),
success-base: mat-color(mat-palette($cc-success), 400),
pending-base: mat-color(mat-palette($cc-pending), 800),
warn-base: mat-color(mat-palette($cc-warn), 300),
gray: mat.define-palette(mat.$grey-palette),
success-base: mat.get-color-from-palette(mat.define-palette($cc-success), 400),
pending-base: mat.get-color-from-palette(mat.define-palette($cc-pending), 800),
warn-base: mat.get-color-from-palette(mat.define-palette($cc-warn), 300),
white: white,
blue: #0366d6,
orange: #dbab09,
red: #cb2431,
green: #2cbe4e,
neutral: mat-palette($mat-grey),
neutral: mat.define-palette(mat.$grey-palette),
);
@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(
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
$display-3: mat-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
$display-2: mat-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
$display-1: mat-typography-level(34px, 40px, 400),
$headline: mat-typography-level(24px, 32px, 400),
$title: mat-typography-level(20px, 32px, 500),
$subheading-2: mat-typography-level(16px, 28px, 400),
$subheading-1: mat-typography-level(15px, 24px, 400),
$body-2: mat-typography-level(14px, 24px, 500),
$body-1: mat-typography-level(14px, 20px, 400),
$caption: mat-typography-level(12px, 20px, 400),
$button: mat-typography-level(14px, 14px, 500),
$input: mat-typography-level(14px, 1.15, 400)
$display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
$display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
$display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
$display-1: mat.define-typography-level(34px, 40px, 400),
$headline: mat.define-typography-level(24px, 32px, 400),
$title: mat.define-typography-level(20px, 32px, 500),
$subheading-2: mat.define-typography-level(16px, 28px, 400),
$subheading-1: mat.define-typography-level(15px, 24px, 400),
$body-2: mat.define-typography-level(14px, 24px, 500),
$body-1: mat.define-typography-level(14px, 20px, 400),
$caption: mat.define-typography-level(12px, 20px, 400),
$button: mat.define-typography-level(14px, 14px, 500),
$input: mat.define-typography-level(14px, 1.15, 400)
) {
// Declare an initial map with all of the levels.
$config: (
@ -72,35 +72,35 @@
@mixin cc-base-typography($config, $selector: '.cc-typography') {
.cc-headline,
#{$selector} h1 {
@include mat-typography-level-to-styles($config, headline);
@include mat.typography-level($config, headline);
margin: 0;
}
.cc-title,
#{$selector} h2 {
@include mat-typography-level-to-styles($config, title);
@include mat.typography-level($config, title);
margin: 0;
}
.cc-subheading-2,
#{$selector} h3 {
@include mat-typography-level-to-styles($config, subheading-2);
@include mat.typography-level($config, subheading-2);
margin: 0;
}
.cc-subheading-1,
#{$selector} h4 {
@include mat-typography-level-to-styles($config, subheading-1);
@include mat.typography-level($config, subheading-1);
margin: 0;
}
.cc-body-2 {
@include mat-typography-level-to-styles($config, body-2);
@include mat.typography-level($config, body-2);
}
.cc-body-1,
#{$selector} {
@include mat-typography-level-to-styles($config, body-1);
@include mat.typography-level($config, body-1);
p {
margin: 0;
@ -108,29 +108,29 @@
}
.cc-caption {
@include mat-typography-level-to-styles($config, caption);
@include mat.typography-level($config, caption);
}
.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;
}
#{$selector} .cc-display-3 {
@include mat-typography-level-to-styles($config, display-3);
@include mat.typography-level($config, display-3);
margin: 0;
}
.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;
}
.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;
}
}

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

@ -1,3 +1,3 @@
export * from './theme-manager.service';
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 { SettingsModule } from '../settings';
import { ThemeManager } from './theme-manager.service';
@NgModule({
imports: [SettingsModule],
providers: [ThemeManager],
})
export class ThemeManagerModule {}

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

@ -1,57 +1,35 @@
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { SettingsService } from '../settings';
import { ThemeName } from './theme-name';
import { ThemeName } from './types/theme-name';
import { createStyleElement } from './utils/create-style-element';
const THEME_POSTFIX = 'theme';
@Injectable()
export class ThemeManager {
current: ThemeName;
private static readonly key = 'theme';
private element: HTMLScriptElement | HTMLLinkElement;
constructor(private settingsService: SettingsService, @Inject(DOCUMENT) private doc: Document) {
const name = this.settingsService.get(ThemeManager.key);
const correctedName = this.getCorrectName(name);
this.change(correctedName);
constructor(@Inject(DOCUMENT) private doc: Document) {
this.change(ThemeName.Light);
}
change(name: ThemeName) {
change(name: ThemeName): void {
this.removeCurrent();
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) {
this.element = this.createElement(name);
this.element = createStyleElement(`${name}-${THEME_POSTFIX}.css`);
this.doc.head.appendChild(this.element);
this.doc.body.classList.add(name);
this.settingsService.set(ThemeManager.key, name);
this.current = name;
}
private removeCurrent() {
if (this.doc.head.contains(this.element)) {
this.doc.head.removeChild(this.element);
}
if (this.doc.head.contains(this.element)) this.doc.head.removeChild(this.element);
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 connectClient from '@rbkmoney/woody_js';
import { Observable } from 'rxjs';
import { timeout } from 'rxjs/operators';
import connectClient from 'woody_js';
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) {
$foreground: map-get($theme, foreground);
.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',
styles: [
`
:host /deep/ * {
:host ::ng-deep * {
font-family: Menlo, Monaco, 'Courier New', monospace;
font-weight: normal;
font-size: 12px;
@ -13,23 +13,23 @@ import { Component, Input } from '@angular/core';
letter-spacing: 0px;
}
:host /deep/ .string {
:host ::ng-deep .string {
color: #0451a5;
}
:host /deep/ .number {
:host ::ng-deep .number {
color: #09885a;
}
:host /deep/ .boolean {
:host ::ng-deep .boolean {
color: #0451a5;
}
:host /deep/ .null {
:host ::ng-deep .null {
color: #0451a5;
}
:host /deep/ .key {
:host ::ng-deep .key {
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';
@mixin cc-timeline-theme($theme) {
$neutral: map-get($theme, neutral);
$line-color: mat-color($neutral, 200);
$line-color: mat.get-color-from-palette($neutral, 200);
.cc-timeline {
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) {
$blue: map-get($theme, blue);
@ -9,7 +9,7 @@
$neutral: map-get($theme, neutral);
.cc-timeline-item-badge {
background-color: mat-color($neutral, 200);
background-color: mat.get-color-from-palette($neutral, 200);
&.primary {
background-color: $blue;

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

@ -1,5 +1,3 @@
@import '~@angular/material/theming';
$size: 36px;
$line-size: 2px;
@ -15,6 +13,6 @@ $line-size: 2px;
top: 0;
bottom: 0;
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';
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 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 { exec } from 'child_process';
import * as del from 'del';
import * as fs from 'fs';
import * as path from 'path';
import * as configDefinition from '../thrift-config.json';
@ -84,7 +84,7 @@ async function compileService(definitionFilePath: string, outputPath: string) {
try {
log(`Compiling service: ${definitionFilePath}`);
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) {
log(`Service: ${definitionFilePath} ${chalk.red('compilation failed')}`);

1
tsconfig.json
View File

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