Skip to content

Fix crm search box and alignment #2351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 12, 2020
Merged

Fix crm search box and alignment #2351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d537690
Fix crm search box and alignment
zdrawku Nov 12, 2020
b37f2d3
Toolbar actions alignment fix
zdrawku Nov 12, 2020
01ae72e
Merge branch 'vNext' into update-to-ng-11
zdrawku Nov 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 51 additions & 53 deletions projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,66 +2,64 @@
<igx-grid #grid1 igxPreventDocumentScroll id="grid1" [data]="localData" [height]="'430px'" [width]="'100%'"
[rowSelection]="selectionMode" displayDensity="cosy" rowHeight="50" [allowFiltering]="true">
<igx-grid-toolbar>
<igx-grid-toolbar-title>
<div class="crm-toolbar-template">
<div class="crm-sample-toolbar__title">
<span class="logo-propeller">
<img src="assets/images/grid/propeller-logo.svg" class="animated-fan" />
</span>
<span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
</div>
<div class="sample-flex-container">
<igx-input-group type="search" class="searchInputGroup">
<igx-prefix>
<igx-icon class="prefixIcon" *ngIf="searchText.length == 0">search</igx-icon>
<igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear
</igx-icon>
</igx-prefix>

<input #search1 id="search1" class="searchInput" igxInput placeholder="Search"
[(ngModel)]="searchText" (ngModelChange)="grid1.findNext(searchText, caseSensitive)"
(keydown)="searchKeyDown($event)" />

<igx-suffix *ngIf="searchText.length > 0">
<div class="resultsText" *ngIf="grid1.lastSearchInfo">
<span *ngIf="grid1.lastSearchInfo.matchInfoCache.length > 0">
{{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{
grid1.lastSearchInfo.matchInfoCache.length }} results
</span>
<span *ngIf="grid1.lastSearchInfo.matchInfoCache.length == 0">
No results
</span>
</div>
<div class="caseSensitiveButton">
<button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
[igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
<igx-icon class="caseSensitiveIcon" fontSet="material">text_fields</igx-icon>
</button>
</div>
<div class="searchButtons">
<button igxButton="icon" igxRipple [igxRippleCentered]="true"
(click)="grid1.findPrev(searchText, caseSensitive)">
<igx-icon fontSet="material">navigate_before</igx-icon>
</button>
<button igxButton="icon" igxRipple [igxRippleCentered]="true"
(click)="grid1.findNext(searchText, caseSensitive)">
<igx-icon fontSet="material">navigate_next</igx-icon>
</button>
</div>
</igx-suffix>
</igx-input-group>
</div>
</div>
</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
<igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
</igx-grid-toolbar-actions>
<div class="crm-toolbar-template">
<div class="crm-sample-toolbar__title">
<span class="logo-propeller">
<img src="assets/images/grid/propeller-logo.svg" class="animated-fan" />
</span>
<span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
</div>
<div class="sample-flex-container">
<igx-input-group type="search" class="searchInputGroup">
<igx-prefix>
<igx-icon class="prefixIcon" *ngIf="searchText.length == 0">search</igx-icon>
<igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear
</igx-icon>
</igx-prefix>

<input #search1 id="search1" class="searchInput" igxInput placeholder="Search"
[(ngModel)]="searchText" (ngModelChange)="grid1.findNext(searchText, caseSensitive)"
(keydown)="searchKeyDown($event)" />

<igx-suffix *ngIf="searchText.length > 0">
<div class="resultsText" *ngIf="grid1.lastSearchInfo">
<span *ngIf="grid1.lastSearchInfo.matchInfoCache.length > 0">
{{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{
grid1.lastSearchInfo.matchInfoCache.length }} results
</span>
<span *ngIf="grid1.lastSearchInfo.matchInfoCache.length == 0">
No results
</span>
</div>
<div class="caseSensitiveButton">
<button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
[igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
<igx-icon class="caseSensitiveIcon" fontSet="material">text_fields</igx-icon>
</button>
</div>
<div class="searchButtons">
<button igxButton="icon" igxRipple [igxRippleCentered]="true"
(click)="grid1.findPrev(searchText, caseSensitive)">
<igx-icon fontSet="material">navigate_before</igx-icon>
</button>
<button igxButton="icon" igxRipple [igxRippleCentered]="true"
(click)="grid1.findNext(searchText, caseSensitive)">
<igx-icon fontSet="material">navigate_next</igx-icon>
</button>
</div>
</igx-suffix>
</igx-input-group>
</div>
</div>

</igx-grid-toolbar>




<igx-column field="id" header="Customer Number" width="172" [pinned]="true" [hasSummary]="false"
[resizable]="true" [hidden]="true" [movable]="true">
</igx-column>
Expand Down
8 changes: 6 additions & 2 deletions projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,15 +132,15 @@
align-self: center;
justify-content: flex-end;
max-width: 500px;
width: 50%
width: 70%
}

.crm-sample-toolbar__title {
margin-right: rem(16px);
display: flex;
align-items: center;
justify-self: flex-start;
width: 50%;
width: 30%;
}

.crm-sample-toolbar__ellipsis {
Expand Down Expand Up @@ -352,6 +352,10 @@
width: 1rem;
height: 1rem;
}

.igx-grid-toolbar__title {
max-width: 68ch;
}
}


Expand Down
10 changes: 4 additions & 6 deletions src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,11 @@
<igx-grid igxPreventDocumentScroll #grid1 id="grid1" [data]="data" [autoGenerate]="false" height="400px" width="700px">
<igx-grid-toolbar>
<igx-grid-toolbar-title>Athletes</igx-grid-toolbar-title>

<button igxButton="flat" igxRipple (click)="grid1.clearSort()">
<igx-icon fontSet="material">clear</igx-icon>
Clear Sort
</button>

<igx-grid-toolbar-actions>
<button igxButton="flat" igxRipple (click)="grid1.clearSort()">
<igx-icon fontSet="material">clear</igx-icon>
Clear Sort
</button>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
Expand Down
8 changes: 4 additions & 4 deletions ...erarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-custom.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<igx-hierarchical-grid igxPreventDocumentScroll #hierarchicalGrid class="hgrid" [data]="data" height="500px" width="100%" rowHeight="65px">
<igx-grid-toolbar>
<igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
<button igxButton="flat" igxRipple (click)="hierarchicalGrid.clearSort()">
<igx-icon fontSet="material">clear</igx-icon>
Clear Sort
</button>
<igx-grid-toolbar-actions>
<button igxButton="flat" igxRipple (click)="hierarchicalGrid.clearSort()">
<igx-icon fontSet="material">clear</igx-icon>
Clear Sort
</button>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
Expand Down
10 changes: 4 additions & 6 deletions src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@
[autoGenerate]="false" height="400px" width="900px">
<igx-grid-toolbar>
<igx-grid-toolbar-title>Tree Grid Toolbar</igx-grid-toolbar-title>

<button igxButton="flat" igxRipple (click)="treeGrid.clearSort()">
<igx-icon fontSet="material">clear</igx-icon>
Clear Sort
</button>

<igx-grid-toolbar-actions>
<button igxButton="flat" igxRipple (click)="treeGrid.clearSort()">
<igx-icon fontSet="material">clear</igx-icon>
Clear Sort
</button>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
Expand Down