feat(cards): Added cards (#48)

positive-js · Nov 1, 2018 · dffeeec · dffeeec
1 parent 29d35de
commit dffeeec
Show file tree

Hide file tree

Showing 18 changed files with 615 additions and 0 deletions.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -10,6 +10,7 @@ module.exports = {
                 'build',
                 'button',
                 'cdk',
+                'card',
                 'checkbox',
                 'chore',
                 'common',

diff --git a/package.json b/package.json
@@ -143,6 +143,7 @@
         "server-dev:alert": "npm run server-dev -- --env.component alert",
         "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,31 @@
+@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;
+}
+
+.simple-content {
+    padding: 8px;
+}
diff --git a/src/lib-dev/card/template.html b/src/lib-dev/card/template.html
@@ -0,0 +1,80 @@
+<div class="container">
+    <h3>Обычные</h3>
+    <div class="line">
+        <mc-card [status]="state.Info" [selected]="s1" (selectedChange)="s1 = !s1">
+            <div class="simple-content">
+                Content
+            </div>
+        </mc-card>
+
+        <mc-card [status]="state.Warning" [selected]="s2" (selectedChange)="s2 = !s2">
+            <div class="simple-content">
+                Content 2
+            </div>
+        </mc-card>
+
+        <mc-card [status]="state.Success" [selected]="s3" (selectedChange)="s3 = !s3">
+            <div class="simple-content">
+                Content 3
+            </div>
+        </mc-card>
+
+        <mc-card [status]="state.Error" [selected]="s4" (selectedChange)="s4 = !s4">
+            <div class="simple-content">
+                Content 4
+            </div>
+        </mc-card>
+    </div>
+    <h3>Белые</h3>
+    <div class="line">
+        <mc-card [status]="state.Info" mode="white" [selected]="s1" (selectedChange)="s1 = !s1">
+            <div class="simple-content">
+                Content
+            </div>
+        </mc-card>
+
+        <mc-card [status]="state.Warning" mode="white" [selected]="s2" (selectedChange)="s2 = !s2">
+            <div class="simple-content">
+                Content 2
+            </div>
+        </mc-card>
+
+        <mc-card [status]="state.Success" mode="white" [selected]="s3" (selectedChange)="s3 = !s3">
+            <div class="simple-content">
+                Content 3
+            </div>
+        </mc-card>
+
+        <mc-card [status]="state.Error" mode="white" [selected]="s4" (selectedChange)="s4 = !s4">
+            <div class="simple-content">
+                Content 4
+            </div>
+        </mc-card>
+    </div>
+    <h3>Неинтерактивные</h3>
+    <div class="line">
+        <mc-card [status]="state.Info" [selected]="s1" (selectedChange)="s1 = !s1" [readonly]="true">
+            <div class="simple-content">
+                Content
+            </div>
+        </mc-card>
+
+        <mc-card [status]="state.Warning" [selected]="s2" (selectedChange)="s2 = !s2" [readonly]="true">
+            <div class="simple-content">
+                Content 2
+            </div>
+        </mc-card>
+
+        <mc-card [status]="state.Success" [selected]="s3" (selectedChange)="s3 = !s3" [readonly]="true">
+            <div class="simple-content">
+                Content 3
+            </div>
+        </mc-card>
+
+        <mc-card [status]="state.Error" [selected]="s4" (selectedChange)="s4 = !s4" [readonly]="true">
+            <div class="simple-content">
+                Content 4
+            </div>
+        </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,106 @@
+@import '../core/theming/theming';
+@import '../core/theming/palette';
+
+@mixin left-marker($color) {
+    $gray100: mc-color($mc-grey, 100);
+    box-shadow: inset 4px 0 0 0 mc-color($color, 400), inset -1px 0 0 0 $gray100, inset 0 1px 0 0 $gray100, inset 0 -1px 0 0 $gray100;
+}
+
+@mixin left-marker-dark($color) {
+    $gray600: mc-color($mc-grey, 600);
+    box-shadow: inset 4px 0 0 0 mc-color($color, 600), inset -1px 0 0 0 $gray600, inset 0 1px 0 0 $gray600, inset 0 -1px 0 0 $gray600;
+}
+
+@mixin set-state($background, $marker, $border-color) {
+    background-color: $background;
+    box-shadow: inset 4px 0 0 0 $marker, inset -1px 0 0 0 $border-color, inset 0 1px 0 0 $border-color, inset 0 -1px 0 0 $border-color;
+}
+
+@mixin normal-state($color, $border-color, $isDark) {
+    @if $isDark == true {
+        @include set-state(mc-color($color, 700), mc-color($color, 600), mc-color($border-color, 600));
+    } @else {
+        @include set-state(mc-color($color, 60), mc-color($color, 400), mc-color($border-color, 100));
+    }
+}
+
+@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);
+    $default: map-get($theme, default);
+    $primary: map-get($theme, primary);
+    $second: map-get($theme, second);
+    $info: map-get($theme, info);
+    $error: map-get($theme, error);
+    $warning: map-get($theme, warning);
+    $success: map-get($theme, success);
+    $theme-background: map-get($theme, background);
+    $theme-foreground: map-get($theme, foreground);
+    $white-background-color: if($isDark, mc-color($second, 700), map-get($theme-background, background));
+    $foreground-color: map-get($theme-foreground, base);
+
+    $hover-color: map-get($theme-background, hover);
+    $focus-color: mc-color($primary, lighter);
+
+    .mc-card {
+        background-color: mc-color($default, 60);
+        color: $foreground-color;
+
+        &_info {
+            @include normal-state($info, $second, $isDark);
+
+            &.mc-card_selected {
+                @include selected-state($info, $primary, $isDark);
+            }
+        }
+
+        &_warning {
+            @include normal-state($warning, $second, $isDark);
+
+            &.mc-card_selected {
+                @include selected-state($warning, $primary, $isDark);
+            }
+        }
+
+        &_success {
+            @include normal-state($success, $second, $isDark);
+
+            &.mc-card_selected {
+                @include selected-state($success, $primary, $isDark);
+            }
+        }
+
+        &_error {
+            @include normal-state($error, $second, $isDark);
+
+            &.mc-card_selected {
+                @include selected-state($error, $primary, $isDark);
+            }
+        }
+
+        &_white {
+            background-color: $white-background-color;
+        }
+
+        .mc-card__hover-overlay {
+            background: $hover-color;
+        }
+
+        &:focus,
+        &.cdk-focused {
+            .mc-card__focus-overlay {
+                border: solid 1px $focus-color;
+                box-shadow: 0 0 0 1px $focus-color;
+            }
+        }
+    }
+}
diff --git a/src/lib/card/card.component.html b/src/lib/card/card.component.html
@@ -0,0 +1,7 @@
+<div class="mc-card__wrapper" [ngClass]="statusClass"
+     [class.mc-card_white]="isWhiteMode" [class.mc-card_selected]="selected"
+     (click)="clicked($event)">
+    <ng-content></ng-content>
+</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,45 @@
+@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: block;
+        padding-left: 4px;
+    }
+
+    &: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;
+    }
+}