Skip to content

Commit b4b709a

Browse files
committed
style(drop-down): improve drop-down samples
1 parent 8a10769 commit b4b709a

19 files changed

+79
-108
lines changed
Lines changed: 4 additions & 4 deletions
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>
Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.drop-down-virtual-wrapper {
22
overflow-y: hidden;
3-
width: 320px;
3+
width: 260px;
44
height: 320px;
55
}
66

@@ -10,12 +10,15 @@
1010
padding: 4px;
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

Lines changed: 2 additions & 2 deletions
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>
Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.drop-down-virtual-wrapper {
22
overflow: hidden;
33
max-height: 240px;
4-
width: 160px;
4+
width: 180px;
55
}
66

77
:host {
@@ -10,12 +10,16 @@
1010
padding: 4px;
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

Lines changed: 2 additions & 5 deletions
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

Lines changed: 2 additions & 2 deletions
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>
Lines changed: 3 additions & 17 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="sample-wrapper">
22
<button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown" >Options</button>
3-
<igx-drop-down #dropdown [width]="'100px'">
3+
<igx-drop-down #dropdown>
44
<igx-drop-down-item *ngFor="let item of items">
55
{{ item.field }}
66
</igx-drop-down-item>
Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
.sample-wrapper {
2-
padding-left: 10px;
3-
padding-top: 10px;;
2+
margin: 8px;
43
}
54

65
.button {
7-
width:100px;
6+
width: 128px;
87
}

0 commit comments

Comments
 (0)