Added welcome img component and main section text / links. (#41)

src/app/app.component.ts

@@ -10,6 +10,7 @@ export class AppComponent {
     constructor(private iconRegistryService: IconRegistryService) {
         this.iconRegistryService.register([
             IconName.logo,
+            IconName.logo_white,
             IconName.user,
             IconName.notification,
             IconName.hor_dots,

src/app/config/config-stub.service.ts

@@ -8,6 +8,7 @@ export class ConfigStubService implements Config {
     api: Config['api'];
     daData: Config['daData'];
     konturFocus: Config['konturFocus'];
+    ext: Config['ext'];
 
     constructor() {
         for (const [name, config] of Object.entries(appConfig)) {

src/app/config/config-stub.ts

@@ -12,6 +12,10 @@ export const config: Config = {
     },
     konturFocus: {
         apiV3Url: 'https://focus-api.kontur.ru/api3'
+    },
+    ext: {
+        docsEndpoint: 'https://rbkmoney.github.io/docs',
+        supportEmail: 'support@rbkmoney.com'
     }
 };
 

src/app/config/config.service.ts

@@ -8,6 +8,7 @@ export class ConfigService implements Config {
     api: Config['api'];
     daData: Config['daData'];
     konturFocus: Config['konturFocus'];
+    ext: Config['ext'];
 
     constructor(private http: HttpClient) {}
 

src/app/container/brand/brand-type.ts

@@ -0,0 +1,4 @@
+export enum BrandType {
+    normal = 'normal',
+    invert = 'invert'
+}

src/app/container/brand/brand.component.html

@@ -1 +1 @@
-<mat-icon [routerLink]="navigationLink" svgIcon="logo"></mat-icon>
+<mat-icon [routerLink]="navigationLink" [svgIcon]="iconName"></mat-icon>

src/app/container/brand/brand.component.ts

@@ -1,10 +1,24 @@
 import { Component, Input } from '@angular/core';
 
+import { BrandType } from './brand-type';
+
 @Component({
     selector: 'dsh-brand',
     templateUrl: './brand.component.html',
     styleUrls: ['./brand.component.scss']
 })
 export class BrandComponent {
+    @Input() type: BrandType = BrandType.normal;
     @Input() navigationLink = '/';
+
+    get iconName(): string {
+        switch (this.type) {
+            case BrandType.invert:
+                return 'logo_white';
+            case BrandType.normal:
+                return 'logo';
+            default:
+                throw new Error(`Unknown brand type: ${this.type}`);
+        }
+    }
 }

src/app/container/brand/index.ts

@@ -1,2 +1,3 @@
 export * from './brand.module';
 export * from './brand.component';
+export * from './brand-type';

src/app/container/container.component.html

@@ -1,7 +1,8 @@
+<dsh-welcome-image *ngIf="isMainPage()"></dsh-welcome-image>
 <div class="container">
-    <dsh-toolbar></dsh-toolbar>
-    <div fxLayout="row" fxLayoutGap="20px" class="content">
-        <dsh-nav class="nav"></dsh-nav>
+    <dsh-toolbar [brandType]="brandType()"></dsh-toolbar>
+    <div class="content" fxLayout="row" fxLayoutGap="20px">
+        <dsh-nav *ngIf="!isMainPage()" class="nav"></dsh-nav>
         <div fxFlex>
             <ng-content></ng-content>
         </div>

src/app/container/container.component.ts

@@ -1,8 +1,21 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { BrandType } from './brand/brand-type';
 
 @Component({
     selector: 'dsh-container',
     templateUrl: 'container.component.html',
     styleUrls: ['container.component.scss']
 })
-export class ContainerComponent {}
+export class ContainerComponent {
+    constructor(private router: Router) {}
+
+    isMainPage(): boolean {
+        return this.router.url === '/';
+    }
+
+    brandType(): BrandType {
+        return this.isMainPage() ? BrandType.invert : BrandType.normal;
+    }
+}

src/app/container/container.module.ts

@@ -2,14 +2,24 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatIconModule } from '@angular/material';
+import { CommonModule } from '@angular/common';
 
 import { ContainerComponent } from './container.component';
 import { ToolbarModule } from './toolbar';
 import { StateNavModule } from '../state-nav';
 import { NavComponent } from './nav';
+import { WelcomeImageModule } from './welcome-image';
 
 @NgModule({
-    imports: [ToolbarModule, RouterModule, StateNavModule, FlexLayoutModule, MatIconModule],
+    imports: [
+        CommonModule,
+        ToolbarModule,
+        RouterModule,
+        StateNavModule,
+        FlexLayoutModule,
+        MatIconModule,
+        WelcomeImageModule
+    ],
     declarations: [ContainerComponent, NavComponent],
     exports: [ContainerComponent]
 })

src/app/container/toolbar/toolbar.component.html

@@ -1,4 +1,4 @@
 <div class="toolbar" fxLayout fxLayoutAlign="start center">
-    <dsh-brand></dsh-brand>
+    <dsh-brand [type]="brandType"></dsh-brand>
     <dsh-actionbar fxFlex="grow" fxLayoutAlign="end"></dsh-actionbar>
 </div>

src/app/container/toolbar/toolbar.component.ts

@@ -1,8 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+
+import { BrandType } from '../brand';
 
 @Component({
     selector: 'dsh-toolbar',
     templateUrl: './toolbar.component.html',
     styleUrls: ['./toolbar.component.scss']
 })
-export class ToolbarComponent {}
+export class ToolbarComponent {
+    @Input() brandType: BrandType = BrandType.normal;
+}

src/app/container/welcome-image/_welcome-image-theme.scss

@@ -0,0 +1,9 @@
+@import '~@angular/material/theming';
+
+@mixin dsh-welcome-image-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    .dsh-welcome-image {
+        background-color: mat-color($primary, 400);
+    }
+}

src/app/container/welcome-image/index.ts

@@ -0,0 +1,2 @@
+export * from './welcome-image.module';
+export * from './welcome-image.component';

src/app/container/welcome-image/welcome-image.component.html

@@ -0,0 +1 @@
+<div class="dsh-welcome-image" [style.background-image]="'url(' + endpoint + ')'"></div>

src/app/container/welcome-image/welcome-image.component.scss

@@ -0,0 +1,8 @@
+$dsh-welcome-image-height: 462px;
+
+.dsh-welcome-image {
+    height: $dsh-welcome-image-height;
+    margin-bottom: -$dsh-welcome-image-height;
+    background-position: center;
+    background-size: cover;
+}

src/app/container/welcome-image/welcome-image.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dsh-welcome-image',
+    templateUrl: 'welcome-image.component.html',
+    styleUrls: ['welcome-image.component.scss']
+})
+export class WelcomeImageComponent {
+    endpoint = `assets/background/${this.getFileName()}`;
+
+    private getFileName(filesCount: number = 5, ext = 'png', min = 1): string {
+        const fileName = Math.floor(Math.random() * (filesCount - min) + min);
+        return `${fileName}.${ext}`;
+    }
+}

src/app/container/welcome-image/welcome-image.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { WelcomeImageComponent } from './welcome-image.component';
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [WelcomeImageComponent],
+    declarations: [WelcomeImageComponent]
+})
+export class WelcomeImageModule {}

src/app/icon-registry.service.ts

@@ -4,6 +4,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 export enum IconName {
     logo = 'logo',
+    logo_white = 'logo_white',
     user = 'user',
     hor_dots = 'hor_dots',
     notification = 'notification',

src/app/sections/main/_main-theme.scss

@@ -0,0 +1,9 @@
+@import '~@angular/material/theming';
+
+@mixin dsh-main-section-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    .dsh-main-section-text {
+        color: map-get($foreground, contrast-test);
+    }
+}

src/app/sections/main/main.component.html

@@ -1 +1,9 @@
-main
+<div class="header-container" fxLayout="column" fxLayoutGap="20px">
+    <h1 class="mat-display-1 dsh-main-section-text title">Личный кабинет</h1>
+    <div fxLayout fxLayoutGap="20px">
+        <a class="mat-caption dsh-main-section-text link" [href]="docsEndpoint" target="_blank">Документация</a>
+        <a class="mat-caption dsh-main-section-text link" [href]="supportMailto">Поддержка</a>
+        <!-- Remove operations link after payment widget implementation  -->
+        <a class="mat-caption dsh-main-section-text link" routerLink="/operations">Operations</a>
+    </div>
+</div>

src/app/sections/main/main.component.scss

@@ -0,0 +1,13 @@
+$dsh-header-container-padding: 60px 0 0 80px;
+
+.header-container {
+    padding: $dsh-header-container-padding;
+
+    .title {
+        margin-bottom: 0;
+    }
+
+    .link {
+        text-decoration: none;
+    }
+}

src/app/sections/main/main.component.ts

@@ -1,6 +1,14 @@
 import { Component } from '@angular/core';
 
+import { ConfigService } from '../../config';
+
 @Component({
-    templateUrl: './main.component.html'
+    templateUrl: 'main.component.html',
+    styleUrls: ['main.component.scss']
 })
-export class MainComponent {}
+export class MainComponent {
+    docsEndpoint = this.configService.ext.docsEndpoint;
+    supportMailto = `mailto:${this.configService.ext.supportEmail}`;
+
+    constructor(private configService: ConfigService) {}
+}

src/app/sections/main/main.module.ts

@@ -1,8 +1,11 @@
 import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { RouterModule } from '@angular/router';
 
 import { MainComponent } from './main.component';
 
 @NgModule({
+    imports: [FlexLayoutModule, RouterModule],
     declarations: [MainComponent]
 })
 export class MainModule {}

src/assets/appConfig.json

@@ -8,5 +8,9 @@
     },
     "konturFocus": {
         "apiV3Url": "https://focus-api.kontur.ru/api3"
+    },
+    "ext": {
+        "docsEndpoint": "https://rbkmoney.github.io/docs",
+        "supportEmail": "support@rbkmoney.com"
     }
 }

src/assets/logo_white.svg

@@ -0,0 +1,56 @@
+<svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M36.1749 0.551758H47.7814C53.0435 0.551758 55.9475 2.10541 55.9475 6.42817C55.9475 10.2108 54.9228 11.0213 53.0095 11.6298C55.3676 12.4072 56.8701 13.4191 56.8701 17.1007C56.8701 22.1335 54.3083 23.9912 48.944 23.9912H30.6979V5.14707C30.6979 2.02817 32.9444 0.551758 36.1749 0.551758ZM36.3702 12.271C36.3702 12.271 37.2147 10.0415 39.2709 10.0415H47.9528C49.4904 10.0415 50.2757 8.86021 50.2757 7.30601C50.2757 5.88807 49.4904 4.97607 47.9182 4.97607H39.1157C37.4569 4.97607 36.3702 6.23125 36.3702 7.4009V12.271ZM36.3702 22.0751C36.3702 22.0751 37.1662 19.5664 39.5461 19.5664H47.7479C50.7887 19.5664 51.1989 18.8911 51.1989 16.8304C51.1989 15.0406 50.8914 14.1959 47.9528 14.1959H39.3535C37.4508 14.1959 36.3702 15.5934 36.3702 17.2486V22.0751Z"
+        fill="white"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M66.4477 12.4661L69.796 9.76207C69.796 9.76207 77.4459 3.29862 78.3322 2.54993C79.2191 1.80124 80.7668 1.01504 83.2383 1.01504H86.8003L74.682 11.9916L87.3467 24.4545H84.5616C80.5051 24.4545 78.3177 22.1234 78.3177 22.1234C78.3177 22.1234 72.8675 17.1447 71.7205 16.0887C69.6721 14.2001 66.4477 14.4236 66.4477 14.4236V20.631C66.4477 22.4247 65.5078 24.4545 62.5469 24.4545H60.7765V4.86828C60.7765 0.634899 66.4477 1.01504 66.4477 1.01504V12.4661Z"
+        fill="white"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M21.4436 16.652C24.4955 15.8034 26.4362 12.8357 26.4362 9.25612C26.4362 2.60177 22.9171 1.01501 17.9971 1.01501H4.10053C0.583692 1.01501 -0.00012207 4.28784 -0.00012207 5.66605V24.4545H1.85904C4.84509 24.4545 5.66276 22.7171 5.66276 20.4793V17.4961H14.5305C16.2512 17.4961 17.1766 18.2851 17.7939 19.2385C18.4391 20.2343 19.2021 21.4095 19.6202 22.0545C20.4378 23.3179 21.812 24.4545 24.7154 24.4545H26.8458C26.8458 24.4545 22.7469 18.4859 21.4436 16.652ZM17.5188 12.8358H8.25147C7.24235 12.8358 6.19528 13.2733 5.66226 14.8446V8.24706C5.66226 6.95217 6.7311 5.67493 8.46245 5.67493H17.5188C20.0466 5.67493 20.7644 6.79051 20.7644 9.25617C20.7644 11.7891 19.945 12.8358 17.5188 12.8358Z"
+        fill="white"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.5317 32H16.0792H15.9877C15.789 32 15.6009 32.0061 15.42 32.016C15.4022 32.0171 15.3849 32.0193 15.3664 32.0204C12.9542 32.1721 12.1493 33.2099 11.719 34.1054C11.2876 33.2099 10.4833 32.1721 8.07045 32.0204C8.05203 32.0193 8.03472 32.0171 8.01686 32.016C7.83603 32.0061 7.64793 32 7.44923 32H6.52049H4.90579C1.72663 32 0.000305176 33.7959 0.000305176 35.8604V43.0897C0.000305176 43.0897 1.63565 43.2303 1.63565 41.7694V36.1749C1.63565 34.379 2.95286 33.3462 5.31435 33.3462H6.1577H6.99435C7.9923 33.3462 8.82114 33.5057 9.45742 33.8323C10.1406 34.2008 10.6245 34.7801 10.812 35.5763C10.8182 35.6039 10.8265 35.6287 10.8321 35.6568C10.8355 35.6739 10.8371 35.6932 10.8405 35.7114C10.879 35.925 10.9008 36.1534 10.9008 36.3994V43.0897C10.9008 43.0897 12.5361 43.2519 12.5361 41.8108V36.3994C12.5361 36.1534 12.5579 35.925 12.5964 35.7114C12.5997 35.6932 12.6009 35.6739 12.6048 35.6568C12.6104 35.6287 12.6187 35.6039 12.6254 35.5763C12.813 34.7801 13.2963 34.2008 13.9795 33.8323C14.6157 33.5057 15.4451 33.3462 16.4425 33.3462H16.7953H18.1225C20.484 33.3462 21.8012 34.379 21.8012 36.1749V43.0897C21.8012 43.0897 23.4366 43.2519 23.4366 41.8108V35.8604C23.4366 33.7959 21.7103 32 18.5317 32Z"
+        fill="white"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M30.579 32H35.0765C38.7998 32 39.9814 34.043 39.9814 36.3548V38.7796C39.9814 41.1139 38.6865 43.1343 35.053 43.1343H30.579C27.2636 43.1343 25.6746 41.6083 25.6746 38.7796V36.3548C25.6746 33.9079 27.0365 32 30.579 32ZM30.6929 41.7871H34.9392C36.9837 41.7871 38.3461 40.9341 38.3461 38.7796V36.3548C38.3461 34.4243 37.1422 33.3468 34.9621 33.3468H30.6929C28.4676 33.3468 27.3094 34.1998 27.3094 36.3548V38.7796C27.3094 40.8 28.4676 41.7871 30.6929 41.7871Z"
+        fill="white"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M51.0806 32H50.3394H48.0583H46.7662C43.087 32 41.8607 34.1545 41.8607 36.624V43.0897C41.8607 43.0897 43.4955 43.1923 43.4955 41.7385V36.3995C43.4955 34.469 44.8133 33.3462 46.7662 33.3462H48.0103H50.6883H51.0806C53.0336 33.3462 54.3508 34.469 54.3508 36.3995V43.0897C54.3508 43.0897 55.9861 43.232 55.9861 41.7986V36.624C55.9861 34.1545 54.7599 32 51.0806 32Z"
+        fill="white"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M60.2398 37.7021V38.7796C60.2398 41.0687 61.5793 41.787 63.3514 41.787H68.6643C70 41.787 70.7534 41.2651 71.1051 40.5092C71.6465 39.344 72.9118 39.5879 72.9118 39.5879C72.9118 41.2039 72.026 43.1343 68.9378 43.1343H63.4189C60.1488 43.1343 58.605 41.7429 58.605 39.0036V36.0855C58.605 34.0657 60.285 32 63.3737 32H68.0973C71.3222 32 72.9118 33.8411 72.9118 35.9057V37.7021H60.2398ZM68.2564 33.3468H63.1243C61.4906 33.3468 60.3375 34.4414 60.2454 36.1347C60.242 36.2069 60.2398 36.8503 60.2398 37.2723C60.2398 37.2723 60.4982 36.3548 61.5877 36.3548H71.2764C71.2764 34.4916 70.1412 33.3468 68.2564 33.3468Z"
+        fill="white"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M76.5067 33.054C76.8053 33.603 79.3013 38.1183 80.4996 40.3301C81.3145 41.8347 81.4769 41.5307 81.4769 41.5307C81.4769 41.5307 84.53 34.5828 85.0998 33.187C85.6702 31.7911 87.3134 32.0129 87.3134 32.0129L81.6812 44.5613C80.6816 46.8063 79.8193 47.8612 77.0487 47.8612H76.5034C76.5034 47.8612 76.3147 46.5144 77.4572 46.5144C78.857 46.5144 79.6144 45.9081 80.796 43.1026C80.796 43.1026 80.393 43.1643 79.6474 41.7707C79.2159 40.9635 74.2328 32.0129 74.2328 32.0129C74.2328 32.0129 75.8593 31.8623 76.5067 33.054Z"
+        fill="white"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M95.5069 21.5504C95.5069 23.0919 94.2439 24.341 92.6833 24.341C91.1233 24.341 89.8608 23.0919 89.8608 21.5504C89.8608 20.0078 91.1233 18.7587 92.6833 18.7587C94.2439 18.7587 95.5069 20.0078 95.5069 21.5504Z"
+        fill="#00CF8B"
+    />
+</svg>

src/themes/light.scss

@@ -53,7 +53,8 @@ $foreground: (
  */ axis-tick-color: rgba(black, 0.1),
     x-axis-text-color: rgba(black, 0.3),
     y-axis-text-color: rgba(black, 0.5),
-    legend-tooltip-date-color: rgba(black, 0.3)
+    legend-tooltip-date-color: rgba(black, 0.3),
+    contrast-test: white
 );
 
 $theme: (

src/themes/theme.scss

@@ -13,6 +13,8 @@
 @import '../app/layout/tabs/tabs-theme';
 @import '../app/button-toggle/button-toggle-theme';
 @import '../app/status/status-theme';
+@import '../app/sections/main/main-theme';
+@import '../app/container/welcome-image/welcome-image-theme';
 
 @mixin dsh-theme($theme) {
     body.#{map-get($theme, name)} {
@@ -30,5 +32,7 @@
         @include dsh-button-toggle-theme($theme);
         @include dsh-float-panel-theme($theme);
         @include dsh-status-theme($theme);
+        @include dsh-main-section-theme($theme);
+        @include dsh-welcome-image-theme($theme);
     }
 }