positive-js · pimenovoleg · Nov 1, 2018 · Sep 26, 2018 · Oct 5, 2018 · Oct 5, 2018
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -9,6 +9,7 @@ module.exports = {
                 'build',
                 'button',
                 'cdk',
+                'card',
                 'checkbox',
                 'chore',
                 'common',

diff --git a/package.json b/package.json
@@ -139,6 +139,7 @@
         "server-dev": "webpack-dev-server --config tools/webpack/webpack.config.js",
         "server-dev:badge": "npm run server-dev -- --env.component badge",
         "server-dev:button": "npm run server-dev -- --env.component button",
+        "server-dev:card": "npm run server-dev -- --env.component card",
         "server-dev:checkbox": "npm run server-dev -- --env.component checkbox",
         "server-dev:icon": "npm run server-dev -- --env.component icon",
         "server-dev:input": "npm run server-dev -- --env.component input",

diff --git a/src/lib-dev/card/module.ts b/src/lib-dev/card/module.ts
@@ -0,0 +1,42 @@
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { McCardModule, Status } from '../../lib/card';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class CardsDemoComponent {
+    state = Status;
+
+    s1 = false;
+    s2 = false;
+    s3 = false;
+    s4 = false;
+}
+
+
+@NgModule({
+    declarations: [
+        CardsDemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        McCardModule
+    ],
+    bootstrap: [
+        CardsDemoComponent
+    ]
+})
+export class CardsDemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(CardsDemoModule)
+    // tslint:disable-next-line
+    .catch((error) => console.error(error));
+
diff --git a/src/lib-dev/card/styles.scss b/src/lib-dev/card/styles.scss
@@ -0,0 +1,26 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+
+// Светлая
+@import '../../lib/core/theming/prebuilt/default-theme';
+
+//// Темная
+//@import '../../lib/core/theming/prebuilt/dark-theme';
+//
+//html {
+//    background: mc-color($mc-grey, 800);
+//    color: white;
+//}
+
+mc-card {
+    margin-right: 10px;
+}
+
+.line {
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: row;
+}
+
+.mc-upload-to-cloud_24 {
+    font-size: 32px;
+}
diff --git a/src/lib-dev/card/template.html b/src/lib-dev/card/template.html
@@ -0,0 +1,78 @@
+<div class="container">
+    <h3>Обычные</h3>
+    <div class="line">
+        <mc-card [status]="state.Info" [selected]="s1" (selectedChange)="s1 = !s1">
+            Content
+        </mc-card>
+
+        <mc-card [status]="state.Warning" [selected]="s2" (selectedChange)="s2 = !s2">
+            <!--<div style="width: 100px; height: 100px; background: cyan"></div>-->
+            Content 2
+        </mc-card>
+
+        <mc-card [status]="state.Success" [selected]="s3" (selectedChange)="s3 = !s3">
+            Content 3
+        </mc-card>
+
+        <mc-card [status]="state.Error" [selected]="s4" (selectedChange)="s4 = !s4">
+            Content 4
+        </mc-card>
+    </div>
+    <h3>Белые</h3>
+    <div class="line">
+        <mc-card [status]="state.Info" mode="white" [selected]="s1" (selectedChange)="s1 = !s1">
+            Content
+        </mc-card>
+
+        <mc-card [status]="state.Warning" mode="white" [selected]="s2" (selectedChange)="s2 = !s2">
+            <!--<div style="width: 100px; height: 100px; background: cyan"></div>-->
+            Content 2
+        </mc-card>
+
+        <mc-card [status]="state.Success" mode="white" [selected]="s3" (selectedChange)="s3 = !s3">
+            Content 3
+        </mc-card>
+
+        <mc-card [status]="state.Error" mode="white" [selected]="s4" (selectedChange)="s4 = !s4">
+            Content 4
+        </mc-card>
+    </div>
+    <h3>Неинетерактивные</h3>
+    <div class="line">
+        <mc-card [status]="state.Info" [selected]="s1" (selectedChange)="s1 = !s1" [readonly]="true">
+            Content
+        </mc-card>
+
+        <mc-card [status]="state.Warning" [selected]="s2" (selectedChange)="s2 = !s2" [readonly]="true">
+            <!--<div style="width: 100px; height: 100px; background: cyan"></div>-->
+            Content 2
+        </mc-card>
+
+        <mc-card [status]="state.Success" [selected]="s3" (selectedChange)="s3 = !s3" [readonly]="true">
+            Content 3
+        </mc-card>
+
+        <mc-card [status]="state.Error" [selected]="s4" (selectedChange)="s4 = !s4" [readonly]="true">
+            Content 4
+        </mc-card>
+    </div>
+    <h3>Дополнительный контент</h3>
+    <div class="line">
+        <mc-card [status]="state.Info" [selected]="s1" (selectedChange)="s1 = !s1" >
+            <i class="mc mc-upload-to-cloud_24" content-left></i>
+            Content
+            <i class="mc mc-close-L_16" content-right></i>
+        </mc-card>
+        <mc-card [status]="state.Info" [selected]="s2" (selectedChange)="s1 = !s1" >
+            Content
+            <i class="mc mc-close-L_16" content-right></i>
+        </mc-card>
+        <mc-card [status]="state.Info" [selected]="s3" (selectedChange)="s1 = !s1" >
+            <i class="mc mc-upload-to-cloud_24" content-left></i>
+            Content
+        </mc-card>
+        <mc-card [status]="state.Info" [selected]="s4" (selectedChange)="s1 = !s1" >
+            Content
+        </mc-card>
+    </div>
+</div>
diff --git a/src/lib/card/README.md b/src/lib/card/README.md
diff --git a/src/lib/card/_card-theme.scss b/src/lib/card/_card-theme.scss
@@ -0,0 +1,99 @@
+@import '../core/theming/theming';
+@import '../core/theming/palette';
+
+@mixin left-marker($color) {
+    $gray100: mc-color($mc-grey, 100);
+    box-shadow: inset -1px 0 0 0 $gray100, inset 0 1px 0 0 $gray100, inset 0 -1px 0 0 $gray100, inset 4px 0 0 0 mc-color($color, 400);
+}
+
+@mixin left-marker-dark($color) {
+    $gray600: mc-color($mc-grey, 600);
+    box-shadow: inset -1px 0 0 0 $gray600, inset 0 1px 0 0 $gray600, inset 0 -1px 0 0 $gray600, inset 4px 0 0 0 mc-color($color, 600);
+}
+
+@mixin normal-state($color, $isDark) {
+    @if $isDark == true {
+        background-color: mc-color($color, 700);
+        @include left-marker-dark($color);
+    } @else {
+        background-color: mc-color($color, 60);
+        @include left-marker($color);
+    }
+}
+
+@mixin selected-state($border-color, $back-color, $isDark) {
+    @if $isDark == true {
+        background-color: mc-color($back-color, 700);
+        box-shadow: inset 4px 0 0 0 mc-color($border-color, 600);
+    } @else {
+        background-color: mc-color($back-color, 100);
+        box-shadow: inset 4px 0 0 0 mc-color($border-color, 400);
+    }
+}
+
+@mixin mc-card-theme($theme) {
+    $isDark: map-get($theme, is-dark);
+    $info: map-get($theme, primary);
+    $error: map-get($theme, warn);
+    $warning: $mc-yellow;
+    $success: $mc-green;
+    $background-info: map-get($theme, background);
+    $foreground-info: map-get($theme, foreground);
+    $background-color: map-get($background-info, background);
+    $foreground-color: map-get($foreground-info, base);
+
+    $hover-color: map-get($background-info, hover);
+    $focus-color: mc-color($mc-blue, 400);
+
+    .mc-card {
+        background-color: mc-color($mc-grey, 60);
+        color: $foreground-color;
+
+        &_info {
+            @include normal-state($info, $isDark);
+
+            &.mc-card_selected {
+                @include selected-state($info, $info, $isDark);
+            }
+        }
+
+        &_warning {
+            @include normal-state($warning, $isDark);
+
+            &.mc-card_selected {
+                @include selected-state($warning, $info, $isDark);
+            }
+        }
+
+        &_success {
+            @include normal-state($success, $isDark);
+
+            &.mc-card_selected {
+                @include selected-state($success, $info, $isDark);
+            }
+        }
+
+        &_error {
+            @include normal-state($error, $isDark);
+
+            &.mc-card_selected {
+                @include selected-state($error, $info, $isDark);
+            }
+        }
+
+        &_white {
+            background-color: $background-color;
+        }
+
+        .mc-card__hover-overlay {
+            background: $hover-color;
+        }
+
+        &:focus,
+        &.cdk-focused {
+            .mc-card__focus-overlay {
+                border: solid 1px $focus-color;
+            }
+        }
+    }
+}
diff --git a/src/lib/card/card.component.html b/src/lib/card/card.component.html
@@ -0,0 +1,15 @@
+<div class="mc-card__wrapper" [ngClass]="statusClass"
+     [class.mc-card_white]="isWhiteMode" [class.mc-card_selected]="selected"
+     (click)="clicked($event)">
+    <div class="mc-card__content-left" [class.mc-card_has-content]="contentLeft">
+        <ng-content select="[content-left]"></ng-content>
+    </div>
+    <div class="mc-card__main-content" >
+        <ng-content></ng-content>
+    </div>
+    <div class="mc-card__content-right"[class.mc-card_has-content]="contentRight">
+        <ng-content select="[content-right]"></ng-content>
+    </div>
+</div>
+<div class="mc-card__hover-overlay"></div>
+<div class="mc-card__focus-overlay"></div>
diff --git a/src/lib/card/card.component.scss b/src/lib/card/card.component.scss
@@ -0,0 +1,78 @@
+@import 'card-theme';
+@import '../core/styles/common/layout';
+
+.mc-card {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+
+    &__wrapper {
+        flex: auto;
+        display: flex;
+        flex-direction: row;
+
+        %content-base {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+
+        .mc-card__content-left {
+            @extend %content-base;
+
+            flex: none;
+            margin: 16px 12px;
+
+            &.mc-card_has-content {
+                margin-left: 20px;
+            }
+        }
+
+        .mc-card__main-content {
+            @extend %content-base;
+            flex: auto;
+            margin: 12px 0;
+        }
+
+        .mc-card__content-right {
+            @extend %content-base;
+            flex: none;
+            margin: 8px 16px 8px 8px;
+
+            &.mc-card_has-content {
+                margin-right: 8px;
+            }
+        }
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    &.cdk-focused {
+        z-index: 1;
+    }
+
+    &__focus-overlay {
+        @include mc-fill;
+        pointer-events:none;
+    }
+
+    &__hover-overlay {
+        @include mc-fill;
+        display: none !important;
+        pointer-events:none;
+    }
+
+    &:not(.mc-card_readonly):hover {
+        .mc-card__hover-overlay {
+            display: block !important;
+        }
+    }
+
+    &.mc-card_readonly {
+        cursor: auto;
+    }
+}