Skip to content

Commit 2e90dbf

Browse files
franckevvafranckevva
committed
feat(select): used material-angular-select
1 parent 0cb9b66 commit 2e90dbf

11 files changed

+96
-128
lines changed

‎angular.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,13 @@
1717
"tsConfig": "src/tsconfig.app.json",
1818
"polyfills": "src/polyfills.ts",
1919
"assets": [
20-
"src/assets",
20+
"src/assets"
2121
],
2222
"styles": [
2323
"src/theme/styles.scss"
2424
],
2525
"scripts": [
26-
"node_modules/material-design-lite/material.js",
27-
"node_modules/getmdl-select/getmdl-select.min.js"
26+
"node_modules/material-design-lite/material.js"
2827
]
2928
},
3029
"configurations": {

‎package.json

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@
2424
},
2525
"pre-commit": "lint",
2626
"private": true,
27+
"repository": {
28+
"type": "git",
29+
"url": "https://github.com/CreativeIT/material-angular-dashboard"
30+
},
31+
"bugs": {
32+
"url": "https://github.com/CreativeIT/material-angular-dashboard/issues"
33+
},
34+
"homepage": "https://github.com/CreativeIT/material-angular-dashboard",
2735
"dependencies": {
2836
"@angular/animations": "7.2.1",
2937
"@angular/common": "7.2.1",
@@ -38,8 +46,8 @@
3846
"classlist.js": "1.1.20150312",
3947
"core-js": "2.5.6",
4048
"d3": "3.5.17",
41-
"getmdl-select": "2.0.1",
4249
"material-design-lite": "1.3.0",
50+
"material-angular-dashboard": "1.0.0",
4351
"nvd3": "1.8.6",
4452
"rxjs": "6.3.3",
4553
"zone.js": "0.8.28"

‎src/app/pages/forms/employer-form/employer-form.component.html

Lines changed: 30 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,12 @@ <h3>Personal data</h3>
2626
<label class="mdl-textfield__label" for="birthday">Birthday</label>
2727
</div>
2828

29-
<div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
30-
<input class="mdl-textfield__input" value="Male" type="text" id="gender" readonly tabIndex="-1"/>
31-
32-
<label class="mdl-textfield__label" for="gender">Gender</label>
33-
34-
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="gender">
35-
<li class="mdl-menu__item">Male</li>
36-
<li class="mdl-menu__item">Female</li>
37-
</ul>
38-
39-
<label for="gender">
40-
<i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
41-
</label>
29+
<div class="mdl-cell mdl-cell--6-col">
30+
<material-angular-select [data]="['Male', 'Female']"
31+
[label]="'Gender'"
32+
[name]="'gender'"
33+
[currentValue]="'Male'"
34+
[fixHeight]="true"></material-angular-select>
4235
</div>
4336
</div>
4437
</div>
@@ -62,19 +55,12 @@ <h3>Employment</h3>
6255
<input class="mdl-textfield__input" type="text" value="Lead developer" id="position"/>
6356
<label class="mdl-textfield__label" for="position">Position</label>
6457
</div>
65-
<div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
66-
<input class="mdl-textfield__input" value="Senior" type="text" id="qualification" readonly tabIndex="-1"/>
67-
<label class="mdl-textfield__label" for="qualification">Qualification</label>
68-
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown"
69-
for="qualification">
70-
<li class="mdl-menu__item">Young Padawan</li>
71-
<li class="mdl-menu__item">Junior</li>
72-
<li class="mdl-menu__item">Middle</li>
73-
<li class="mdl-menu__item">Senior</li>
74-
</ul>
75-
<label for="qualification">
76-
<i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
77-
</label>
58+
<div class="mdl-cell mdl-cell--6-col">
59+
<material-angular-select [data]="qualifications"
60+
[label]="'Qualification'"
61+
[name]="'qualification'"
62+
[currentValue]="'Junior'"
63+
[fixHeight]="true"></material-angular-select>
7864
</div>
7965
</div>
8066

@@ -107,16 +93,10 @@ <h3>Contacts</h3>
10793
</div>
10894
</div>
10995

110-
<div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
111-
<input class="mdl-textfield__input" value="Mobile" type="text" id="phone_type" readonly tabIndex="-1"/>
112-
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="phone_type">
113-
<li class="mdl-menu__item">Mobile</li>
114-
<li class="mdl-menu__item">Home</li>
115-
<li class="mdl-menu__item">Work</li>
116-
</ul>
117-
<label for="phone_type">
118-
<i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
119-
</label>
96+
<div class="mdl-cell mdl-cell--3-col">
97+
<material-angular-select [data]="['Mobile', 'Home', 'Work']"
98+
[name]="'phone_type'"
99+
[currentValue]="'Mobile'"></material-angular-select>
120100
</div>
121101
</div>
122102

@@ -130,15 +110,10 @@ <h3>Contacts</h3>
130110
</div>
131111
</div>
132112

133-
<div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
134-
<input class="mdl-textfield__input" value="Personal" type="text" id="skype_type" readonly tabIndex="-1"/>
135-
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="skype_type">
136-
<li class="mdl-menu__item">Personal</li>
137-
<li class="mdl-menu__item">Work</li>
138-
</ul>
139-
<label for="skype_type">
140-
<i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
141-
</label>
113+
<div class="mdl-cell mdl-cell--3-col">
114+
<material-angular-select [data]="['Personal', 'Work']"
115+
[name]="'skype_type'"
116+
[currentValue]="'Personal'"></material-angular-select>
142117
</div>
143118
</div>
144119

@@ -152,15 +127,10 @@ <h3>Contacts</h3>
152127
</div>
153128
</div>
154129

155-
<div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
156-
<input class="mdl-textfield__input" value="Work" type="text" id="email_type" readonly tabIndex="-1"/>
157-
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="email_type">
158-
<li class="mdl-menu__item">Personal</li>
159-
<li class="mdl-menu__item">Work</li>
160-
</ul>
161-
<label for="email_type">
162-
<i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
163-
</label>
130+
<div class="mdl-cell mdl-cell--3-col">
131+
<material-angular-select [data]="['Personal', 'Work']"
132+
[name]="'email_type'"
133+
[currentValue]="'Work'"></material-angular-select>
164134
</div>
165135
</div>
166136

@@ -174,16 +144,10 @@ <h3>Contacts</h3>
174144
</div>
175145
</div>
176146

177-
<div class="mdl-cell mdl-cell--3-col mdl-textfield mdl-js-textfield getmdl-select">
178-
<input class="mdl-textfield__input" value="Home" type="text" id="address_type" readonly
179-
tabIndex="-1"/>
180-
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="address_type">
181-
<li class="mdl-menu__item">Home</li>
182-
<li class="mdl-menu__item">Work</li>
183-
</ul>
184-
<label for="address_type">
185-
<i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
186-
</label>
147+
<div class="mdl-cell mdl-cell--3-col">
148+
<material-angular-select [data]="['Home', 'Work']"
149+
[name]="'address_type'"
150+
[currentValue]="'Home'"></material-angular-select>
187151
</div>
188152
</div>
189153
</div>
@@ -202,7 +166,8 @@ <h3>General skills</h3>
202166
<input #isInfoReliable type="checkbox" id="isInfoReliable" class="mdl-checkbox__input" required/>
203167
<span class="mdl-checkbox__label">Entered information is reliable</span>
204168
</label>
205-
<button [disabled]="!isInfoReliable.checked" id="submit_button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
169+
<button [disabled]="!isInfoReliable.checked" id="submit_button"
170+
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
206171
Submit
207172
</button>
208173
</div>

‎src/app/pages/forms/employer-form/employer-form.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ import { Component, HostBinding } from '@angular/core';
77
})
88
export class EmployerFormComponent {
99
@HostBinding('class.employer-form') private readonly employerForm = true;
10+
public qualifications = ['Young Padawan', 'Junior', 'Middle', 'Senior'];
1011
}

‎src/app/pages/forms/forms.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
33
import { FormsModule as NgFormsModule } from '@angular/forms';
4+
import { MaterialAngularSelectModule } from 'material-angular-select';
45

56
import { ThemeModule } from 'theme';
67

@@ -12,6 +13,7 @@ import { FormsComponent } from './forms.component';
1213
CommonModule,
1314
ThemeModule,
1415
NgFormsModule,
16+
MaterialAngularSelectModule,
1517
],
1618
declarations: [
1719
FormsComponent,

‎src/app/pages/ui/forms/forms.component.html

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -68,22 +68,10 @@ <h5 class="mdl-card__title-text text-color--white">PROFILE INFO</h5>
6868
<input class="mdl-textfield__input" type="text" value="BobbyK@darkboard.io" id="profile-floating-e-mail">
6969
<label class="mdl-textfield__label" for="floating-e-mail">Email</label>
7070
</div>
71-
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select full-size">
72-
<input class="mdl-textfield__input" type="text" id="location" readonly tabIndex="-1"/>
73-
<input type="hidden" value="" name="location">
74-
<label class="mdl-textfield__label" for="location">Location</label>
75-
76-
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu dark_dropdown" for="location">
77-
<li class="mdl-menu__item">Minsk</li>
78-
<li class="mdl-menu__item">Berlin</li>
79-
<li class="mdl-menu__item">Moscow</li>
80-
<li class="mdl-menu__item">NYC</li>
81-
</ul>
82-
83-
<label for="location">
84-
<i class="mdl-icon-toggle__label material-icons">arrow_drop_down</i>
85-
</label>
86-
</div>
71+
<material-angular-select [data]="countries"
72+
[name]="'location'"
73+
[label]="'Location'"
74+
[currentValue]="locationValue"></material-angular-select>
8775
</div>
8876
</div>
8977
</form>

‎src/app/pages/ui/forms/forms.component.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,14 @@ import { UpgradableComponent } from 'theme/components/upgradable';
77
templateUrl: './forms.component.html',
88
styleUrls: ['./forms.component.scss'],
99
})
10-
export class FormsComponent extends UpgradableComponent implements AfterViewInit {
10+
export class FormsComponent extends UpgradableComponent {
1111
@HostBinding('class.mdl-grid') private readonly mdlGrid = true;
1212
@HostBinding('class.mdl-cell') private readonly mdlCell = true;
1313
@HostBinding('class.mdl-cell--12-col-desktop') private readonly mdlCell12ColDesktop = true;
1414
@HostBinding('class.mdl-cell--12-col-tablet') private readonly mdlCell12ColTablet = true;
1515
@HostBinding('class.mdl-cell--4-col-phone') private readonly mdlCell4ColPhone = true;
1616
@HostBinding('class.mdl-cell--top') private readonly mdlCellTop = true;
1717

18-
public ngAfterViewInit() {
19-
getmdlSelect.init('.getmdl-select');
20-
componentHandler.upgradeDom();
21-
}
18+
public readonly countries = ['Minsk', 'Berlin', 'Moscow', 'NYC'];
19+
public locationValue = 'Berlin';
2220
}

‎src/app/pages/ui/ui.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { CommonModule } from '@angular/common';
22
import { NgModule } from '@angular/core';
3+
import { MaterialAngularSelectModule } from 'material-angular-select';
34

45
import { ThemeModule } from 'theme';
56

@@ -19,6 +20,7 @@ import { UIRoutingModule } from './ui-routing.module';
1920
UIRoutingModule,
2021
ThemeModule,
2122
ComponentsModule,
23+
MaterialAngularSelectModule,
2224
],
2325
declarations: [
2426
ButtonsComponent,

‎src/theme/scss/getmdl-select.scss

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎src/theme/scss/material-angular-select.scss

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
material-angular-select {
2+
.material-angular-select {
3+
width: 100%;
4+
5+
.mdl-textfield__input:focus {
6+
outline: none;
7+
}
8+
9+
.is-item-hover {
10+
background-color: $default-item-hover-bg-color;
11+
}
12+
13+
&.is-focused {
14+
.mdl-icon-toggle__label {
15+
color: $color-primary;
16+
}
17+
}
18+
19+
.mdl-menu__item {
20+
color: $text-color-primary;
21+
}
22+
23+
// custom scroll
24+
::-webkit-scrollbar {
25+
width: 0.5rem;
26+
height: 0.5rem;
27+
}
28+
29+
::-webkit-scrollbar-thumb {
30+
background: $scrollbar-thumb;
31+
cursor: pointer;
32+
}
33+
34+
::-webkit-scrollbar-track {
35+
background: $scrollbar-track;
36+
}
37+
38+
.mdl-icon-toggle__label {
39+
color: $text-color-primary;
40+
}
41+
}
42+
}

‎src/theme/styles.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
@import './helpers';
22
@import '~nvd3/build/nv.d3.css';
33
@import '~material-design-lite/src/material-design-lite.scss';
4-
@import '~getmdl-select/src/scss/getmdl-select.scss';
5-
@import './scss/getmdl-select';
4+
@import './scss/material-angular-select';
65
@import './scss/layout';
76
@import './scss/chip';
87
@import './scss/badge';

0 commit comments

Comments
 (0)