diff --git a/.bootstraprc b/.bootstraprc index 927661b5..9fc9f38d 100644 --- a/.bootstraprc +++ b/.bootstraprc @@ -69,7 +69,6 @@ styles: buttons: true # Components - animation: true dropdown: true button-group: true input-group: true @@ -86,7 +85,7 @@ styles: list-group: true responsive-embed: true close: true - tags: true + transitions: true # Components w/ JavaScript modal: true diff --git a/package.json b/package.json index 30c14b43..818267b7 100644 --- a/package.json +++ b/package.json @@ -18,10 +18,11 @@ "@angularclass/conventions-loader": "1.0.13", "@angularclass/hmr": "1.2.2", "@angularclass/hmr-loader": "3.0.2", + "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.22", "amcharts3": "github:amcharts/amcharts3", "ammap3": "github:amcharts/ammap3", "animate.css": "3.5.2", - "bootstrap": "4.0.0-alpha.4", + "bootstrap": "4.0.0-alpha.6", "chart.js": "1.1.1", "chartist": "0.10.1", "ckeditor": "4.6.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index dcd7b82c..bb83e5f6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { RouterModule } from '@angular/router'; import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; /* * Platform and Environment providers/directives/pipes @@ -18,6 +19,7 @@ import { GlobalState } from './global.state'; import { NgaModule } from './theme/nga.module'; import { PagesModule } from './pages/pages.module'; + // Application wide providers const APP_PROVIDERS = [ AppState, @@ -45,6 +47,7 @@ export type StoreType = { FormsModule, ReactiveFormsModule, NgaModule.forRoot(), + NgbModule.forRoot(), PagesModule, routing ], diff --git a/src/app/pages/dashboard/pieChart/pieChart.scss b/src/app/pages/dashboard/pieChart/pieChart.scss index a75645f3..1dc16e99 100644 --- a/src/app/pages/dashboard/pieChart/pieChart.scss +++ b/src/app/pages/dashboard/pieChart/pieChart.scss @@ -16,19 +16,19 @@ @media screen and (min-width: 1325px) { .pie-chart-item-container { - width: 25%; + max-width: 25%; flex: 0 0 25% } } @media screen and (min-width: 700px) and (max-width: 1325px) { .pie-chart-item-container { - width: 50%; + max-width: 50%; flex: 0 0 50% } } @media screen and (max-width: 700px) { .pie-chart-item-container { - width: 100%; + max-width: 100%; flex: 0 0 100% } } diff --git a/src/app/pages/dashboard/popularApp/popularApp.scss b/src/app/pages/dashboard/popularApp/popularApp.scss index 26f3e7b0..36a7e75b 100644 --- a/src/app/pages/dashboard/popularApp/popularApp.scss +++ b/src/app/pages/dashboard/popularApp/popularApp.scss @@ -42,6 +42,8 @@ } .row { margin: 0; + display: flex; + justify-content: space-between; > div { padding: 0; } diff --git a/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html b/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html index d8b7cf5a..db456bfc 100644 --- a/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html +++ b/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html @@ -1,9 +1,13 @@ -
- - Rate: {{_rate1}} -
+
+
+ + Rate: {{_rate1}} +
-
- - Rate: {{_rate2}} +
+ + Rate: {{_rate2}} +
diff --git a/src/app/pages/ui/components/grid/grid.html b/src/app/pages/ui/components/grid/grid.html index 879e19bc..844d7828 100644 --- a/src/app/pages/ui/components/grid/grid.html +++ b/src/app/pages/ui/components/grid/grid.html @@ -74,84 +74,84 @@

Mobile and desktop

-
+
xs-12 .col-md-8
-
+
xs-6 .col-md-4
-
+
xs-6 .col-md-4
-
+
xs-6 .col-md-4
-
+
xs-6 .col-md-4
-
-
.col-xs-6
+
+
.col-6
-
-
.col-xs-6
+
+
.col-6

Mobile, tablet, desktop

-
-
.col-xs-12 .col-sm-6 .col-md-8
+
+
.col-12 .col-sm-6 .col-md-8
-
-
.col-xs-6 .col-md-4
+
+
.col-6 .col-md-4
-
-
.col-xs-6 .col-sm-4
+
+
.col-6 .col-sm-4
-
-
.col-xs-6 .col-sm-4
+
+
.col-6 .col-sm-4
-
-
.col-xs-6 .col-sm-4
+
+
.col-6 .col-sm-4

Column wrapping

-
-
.col-xs-9
+
+
.col-9
-
-
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous +
+
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
-
-
.col-xs-6
Subsequent columns continue along the new line.
+
+
.col-6
Subsequent columns continue along the new line.

Responsive column resets

-
-
.col-xs-6 .col-sm-3

Resize your viewport or check it out on your phone for an example.

+
+
.col-6 .col-sm-3

Resize your viewport or check it out on your phone for an example.

-
-
.col-xs-6 .col-sm-3
+
+
.col-6 .col-sm-3
-
-
.col-xs-6 .col-sm-3
+
+
.col-6 .col-sm-3
-
-
.col-xs-6 .col-sm-3
+
+
.col-6 .col-sm-3
@@ -217,7 +217,7 @@ Class prefix - .col-xs- + .col- .col-sm- .col-md- .col-lg- diff --git a/src/app/pages/ui/components/icons/icons.html b/src/app/pages/ui/components/icons/icons.html index 538a838a..82fdda92 100644 --- a/src/app/pages/ui/components/icons/icons.html +++ b/src/app/pages/ui/components/icons/icons.html @@ -13,7 +13,7 @@
-
{{ icon }}
+
{{ icon }}
See all Socicon icons @@ -30,14 +30,14 @@
-
+
See all ionicons icons
-
+
See all Font Awesome icons diff --git a/src/app/pages/ui/components/modals/default-modal/default-modal.component.html b/src/app/pages/ui/components/modals/default-modal/default-modal.component.html new file mode 100644 index 00000000..8de84b7e --- /dev/null +++ b/src/app/pages/ui/components/modals/default-modal/default-modal.component.html @@ -0,0 +1,14 @@ +
+
+

{{modalHeader}}

+ +
+
+ {{modalContent}} +
+
+ +
+
diff --git a/src/app/pages/ui/components/modals/default-modal/default-modal.component.scss b/src/app/pages/ui/components/modals/default-modal/default-modal.component.scss new file mode 100644 index 00000000..6addddcf --- /dev/null +++ b/src/app/pages/ui/components/modals/default-modal/default-modal.component.scss @@ -0,0 +1,9 @@ +@import "../../../../../theme/sass/conf/conf"; + +.modal-buttons .btn { + margin-right: 20px; +} + +.modal-content { + color: $dropdown-text; +} diff --git a/src/app/pages/ui/components/modals/default-modal/default-modal.component.ts b/src/app/pages/ui/components/modals/default-modal/default-modal.component.ts new file mode 100644 index 00000000..7a371ed3 --- /dev/null +++ b/src/app/pages/ui/components/modals/default-modal/default-modal.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'add-service-modal', + styleUrls: [('./default-modal.component.scss')], + templateUrl: './default-modal.component.html' +}) + +export class DefaultModal implements OnInit { + + modalHeader: string; + modalContent: string = `Lorem ipsum dolor sit amet, + consectetuer adipiscing elit, sed diam nonummy + nibh euismod tincidunt ut laoreet dolore magna aliquam + erat volutpat. Ut wisi enim ad minim veniam, quis + nostrud exerci tation ullamcorper suscipit lobortis + nisl ut aliquip ex ea commodo consequat.`; + + constructor(private activeModal: NgbActiveModal) { + } + + ngOnInit() {} + + closeModal() { + this.activeModal.close(); + } +} diff --git a/src/app/pages/ui/components/modals/modals.component.ts b/src/app/pages/ui/components/modals/modals.component.ts index 1277523c..b76a2744 100644 --- a/src/app/pages/ui/components/modals/modals.component.ts +++ b/src/app/pages/ui/components/modals/modals.component.ts @@ -1,5 +1,6 @@ -import { Component, ViewChild } from '@angular/core'; -import { ModalDirective } from 'ng2-bootstrap'; +import { Component } from '@angular/core'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { DefaultModal } from './default-modal/default-modal.component'; @Component({ selector: 'modals', @@ -7,13 +8,29 @@ import { ModalDirective } from 'ng2-bootstrap'; templateUrl: './modals.html' }) export class Modals { - @ViewChild('childModal') childModal: ModalDirective; - showChildModal(): void { - this.childModal.show(); + constructor(private modalService: NgbModal) {} + + lgModalShow() { + const activeModal = this.modalService.open(DefaultModal, {size: 'lg'}); + activeModal.componentInstance.modalHeader = 'Large Modal'; + } + smModalShow(): void { + const activeModal = this.modalService.open(DefaultModal, {size: 'sm'}); + activeModal.componentInstance.modalHeader = 'Small Modal'; } - hideChildModal(): void { - this.childModal.hide(); + staticModalShow() { + const activeModal = this.modalService.open(DefaultModal, {size: 'sm', + backdrop: 'static'}); + activeModal.componentInstance.modalHeader = 'Static modal'; + activeModal.componentInstance.modalContent = `This is static modal, backdrop click + will not close it. Click × or confirmation button to close modal.`; + } + + childModalShow() { + const activeModal = this.modalService.open(DefaultModal, {size: 'sm'}); + activeModal.componentInstance.modalHeader = 'Child modal'; + activeModal.componentInstance.modalContent = `I am a child modal, opened from parent component!`; } } diff --git a/src/app/pages/ui/components/modals/modals.html b/src/app/pages/ui/components/modals/modals.html index dd4c3268..f0f32f0c 100644 --- a/src/app/pages/ui/components/modals/modals.html +++ b/src/app/pages/ui/components/modals/modals.html @@ -2,95 +2,11 @@
- - - - + + + +
-
- -
-
- - - - - - - - - - - - diff --git a/src/app/pages/ui/ui.module.ts b/src/app/pages/ui/ui.module.ts index bba85240..d8b077b4 100644 --- a/src/app/pages/ui/ui.module.ts +++ b/src/app/pages/ui/ui.module.ts @@ -21,6 +21,7 @@ import { LargeButtons } from './components/buttons/components/largeButtons'; import { DropdownButtons } from './components/buttons/components/dropdownButtons'; import { GroupButtons } from './components/buttons/components/groupButtons'; import { IconsService } from './components/icons/icons.service'; +import { DefaultModal } from './components/modals/default-modal/default-modal.component'; @NgModule({ @@ -46,7 +47,8 @@ import { IconsService } from './components/icons/icons.service'; IconButtons, LargeButtons, DropdownButtons, - GroupButtons + GroupButtons, + DefaultModal ], providers: [ IconsService diff --git a/src/app/theme/components/baCheckbox/baCheckbox.component.ts b/src/app/theme/components/baCheckbox/baCheckbox.component.ts index 8f45347b..f98b9487 100644 --- a/src/app/theme/components/baCheckbox/baCheckbox.component.ts +++ b/src/app/theme/components/baCheckbox/baCheckbox.component.ts @@ -21,8 +21,12 @@ export class BaCheckbox implements ControlValueAccessor { state.valueAccessor = this; } - public onChange(value: any): void {} - public onTouch(value: any): void {} + public onChange(value: any): void { + } + + public onTouch(value: any): void { + } + public writeValue(state: any): void { this.state = state; } @@ -31,7 +35,10 @@ export class BaCheckbox implements ControlValueAccessor { this.onChange = function(state: boolean) { this.writeValue(state); this.model.viewToModelUpdate(state); - } + }; + } + + public registerOnTouched(fn: any): void { + this.onTouch = fn; } - public registerOnTouched(fn: any): void { this.onTouch = fn; } } diff --git a/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.component.ts b/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.component.ts index 445f4c3a..842f3c20 100644 --- a/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.component.ts +++ b/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.component.ts @@ -4,6 +4,7 @@ import {ControlValueAccessor, NgModel} from '@angular/forms'; @Component({ selector: 'ba-multi-checkbox[ngModel]', templateUrl: './baMultiCheckbox.html', + styleUrls: ['./baMultiCheckbox.scss'], providers: [NgModel] }) export class BaMultiCheckbox implements ControlValueAccessor { @@ -20,7 +21,6 @@ export class BaMultiCheckbox implements ControlValueAccessor { public getProp(item: any, propName: string): string { const prop = this.propertiesMapping[propName]; - if (!prop) { return item[propName]; } else if (typeof prop === 'function') { @@ -38,7 +38,7 @@ export class BaMultiCheckbox implements ControlValueAccessor { this.onChange = function(state: boolean) { this.writeValue(state); this.model.viewToModelUpdate(state); - } + }; } public registerOnTouched(fn: any): void { this.onTouch = fn; } } diff --git a/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.html b/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.html index 8e12a62b..aa2953b6 100644 --- a/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.html +++ b/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.html @@ -1,4 +1,4 @@ -
+
=1.9.1" + tether "^1.4.0" boxen@^0.6.0: version "0.6.0" @@ -2725,7 +2729,7 @@ jquery-slimscroll@1.3.8: dependencies: jquery ">= 1.7" -"jquery@1.9.1 - 3", jquery@2.2.4, "jquery@>= 1.7", jquery@>=1.7.1: +jquery@2.2.4, "jquery@>= 1.7", jquery@>=1.7.1, jquery@>=1.9.1: version "2.2.4" resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02" @@ -5416,7 +5420,7 @@ tar@^2.0.0, tar@~2.2.1: fstream "^1.0.2" inherits "2" -tether@1.4.0, tether@^1.1.1: +tether@1.4.0, tether@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.0.tgz#0f9fa171f75bf58485d8149e94799d7ae74d1c1a"