2 |
49 |
--------------------------------------------------------------------------------
/src/app/dashboard/component/pricetable/pricetable.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-pricetable',
5 | templateUrl: './pricetable.component.html',
6 | styleUrls: ['./pricetable.component.css']
7 | })
8 | export class PriceTableComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/dashboard/component/wizard/wizard.component.css:
--------------------------------------------------------------------------------
1 | .wizard-panel{
2 |
3 | }
4 |
5 | .wizard-header{
6 | padding: 25px 0 35px;
7 | }
8 |
9 | .wizard-navigation{
10 | position: relative;
11 | }
12 |
13 | .nav-pills{
14 | background-color: rgba(200, 200, 200, 0.2);
15 | width: 100%;
16 | }
17 |
18 | .nav-pills li{
19 | width: 33.3333%;
20 | float: left;
21 | margin-left: 0;
22 | font-size: 12px;
23 | font-weight: 500;
24 | min-width: 100px;
25 | color: #555;
26 | padding: 10px 0;
27 | }
28 |
29 | .move-tab{
30 | position: absolute;
31 | background-color: #f44336;
32 | box-shadow: 0 16px 26px -10px rgba(244, 67, 54, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2);
33 | font-weight: 500;
34 | border-radius: 4px;
35 | color: #fff;
36 | top: -2px;
37 | left: -1vw;
38 | width: calc((100% - 260px) / 2);
39 | height: 114%;
40 | display: flex;
41 | justify-content: center;
42 | align-items: center;
43 | transition: all 500ms cubic-bezier(0.29, 1.42, 0.79, 1);
44 | }
45 |
46 | .wizard-body{
47 | min-height: 350px;
48 | padding: 15px;
49 | }
50 |
51 | .wizard-footer{
52 | display: flex;
53 | padding: 10px;
54 | justify-content: space-between;
55 | }
56 |
--------------------------------------------------------------------------------
/src/app/dashboard/component/wizard/wizard.component.html:
--------------------------------------------------------------------------------
1 |
4 |
48 |
5 |
47 |
6 |
46 |
7 |
19 |
8 |
18 | Individual
9 |
10 | person
11 |
12 | Free
13 |14 | This is good if your company size is between 2 and 10 Persons. 15 |
16 | 17 |
20 |
32 |
21 |
31 | Small Company
22 |
23 | weekend
24 |
25 | $29 / m
26 |27 | This is good if your company size is between 2 and 10 Persons. 28 |
29 | 30 |
33 |
45 |
34 |
44 | Enterprise
35 |
36 | home
37 |
38 | $79 / m
39 |40 | This is good if your company size is between 2 and 10 Persons. 41 |
42 | 43 |
2 |
37 |
--------------------------------------------------------------------------------
/src/app/dashboard/component/wizard/wizard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, AfterViewInit } from '@angular/core';
2 | declare const $: any;
3 |
4 | @Component({
5 | selector: 'app-wizard',
6 | templateUrl: './wizard.component.html',
7 | styleUrls: ['./wizard.component.css']
8 | })
9 | export class WizardComponent implements OnInit, AfterViewInit {
10 | tabIndex = 0;
11 | constructor() { }
12 |
13 | ngOnInit() {
14 | }
15 | ngAfterViewInit() {
16 | const preBtn =
4 |
36 |
5 |
35 |
6 |
34 |
7 |
10 |
18 | Build Your Profile
8 |This information will let us know more about you.
9 |
19 |
29 |
33 |
20 | tab 1
21 |
22 |
23 | tab 2
24 |
25 |
26 | tab 3
27 |
28 |
2 |
81 |
--------------------------------------------------------------------------------
/src/app/dashboard/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-home',
5 | templateUrl: './home.component.html',
6 | styleUrls: ['./home.component.css']
7 | })
8 | export class HomeComponent implements OnInit {
9 | constructor() {
10 | }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/dashboard/notification/notification.component.css:
--------------------------------------------------------------------------------
1 | .notification-card{
2 | padding: 23px 20px 18px 20px;
3 | }
4 |
5 | .notification-card h4{
6 | margin-bottom: 15px;
7 | }
8 |
9 | .place{
10 | padding: 20px;
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/dashboard/notification/notification.component.html:
--------------------------------------------------------------------------------
1 |
4 |
49 |
5 |
13 |
14 |
15 |
16 |
24 |
25 |
26 |
27 |
35 |
36 |
37 |
38 |
46 |
47 |
48 |
50 |
78 |
79 |
80 |
51 |
57 |
58 |
59 |
60 |
66 |
67 |
68 |
69 |
75 |
76 |
77 |
2 |
95 |
--------------------------------------------------------------------------------
/src/app/dashboard/notification/notification.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | declare const $: any;
3 |
4 | @Component({
5 | selector: 'app-notification',
6 | templateUrl: './notification.component.html',
7 | styleUrls: ['./notification.component.css']
8 | })
9 | export class NotificationComponent implements OnInit {
10 |
11 | constructor() {
12 | }
13 |
14 | ngOnInit() {
15 | }
16 |
17 | btnClick(position) {
18 | let from = 'top';
19 | let align = 'right';
20 | let type = 'info';
21 | switch (position) {
22 | case 'top-left':
23 | align = 'left';
24 | type = 'rose';
25 | break;
26 | case 'top-center':
27 | align = 'center';
28 | type = 'success';
29 | break;
30 | case 'bottom-left':
31 | align = 'left';
32 | from = 'bottom';
33 | type = 'primary';
34 | break;
35 | case 'bottom-center':
36 | align = 'center';
37 | from = 'bottom';
38 | type = 'warning';
39 | break;
40 | case 'bottom-right':
41 | from = 'bottom';
42 | type = 'danger';
43 | break;
44 | }
45 | $.notify({
46 | message: 'Welcome to MATERIAL DASHBOARD - a beautiful dashboard for every web developer.',
47 | }, {
48 | placement: {from, align},
49 | offset: {x: 20, y: 35},
50 | type,
51 | template: ``
56 | });
57 | }
58 |
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/dashboard/profile/profile.component.css:
--------------------------------------------------------------------------------
1 | .right-profile{
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | padding: 25px;
6 | position: relative;
7 | /*margin-top: 60px;*/
8 | }
9 |
10 | .profile{
11 | position: absolute;
12 | top: -40px;
13 | }
14 |
15 | .profile img{
16 | border-radius: 50%;
17 | width: 130px;
18 | box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
19 | }
20 |
21 | .right-profile h6{
22 | margin-top: 100px;
23 | margin-bottom: 8px;
24 | color: #999;
25 | }
26 |
27 | .right-profile h4{
28 | margin-bottom: 5px;
29 | }
30 |
31 | .right-profile p{
32 | color: #999;
33 | }
34 |
35 | .right-profile button {
36 | margin-top: 15px;
37 | }
38 |
39 | .card{
40 | display: flex;
41 | flex-direction: column;
42 | padding: 20px;
43 | position: relative;
44 | margin-top: 40px;
45 | }
46 |
47 | .card-header {
48 | position: absolute;
49 | text-align: center;
50 | background: linear-gradient(60deg, #ec407a, #d81b60);
51 | box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
52 | /*margin: -20px 15px 0;*/
53 | border-radius: 3px;
54 | padding: 15px;
55 | top: -23px;
56 | }
57 |
58 | .card-header i {
59 | font-size: 24px;
60 | width: 33px;
61 | height: 33px;
62 | line-height: 33px;
63 | color: #fff;
64 | }
65 |
66 | .card-content{
67 | position: relative;
68 | }
69 |
70 | .card-title{
71 | padding-left: 80px;
72 | }
73 |
74 | .mat-input-container{
75 | width: 100%;
76 | }
77 |
78 | .category{
79 | font-weight: 300;
80 | }
81 |
82 | form{
83 | margin-top: 30px;
84 | }
85 |
86 | .row{
87 | margin-top: 15px;
88 | }
89 |
90 | .mat-input-container textarea{
91 | height: 90px;
92 | }
93 |
94 | .textarea-label{
95 | color: #aaa;
96 | margin-bottom: 10px;
97 | }
98 |
99 | .action-btn{
100 | display: flex;
101 | justify-content: flex-end;
102 | padding-right: 15px;
103 | }
104 |
--------------------------------------------------------------------------------
/src/app/dashboard/profile/profile.component.html:
--------------------------------------------------------------------------------
1 |
4 |
6 | Notifications
5 |
7 |
9 | Handcrafted by our friend Robert McIntosh. Please checkout the full documentation.
8 |
10 |
62 |
11 |
32 |
12 |
31 | Notifications Style
13 |
14 | This is a plain notification
15 |
16 |
17 |
18 | This is a plain notification
19 |
20 |
25 |
30 |
33 |
61 |
34 |
60 | Notification States
35 |
36 |
37 | INFO - This is a regular notification made with ".alert-info"
38 |
39 |
40 |
41 | SUCCESS - This is a regular notification made with ".alert-success"
42 |
43 |
44 |
45 | WARNING - This is a regular notification made with ".alert-warning"
46 |
47 |
48 |
49 | DANGER - This is a regular notification made with ".alert-danger"
50 |
51 |
52 |
53 | PRIMARY - This is a regular notification made with ".alert-primary"
54 |
55 |
56 |
57 | ROSE - This is a regular notification made with ".alert-rose"
58 |
59 |
63 |
94 |
64 |
93 | Notifications Places
65 |Click to view notifications
66 |
67 |
79 |
68 |
78 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
80 |
92 |
81 |
91 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
2 |
79 |
--------------------------------------------------------------------------------
/src/app/dashboard/profile/profile.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-profile',
5 | templateUrl: './profile.component.html',
6 | styleUrls: ['./profile.component.css']
7 | })
8 | export class ProfileComponent implements OnInit {
9 | firstName: string;
10 | lastName: string;
11 | constructor() { }
12 |
13 | ngOnInit() {
14 | this.firstName = 'Alec';
15 | this.lastName = 'Thompson';
16 | }
17 |
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/dashboard/root/root.component.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | position: relative;
3 | top: 0;
4 | height: 100vh;
5 | display: flex;
6 | width: 100%;
7 | flex: 1;
8 | }
9 |
10 | .sidebar-panel{
11 | width: 260px;
12 | position: fixed;
13 | height: 100%;
14 | /*background-color: #D80B0B;*/
15 | box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
16 | -webkit-transition: all 500ms;
17 | -moz-transition: all 500ms;
18 | -ms-transition: all 500ms;
19 | -o-transition: all 500ms;
20 | transition: all 500ms;
21 | }
22 |
23 | .main-panel{
24 | width: 100%;
25 | flex: 1;
26 | padding-left: 260px;
27 | }
28 |
29 | .sidebar-background{
30 | position: absolute;
31 | z-index: 0;
32 | height: 100%;
33 | width: 100%;
34 | display: block;
35 | top: 0;
36 | left: 0;
37 | background-size: cover;
38 | background-position: center center;
39 | opacity: 0.2;
40 | filter: alpha(opacity=10);
41 | -webkit-transition: all 500ms;
42 | -moz-transition: all 500ms;
43 | -ms-transition: all 500ms;
44 | -o-transition: all 500ms;
45 | transition: all 500ms;
46 | }
47 |
48 |
--------------------------------------------------------------------------------
/src/app/dashboard/root/root.component.html:
--------------------------------------------------------------------------------
1 |
4 |
78 |
5 |
65 |
6 |
64 |
7 | perm_identity
8 |
9 |
10 |
63 | Edit Profile - 11 | Complete your profile 12 |
13 | 62 |
66 |
77 |
67 |
76 |
68 | 
69 |
70 |
69 | CEO / CO-FOUNDER
71 |{{ firstName }} {{ lastName }}
72 |Don't be scared of the truth because we need to restart the human foundation in truth And I love you like 73 | Kanye loves Kanye I love Rick Owens’ bed design but the back is...
74 | 75 |
2 |
7 |
11 |
--------------------------------------------------------------------------------
/src/app/dashboard/root/root.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy } from '@angular/core';
2 | import { SettingsService } from '../../services/settings.service';
3 |
4 | @Component({
5 | selector: 'app-root',
6 | templateUrl: './root.component.html',
7 | styleUrls: ['./root.component.css']
8 | })
9 | export class RootComponent implements OnInit, OnDestroy {
10 | public id: number;
11 | public backgroundColor: string;
12 | constructor(public settingService: SettingsService) {
13 | this.id = settingService.getSidebarImageIndex() + 1;
14 | this.backgroundColor = settingService.getSidebarColor();
15 | }
16 |
17 | ngOnInit() {
18 | this.settingService.sidebarImageIndexUpdate.subscribe((id: number) => {
19 | this.id = id + 1;
20 | });
21 | this.settingService.sidebarColorUpdate.subscribe((color: string) => {
22 | this.backgroundColor = color;
23 | });
24 | }
25 |
26 | ngOnDestroy() {
27 | this.settingService.sidebarImageIndexUpdate.unsubscribe();
28 | this.settingService.sidebarColorUpdate.unsubscribe();
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/dashboard/settings/settings.component.css:
--------------------------------------------------------------------------------
1 | .sidebar-btn{
2 | background-color: transparent;
3 | border: none;
4 | outline: none;
5 | }
6 |
7 | .sidebar-img{
8 | max-width: 100%;
9 | border-radius: 10px;
10 | margin-top: 10px;
11 | cursor: pointer;
12 | -webkit-transition: all 400ms;
13 | -moz-transition: all 400ms;
14 | -ms-transition: all 400ms;
15 | -o-transition: all 400ms;
16 | transition: all 400ms;
17 | border: 4px solid transparent;
18 | }
19 |
20 | .btn-hover:hover{
21 | border-color: rgba(0, 187, 255, 0.5);
22 | -webkit-transition: all 400ms;
23 | -moz-transition: all 400ms;
24 | -ms-transition: all 400ms;
25 | -o-transition: all 400ms;
26 | transition: all 400ms;
27 | }
28 |
29 | .active{
30 | border-color: #00bbff;
31 | }
32 |
33 | .dot-row{
34 | display: flex;
35 | justify-content: center;
36 | margin: 20px 0 40px 0;
37 | }
38 |
39 | .dot{
40 | border: 3px solid transparent;
41 | border-radius: 50%;
42 | width: 23px;
43 | height: 23px;
44 | margin: 0 10px;
45 | cursor: pointer;
46 | }
47 |
48 | .purple{
49 | background-color: #9c27b0;
50 | }
51 |
52 | .blue{
53 | background-color: #00bcd4;
54 | }
55 |
56 | .dodgerblue{
57 | background-color: dodgerblue;
58 | }
59 |
60 | .green{
61 | background-color: #4caf50;
62 | }
63 |
64 | .orange{
65 | background-color: #ff9800;
66 | }
67 |
68 | .red{
69 | background-color: #f44336;
70 | }
71 |
72 | .white{
73 | background-color: rgba(200, 200, 200, 0.2);
74 | }
75 |
76 | .rose{
77 | background-color: #e91e63;
78 | }
79 |
80 | .black{
81 | background-color: #000;
82 | }
83 |
--------------------------------------------------------------------------------
/src/app/dashboard/settings/settings.component.html:
--------------------------------------------------------------------------------
1 |
8 |
10 |
2 |
44 |
--------------------------------------------------------------------------------
/src/app/dashboard/settings/settings.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { SettingsService } from '../../services/settings.service';
3 |
4 | @Component({
5 | selector: 'app-settings',
6 | templateUrl: './settings.component.html',
7 | styleUrls: ['./settings.component.css']
8 | })
9 | export class SettingsComponent implements OnInit {
10 |
11 | constructor(public settingService: SettingsService) { }
12 |
13 | ngOnInit() {
14 | const defaultId = this.settingService.getSidebarImageIndex();
15 | const sidebarImgs: HTMLCollection = document.getElementsByClassName('sidebar-img');
16 | sidebarImgs[defaultId].className = sidebarImgs[defaultId].className + ' active';
17 | }
18 |
19 | bgChooseClick(id) {
20 | this.settingService.setSidebarImageIndex(id);
21 | const sidebarImgs: HTMLCollection = document.getElementsByClassName('sidebar-img');
22 | for (let i = 0; i < sidebarImgs.length; i++) {
23 | sidebarImgs[i].className = sidebarImgs[i].className.replace(' active', '');
24 | }
25 | sidebarImgs[id].className = sidebarImgs[id].className + ' active';
26 | }
27 |
28 | filterChooseClick(color) {
29 | this.settingService.setSidebarFilter(color);
30 | }
31 |
32 | bgColorChooseClick(color) {
33 | this.settingService.setSidebarColor(color);
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/app/dashboard/sweetalert/sweetalert.component.css:
--------------------------------------------------------------------------------
1 | .card{
2 | display: flex;
3 | flex-direction: column;
4 | padding: 25px 20px 22px 20px;
5 | align-items: center;
6 | margin-top: 30px;
7 | }
8 |
9 | .card h5{
10 | margin-bottom: 20px;
11 | text-align: center;
12 | }
13 |
--------------------------------------------------------------------------------
/src/app/dashboard/sweetalert/sweetalert.component.html:
--------------------------------------------------------------------------------
1 |
4 |
43 |
5 |
16 |
17 | Sidebar Filters
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
26 |
27 | Sidebar Background
19 |
20 |
21 |
22 |
23 |
24 |
25 |
28 |
42 | SideBar Background Image
29 |
30 | 
31 |
32 |
31 |
33 | 
34 |
35 |
34 |
36 | 
37 |
38 |
37 |
39 | 
40 |
41 |
40 |
2 |
62 |
--------------------------------------------------------------------------------
/src/app/dashboard/sweetalert/sweetalert.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | declare const swal: any;
3 |
4 | @Component({
5 | selector: 'app-sweetalert',
6 | templateUrl: './sweetalert.component.html',
7 | styleUrls: ['./sweetalert.component.css']
8 | })
9 | export class SweetAlertComponent implements OnInit {
10 |
11 | constructor() { }
12 |
13 | ngOnInit() {
14 | }
15 |
16 | openAlert(type) {
17 | switch (type) {
18 | case 'basic':
19 | swal({
20 | title: 'Here\'s a message!',
21 | confirmButtonClass: 'btn btn-success'
22 | });
23 | break;
24 | case 'text':
25 | swal({
26 | title: 'Good job!',
27 | text: 'It\'s pretty, isn\'t it?',
28 | confirmButtonClass: 'btn btn-info'
29 | });
30 | break;
31 | case 'success':
32 | swal({
33 | title: 'Good job!',
34 | text: 'You clicked the button!',
35 | type: 'success',
36 | confirmButtonClass: 'btn btn-success'
37 | });
38 | break;
39 | case 'html':
40 | swal({
41 | title: 'HTML example',
42 | type: 'info',
43 | html:
44 | `You can use bold textlinksand other HTML tags`,
45 | showCloseButton: true,
46 | showCancelButton: true,
47 | confirmButtonText: ' Great!',
48 | cancelButtonText: '',
49 | confirmButtonClass: 'btn btn-primary',
50 | cancelButtonClass: 'btn btn-warning'
51 | });
52 | break;
53 | case 'confirm':
54 | swal({
55 | title: 'Are you sure?',
56 | text: 'You won\'t be able to revert this!',
57 | type: 'warning',
58 | showCancelButton: true,
59 | confirmButtonClass: 'btn btn-success',
60 | cancelButtonClass: 'btn btn-danger',
61 | confirmButtonText: 'YES, DELETE IT!'
62 | }).then(function () {
63 | swal({
64 | title: 'Deleted!',
65 | text: 'Your file has been deleted.',
66 | type: 'success',
67 | confirmButtonClass: 'btn btn-info'
68 | });
69 | });
70 | break;
71 | case 'cancel':
72 | swal({
73 | title: 'Are you sure?',
74 | text: 'You won\'t be able to revert this!',
75 | type: 'warning',
76 | showCancelButton: true,
77 | confirmButtonText: 'YES, DELETE IT!',
78 | cancelButtonText: 'NO, CANCEL!',
79 | confirmButtonClass: 'btn btn-success',
80 | cancelButtonClass: 'btn btn-danger',
81 | buttonsStyling: false
82 | }).then(function () {
83 | swal({
84 | title: 'Deleted!',
85 | text: 'Your file has been deleted.',
86 | type: 'success',
87 | confirmButtonClass: 'btn btn-info'
88 | });
89 | }, function (dismiss) {
90 | // dismiss can be 'cancel', 'overlay',
91 | // 'close', and 'timer'
92 | if (dismiss === 'cancel') {
93 | swal({
94 | title: 'Cancelled',
95 | text: 'Your imaginary file is safe :)',
96 | type: 'error',
97 | confirmButtonClass: 'btn btn-info'
98 | });
99 | }
100 | });
101 | break;
102 | case 'close':
103 | swal({
104 | title: 'Auto close alert!',
105 | text: 'I will close in 2 seconds.',
106 | timer: 2000,
107 | showConfirmButton: false
108 | }).then(
109 | function () {},
110 | // handling the promise rejection
111 | function (dismiss) {
112 | if (dismiss === 'timer') {
113 | console.log('I was closed by the timer');
114 | }
115 | }
116 | );
117 | break;
118 | case 'input':
119 | swal({
120 | title: 'Input something',
121 | input: 'text',
122 | inputClass: 'mat-input-container',
123 | showCancelButton: true,
124 | confirmButtonText: 'OK',
125 | confirmButtonClass: 'btn btn-success',
126 | cancelButtonClass: 'btn btn-danger',
127 | showLoaderOnConfirm: true,
128 | preConfirm: function (text) {
129 | swal({
130 | text: 'Your entered: ' + text,
131 | type: 'success',
132 | confirmButtonClass: 'btn btn-info'
133 | });
134 | },
135 | allowOutsideClick: false
136 | });
137 | break;
138 | }
139 | }
140 |
141 | }
142 |
--------------------------------------------------------------------------------
/src/app/dashboard/table/table.component.css:
--------------------------------------------------------------------------------
1 | .row{
2 | margin-top: 10px;
3 | }
4 |
5 | .card{
6 | display: flex;
7 | flex-direction: column;
8 | padding: 20px;
9 | position: relative;
10 | margin-top: 40px;
11 | }
12 |
13 | .card-header {
14 | position: absolute;
15 | text-align: center;
16 | background: linear-gradient(60deg, #ec407a, #d81b60);
17 | box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
18 | /*margin: -20px 15px 0;*/
19 | border-radius: 3px;
20 | padding: 15px;
21 | top: -23px;
22 | }
23 |
24 | .card-header i {
25 | font-size: 24px;
26 | width: 33px;
27 | height: 33px;
28 | line-height: 33px;
29 | color: #fff;
30 | }
31 |
32 | .card-content{
33 | position: relative;
34 | }
35 |
36 | .card-title{
37 | padding-left: 80px;
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/dashboard/table/table.component.html:
--------------------------------------------------------------------------------
1 |
4 |
6 | Sweet Alert 2
5 |
7 |
9 | A beautiful plugin, that replace the classic alert, Handcrafted by our friend Tristan Edwards. Please checkout the full documentation.
8 |
10 |
35 |
11 |
16 |
12 |
15 | Basic example
13 | 14 |
17 |
22 |
18 |
21 | A title with a text under
19 | 20 |
23 |
28 |
24 |
27 | A success message
25 | 26 |
29 |
34 |
30 |
33 | Custom HTML description
31 | 32 |
36 |
61 |
37 |
42 |
38 |
41 | A warning message, with a function attached to the "Confirm" Button...
39 | 40 |
43 |
48 |
44 |
47 | ...and by passing a parameter, you can execute something else for "Cancel"
45 | 46 |
49 |
54 |
50 |
53 | A message with auto close timer set to 2 seconds
51 | 52 |
55 |
60 |
56 |
59 | Modal window with input field
57 | 58 |
2 |
145 |
--------------------------------------------------------------------------------
/src/app/dashboard/table/table.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-table',
5 | templateUrl: './table.component.html',
6 | styleUrls: ['./table.component.css']
7 | })
8 | export class TableComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/page/lock/lock.component.css:
--------------------------------------------------------------------------------
1 | .container{
2 | height: 100%;
3 | position: relative;
4 | z-index: 1;
5 | }
6 |
7 | .background{
8 | background: url("../../../assets/img/lock_bg.jpg") no-repeat center center;
9 | background-size: cover;
10 | }
11 |
12 | .card{
13 | position: relative;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | width: 100%;
18 | padding: 20px;
19 | margin-top: 70px;
20 | top: -60px;
21 | -webkit-animation-name: card;
22 | -moz-animation-name: card;
23 | -o-animation-name: card;
24 | animation-name: card;
25 | -webkit-animation-duration: 600ms;
26 | -moz-animation-duration: 600ms;
27 | -o-animation-duration: 600ms;
28 | animation-duration: 600ms;
29 | -webkit-animation-fill-mode: forwards;
30 | -moz-animation-fill-mode: forwards;
31 | -o-animation-fill-mode: forwards;
32 | animation-fill-mode: forwards;
33 | }
34 |
35 | @-webkit-keyframes card {
36 | from {top: -40px;}
37 | to {top: 0;}
38 | }
39 |
40 | @keyframes card {
41 | from {top: -40px;}
42 | to {top: 0;}
43 | }
44 |
45 | .card-header img{
46 | position: relative;
47 | top: -60px;
48 | border-radius: 50%;
49 | width: 90px;
50 | box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
51 | }
52 |
53 | .card h4{
54 | margin-top: -30px;
55 | margin-bottom: 20px;
56 | }
57 |
58 | .card-body, .card-body .mat-form-field{
59 | width: 100%;
60 | }
61 |
62 | .card-footer{
63 | margin: 15px 0 5px 0;
64 | }
65 |
--------------------------------------------------------------------------------
/src/app/page/lock/lock.component.html:
--------------------------------------------------------------------------------
1 |
4 |
65 |
5 |
64 |
6 |
63 |
7 | assignment
8 |
9 |
10 |
62 | Simple Table
11 |
12 |
13 |
14 |
60 |
61 | | First Name | 16 |Country | 17 |City | 18 |Salary | 19 |
|---|---|---|---|
| Dakota Rice | 24 |Niger | 25 |Oud-Turnhout | 26 |$36,738 | 27 |
| Minerva Hooper | 30 |Curaçao | 31 |Sinaai-Waas | 32 |$23,789 | 33 |
| Sage Rodriguez | 36 |Netherlands | 37 |Baileux | 38 |$56,142 | 39 |
| Philip Chaney | 42 |Korea, South | 43 |Overland Park | 44 |$38,735 | 45 |
| Doris Greene | 48 |Malawi | 49 |Feldkirchen in Kärnten | 50 |$63,542 | 51 |
| Mason Porter | 54 |Chile | 55 |Gloucester | 56 |$78,615 | 57 |
66 |
144 |
67 |
143 |
68 |
142 |
69 | assignment
70 |
71 |
72 |
141 | Striped Table
73 |
74 |
75 |
76 |
139 |
140 | | # | 78 |79 | | Product Name | 80 |Type | 81 |Quantity | 82 |Price | 83 |Amount | 84 |
|---|---|---|---|---|---|---|
| 1 | 89 |Moleskine Agenda | 91 |Oud-Office | 92 |25 | 93 |€ 49 | 94 |€ 1,225 | 95 ||
| 2 | 98 |Stabilo Pen | 100 |Office | 101 |35 | 102 |€ 10 | 103 |€ 300 | 104 ||
| 3 | 107 |A4 Paper Pack | 109 |Office | 110 |50 | 111 |€ 599.00 | 112 |€ 109 | 113 ||
| 4 | 116 |Apple iPad | 118 |Meeting | 119 |20 | 120 |€ 10.99 | 121 |€ 4,999 | 122 ||
| 5 | 125 |Apple iPhone | 127 |Communication | 128 |10 | 129 |€ 499.00 | 130 |€ 5,999 | 131 ||
| 134 | | Total | 135 |€12,999 | 136 |||||
2 |
3 |
27 |
--------------------------------------------------------------------------------
/src/app/page/lock/lock.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-lock',
5 | templateUrl: './lock.component.html',
6 | styleUrls: ['./lock.component.css']
7 | })
8 | export class LockComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/page/login/login.component.css:
--------------------------------------------------------------------------------
1 | .container{
2 | height: 100%;
3 | position: relative;
4 | z-index: 1;
5 | }
6 | .background{
7 | background: url("../../../assets/img/lock_bg.jpg") no-repeat center center;
8 | -webkit-background-size: cover;
9 | -moz-background-size: cover;
10 | -o-background-size: cover;
11 | background-size: cover;
12 | width: 100%;
13 | height: 100%;
14 | }
15 |
16 | .card{
17 | position: relative;
18 | padding: 20px;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | -webkit-animation-name: card;
23 | -moz-animation-name: card;
24 | -o-animation-name: card;
25 | animation-name: card;
26 | -webkit-animation-duration: 600ms;
27 | -moz-animation-duration: 600ms;
28 | -o-animation-duration: 600ms;
29 | animation-duration: 600ms;
30 | -webkit-animation-fill-mode: forwards;
31 | -moz-animation-fill-mode: forwards;
32 | -o-animation-fill-mode: forwards;
33 | animation-fill-mode: forwards;
34 | }
35 |
36 | @-webkit-keyframes card {
37 | from {top: -40px;}
38 | to {top: 0;}
39 | }
40 |
41 | @keyframes card {
42 | from {top: -40px;}
43 | to {top: 0;}
44 | }
45 |
46 | .card-header{
47 | position: relative;
48 | overflow: hidden;
49 | top: -40px;
50 | width: 100%;
51 | padding: 25px;
52 | border-radius: 3px;
53 | background: linear-gradient(60deg, #ec407a, #d81b60);
54 | box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
55 | display: flex;
56 | flex-direction: column;
57 | align-items: center;
58 | }
59 |
60 | .card-header h4{
61 | font-weight: 400;
62 | color: #fff;
63 | margin-bottom: 25px;
64 | margin-top: 5px;
65 | }
66 |
67 | .social-btns i{
68 | font-size: 21px;
69 | color: #fff;
70 | }
71 |
72 | .social-btns button{
73 | margin: 0 8px;
74 | }
75 |
76 | .tip{
77 | margin-top: -20px;
78 | }
79 |
80 | .form-row, .card-form, .mat-form-field{
81 | width: 100%;
82 | }
83 |
84 | .card-form{
85 | padding: 5px;
86 | }
87 |
88 | .form-row{
89 | position: relative;
90 | display: flex;
91 | align-items: center;
92 | margin-top: 13px;
93 | }
94 |
95 | .form-row i{
96 | position: relative;
97 | top: -5px;
98 | margin-right: 15px;
99 | color: #555;
100 | }
101 |
102 | .card-footer{
103 | margin: 10px;
104 | }
105 |
106 | .card-footer button{
107 | color: #e91e63;
108 | }
109 |
--------------------------------------------------------------------------------
/src/app/page/login/login.component.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
26 |
5 |
7 |
8 |
25 |
9 |
24 |
10 |
23 |
11 | 
12 |
13 |
12 | Tania Andrew
14 |
15 |
16 |
17 |
18 |
19 |
22 |
3 |
47 |
--------------------------------------------------------------------------------
/src/app/page/login/login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-login',
5 | templateUrl: './login.component.html',
6 | styleUrls: ['./login.component.css']
7 | })
8 | export class LoginComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | loginBtn() {
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/page/register/register.component.css:
--------------------------------------------------------------------------------
1 | .container{
2 | height: 100%;
3 | position: relative;
4 | z-index: 1;
5 | }
6 |
7 | .background {
8 | background: url("../../../assets/img/register_bg.jpg") center center;
9 | background-size: cover;
10 | }
11 |
12 | .register-panel{
13 | margin-top: 25px;
14 | }
15 |
16 | .card{
17 | padding: 40px 0 30px;
18 | }
19 |
20 | .card h2{
21 | text-align: center;
22 | }
23 |
24 | .feature{
25 | display: flex;
26 | /*width: 100%;*/
27 | flex: 1;
28 | margin-top: 50px;
29 | }
30 |
31 | .feature .icon{
32 | width: 40px;
33 | }
34 |
35 | .feature .icon i{
36 | font-size: 2.6em;
37 | }
38 |
39 | .feature .desc{
40 | flex: 1;
41 | margin-left: 10px;
42 | }
43 |
44 | .feature .desc p{
45 | margin-top: 17px;
46 | }
47 |
48 | .feature .desc h4{
49 | margin-top: 8px;
50 | }
51 |
52 | .form-part{
53 | display: flex;
54 | flex-direction: column;
55 | align-items: center;
56 | width: 100%;
57 | padding-left: 25px;
58 | }
59 |
60 | .form-part .row{
61 | width: 100%;
62 | display: flex;
63 | position: relative;
64 | margin-top: 17px;
65 | }
66 |
67 | .form-part .row .mat-input-container{
68 | width: 100%;
69 | }
70 |
71 | .form-part .row i{
72 | margin-right: 13px;
73 | position: relative;
74 | top: 8px;
75 | color: #555;
76 | }
77 |
78 | .form-part .socials{
79 | margin-top: 40px;
80 | margin-bottom: 25px;
81 | }
82 |
83 | .form-part .row button{
84 | margin-top: 15px;
85 | }
86 |
--------------------------------------------------------------------------------
/src/app/page/register/register.component.html:
--------------------------------------------------------------------------------
1 |
4 |
46 |
5 |
7 |
8 |
45 |
9 |
44 |
10 |
43 |
11 |
18 | Login
12 | 17 |Or Be Classical
19 |
20 |
39 |
42 |
21 | face
22 |
23 |
24 |
25 |
26 |
27 | email
28 |
29 |
30 |
31 |
32 |
33 | lock_outline
34 |
35 |
36 |
37 |
38 |
2 |
3 |
81 |
--------------------------------------------------------------------------------
/src/app/page/register/register.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-register',
5 | templateUrl: './register.component.html',
6 | styleUrls: ['./register.component.css']
7 | })
8 | export class RegisterComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/services/settings.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, EventEmitter } from '@angular/core';
2 |
3 | @Injectable()
4 | export class SettingsService {
5 | public sidebarImageIndex = 0;
6 | public sidebarImageIndexUpdate: EventEmitter
4 |
80 |
5 |
7 |
8 |
79 |
9 |
78 |
10 |
77 | Register
11 |
12 |
76 |
13 |
41 |
14 |
22 |
15 | timeline
16 |
17 |
18 |
21 | Marking
19 |We've created the marketing campaign of the website. It was a very interesting collaboration.
20 |
23 |
31 |
24 | code
25 |
26 |
27 |
30 | Fully Coded in HTML5
28 |We've developed the website with HTML5 and CSS3. The client has access to the code using GitHub.
29 |
32 |
40 |
33 | group
34 |
35 |
36 |
39 | Built Audience
37 |There is also a Fully Customizable CMS Admin Dashboard for this product.
38 |
42 |
75 |
43 |
48 |
74 | or be classical
49 |
50 | face
51 |
52 |
53 |
54 |
55 |
56 | email
57 |
58 |
59 |
60 |
61 |
62 | lock_outline
63 |
64 |
65 |
66 |
67 |
68 |
70 | I agree to the terms and conditions.
71 |
72 |
73 |
2 |
13 |
--------------------------------------------------------------------------------
/src/app/shared/figurecard/figurecard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-figurecard',
5 | templateUrl: './figurecard.component.html',
6 | styleUrls: ['./figurecard.component.css']
7 | })
8 | export class FigurecardComponent implements OnInit {
9 | @Input() headerIcon: string;
10 | @Input() category: string;
11 | @Input() title: string;
12 | @Input() footerIcon: string;
13 | @Input() footContent: string;
14 | @Input() linearColor: string;
15 | @Input() boxShadow: string;
16 | constructor() { }
17 |
18 | ngOnInit() {
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/shared/footer/footer.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/app/shared/footer/footer.component.css
--------------------------------------------------------------------------------
/src/app/shared/footer/footer.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{ headerIcon }}
4 |
5 |
6 |
9 |
12 | {{ category }}
7 |{{ title }}
8 |2 | footer works! 3 |
4 | -------------------------------------------------------------------------------- /src/app/shared/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.css'] 7 | }) 8 | export class FooterComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/shared/header/header.component.css: -------------------------------------------------------------------------------- 1 | header{ 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | } 6 | 7 | .left *{ 8 | color: #fff; 9 | } 10 | 11 | .right{ 12 | display: flex; 13 | } 14 | 15 | .right a{ 16 | display: flex; 17 | align-items: center; 18 | text-decoration: none; 19 | color: #fff; 20 | cursor: pointer; 21 | margin-right: 25px; 22 | } 23 | 24 | .right p{ 25 | margin-left: 5px; 26 | font-size: 12px; 27 | line-height: normal; 28 | color: #fff; 29 | } 30 | 31 | .right i{ 32 | font-size: 20px; 33 | } 34 | 35 | .router-active{ 36 | background-color: rgba(255,255,255,.1); 37 | padding: 15px 18px 15px 15px; 38 | border-radius: 3px; 39 | } 40 | -------------------------------------------------------------------------------- /src/app/shared/header/header.component.html: -------------------------------------------------------------------------------- 1 |
3 |
5 |
11 | MD Pro Angular
4 |
2 |
14 |
--------------------------------------------------------------------------------
/src/app/shared/imagecard/imagecard.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-imagecard',
5 | templateUrl: './imagecard.component.html',
6 | styleUrls: ['./imagecard.component.css']
7 | })
8 | export class ImagecardComponent implements OnInit {
9 | @Input() title: string;
10 | @Input() desc: string;
11 | @Input() footerTitle: string;
12 | @Input() position: string;
13 | @Input() image: string;
14 | constructor() { }
15 |
16 | ngOnInit() {
17 | }
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/shared/msgiconbtn/msgiconbtn.component.css:
--------------------------------------------------------------------------------
1 | .msg-btn{
2 | position: relative;
3 | }
4 |
5 | .msg-btn i{
6 | font-size: 19px;
7 | color: #555;
8 | }
9 |
10 | .msg-btn span{
11 | position: absolute;
12 | top: 2px;
13 | border: 1px solid #FFF;
14 | right: 2px;
15 | font-size: 9px;
16 | background: #f44336;
17 | color: #FFF;
18 | min-width: 20px;
19 | padding: 0px 5px;
20 | height: 20px;
21 | border-radius: 10px;
22 | text-align: center;
23 | line-height: 19px;
24 | vertical-align: middle;
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/shared/msgiconbtn/msgiconbtn.component.html:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/app/shared/msgiconbtn/msgiconbtn.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-msgiconbtn',
5 | templateUrl: './msgiconbtn.component.html',
6 | styleUrls: ['./msgiconbtn.component.css']
7 | })
8 | export class MsgIconBtnComponent implements OnInit {
9 | @Input() number: string;
10 | @Input() icon: string;
11 | constructor() { }
12 |
13 | ngOnInit() {
14 | }
15 |
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/shared/navbar/navbar.component.css:
--------------------------------------------------------------------------------
1 | .nav-bar{
2 | display: flex;
3 | align-items: center;
4 | justify-content: space-between;
5 | }
6 |
7 | .left-part, .right-part{
8 | display: flex;
9 | align-items: center;
10 | }
11 |
12 | .nav-bar h4{
13 | color: #555;
14 | }
15 |
16 | .mat-mini-fab{
17 | box-shadow: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12);
18 | background-color: #fefefe;
19 | color: #999;
20 | margin-right: 15px;
21 | }
22 |
23 | .mat-mini-fab:hover{
24 | color: #999 !important;
25 | box-shadow: 0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2) !important;
26 | }
27 |
28 | .mat-mini-fab:focus{
29 | color: #999 !important;
30 | }
31 |
32 | .search-btn{
33 | margin: 0 5px 0 7px;
34 | }
35 |
36 | .icon-btn{
37 | font-size: 19px;
38 | color: #555;
39 | }
40 |
41 | .mat-icon-button{
42 | margin-left: 7px;
43 | }
44 |
--------------------------------------------------------------------------------
/src/app/shared/navbar/navbar.component.html:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/src/app/shared/navbar/navbar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-navbar',
5 | templateUrl: './navbar.component.html',
6 | styleUrls: ['./navbar.component.css']
7 | })
8 | export class NavbarComponent implements OnInit {
9 | @Input() title: string;
10 | constructor() {}
11 |
12 | ngOnInit() {
13 | }
14 |
15 | menuClick() {
16 | // document.getElementById('main-panel').style.marginRight = '260px';
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/sidebar/sidebar-routes.config.ts:
--------------------------------------------------------------------------------
1 | export const ROUTES = [
2 | { path: '/dashboard', title: 'Dashboard', icon: 'dashboard', children: null },
3 | { path: 'profile', title: 'User Profile', icon: 'person', children: null },
4 | { path: 'table', title: 'Table List', icon: 'content_paste', children: null },
5 | { path: '#component', id: 'component', title: 'Component', icon: 'apps', children: [
6 | {path: 'components/price-table', title: 'Price Table', icon: 'PT'},
7 | {path: 'components/panels', title: 'Panels', icon: 'P'},
8 | {path: 'components/wizard', title: 'Wizard', icon: 'W'},
9 | ]},
10 | { path: 'notification', title: 'Notification', icon: 'notifications', children: null },
11 | { path: 'alert', title: 'Sweet Alert', icon: 'warning', children: null },
12 | { path: 'settings', title: 'Settings', icon: 'settings', children: null },
13 | ];
14 |
--------------------------------------------------------------------------------
/src/app/sidebar/sidebar.component.css:
--------------------------------------------------------------------------------
1 | .logo{
2 | padding: 25px 0 20px 0;
3 | color: #fff;
4 | font-size: 18px;
5 | text-align: center;
6 | position: relative;
7 | }
8 |
9 | .logo img{
10 | width: 42px;
11 | position: absolute;
12 | top: 16px;
13 | left: 13px;
14 | }
15 |
16 | .divider{
17 | content: '';
18 | position: relative;
19 | height: 1px;
20 | left: 15px;
21 | width: calc(100% - 30px);
22 | background-color: rgba(255, 255, 255, 0.5);
23 | }
24 |
25 | .sidebar-wrapper{
26 | overflow-y: auto;
27 | padding-bottom: 30px;
28 | width: 260px;
29 | position: relative;
30 | height: 100%;
31 | }
32 |
33 | .nav-container{
34 | position: relative;
35 | }
36 |
37 | .nav{
38 | padding-top: 15px;
39 | }
40 |
41 | .nav li{
42 | margin-bottom: 9px;
43 | }
44 |
45 | .nav li a{
46 | display: flex;
47 | align-items: center;
48 | color: rgba(255,255,255,.8);
49 | margin: 0 15px;
50 | border-radius: 3px;
51 | -webkit-transition: all 400ms;
52 | -moz-transition: all 400ms;
53 | -ms-transition: all 400ms;
54 | -o-transition: all 400ms;
55 | transition: all 400ms;
56 | height: 50px;
57 | text-decoration: none;
58 | }
59 |
60 | .nav li a:hover, .parent-active{
61 | background-color: rgba(255,255,255,.1);
62 | }
63 |
64 | .nav li a span{
65 | margin-left: 20px;
66 | }
67 |
68 | .active a, .active a:hover{
69 | /*color: rgba(0,0,0,.6) !important;*/
70 | /*background-color: #fff !important;*/
71 | box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(60, 72, 88, 0.4);
72 | -webkit-transition: all 400ms;
73 | -moz-transition: all 400ms;
74 | -ms-transition: all 400ms;
75 | -o-transition: all 400ms;
76 | transition: all 400ms;
77 | }
78 |
79 | .collapse-a{
80 | position: relative;
81 | }
82 |
83 | .collapse-a .caret{
84 | position: absolute;
85 | right: 21px;
86 | top: 23px;
87 | color: #fff;
88 | -webkit-transform: rotate(180deg);
89 | -moz-transform: rotate(180deg);
90 | -ms-transform: rotate(180deg);
91 | -o-transform: rotate(180deg);
92 | transform: rotate(180deg);
93 | -webkit-transition: all 200ms;
94 | -moz-transition: all 200ms;
95 | -ms-transition: all 200ms;
96 | -o-transition: all 200ms;
97 | transition: all 200ms;
98 | }
99 |
100 | .collapsed .caret{
101 | position: absolute;
102 | right: 21px;
103 | top: 23px;
104 | -webkit-transform: rotate(0deg);
105 | -moz-transform: rotate(0deg);
106 | -ms-transform: rotate(0deg);
107 | -o-transform: rotate(0deg);
108 | transform: rotate(0deg);
109 | }
110 |
111 |
112 |
--------------------------------------------------------------------------------
/src/app/sidebar/sidebar.component.html:
--------------------------------------------------------------------------------
1 |
3 | ![]()
4 |
5 |
6 |
9 |
13 | {{ title }}
7 |{{ desc }}
8 |
2 | 
3 | Dashboard Pro
4 |
5 |
6 |
35 |
--------------------------------------------------------------------------------
/src/app/sidebar/sidebar.component.ts:
--------------------------------------------------------------------------------
1 | import {AfterViewInit, Component, OnInit, OnDestroy} from '@angular/core';
2 | import { SettingsService } from '../services/settings.service';
3 | import { ROUTES } from './sidebar-routes.config';
4 |
5 | @Component({
6 | selector: 'app-sidebar',
7 | templateUrl: './sidebar.component.html',
8 | styleUrls: ['./sidebar.component.css']
9 | })
10 | export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
11 | public color: string;
12 | public menuItems: object;
13 | public activeFontColor: string;
14 | public normalFontColor: string;
15 | public dividerBgColor: string;
16 | constructor(public settingsService: SettingsService) {
17 | this.menuItems = ROUTES;
18 | this.activeFontColor = 'rgba(0,0,0,.6)';
19 | this.normalFontColor = 'rgba(255,255,255,.8)';
20 | this.dividerBgColor = 'rgba(255, 255, 255, 0.5)';
21 | }
22 |
23 | ngOnInit() {
24 | this.color = this.settingsService.getSidebarFilter();
25 | this.settingsService.sidebarFilterUpdate.subscribe((filter: string) => {
26 | this.color = filter;
27 | if (filter === '#fff') {
28 | this.activeFontColor = 'rgba(0,0,0,.6)';
29 | }else {
30 | this.activeFontColor = 'rgba(255,255,255,.8)';
31 | }
32 | });
33 | this.settingsService.sidebarColorUpdate.subscribe((color: string) => {
34 | if (color === '#fff') {
35 | this.normalFontColor = 'rgba(0,0,0,.6)';
36 | this.dividerBgColor = 'rgba(0,0,0,.1)';
37 | }else {
38 | this.normalFontColor = 'rgba(255,255,255,.8)';
39 | this.dividerBgColor = 'rgba(255, 255, 255, 0.5)';
40 | }
41 | });
42 | }
43 | ngOnDestroy() {
44 | this.settingsService.sidebarFilterUpdate.unsubscribe();
45 | this.settingsService.sidebarColorUpdate.unsubscribe();
46 | }
47 |
48 | ngAfterViewInit() {
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/assets/img/angular2-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/angular2-logo.png
--------------------------------------------------------------------------------
/src/assets/img/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/avatar.jpg
--------------------------------------------------------------------------------
/src/assets/img/card-1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/card-1.jpeg
--------------------------------------------------------------------------------
/src/assets/img/card-2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/card-2.jpeg
--------------------------------------------------------------------------------
/src/assets/img/card-3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/card-3.jpeg
--------------------------------------------------------------------------------
/src/assets/img/lock_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/lock_bg.jpg
--------------------------------------------------------------------------------
/src/assets/img/login_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/login_bg.jpg
--------------------------------------------------------------------------------
/src/assets/img/marc.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/marc.jpg
--------------------------------------------------------------------------------
/src/assets/img/register_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/register_bg.jpg
--------------------------------------------------------------------------------
/src/assets/img/sidebar-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/sidebar-1.jpg
--------------------------------------------------------------------------------
/src/assets/img/sidebar-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/sidebar-2.jpg
--------------------------------------------------------------------------------
/src/assets/img/sidebar-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/sidebar-3.jpg
--------------------------------------------------------------------------------
/src/assets/img/sidebar-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wangdicoder/angular-material-dashboard/e40feef059b65997122c73cee3b260aafa29bdaa/src/assets/img/sidebar-4.jpg
--------------------------------------------------------------------------------
/src/assets/js/bootstrap-notify.min.js:
--------------------------------------------------------------------------------
1 | /* Project: Bootstrap Growl = v3.1.3 | Description: Turns standard Bootstrap alerts into "Growl-like" notifications. | Author: Mouse0270 aka Robert McIntosh | License: MIT License | Website: https://github.com/mouse0270/bootstrap-growl */
2 | !function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t("object"==typeof exports?require("jquery"):jQuery)}(function(t){function e(e,i,n){var i={content:{message:"object"==typeof i?i.message:i,title:i.title?i.title:"",icon:i.icon?i.icon:"",url:i.url?i.url:"#",target:i.target?i.target:"-"}};n=t.extend(!0,{},i,n),this.settings=t.extend(!0,{},s,n),this._defaults=s,"-"==this.settings.content.target&&(this.settings.content.target=this.settings.url_target),this.animations={start:"webkitAnimationStart oanimationstart MSAnimationStart animationstart",end:"webkitAnimationEnd oanimationend MSAnimationEnd animationend"},"number"==typeof this.settings.offset&&(this.settings.offset={x:this.settings.offset,y:this.settings.offset}),this.init()}var s={element:"body",position:null,type:"info",allow_dismiss:!0,newest_on_top:!1,showProgressbar:!1,placement:{from:"top",align:"right"},offset:20,spacing:10,z_index:1031,delay:5e3,timer:1e3,url_target:"_blank",mouse_over:null,animate:{enter:"animated fadeInDown",exit:"animated fadeOutUp"},onShow:null,onShown:null,onClose:null,onClosed:null,icon_type:"class",template:''};String.format=function(){for(var t=arguments[0],e=1;e
3 | Dashboard Pro
4 |
26 |
31 | Loading...
27 | 30 |