From 1ba5f6498d1feebb18e1a91dd8f58a1045de652f Mon Sep 17 00:00:00 2001 From: John Pettersson Date: Mon, 27 Nov 2017 17:00:55 +0100 Subject: [PATCH 1/2] =?UTF-8?q?lagt=20till=20full=20width=20mode=20f=C3=B6?= =?UTF-8?q?r=20card?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Content/partials/_components.card.scss | 5 ++ .../controls/card/card.component.html | 21 ++++++-- .../controls/card/card.component.ts | 18 +++++-- demo-app/app.module.ts | 4 +- demo-app/fake/fake-b.component.html | 10 ++-- demo-app/fake/fake-b.component.ts | 8 ++- demo-app/fake/fake-c.component.html | 12 ++++- demo-app/fake/fake-c.component.ts | 3 ++ demo-app/fake/full-width-card.component.html | 53 +++++++++++++++++++ demo-app/fake/full-width-card.component.ts | 13 +++++ .../formexample/formexample.component.html | 4 +- demo-app/lists/lists.component.html | 2 +- demo-app/lists/lists.component.ts | 2 +- 13 files changed, 137 insertions(+), 18 deletions(-) create mode 100644 demo-app/fake/full-width-card.component.html create mode 100644 demo-app/fake/full-width-card.component.ts diff --git a/Content/partials/_components.card.scss b/Content/partials/_components.card.scss index 9b54c1365..f70dfc457 100644 --- a/Content/partials/_components.card.scss +++ b/Content/partials/_components.card.scss @@ -30,6 +30,11 @@ } } +.card__fullwidth-container { + @extend .card__section-container; + flex: 1 1 auto; +} + .card__left-container { @extend .card__section-container; border-right: 1px solid $border-color; diff --git a/component-package/controls/card/card.component.html b/component-package/controls/card/card.component.html index c6c5152a6..f512ebe8e 100644 --- a/component-package/controls/card/card.component.html +++ b/component-package/controls/card/card.component.html @@ -1,9 +1,20 @@ -
-
- + +
+
+
+ +
+
+ +
-
- +
+ +
+
+
+ +
diff --git a/component-package/controls/card/card.component.ts b/component-package/controls/card/card.component.ts index 0ef8da093..23d8b6ea6 100644 --- a/component-package/controls/card/card.component.ts +++ b/component-package/controls/card/card.component.ts @@ -1,12 +1,24 @@ -import { Component, HostBinding } from '@angular/core'; +import { Component, HostBinding, Input, OnInit } from '@angular/core'; @Component({ selector: 'vgr-card', moduleId: module.id, templateUrl: './card.component.html' }) -export class CardComponent { - @HostBinding('class.card') cardClass = true; +export class CardComponent implements OnInit { + // @HostBinding('class.card') cardClass = true; + @Input() mode: CardMode; constructor() { + console.log(this.mode); + } + + ngOnInit() { + this.mode = this.mode === null || this.mode === undefined ? CardMode.fullWidth : this.mode; + console.log(this.mode); } } + +enum CardMode { + fullWidth = 1, + twoCollumns = 2 +} \ No newline at end of file diff --git a/demo-app/app.module.ts b/demo-app/app.module.ts index adef9afb8..b44d38513 100644 --- a/demo-app/app.module.ts +++ b/demo-app/app.module.ts @@ -20,6 +20,7 @@ import { ExampleLayoutComponent } from './example-layout/example-layout.componen import { FakeAComponent } from './fake/fake-a.component'; import { FakeBComponent } from './fake/fake-b.component'; import { FakeCComponent } from './fake/fake-c.component'; +import { FullWidthCardComponent } from './fake/full-width-card.component'; import { LoaderDemoComponent } from './loaderdemo/loaderdemo.component' import { CityService } from './inputFields/cityService'; @@ -49,7 +50,8 @@ import { appRoutes } from './routes' ExampleLayoutComponent, FakeAComponent, FakeBComponent, - FakeCComponent + FakeCComponent, + FullWidthCardComponent ], providers: [ CityService, { provide: LOCALE_ID, useValue: 'sv-SE' } diff --git a/demo-app/fake/fake-b.component.html b/demo-app/fake/fake-b.component.html index ec0a31981..7a53eaaaa 100644 --- a/demo-app/fake/fake-b.component.html +++ b/demo-app/fake/fake-b.component.html @@ -1,9 +1,13 @@ - -
+ + + + + +
John
diff --git a/demo-app/fake/fake-b.component.ts b/demo-app/fake/fake-b.component.ts index fc0f246b3..6a275e5be 100644 --- a/demo-app/fake/fake-b.component.ts +++ b/demo-app/fake/fake-b.component.ts @@ -1,5 +1,6 @@ import { Component, ViewChildren, QueryList } from '@angular/core'; - +import { SortDirection, } from '../../component-package/controls/list/list-column-header.component'; +import { SortChangedArgs } from '../../component-package/controls/list/list-header.component'; @Component({ moduleId: module.id, @@ -7,6 +8,11 @@ import { Component, ViewChildren, QueryList } from '@angular/core'; templateUrl: 'fake-b.component.html' }) export class FakeBComponent { + sortDirections = SortDirection; + constructor() { } + onSortChanged(event) { + console.log(event); + } } diff --git a/demo-app/fake/fake-c.component.html b/demo-app/fake/fake-c.component.html index cd175c1de..2d4b46c44 100644 --- a/demo-app/fake/fake-c.component.html +++ b/demo-app/fake/fake-c.component.html @@ -31,10 +31,18 @@ -
+ + + + + + + + +
John
diff --git a/demo-app/fake/fake-c.component.ts b/demo-app/fake/fake-c.component.ts index 6125cf1f4..21387731e 100644 --- a/demo-app/fake/fake-c.component.ts +++ b/demo-app/fake/fake-c.component.ts @@ -1,4 +1,6 @@ import { Component, ViewChildren, QueryList } from '@angular/core'; +import { SortDirection, } from '../../component-package/controls/list/list-column-header.component'; +import { SortChangedArgs } from '../../component-package/controls/list/list-header.component'; @Component({ @@ -7,6 +9,7 @@ import { Component, ViewChildren, QueryList } from '@angular/core'; templateUrl: 'fake-c.component.html' }) export class FakeCComponent { + sortDirections = SortDirection; constructor() { } } diff --git a/demo-app/fake/full-width-card.component.html b/demo-app/fake/full-width-card.component.html new file mode 100644 index 000000000..c16120fd3 --- /dev/null +++ b/demo-app/fake/full-width-card.component.html @@ -0,0 +1,53 @@ + + +
+
+
Enhet
+
Enhetens namn
+
+ +
+ Avbryt + Spara enhet +
+
+ + +
+ + SE2321000131-E000000011887 + + + + + + + + + + + +
+ + +
+ +
+ + +
+ + + + + + +
+ + +
+ Här kan man lägga in vad man vill själv +
+ + + diff --git a/demo-app/fake/full-width-card.component.ts b/demo-app/fake/full-width-card.component.ts new file mode 100644 index 000000000..935b2bc1f --- /dev/null +++ b/demo-app/fake/full-width-card.component.ts @@ -0,0 +1,13 @@ +import { Component, ViewChildren, QueryList, HostBinding } from '@angular/core'; +import { IDropdownItem } from '../../component-package/models/dropdownItem.model'; + +@Component({ + moduleId: module.id, + selector: 'vgr-full-width-card', + templateUrl: 'full-width-card.component.html' +}) +export class FullWidthCardComponent { + + constructor() { } + +} diff --git a/demo-app/formexample/formexample.component.html b/demo-app/formexample/formexample.component.html index b1191cace..a62bc0eed 100644 --- a/demo-app/formexample/formexample.component.html +++ b/demo-app/formexample/formexample.component.html @@ -3,11 +3,12 @@ View A View B View C + Full Width Card Action - +
Enhet
@@ -136,6 +137,7 @@ + diff --git a/demo-app/lists/lists.component.html b/demo-app/lists/lists.component.html index 69ab426d4..9639aec16 100644 --- a/demo-app/lists/lists.component.html +++ b/demo-app/lists/lists.component.html @@ -3,7 +3,7 @@ Foo - +
Enhet Mödravården Mölndal diff --git a/demo-app/lists/lists.component.ts b/demo-app/lists/lists.component.ts index b888271b1..10918d94d 100644 --- a/demo-app/lists/lists.component.ts +++ b/demo-app/lists/lists.component.ts @@ -46,7 +46,7 @@ export class ListsComponent { { id: '5', firstName: 'Erik', lastName: '', organisations: ['Team 2', 'Team 4'] } as ExamplePerson, ]; - + this.actionPanelVisible = true; this.grossAmount = 15000; From aeb158800eb0fcbf29a70809b68fcd0aaba5df38 Mon Sep 17 00:00:00 2001 From: John Pettersson Date: Mon, 27 Nov 2017 17:25:53 +0100 Subject: [PATCH 2/2] updaterat versioon 0.3.3-rc6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 164078a21..029dc82a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vgr-komponentkartan", - "version": "0.3.3-rc5", + "version": "0.3.3-rc6", "author": "Västra Götalandsregionen", "scripts": { "start": "concurrent \"npm run _watch-ts\" \"npm run _local-webserver\" \"npm run _watch-css\" \"npm run _watch-demo-app-css\"",