diff --git a/src/app/pages/tables/components/basicTables/basicTables.component.ts b/src/app/pages/tables/components/basicTables/basicTables.component.ts index 6791352a..c644401e 100644 --- a/src/app/pages/tables/components/basicTables/basicTables.component.ts +++ b/src/app/pages/tables/components/basicTables/basicTables.component.ts @@ -1,13 +1,21 @@ import {Component, ViewEncapsulation} from '@angular/core'; +import {BasicTablesService} from './basicTables.service'; import {BaCard} from '../../../../theme/components'; +import {HoverTable} from './components/hoverTable'; +import {BorderedTable} from './components/borderedTable'; +import {CondensedTable} from './components/condensedTable'; +import {StripedTable} from './components/stripedTable'; +import {ContextualTable} from './components/contextualTable'; +import {ResponsiveTable} from './components/responsiveTable'; @Component({ selector: 'basic-tables', encapsulation: ViewEncapsulation.None, - directives: [BaCard], + directives: [BaCard, HoverTable, BorderedTable, CondensedTable, StripedTable, ContextualTable, ResponsiveTable], styles: [require('./basicTables.scss')], template: require('./basicTables.html'), + providers: [BasicTablesService] }) export class BasicTables { diff --git a/src/app/pages/tables/components/basicTables/basicTables.html b/src/app/pages/tables/components/basicTables/basicTables.html index 9e138ff5..219fb039 100644 --- a/src/app/pages/tables/components/basicTables/basicTables.html +++ b/src/app/pages/tables/components/basicTables/basicTables.html @@ -1,5 +1,40 @@
-hello basic +
+
+ + + +
+
+ + + +
+
+
+
+ + + +
+
+ + + +
+
+
+
+ + + +
+
+ + + +
+
diff --git a/src/app/pages/tables/components/basicTables/basicTables.scss b/src/app/pages/tables/components/basicTables/basicTables.scss index 7de12949..6eaf3deb 100644 --- a/src/app/pages/tables/components/basicTables/basicTables.scss +++ b/src/app/pages/tables/components/basicTables/basicTables.scss @@ -1,30 +1,3 @@ -@import '../../../../theme/sass/conf/conf'; - -.show-grid div[class^=col-]{ - padding: 10px; - box-sizing: border-box; - div { - color: $default-text; - text-align: center; - font-size: 18px; - background-color: $border-light; - padding: 12px 5px; - } -} - -.grid-h{ - margin-top: 10px; - margin-bottom: 0; - &:first-child{ - margin-top: 0; - } -} - -body.badmin-transparent { - .show-grid div[class^=col-]{ - div { - color: $default; - background-color: rgba(255, 255, 255, 0.3); - } - } +.status-button { + width: 60px; } diff --git a/src/app/pages/tables/components/basicTables/basicTables.service.ts b/src/app/pages/tables/components/basicTables/basicTables.service.ts new file mode 100644 index 00000000..b8a01892 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/basicTables.service.ts @@ -0,0 +1,672 @@ +import {Injectable} from '@angular/core'; + +@Injectable() +export class BasicTablesService { + + smartTablePageSize = 10; + + smartTableData = [ + { + id: 1, + firstName: 'Mark', + lastName: 'Otto', + username: '@mdo', + email: 'mdo@gmail.com', + age: '28' + }, + { + id: 2, + firstName: 'Jacob', + lastName: 'Thornton', + username: '@fat', + email: 'fat@yandex.ru', + age: '45' + }, + { + id: 3, + firstName: 'Larry', + lastName: 'Bird', + username: '@twitter', + email: 'twitter@outlook.com', + age: '18' + }, + { + id: 4, + firstName: 'John', + lastName: 'Snow', + username: '@snow', + email: 'snow@gmail.com', + age: '20' + }, + { + id: 5, + firstName: 'Jack', + lastName: 'Sparrow', + username: '@jack', + email: 'jack@yandex.ru', + age: '30' + }, + { + id: 6, + firstName: 'Ann', + lastName: 'Smith', + username: '@ann', + email: 'ann@gmail.com', + age: '21' + }, + { + id: 7, + firstName: 'Barbara', + lastName: 'Black', + username: '@barbara', + email: 'barbara@yandex.ru', + age: '43' + }, + { + id: 8, + firstName: 'Sevan', + lastName: 'Bagrat', + username: '@sevan', + email: 'sevan@outlook.com', + age: '13' + }, + { + id: 9, + firstName: 'Ruben', + lastName: 'Vardan', + username: '@ruben', + email: 'ruben@gmail.com', + age: '22' + }, + { + id: 10, + firstName: 'Karen', + lastName: 'Sevan', + username: '@karen', + email: 'karen@yandex.ru', + age: '33' + }, + { + id: 11, + firstName: 'Mark', + lastName: 'Otto', + username: '@mark', + email: 'mark@gmail.com', + age: '38' + }, + { + id: 12, + firstName: 'Jacob', + lastName: 'Thornton', + username: '@jacob', + email: 'jacob@yandex.ru', + age: '48' + }, + { + id: 13, + firstName: 'Haik', + lastName: 'Hakob', + username: '@haik', + email: 'haik@outlook.com', + age: '48' + }, + { + id: 14, + firstName: 'Garegin', + lastName: 'Jirair', + username: '@garegin', + email: 'garegin@gmail.com', + age: '40' + }, + { + id: 15, + firstName: 'Krikor', + lastName: 'Bedros', + username: '@krikor', + email: 'krikor@yandex.ru', + age: '32' + }, + { + "id": 16, + "firstName": "Francisca", + "lastName": "Brady", + "username": "@Gibson", + "email": "franciscagibson@comtours.com", + "age": 11 + }, + { + "id": 17, + "firstName": "Tillman", + "lastName": "Figueroa", + "username": "@Snow", + "email": "tillmansnow@comtours.com", + "age": 34 + }, + { + "id": 18, + "firstName": "Jimenez", + "lastName": "Morris", + "username": "@Bryant", + "email": "jimenezbryant@comtours.com", + "age": 45 + }, + { + "id": 19, + "firstName": "Sandoval", + "lastName": "Jacobson", + "username": "@Mcbride", + "email": "sandovalmcbride@comtours.com", + "age": 32 + }, + { + "id": 20, + "firstName": "Griffin", + "lastName": "Torres", + "username": "@Charles", + "email": "griffincharles@comtours.com", + "age": 19 + }, + { + "id": 21, + "firstName": "Cora", + "lastName": "Parker", + "username": "@Caldwell", + "email": "coracaldwell@comtours.com", + "age": 27 + }, + { + "id": 22, + "firstName": "Cindy", + "lastName": "Bond", + "username": "@Velez", + "email": "cindyvelez@comtours.com", + "age": 24 + }, + { + "id": 23, + "firstName": "Frieda", + "lastName": "Tyson", + "username": "@Craig", + "email": "friedacraig@comtours.com", + "age": 45 + }, + { + "id": 24, + "firstName": "Cote", + "lastName": "Holcomb", + "username": "@Rowe", + "email": "coterowe@comtours.com", + "age": 20 + }, + { + "id": 25, + "firstName": "Trujillo", + "lastName": "Mejia", + "username": "@Valenzuela", + "email": "trujillovalenzuela@comtours.com", + "age": 16 + }, + { + "id": 26, + "firstName": "Pruitt", + "lastName": "Shepard", + "username": "@Sloan", + "email": "pruittsloan@comtours.com", + "age": 44 + }, + { + "id": 27, + "firstName": "Sutton", + "lastName": "Ortega", + "username": "@Black", + "email": "suttonblack@comtours.com", + "age": 42 + }, + { + "id": 28, + "firstName": "Marion", + "lastName": "Heath", + "username": "@Espinoza", + "email": "marionespinoza@comtours.com", + "age": 47 + }, + { + "id": 29, + "firstName": "Newman", + "lastName": "Hicks", + "username": "@Keith", + "email": "newmankeith@comtours.com", + "age": 15 + }, + { + "id": 30, + "firstName": "Boyle", + "lastName": "Larson", + "username": "@Summers", + "email": "boylesummers@comtours.com", + "age": 32 + }, + { + "id": 31, + "firstName": "Haynes", + "lastName": "Vinson", + "username": "@Mckenzie", + "email": "haynesmckenzie@comtours.com", + "age": 15 + }, + { + "id": 32, + "firstName": "Miller", + "lastName": "Acosta", + "username": "@Young", + "email": "milleryoung@comtours.com", + "age": 55 + }, + { + "id": 33, + "firstName": "Johnston", + "lastName": "Brown", + "username": "@Knight", + "email": "johnstonknight@comtours.com", + "age": 29 + }, + { + "id": 34, + "firstName": "Lena", + "lastName": "Pitts", + "username": "@Forbes", + "email": "lenaforbes@comtours.com", + "age": 25 + }, + { + "id": 35, + "firstName": "Terrie", + "lastName": "Kennedy", + "username": "@Branch", + "email": "terriebranch@comtours.com", + "age": 37 + }, + { + "id": 36, + "firstName": "Louise", + "lastName": "Aguirre", + "username": "@Kirby", + "email": "louisekirby@comtours.com", + "age": 44 + }, + { + "id": 37, + "firstName": "David", + "lastName": "Patton", + "username": "@Sanders", + "email": "davidsanders@comtours.com", + "age": 26 + }, + { + "id": 38, + "firstName": "Holden", + "lastName": "Barlow", + "username": "@Mckinney", + "email": "holdenmckinney@comtours.com", + "age": 11 + }, + { + "id": 39, + "firstName": "Baker", + "lastName": "Rivera", + "username": "@Montoya", + "email": "bakermontoya@comtours.com", + "age": 47 + }, + { + "id": 40, + "firstName": "Belinda", + "lastName": "Lloyd", + "username": "@Calderon", + "email": "belindacalderon@comtours.com", + "age": 21 + }, + { + "id": 41, + "firstName": "Pearson", + "lastName": "Patrick", + "username": "@Clements", + "email": "pearsonclements@comtours.com", + "age": 42 + }, + { + "id": 42, + "firstName": "Alyce", + "lastName": "Mckee", + "username": "@Daugherty", + "email": "alycedaugherty@comtours.com", + "age": 55 + }, + { + "id": 43, + "firstName": "Valencia", + "lastName": "Spence", + "username": "@Olsen", + "email": "valenciaolsen@comtours.com", + "age": 20 + }, + { + "id": 44, + "firstName": "Leach", + "lastName": "Holcomb", + "username": "@Humphrey", + "email": "leachhumphrey@comtours.com", + "age": 28 + }, + { + "id": 45, + "firstName": "Moss", + "lastName": "Baxter", + "username": "@Fitzpatrick", + "email": "mossfitzpatrick@comtours.com", + "age": 51 + }, + { + "id": 46, + "firstName": "Jeanne", + "lastName": "Cooke", + "username": "@Ward", + "email": "jeanneward@comtours.com", + "age": 59 + }, + { + "id": 47, + "firstName": "Wilma", + "lastName": "Briggs", + "username": "@Kidd", + "email": "wilmakidd@comtours.com", + "age": 53 + }, + { + "id": 48, + "firstName": "Beatrice", + "lastName": "Perry", + "username": "@Gilbert", + "email": "beatricegilbert@comtours.com", + "age": 39 + }, + { + "id": 49, + "firstName": "Whitaker", + "lastName": "Hyde", + "username": "@Mcdonald", + "email": "whitakermcdonald@comtours.com", + "age": 35 + }, + { + "id": 50, + "firstName": "Rebekah", + "lastName": "Duran", + "username": "@Gross", + "email": "rebekahgross@comtours.com", + "age": 40 + }, + { + "id": 51, + "firstName": "Earline", + "lastName": "Mayer", + "username": "@Woodward", + "email": "earlinewoodward@comtours.com", + "age": 52 + }, + { + "id": 52, + "firstName": "Moran", + "lastName": "Baxter", + "username": "@Johns", + "email": "moranjohns@comtours.com", + "age": 20 + }, + { + "id": 53, + "firstName": "Nanette", + "lastName": "Hubbard", + "username": "@Cooke", + "email": "nanettecooke@comtours.com", + "age": 55 + }, + { + "id": 54, + "firstName": "Dalton", + "lastName": "Walker", + "username": "@Hendricks", + "email": "daltonhendricks@comtours.com", + "age": 25 + }, + { + "id": 55, + "firstName": "Bennett", + "lastName": "Blake", + "username": "@Pena", + "email": "bennettpena@comtours.com", + "age": 13 + }, + { + "id": 56, + "firstName": "Kellie", + "lastName": "Horton", + "username": "@Weiss", + "email": "kellieweiss@comtours.com", + "age": 48 + }, + { + "id": 57, + "firstName": "Hobbs", + "lastName": "Talley", + "username": "@Sanford", + "email": "hobbssanford@comtours.com", + "age": 28 + }, + { + "id": 58, + "firstName": "Mcguire", + "lastName": "Donaldson", + "username": "@Roman", + "email": "mcguireroman@comtours.com", + "age": 38 + }, + { + "id": 59, + "firstName": "Rodriquez", + "lastName": "Saunders", + "username": "@Harper", + "email": "rodriquezharper@comtours.com", + "age": 20 + }, + { + "id": 60, + "firstName": "Lou", + "lastName": "Conner", + "username": "@Sanchez", + "email": "lousanchez@comtours.com", + "age": 16 + } + ]; + + editableTableData:Array; + + peopleTableData = [ + { + id: 1, + firstName: 'Mark', + lastName: 'Otto', + username: '@mdo', + email: 'mdo@gmail.com', + age: '28', + status: 'info' + }, + { + id: 2, + firstName: 'Jacob', + lastName: 'Thornton', + username: '@fat', + email: 'fat@yandex.ru', + age: '45', + status: 'primary' + }, + { + id: 3, + firstName: 'Larry', + lastName: 'Bird', + username: '@twitter', + email: 'twitter@outlook.com', + age: '18', + status: 'success' + }, + { + id: 4, + firstName: 'John', + lastName: 'Snow', + username: '@snow', + email: 'snow@gmail.com', + age: '20', + status: 'danger' + }, + { + id: 5, + firstName: 'Jack', + lastName: 'Sparrow', + username: '@jack', + email: 'jack@yandex.ru', + age: '30', + status: 'warning' + } + ]; + + metricsTableData = [ + { + image: 'app/browsers/chrome.svg', + browser: 'Google Chrome', + visits: '10,392', + isVisitsUp: true, + purchases: '4,214', + isPurchasesUp: true, + percent: '45%', + isPercentUp: true + }, + { + image: 'app/browsers/firefox.svg', + browser: 'Mozilla Firefox', + visits: '7,873', + isVisitsUp: true, + purchases: '3,031', + isPurchasesUp: false, + percent: '28%', + isPercentUp: true + }, + { + image: 'app/browsers/ie.svg', + browser: 'Internet Explorer', + visits: '5,890', + isVisitsUp: false, + purchases: '2,102', + isPurchasesUp: false, + percent: '17%', + isPercentUp: false + }, + { + image: 'app/browsers/safari.svg', + browser: 'Safari', + visits: '4,001', + isVisitsUp: false, + purchases: '1,001', + isPurchasesUp: false, + percent: '14%', + isPercentUp: true + }, + { + image: 'app/browsers/opera.svg', + browser: 'Opera', + visits: '1,833', + isVisitsUp: true, + purchases: '83', + isPurchasesUp: true, + percent: '5%', + isPercentUp: false + } + ]; + + users = [ + { + "id": 1, + "name": "Esther Vang", + "status": 4, + "group": 3 + }, + { + "id": 2, + "name": "Leah Freeman", + "status": 3, + "group": 1 + }, + { + "id": 3, + "name": "Mathews Simpson", + "status": 3, + "group": 2 + }, + { + "id": 4, + "name": "Buckley Hopkins", + "group": 4 + }, + { + "id": 5, + "name": "Buckley Schwartz", + "status": 1, + "group": 1 + }, + { + "id": 6, + "name": "Mathews Hopkins", + "status": 4, + "group": 2 + }, + { + "id": 7, + "name": "Leah Vang", + "status": 4, + "group": 1 + }, + { + "id": 8, + "name": "Vang Schwartz", + "status": 4, + "group": 2 + }, + { + "id": 9, + "name": "Hopkin Esther", + "status": 1, + "group": 2 + }, + { + "id": 10, + "name": "Mathews Schwartz", + "status": 1, + "group": 3 + } + ]; + + statuses = [ + {value: 1, text: 'Good'}, + {value: 2, text: 'Awesome'}, + {value: 3, text: 'Excellent'}, + ]; + + groups = [ + {id: 1, text: 'user'}, + {id: 2, text: 'customer'}, + {id: 3, text: 'vip'}, + {id: 4, text: 'admin'} + ]; + + constructor() { + this.editableTableData = this.smartTableData.slice(0, 36); + } +} diff --git a/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts b/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts new file mode 100644 index 00000000..10606257 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; + +import {AppPicturePipe} from '../../../../../../theme/pipes'; +import {BasicTablesService} from '../../basicTables.service'; + +@Component({ + selector: 'bordered-table', + template: require('./borderedTable.html'), + pipes: [AppPicturePipe] +}) +export class BorderedTable { + + metricsTableData:Array; + + constructor(private _basicTablesService: BasicTablesService) { + this.metricsTableData = _basicTablesService.metricsTableData; + } +} diff --git a/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.html b/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.html new file mode 100644 index 00000000..681e2c94 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.html @@ -0,0 +1,22 @@ +
+ + + + + + + + + + + + + + + + + + + +
BrowserVisitsPurchases%
{{ item.browser }}{{ item.visits }}{{ item.purchases }}{{ item.percent }}
+
diff --git a/src/app/pages/tables/components/basicTables/components/borderedTable/index.ts b/src/app/pages/tables/components/basicTables/components/borderedTable/index.ts new file mode 100644 index 00000000..60efd53a --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/borderedTable/index.ts @@ -0,0 +1 @@ +export * from './borderedTable.component'; diff --git a/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts b/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts new file mode 100644 index 00000000..0c159f18 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; + +import {AppPicturePipe} from '../../../../../../theme/pipes'; +import {BasicTablesService} from '../../basicTables.service'; + +@Component({ + selector: 'condensed-table', + template: require('./condensedTable.html'), + pipes: [AppPicturePipe] +}) +export class CondensedTable { + + peopleTableData:Array; + + constructor(private _basicTablesService: BasicTablesService) { + this.peopleTableData = _basicTablesService.peopleTableData; + } +} diff --git a/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.html b/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.html new file mode 100644 index 00000000..bec4b0a9 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.html @@ -0,0 +1,26 @@ +
+ + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsernameEmailStatus
{{ item.id }}{{ item.firstName }}{{ item.lastName }}{{ item.username }} + +
+
diff --git a/src/app/pages/tables/components/basicTables/components/condensedTable/index.ts b/src/app/pages/tables/components/basicTables/components/condensedTable/index.ts new file mode 100644 index 00000000..14f2d24f --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/condensedTable/index.ts @@ -0,0 +1 @@ +export * from './condensedTable.component'; diff --git a/src/app/pages/tables/components/basicTables/components/contextualTable/contextualTable.component.ts b/src/app/pages/tables/components/basicTables/components/contextualTable/contextualTable.component.ts new file mode 100644 index 00000000..1eefb647 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/contextualTable/contextualTable.component.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'contextual-table', + template: require('./contextualTable.html'), +}) +export class ContextualTable { + + constructor() { + } +} diff --git a/src/app/pages/tables/components/basicTables/components/contextualTable/contextualTable.html b/src/app/pages/tables/components/basicTables/components/contextualTable/contextualTable.html new file mode 100644 index 00000000..dca50cc8 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/contextualTable/contextualTable.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsernameEmailAge
1MarkOtto@mdo28
2JacobThornton@fat45
3LarryBird@twitter + 18
4JohnSnow@snow20
5JackSparrow@jack30
diff --git a/src/app/pages/tables/components/basicTables/components/contextualTable/index.ts b/src/app/pages/tables/components/basicTables/components/contextualTable/index.ts new file mode 100644 index 00000000..6d6db55a --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/contextualTable/index.ts @@ -0,0 +1 @@ +export * from './contextualTable.component'; diff --git a/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts b/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts new file mode 100644 index 00000000..869a9dd9 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; + +import {AppPicturePipe} from '../../../../../../theme/pipes'; +import {BasicTablesService} from '../../basicTables.service'; + +@Component({ + selector: 'hover-table', + template: require('./hoverTable.html'), + pipes: [AppPicturePipe] +}) +export class HoverTable { + + metricsTableData:Array; + + constructor(private _basicTablesService: BasicTablesService) { + this.metricsTableData = _basicTablesService.metricsTableData; + } +} diff --git a/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.html b/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.html new file mode 100644 index 00000000..27b6df5a --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.html @@ -0,0 +1,28 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVisitsPurchases%
{{item.browser}}{{item.visits}}{{item.purchases}}{{item.percent}}
+
diff --git a/src/app/pages/tables/components/basicTables/components/hoverTable/index.ts b/src/app/pages/tables/components/basicTables/components/hoverTable/index.ts new file mode 100644 index 00000000..4925dd51 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/hoverTable/index.ts @@ -0,0 +1 @@ +export * from './hoverTable.component'; diff --git a/src/app/pages/tables/components/basicTables/components/responsiveTable/index.ts b/src/app/pages/tables/components/basicTables/components/responsiveTable/index.ts new file mode 100644 index 00000000..00161ab1 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/responsiveTable/index.ts @@ -0,0 +1 @@ +export * from './responsiveTable.component'; diff --git a/src/app/pages/tables/components/basicTables/components/responsiveTable/responsiveTable.component.ts b/src/app/pages/tables/components/basicTables/components/responsiveTable/responsiveTable.component.ts new file mode 100644 index 00000000..fb7353af --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/responsiveTable/responsiveTable.component.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'responsive-table', + template: require('./responsiveTable.html'), +}) +export class ResponsiveTable { + + constructor() { + } +} diff --git a/src/app/pages/tables/components/basicTables/components/responsiveTable/responsiveTable.html b/src/app/pages/tables/components/basicTables/components/responsiveTable/responsiveTable.html new file mode 100644 index 00000000..25f1832e --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/responsiveTable/responsiveTable.html @@ -0,0 +1,53 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsernameEmailAge
1MarkOtto@mdo28
2JacobThornton@fat45
3LarryBird@twitter + 18
4JohnSnow@snow20
5JackSparrow@jack30
+
diff --git a/src/app/pages/tables/components/basicTables/components/stripedTable/index.ts b/src/app/pages/tables/components/basicTables/components/stripedTable/index.ts new file mode 100644 index 00000000..e3e83c1d --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/stripedTable/index.ts @@ -0,0 +1 @@ +export * from './stripedTable.component'; diff --git a/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts b/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts new file mode 100644 index 00000000..9d5ebb41 --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; + +import {AppPicturePipe} from '../../../../../../theme/pipes'; +import {BasicTablesService} from '../../basicTables.service'; + +@Component({ + selector: 'striped-table', + template: require('./stripedTable.html'), + pipes: [AppPicturePipe] +}) +export class StripedTable { + + smartTableData:Array; + + constructor(private _basicTablesService: BasicTablesService) { + this.smartTableData = _basicTablesService.smartTableData; + } +} diff --git a/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.html b/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.html new file mode 100644 index 00000000..3f68aa3e --- /dev/null +++ b/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.html @@ -0,0 +1,24 @@ +
+ + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsernameEmailAge
{{ item.id }}{{ item.firstName }}{{ item.lastName }}{{ item.username }}{{ item.age }}
+
diff --git a/src/app/theme/sass/_table.scss b/src/app/theme/sass/_table.scss index 3a67c5e5..e8fbbafa 100644 --- a/src/app/theme/sass/_table.scss +++ b/src/app/theme/sass/_table.scss @@ -215,6 +215,8 @@ body.badmin-transparent { & > tr { & > th { border-bottom: none; + border-top: none; + padding: 8px; } } }