Skip to content

Commit

Permalink
feat(scroll-indicator): add scroll indicator component (#317)
Browse files Browse the repository at this point in the history
  • Loading branch information
[email protected] authored and GitHub Enterprise committed Jun 8, 2021
1 parent 33be260 commit a3f9151
Show file tree
Hide file tree
Showing 19 changed files with 698 additions and 363 deletions.
74 changes: 38 additions & 36 deletions projects/ng-aquila/documentation/examples/table/table-condensed/table-condensed-example.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,38 @@
<table nxTable condensed>
<thead>
<tr nxTableRow>
<th nxHeaderCell>
Product
</th>
<th nxHeaderCell>
Contract Number
</th>
<th nxHeaderCell>
Description
</th>
<th nxHeaderCell>
Website
</th>
<th nxHeaderCell>
Ending At
</th>
<th nxHeaderCell>
Status
</th>
</tr>
</thead>
<tbody>
<tr nxTableRow *ngFor="let item of tableElements">
<td nxTableCell>{{item.product}}</td>
<td nxTableCell>{{item.contractNumber}}</td>
<td nxTableCell>{{item.desc}}</td>
<td nxTableCell>
<nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
</td>
<td nxTableCell>{{item.endingAt}}</td>
<td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
</tr>
</tbody>
</table>
<nx-swipebar label="Scroll to see more">
<table nxTable condensed>
<thead>
<tr nxTableRow>
<th nxHeaderCell>
Product
</th>
<th nxHeaderCell>
Contract Number
</th>
<th nxHeaderCell>
Description
</th>
<th nxHeaderCell>
Website
</th>
<th nxHeaderCell>
Ending At
</th>
<th nxHeaderCell>
Status
</th>
</tr>
</thead>
<tbody>
<tr nxTableRow *ngFor="let item of tableElements">
<td nxTableCell>{{item.product}}</td>
<td nxTableCell>{{item.contractNumber}}</td>
<td nxTableCell>{{item.desc}}</td>
<td nxTableCell>
<nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
</td>
<td nxTableCell>{{item.endingAt}}</td>
<td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
</tr>
</tbody>
</table>
</nx-swipebar>
84 changes: 43 additions & 41 deletions ...cts/ng-aquila/documentation/examples/table/table-expandable/table-expandable-example.html
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,45 @@
<table nxTable nxExpandableTable #expandableTable="nxExpandableTable" zebra>
<thead>
<tr nxTableRow>
<th nxHeaderCell class="nx-table-cell--toggle" aria-label="Expand row">
<nx-toggle-button [target]="expandableTable"
ariaLabel="Toggle all rows"></nx-toggle-button>
</th>
<th nxHeaderCell>
Product
</th>
<th nxHeaderCell>
Contract number
</th>
<th nxHeaderCell>
Ending date
</th>
<th nxHeaderCell>
Status
</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let item of tableElements">
<nx-swipebar label="Scroll to see more">
<table nxTable nxExpandableTable #expandableTable="nxExpandableTable" zebra>
<thead>
<tr nxTableRow>
<td nxTableCell class="nx-table-cell--toggle">
<nx-toggle-button [target]="expandableRow"
ariaLabel="Toggle {{item.product}} row"></nx-toggle-button>
</td>
<td nxTableCell>{{item.product}}</td>
<td nxTableCell>{{item.contractNumber}}</td>
<td nxTableCell>{{item.endingAt}}</td>
<td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
<th nxHeaderCell class="nx-table-cell--toggle" aria-label="Expand row">
<nx-toggle-button [target]="expandableTable"
ariaLabel="Toggle all rows"></nx-toggle-button>
</th>
<th nxHeaderCell>
Product
</th>
<th nxHeaderCell>
Contract number
</th>
<th nxHeaderCell>
Ending date
</th>
<th nxHeaderCell>
Status
</th>
</tr>
<tr nxExpandableTableRow #expandableRow>
<td nxExpandableTableCell></td>
<td nxExpandableTableCell>
<nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
</td>
<td nxExpandableTableCell colspan="3">{{item.desc}}</td>
</tr>
</ng-container>
</tbody>
</table>
</thead>
<tbody>
<ng-container *ngFor="let item of tableElements">
<tr nxTableRow>
<td nxTableCell class="nx-table-cell--toggle">
<nx-toggle-button [target]="expandableRow"
ariaLabel="Toggle {{item.product}} row"></nx-toggle-button>
</td>
<td nxTableCell>{{item.product}}</td>
<td nxTableCell>{{item.contractNumber}}</td>
<td nxTableCell>{{item.endingAt}}</td>
<td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
</tr>
<tr nxExpandableTableRow #expandableRow>
<td nxExpandableTableCell></td>
<td nxExpandableTableCell>
<nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
</td>
<td nxExpandableTableCell colspan="3">{{item.desc}}</td>
</tr>
</ng-container>
</tbody>
</table>
</nx-swipebar>
7 changes: 1 addition & 6 deletions ...entation/examples/table/table-filter-sort-paginate/table-filter-sort-paginate-example.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
table {
overflow-x: auto;
display: block;
}

.wrapper {
display: flex;
flex-direction: column;
Expand All @@ -11,4 +6,4 @@ table {
.pagination {
margin-top: 24px;
align-self: flex-end;
}
}
51 changes: 27 additions & 24 deletions ...ntation/examples/table/table-filter-sort-paginate/table-filter-sort-paginate-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,33 @@

<p nxCopytext class="nx-margin-bottom-2xs">Matching items: {{currentlyAvailableElements.length}}</p>

<table nxTable nxSort (sortChange)="sortTable($event)">
<thead>
<tr nxTableRow>
<th nxHeaderCell nxSortHeaderCell="product">Product</th>
<th nxHeaderCell nxSortHeaderCell="contractNumber">Contract Number</th>
<th nxHeaderCell>Description</th>
<th nxHeaderCell>Website</th>
<th nxHeaderCell nxSortHeaderCell="endingAt">Ending At</th>
<th nxHeaderCell nxSortHeaderCell="statusText">Status</th>
</tr>
</thead>
<tbody>
<tr nxTableRow *ngFor="let item of currentlyShownPageElements">
<td nxTableCell>{{item.product}}</td>
<td nxTableCell>{{item.contractNumber}}</td>
<td nxTableCell>{{item.desc}}</td>
<td nxTableCell>
<nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
</td>
<td nxTableCell>{{ item.endingAt | date: 'dd/MM/yyyy' }}</td>
<td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
</tr>
</tbody>
</table>
<nx-swipebar label="Scroll to see more">
<table nxTable nxSort (sortChange)="sortTable($event)">
<thead>
<tr nxTableRow>
<th nxHeaderCell nxSortHeaderCell="product">Product</th>
<th nxHeaderCell nxSortHeaderCell="contractNumber">Contract Number</th>
<th nxHeaderCell>Description</th>
<th nxHeaderCell>Website</th>
<th nxHeaderCell nxSortHeaderCell="endingAt">Ending At</th>
<th nxHeaderCell nxSortHeaderCell="statusText">Status</th>
</tr>
</thead>
<tbody>
<tr nxTableRow *ngFor="let item of currentlyShownPageElements">
<td nxTableCell>{{item.product}}</td>
<td nxTableCell>{{item.contractNumber}}</td>
<td nxTableCell>{{item.desc}}</td>
<td nxTableCell>
<nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
</td>
<td nxTableCell>{{ item.endingAt | date: 'dd/MM/yyyy' }}</td>
<td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
</tr>
</tbody>
</table>
</nx-swipebar>


<nx-pagination
class="pagination"
Expand Down
98 changes: 50 additions & 48 deletions ...-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.html
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,53 @@
<table nxTable condensed class="nx-margin-bottom-xs">
<thead>
<tr nxTableRow>
<th nxHeaderCell>Assignment/Case ID</th>
<th nxHeaderCell>Gross Amount</th>
<th nxHeaderCell>Ending At</th>
<th nxHeaderCell>Status</th>
<th nxHeaderCell></th>
</tr>
</thead>
<tbody>
<tr nxTableRow *ngFor="let control of formArray.controls; index as i" [formGroup]="getFormGroup(i)">
<td nxTableCell>
<nx-formfield>
<input nxInput formControlName="id"/>
</nx-formfield>
</td>
<td nxTableCell>
<nx-formfield>
<input nxInput formControlName="amount"/>
</nx-formfield>
</td>
<td nxTableCell class="date-cell">
<nx-formfield>
<input nxDatefield nxInput [nxDatepicker]="myDatepicker" formControlName="endingAt" />

<nx-datepicker-toggle [for]="myDatepicker" nxFormfieldSuffix></nx-datepicker-toggle>
<nx-datepicker #myDatepicker></nx-datepicker>
</nx-formfield>
</td>
<td nxTableCell class="status-cell">
<nx-formfield>
<nx-dropdown formControlName="status">
<nx-dropdown-item nxValue="open"></nx-dropdown-item>
<nx-dropdown-item nxValue="processing"></nx-dropdown-item>
<nx-dropdown-item nxValue="accepted"></nx-dropdown-item>
<nx-dropdown-item nxValue="rejected"></nx-dropdown-item>
</nx-dropdown>
</nx-formfield>
</td>
<td nxTableCell>
<button nxPlainButton (click)="removeRow(i)" aria-label="Remove row">
<nx-icon name="trash-o"></nx-icon>
</button>
</td>
</tr>
</tbody>
</table>
<nx-swipebar label="Scroll to see more">
<table nxTable condensed class="nx-margin-bottom-xs">
<thead>
<tr nxTableRow>
<th nxHeaderCell>Assignment/Case ID</th>
<th nxHeaderCell>Gross Amount</th>
<th nxHeaderCell>Ending At</th>
<th nxHeaderCell>Status</th>
<th nxHeaderCell></th>
</tr>
</thead>
<tbody>
<tr nxTableRow *ngFor="let control of formArray.controls; index as i" [formGroup]="getFormGroup(i)">
<td nxTableCell>
<nx-formfield>
<input nxInput formControlName="id"/>
</nx-formfield>
</td>
<td nxTableCell>
<nx-formfield>
<input nxInput formControlName="amount"/>
</nx-formfield>
</td>
<td nxTableCell class="date-cell">
<nx-formfield>
<input nxDatefield nxInput [nxDatepicker]="myDatepicker" formControlName="endingAt" />

<nx-datepicker-toggle [for]="myDatepicker" nxFormfieldSuffix></nx-datepicker-toggle>
<nx-datepicker #myDatepicker></nx-datepicker>
</nx-formfield>
</td>
<td nxTableCell class="status-cell">
<nx-formfield>
<nx-dropdown formControlName="status">
<nx-dropdown-item nxValue="open"></nx-dropdown-item>
<nx-dropdown-item nxValue="processing"></nx-dropdown-item>
<nx-dropdown-item nxValue="accepted"></nx-dropdown-item>
<nx-dropdown-item nxValue="rejected"></nx-dropdown-item>
</nx-dropdown>
</nx-formfield>
</td>
<td nxTableCell>
<button nxPlainButton (click)="removeRow(i)" aria-label="Remove row">
<nx-icon name="trash-o"></nx-icon>
</button>
</td>
</tr>
</tbody>
</table>
</nx-swipebar>

<button nxPlainButton (click)="addRow()">
<nx-icon name="plus" class="nx-margin-right-2xs"></nx-icon>Add row
Expand Down
Loading

0 comments on commit a3f9151

Please sign in to comment.