Skip to content

Commit e393d06

Browse files
simeonoffsimeonoff
authored
Merge pull request #2084 from IgniteUI/sivanova/improve-drop-down-samples
refactor(drop-down): improve drop-down samples
2 parents 600fb24 + 4269105 commit e393d06

20 files changed

+137
-194
lines changed

‎src/app/data-entries/dropdown/drop-down-remote-virtual/drop-down-remote.component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<button igxButton [igxToggleAction]="remoteDropDown" [igxDropDownItemNavigation]="remoteDropDown">Products</button>
1+
<button class="button" igxButton="raised" [igxToggleAction]="remoteDropDown" [igxDropDownItemNavigation]="remoteDropDown">Products</button>
22
<igx-drop-down #remoteDropDown>
33
<div class="drop-down-virtual-wrapper">
44
<igx-drop-down-item
@@ -9,7 +9,7 @@
99
</igx-drop-down-item>
1010
</div>
1111
</igx-drop-down>
12-
<div class="selection">Selected Product: <span
13-
class="selection__name">{{ remoteDropDown.selectedItem?.value }}</span>
12+
<div class="selection">Selected Product:
13+
<span>{{ remoteDropDown.selectedItem?.value }}</span>
1414
</div>
15-
<igx-toast #loadingToast></igx-toast>
15+
<igx-toast #loadingToast></igx-toast>

‎src/app/data-entries/dropdown/drop-down-remote-virtual/drop-down-remote.component.scss

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
.drop-down-virtual-wrapper {
22
overflow-y: hidden;
3-
width: 320px;
3+
width: 260px;
44
height: 320px;
55
}
66

77
:host {
88
display: flex;
99
flex-flow: row;
10-
padding: 4px;
10+
margin: 8px;
1111
}
1212

13-
.selection__name {
14-
font-weight: 800;
13+
.button {
14+
width: 260px;
1515
}
1616

1717
.selection {
1818
line-height: 2.25rem;
19-
font-size: 0.925rem;
2019
padding: 0px 8px;
21-
}
20+
}
21+
22+
.igx-drop-down__item {
23+
padding: 0 0.8rem;
24+
}

‎src/app/data-entries/dropdown/drop-down-virtual/drop-down-virtual.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<button igxButton [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Item Series</button>
1+
<button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Item Series</button>
22
<igx-drop-down #dropdown>
33
<div class="drop-down-virtual-wrapper">
44
<igx-drop-down-item
@@ -9,4 +9,4 @@
99
</igx-drop-down-item>
1010
</div>
1111
</igx-drop-down>
12-
<div class="selection">Selected Model: <span class="selection__name">{{ dropdown.selectedItem?.value.name }}</span></div>
12+
<div class="selection">Selected Model: <span>{{ dropdown.selectedItem?.value.name }}</span></div>

‎src/app/data-entries/dropdown/drop-down-virtual/drop-down-virtual.component.scss

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
.drop-down-virtual-wrapper {
22
overflow: hidden;
33
max-height: 240px;
4-
width: 160px;
4+
width: 180px;
55
}
66

77
:host {
88
display: flex;
99
flex-flow: row;
10-
padding: 4px;
10+
margin: 8px;
1111
}
1212

13-
.selection__name {
14-
font-weight: 800;
13+
.button {
14+
width: 180px;
1515
}
1616

1717
.selection {
1818
line-height: 2.25rem;
19-
font-size: 0.925rem;
2019
padding: 0px 8px;
21-
}
20+
}
21+
22+
23+
.igx-drop-down__item {
24+
padding: 0 0.8rem;
25+
}

‎src/app/data-entries/dropdown/drop-down-virtual/drop-down-virtual.component.ts

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
1+
import { Component } from "@angular/core";
22

33
// tslint:disable:object-literal-sort-keys
44
// tslint:disable-next-line:interface-name
@@ -14,7 +14,7 @@ interface DataItem {
1414
templateUrl: "./drop-down-virtual.component.html",
1515
styleUrls: ["./drop-down-virtual.component.scss"]
1616
})
17-
export class DropDownVirtualComponent implements OnInit {
17+
export class DropDownVirtualComponent {
1818
public items: DataItem[];
1919
public itemHeight = 48;
2020
public itemsMaxHeight = 240;
@@ -40,7 +40,4 @@ export class DropDownVirtualComponent implements OnInit {
4040
}
4141
this.items = itemsCollection;
4242
}
43-
44-
public ngOnInit() {
45-
}
4643
}

‎src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@
1515

1616
<div class="textContainer">
1717
<ng-container *ngIf="text">
18-
<label igxLabel>Clicked menu item: {{ text }}</label>
18+
<label igxLabel>{{ text }}</label>
1919
</ng-container>
2020
</div>
2121

2222
<div class="overlayOutlet" igxOverlayOutlet #outlet="overlay-outlet"></div>
23-
</div>
23+
</div>

‎src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.scss

+3-17
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,12 @@
1-
2-
// in component.scss
3-
@import '~igniteui-angular/lib/core/styles/themes/index';
4-
5-
$custom-drop-down-theme: igx-drop-down-theme(
6-
$border-radius: 4px
7-
);
8-
9-
:host {
10-
::ng-deep {
11-
@include igx-drop-down($custom-drop-down-theme);
12-
}
13-
}
14-
151
.drop-down-wrapper {
162
width: 30%;
17-
margin: 5px 5px;
3+
margin: 8px;
184
min-width: 280px;
5+
box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), 0 1px 1px 0 rgba(0,0,0,.12), 0 2px 1px -1px rgba(0,0,0,.08);
196

207
.textContainer {
218
height: 100px;
22-
box-shadow: igx-elevation($elevations, 1);
239
border-radius: 2px;
24-
padding: 15px;
10+
padding: 16px;
2511
}
2612
}

‎src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ViewEncapsulation } from "@angular/core";
1+
import { Component } from "@angular/core";
22
import {
33
ConnectedPositioningStrategy, HorizontalAlignment,
44
ISelectionEventArgs, NoOpScrollStrategy, VerticalAlignment

‎src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.html

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
<div class="sample-wrapper">
2-
<button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown" >Options</button>
3-
<igx-drop-down #dropdown [width]="'100px'">
4-
<igx-drop-down-item *ngFor="let item of items">
5-
{{ item.field }}
6-
</igx-drop-down-item>
7-
</igx-drop-down>
8-
</div>
1+
<button class="button" igxButton="raised" [igxToggleAction]="dropdown"
2+
[igxDropDownItemNavigation]="dropdown">Options</button>
3+
<igx-drop-down #dropdown>
4+
<igx-drop-down-item *ngFor="let item of items">
5+
{{ item.field }}
6+
</igx-drop-down-item>
7+
</igx-drop-down>

‎src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.scss

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
.sample-wrapper {
2-
padding-left: 10px;
3-
padding-top: 10px;;
4-
}
5-
61
.button {
7-
width:100px;
2+
margin: 8px;
3+
width: 128px;
84
}

‎src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.html

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
<div class="sample-wrapper">
2-
<button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Options</button>
3-
<igx-drop-down #dropdown (onOpening)="dropdown.setSelectedItem(0)" [width]="'100px'">
4-
<igx-drop-down-item *ngFor="let item of items">
5-
{{ item.field }}
6-
</igx-drop-down-item>
7-
</igx-drop-down>
8-
</div>
1+
<button class="button" igxButton="raised" [igxToggleAction]="dropdown"
2+
[igxDropDownItemNavigation]="dropdown">Options</button>
3+
<igx-drop-down #dropdown (onOpening)="dropdown.setSelectedItem(0)">
4+
<igx-drop-down-item *ngFor="let item of items">
5+
{{ item.field }}
6+
</igx-drop-down-item>
7+
</igx-drop-down>

‎src/app/data-entries/dropdown/dropdown-sample-2/dropdown-sample-2.component.scss

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
.sample-wrapper {
2-
padding-left: 10px;
3-
padding-top: 10px;;
4-
}
5-
61
.button {
7-
width:100px;
2+
margin: 8px;
3+
width: 128px;
84
}

‎src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.html

+10-11
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
<div class="sample-wrapper">
2-
<button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Countries</button>
3-
<igx-drop-down #dropdown [width]="'144px'">
4-
<div class="drop-down__scroll-container">
5-
<igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header"
6-
[selected]="item.selected">
7-
{{ item.field }}
8-
</igx-drop-down-item>
9-
</div>
10-
</igx-drop-down>
11-
</div>
1+
<button class="button" igxButton="raised" [igxToggleAction]="dropdown"
2+
[igxDropDownItemNavigation]="dropdown">Countries</button>
3+
<igx-drop-down #dropdown [width]="'160px'">
4+
<div class="drop-down__scroll-container">
5+
<igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header"
6+
[selected]="item.selected">
7+
{{ item.field }}
8+
</igx-drop-down-item>
9+
</div>
10+
</igx-drop-down>

‎src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.scss

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
.sample-wrapper {
2-
padding-left: 10px;
3-
padding-top: 10px;
4-
}
5-
61
.button {
7-
width:100px;
2+
margin: 8px;
3+
width: 160px;
84
}
95

106
.drop-down__scroll-container {

‎src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.html

+13-21
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,13 @@
1-
<div class="sample-wrapper">
2-
<igx-input-group #inputGroup [igxToggleAction]="dropDown" class="input-group">
3-
<input #input class="input" type="text" igxInput [igxDropDownItemNavigation]="dropDown"
4-
readonly= "true"
5-
placeholder="choose an option"
6-
[value]="dropDown.selectedItem?.value"
7-
(keydown.ArrowDown)="openDropDown()"/>
8-
9-
<igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
10-
<igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon>
11-
</igx-suffix>
12-
</igx-input-group>
13-
14-
<span>Selected: {{ dropDown.selectedItem?.value }}</span>
15-
<igx-drop-down #dropDown [width]="'160px'">
16-
<igx-drop-down-item *ngFor="let item of items" [value]="item.field">
17-
{{ item.field }}
18-
</igx-drop-down-item>
19-
</igx-drop-down>
20-
</div>
21-
1+
<igx-input-group #inputGroup [igxToggleAction]="dropDown" class="input-group">
2+
<input #input class="input" type="text" igxInput [igxDropDownItemNavigation]="dropDown" readonly="true"
3+
placeholder="Choose an option" [value]="dropDown.selectedItem?.value" (keydown.ArrowDown)="openDropDown()" />
4+
<igx-suffix igxButton="icon" class="dropdownToggleButton" igxRipple>
5+
<igx-icon>arrow_drop{{ dropDown.collapsed ? '_down' : '_up' }}</igx-icon>
6+
</igx-suffix>
7+
</igx-input-group>
8+
<span>Selected: {{ dropDown.selectedItem?.value }}</span>
9+
<igx-drop-down #dropDown [width]="'180px'">
10+
<igx-drop-down-item *ngFor="let item of items" [value]="item.field">
11+
{{ item.field }}
12+
</igx-drop-down-item>
13+
</igx-drop-down>

‎src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.scss

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
.sample-wrapper {
2-
padding-left: 10px;
1+
:host {
2+
margin: 8px;
33
}
44

55
.input {
66
padding-left: 0.2rem;
77
}
88

99
.input-group {
10-
width: 160px;
10+
width: 180px;
1111
}
1212

1313
.igx-input-group {
@@ -16,6 +16,5 @@
1616

1717
span {
1818
display: inline;
19-
color: #e41c77;
20-
padding-left: 20px;
19+
padding-left: 24px;
2120
}

‎src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.html

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
<div class="sample-wrapper">
2-
<div class='controls-wrapper'>
3-
<button class="button" igxButton="raised" [igxToggleAction]="dropDown" [igxDropDownItemNavigation]="dropDown">Foods</button>
4-
<igx-switch [(ngModel)]="disableMeats">
5-
Disable 'Meats'
6-
</igx-switch>
1+
<div class='controls-wrapper'>
2+
<button class="button" igxButton="raised" [igxToggleAction]="dropDown"
3+
[igxDropDownItemNavigation]="dropDown">Foods</button>
4+
<igx-switch [(ngModel)]="disableMeats">
5+
Disable 'Meats'
6+
</igx-switch>
7+
</div>
8+
<igx-drop-down #dropDown [width]="'160px'">
9+
<div class="drop-down__scroll-container">
10+
<igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name"
11+
[disabled]="disableMeats && foodGroup.name === 'Meats'">
12+
<igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]='food.refNo'>
13+
{{ food.name }}
14+
</igx-drop-down-item>
15+
</igx-drop-down-item-group>
716
</div>
8-
<igx-drop-down #dropDown [width]="'144px'">
9-
<div class="drop-down__scroll-container">
10-
<igx-drop-down-item-group *ngFor="let foodGroup of foods" [label]="foodGroup.name" [disabled]="disableMeats && foodGroup.name === 'Meats'">
11-
<igx-drop-down-item *ngFor="let food of foodGroup.entries" [value]='food.refNo'>
12-
{{ food.name }}
13-
</igx-drop-down-item>
14-
</igx-drop-down-item-group>
15-
</div>
16-
</igx-drop-down>
17-
</div>
17+
</igx-drop-down>

‎src/app/data-entries/dropdown/dropdown-sample-5/dropdown-sample-5.component.scss

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1-
.sample-wrapper {
2-
padding-left: 10px;
3-
padding-top: 10px;
4-
}
5-
61
.button {
7-
width:100px;
2+
width: 160px;
83
}
94

105
.controls-wrapper {
116
display: flex;
127
flex-flow: row;
138
max-width: 450px;
9+
margin: 8px;
1410
}
1511

1612
igx-switch {
@@ -19,4 +15,4 @@ igx-switch {
1915

2016
.drop-down__scroll-container {
2117
max-height: 240px;
22-
}
18+
}

0 commit comments

Comments
 (0)