From dfe86f9b9f2718ad982051a3c020427dc74a62e3 Mon Sep 17 00:00:00 2001 From: Lakhan Mandloi Date: Mon, 19 Aug 2019 12:22:48 +0530 Subject: [PATCH] Issue #000 task: Card components --- .../card/demos/basic/card-basic.html | 19 +++++-- src/card/card.module.ts | 2 +- src/card/card.scss | 8 ++- src/card/card.ts | 54 +++++++++++++++---- 4 files changed, 64 insertions(+), 19 deletions(-) diff --git a/demo/src/app/components/card/demos/basic/card-basic.html b/demo/src/app/components/card/demos/basic/card-basic.html index 4c6fb11..93687ac 100644 --- a/demo/src/app/components/card/demos/basic/card-basic.html +++ b/demo/src/app/components/card/demos/basic/card-basic.html @@ -1,5 +1,14 @@ -

- - Warning! Better check yourself, you're not looking too good. - -

+ + Card title + Card topic 1 + Card topic 2 + Card org + + + + Card title + Card label + Card subject + Card medium + Card class + \ No newline at end of file diff --git a/src/card/card.module.ts b/src/card/card.module.ts index 88a9adf..82c6b35 100644 --- a/src/card/card.module.ts +++ b/src/card/card.module.ts @@ -7,5 +7,5 @@ export {SbCard} from './card'; export {SbCardConfig} from './card-config'; @NgModule({declarations: [SbCard], exports: [SbCard], imports: [CommonModule], entryComponents: [SbCard]}) -export class SbCardModule { + export class SbCardModule { } diff --git a/src/card/card.scss b/src/card/card.scss index 95de00b..b43ad69 100644 --- a/src/card/card.scss +++ b/src/card/card.scss @@ -1,3 +1,7 @@ -ngb-alert { - display: block; +sb-card { + display: inline-block; } + +:root{--font-stack-en: 'Noto Sans','Noto Sans Devanagari','Noto Sans Tamil','Noto Sans Bengali','Noto Sans Malayalam','Noto Sans Gurmukhi','Noto Sans Gujarati','Noto Sans Telugu','Noto Sans Kannada','Noto Sans Oriya','Noto Nastaliq Urdu',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;--font-stack-hi: 'Noto Sans Devanagari','Noto Sans','Noto Sans Tamil','Noto Sans Bengali','Noto Sans Malayalam','Noto Sans Gurmukhi','Noto Sans Gujarati','Noto Sans Telugu','Noto Sans Kannada','Noto Sans Oriya','Noto Nastaliq Urdu',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;--font-stack-ur: 'Noto Sans','Noto Nastaliq Urdu','Noto Sans Devanagari','Noto Sans Tamil','Noto Sans Bengali','Noto Sans Malayalam','Noto Sans Gurmukhi','Noto Sans Gujarati','Noto Sans Telugu','Noto Sans Kannada','Noto Sans Oriya',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;--blue: #024f9d;--black: #000000;--green: #008840;--orange: #e55a28;--red: #ff4558;--white: #ffffff;--indigo: #6610f2;--purple: #6f42c1;--pink: #e83e8c;--yellow: #ffc107;--teal: #20c997;--cyan: #17a2b8;--gray-hs: 0,0%;--gray: hsl(var(--gray-hs),20%);--gray-0: hsl(var(--gray-hs),95%);--gray-100: hsl(var(--gray-hs),80%);--gray-200: hsl(var(--gray-hs),60%);--gray-300: hsl(var(--gray-hs),59%);--gray-400: hsl(var(--gray-hs),40%);--gray-800: var(--gray);--primary-color: var(--blue);--secondary-color: var(--green);--tertiary-color: var(--orange);--primary-0: #F3F7FA;--primary-100: #EDF4F9;--primary-200: #80A7CE;--primary-250:#D3E7F4;--primary-300: #7AB4EE;--primary-400: var(--primary-color);--primary-600: #005391;--primary-800: #002E50;--secondary-0: #E1FFDF;--secondary-100: #00C786;--secondary-200: #07bc81;--secondary-400: var(--secondary-color);--tertiary-0: #FEEDD7;--tertiary-100: #FFA11D;--tertiary-400: var(--tertiary-color);--red-0: #FBCCD1;--red-100: #FF6979;--red-400: var(--red)} + +.sb-card{width:292px;background-color:var(--white);border:0.5px solid #dedede;border-radius:4px;cursor:pointer;overflow:hidden;margin-top:3px;transition:box-shadow .3s ease-out, transform .3s ease-out, opacity .2s ease-out;transition-delay:.1s}.sb-card:hover{transform:translate(0, -3px);box-shadow:0 2px 7px 0 rgba(0,0,0,0.16)}.sb-card .sb-card-body{height:204px;padding:16px 16px 8px 16px;overflow:hidden}.sb-card .sb-card-metas{display:flex;align-items:flex-end}.sb-card .sb-card-image{width:70px;height:92px;border:0.5px solid var(--gray-100);background-color:var(--gray-0);border-radius:2px;box-sizing:border-box;overflow:hidden}.sb-card .sb-card-image img{width:70px;height:92px;object-fit:cover}.sb-card .sb-card-meta{height:92px;width:172px;display:flex;flex-wrap:wrap;flex-direction:column;overflow:hidden}.sb-card .sb-card-label{color:var(--primary-color);font-size:10.9994px;border:1px solid var(--primary-color);border-radius:2px;padding:4px 8px;height:24px}.sb-card .sb-card-badge{height:30px;width:30px;object-fit:contain}.sb-card .sb-card-meta-item{font-size:11.9994px;color:var(--gray-400);width:172px;line-height:17px}.sb-card .sb-card-title{color:var(--primary-color);font-size:14px;line-height:17.5px;font-weight:700;height:35px;margin:16px 0 8px 0;overflow:hidden}.sb-card .sb-card-org{font-size:14px;color:var(--gray-400)}.sb-card .sb-card-progressbar{height:4px}.sb-card .sb-card-progressbar .ui.progress .bar{border-radius:0 4px 4px 4px}.sb-card .sb-card-hover{position:absolute;top:0;max-width:292px;width:100%;height:100%;background-color:rgba(2,79,157,0.85);display:none}.sb-card .sb-card-hover .sb-card-hover-content{display:flex;align-items:center;height:100%;justify-content:center}.sb-card .sb-card-hover.sb-card-hover-gray{background:rgba(153,153,153,0.95)}.sb-card .sb-card-hover.sb-card-hover-gray .sb-exclamation-icon,.sb-card .sb-card-hover.sb-card-hover-gray p{color:white}.sb-card:hover{box-shadow:0 2px 7px 0 rgba(0,0,0,0.16)}.sb-card:hover .sb-card-hover{display:block}app-card[lang="ta"] .sb-card .sb-card-label{font-size:9px}app-card[lang="ta"] .sb-card .sb-card-meta-item{font-size:10px}app-card[lang="ta"] .sb-card .sb-card-title{font-size:11.9994px}app-card[lang="ta"] .sb-card .sb-card-org{font-size:11.9994px}app-card[lang="ur"] .sb-card .sb-card-label{font-size:9px}app-card[lang="ur"] .sb-card .sb-card-meta-item{font-size:10px}app-card[lang="ur"] .sb-card .sb-card-title{font-size:11.9994px}app-card[lang="ur"] .sb-card .sb-card-org{font-size:11.9994px}.sb-wspace-card{height:128px;max-width:292px;border:.5px solid var(--gray-0);border-left:4px solid var(--white);border-radius:4px;background:var(--white);padding:16px 24px;margin:0px 24px 24px 0}.sb-wspace-card .sb-wspace-title{margin-bottom:8px;font-size:16.002px;font-weight:700}.sb-wspace-card .sb-wspace-description{font-size:11.9994px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.sb-wspace-card:hover,.sb-wspace-card.active{border-left:4px solid var(--secondary-200);cursor:pointer;box-shadow:2px 5px 7px 0 rgba(0,0,0,0.2)}.sb-wspace-card:hover .sb-wspace-title,.sb-wspace-card.active .sb-wspace-title{color:var(--blue)}.sb-card-qr .sb-btn{border-radius:0;width:100%}.sb-card-qr:hover .sb-btn{background:var(--secondary-400)}.ui.card.sb-batch-card{border:1px solid var(--primary-200);box-shadow:none}.ui.card.sb-batch-card .item{padding:10px 0}.ui.card.sb-batch-card .item .content>.header{padding-bottom:5px}.ui.card.sb-batch-card>.sb-batch-card-content{padding:0 1rem;border-top:1px solid rgba(34,36,38,0.1)}.sb-batch-card .sb-batch-card-title{font-weight:600;font-size:1.18em}.sb-batch-card .item i.icon{font-size:16.002px}.sb-batch-card .sb-no-batch-found{background-color:var(--tertiary-0);border:1px solid var(--tertiary-100);padding:8px 16px;border-radius:4px;font-size:11.9994px} diff --git a/src/card/card.ts b/src/card/card.ts index cd14131..a31030e 100644 --- a/src/card/card.ts +++ b/src/card/card.ts @@ -1,5 +1,6 @@ import { Component, + Directive, Input, Output, EventEmitter, @@ -9,16 +10,46 @@ import { OnChanges, OnInit, SimpleChanges, - ViewEncapsulation + ViewEncapsulation, + TemplateRef } from '@angular/core'; import {SbCardConfig} from './card-config'; -/** - * Alert is a component to provide contextual feedback messages for user. - * - * It supports several alert types and can be dismissed. - */ +@Directive({selector: 'ng-template[sbCardTitle]'}) +export class SbCardTitle { + constructor(public templateRef: TemplateRef) {} +} +@Directive({selector: 'ng-template[sbCardTopic1]'}) +export class SbCardTopic1 { + constructor(public templateRef: TemplateRef) {} +} +@Directive({selector: 'ng-template[sbCardTopic2]'}) +export class SbCardTopic2 { + constructor(public templateRef: TemplateRef) {} +} +@Directive({selector: 'ng-template[sbCardOrg]'}) +export class SbCardOrg { + constructor(public templateRef: TemplateRef) {} +} +@Directive({selector: 'ng-template[sbCardLabel]'}) +export class SbCardLabel { + constructor(public templateRef: TemplateRef) {} +} +@Directive({selector: 'ng-template[sbCardSubject]'}) +export class SbCardSubject { + constructor(public templateRef: TemplateRef) {} +} +@Directive({selector: 'ng-template[sbCardMedium'}) +export class SbCardMedium { + constructor(public templateRef: TemplateRef) {} +} +@Directive({selector: 'ng-template[sbCardClass'}) +export class SbCardClass { + constructor(public templateRef: TemplateRef) {} +} + + @Component({ selector: 'sb-card', changeDetection: ChangeDetectionStrategy.OnPush, @@ -26,15 +57,16 @@ import {SbCardConfig} from './card-config'; host: {'role': 'alert', 'class': 'alert', '[class.alert-dismissible]': 'dismissible'}, template: ` - `, styleUrls: ['./card.scss'] }) -export class SbCard implements OnInit, - OnChanges { + + + +export class SbCard implements OnInit, OnChanges { /** * If `true`, alert can be dismissed by the user. *