Skip to content
This repository was archived by the owner on Aug 7, 2020. It is now read-only.

Develop #359

Merged
merged 4 commits into from
Feb 13, 2019
Merged

Develop #359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
88ff3ea
Merge pull request #352 from ovh-ux/master
AxelPeter Jan 21, 2019
b3763a5
fix(oui-file): fix input hidden error from ng 1.7.6 (#353)
AxelPeter Feb 4, 2019
d736ebd
Merge pull request #356 from ovh-ux/master
AxelPeter Feb 4, 2019
11c3c47
fix(oui-pagination): add input search when huge amount of pages (#358)
AxelPeter Feb 13, 2019
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
9 changes: 6 additions & 3 deletions packages/oui-file/src/file.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
<!-- Controls -->
<input type="hidden"
<!-- Using [hidden] cause errors with ng 1.7.6, -->
<!-- We use [text] hidden by css to avoid it -->
<input class="oui-file__input oui-file__input_hidden" type="text"
autocomplete="off"
ng-attr-id="{{::$ctrl.id}}"
ng-attr-name="{{::$ctrl.name}}"
ng-disabled="$ctrl.disabled"
ng-required="$ctrl.required"
ng-model="$ctrl.model">
<input class="oui-file__input" type="file"
<input class="oui-file__input oui-file__input_file" type="file"
ng-if="::!$ctrl.attachments"
ng-attr-id="{{::$ctrl.selectorId}}"
ng-attr-accept="{{::$ctrl.accept}}"
ng-attr-size="{{::$ctrl.size}}"
ng-disabled="$ctrl.disabled"
tabindex="-1">
<input class="oui-file__input" type="file"
<input class="oui-file__input oui-file__input_file" type="file"
ng-if="::$ctrl.attachments"
ng-attr-id="{{::$ctrl.selectorId}}"
ng-attr-accept="{{::$ctrl.accept}}"
Expand Down
4 changes: 2 additions & 2 deletions packages/oui-file/src/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ describe("ouiFile", () => {

const getAttachments = (element) => element[0].querySelector(".oui-file-attachments");
const getDropArea = (element) => element[0].querySelector(".oui-file-droparea");
const getInputFile = (element) => element[0].querySelector("input[type='file']");
const getInputHidden = (element) => element[0].querySelector("input[type='hidden']");
const getInputFile = (element) => element[0].querySelector(".oui-file__input_file");
const getInputHidden = (element) => element[0].querySelector(".oui-file__input_hidden");
const getMultipleSelector = (element) => element[0].querySelector(".oui-file-multiple");
const getCustomSelector = (element) => element[0].querySelector(".oui-file-selector");

Expand Down
19 changes: 15 additions & 4 deletions packages/oui-pagination/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,16 @@

## Usage

### One page

```html:preview
<oui-pagination
current-offset="1"
page-size="100"
total-items="12">
</oui-pagination>
```

### A few pages

```html:preview
Expand All @@ -25,13 +35,14 @@
</oui-pagination>
```

### One page
### Huge amount of pages

```html:preview
<oui-pagination
current-offset="1"
page-size="100"
total-items="12">
current-offset="$ctrl.pagination3.offset"
page-size="$ctrl.pagination3.pageSize"
total-items="$ctrl.pagination3.totalItems"
on-change="$ctrl.onChange('pagination3', $event)">
</oui-pagination>
```

Expand Down
26 changes: 22 additions & 4 deletions packages/oui-pagination/src/pagination.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import clamp from "lodash/clamp";
import range from "lodash/range";

export default class {
constructor ($attrs, ouiPaginationConfiguration) {
"ngInject";
Expand Down Expand Up @@ -35,17 +38,23 @@ export default class {

processPaginationChange () {
this.pageCount = this.getPageCount();
this.pageRange = this.getPageRange();
this.currentPage = this.getCurrentPage();
this.inputPage = this.getCurrentPage(); // Update model for input
}

processTranslations () {
this.translations = Object.assign({}, this.config.translations);
this.translations = { ...this.config.translations };
this.translations.ofNResults = this.translations.ofNResults
.replace("{{totalItems}}", this.totalItems);
this.translations.currentPageOfPageCount = this.translations.currentPageOfPageCount
.replace("{{currentPage}}", this.currentPage)
.replace("{{pageCount}}", this.pageCount);

// For huge amount of pages, we replaced "{{currentPage}}" by a number input
const translations = { ...this.config.translations };
this.translations.inputPageOfPageCount = translations.currentPageOfPageCount
.replace("{{pageCount}}", this.pageCount)
.split("{{currentPage}}");
}

getPageAriaLabel (page) {
Expand All @@ -71,9 +80,19 @@ export default class {

onPageChange (page) {
this.currentOffset = (this.pageSize * (page - 1)) + 1;
this.currentPage = this.getCurrentPage();
this.inputPage = this.getCurrentPage(); // Update model for input
this._onChange();
}

checkPageRange (page) {
const currentPage = Number.isInteger(page) ?
clamp(page, 1, this.pageCount) :
this.currentPage;

this.onPageChange(currentPage);
}

getLastItemOffset () {
return Math.min(this.currentOffset + this.pageSize - 1, this.totalItems);
}
Expand All @@ -87,8 +106,7 @@ export default class {
}

getPageRange () {
return Array(...{ length: this.getPageCount() })
.map((item, index) => index + 1);
return range(1, this.getPageCount() + 1);
}

_onChange () {
Expand Down
60 changes: 43 additions & 17 deletions packages/oui-pagination/src/pagination.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,20 @@

<div class="oui-pagination__selector"
ng-if="$ctrl.totalItems > $ctrl.pageSize">
<button type="button" class="oui-button oui-button_secondary oui-button_icon-only oui-button_small-width"
type="button"
<button type="button"
class="oui-button oui-button_secondary oui-button_icon-only oui-button_small-width"
ng-attr-aria-label="{{ ::$ctrl.translations.previousPage }}"
ng-disabled="$ctrl.currentPage === 1"
ng-click="$ctrl.onPageChange($ctrl.getCurrentPage() - 1)">
<span class="oui-icon oui-icon-chevron-left" aria-hidden="true"></span>
</button>

<!-- Buttons (<= 5 pages) -->
<div class="oui-button-group"
ng-if="$ctrl.pageCount <= 5">
<button type="button"
class="oui-button oui-button_small-width"
ng-repeat="page in $ctrl.pageRange track by page"
ng-repeat="page in $ctrl.getPageRange() track by page"
ng-class="{
'oui-button_primary oui-pagination-button_selected': page === $ctrl.currentPage,
'oui-button_secondary': page != $ctrl.currentPage
Expand All @@ -47,30 +49,54 @@
ng-bind="page"
ng-click="$ctrl.onPageChange(page)"></button>
</div>
<oui-dropdown ng-if="$ctrl.pageCount > 5">
<!-- /Buttons (<= 5 pages) -->

<!-- Dropdown (> 5 && <= 100 pages) -->
<oui-dropdown ng-if="$ctrl.pageCount > 5 && $ctrl.pageCount <= 100"
align="end">
<button oui-dropdown-trigger
type="button"
ng-attr-aria-label="{{ $ctrl.translations.currentPageOfPageCount }}"
class="oui-button oui-button_dropdown oui-dropdown__trigger">
<span ng-bind="$ctrl.translations.currentPageOfPageCount"></span>
<span class="oui-icon oui-icon-chevron-down" aria-hidden="true"></span>
</button>
<oui-dropdown-content>
<div role="menu" class="oui-pagination-menu">
<div class="oui-pagination-menu__items-list">
<button type="button"
ng-repeat="page in $ctrl.pageRange track by page"
class="oui-pagination-menu__item"
ng-attr-aria-label="{{ ::$ctrl.getPageAriaLabel(page) }}"
ng-disabled="page === $ctrl.currentPage"
ng-bind="page"
ng-click="$ctrl.onPageChange(page)"></button>
</div>
<oui-dropdown-content class="oui-pagination-menu">
<div class="oui-pagination-menu__items-list">
<button type="button"
ng-repeat="page in $ctrl.getPageRange() track by page"
class="oui-pagination-menu__item"
ng-attr-aria-label="{{ ::$ctrl.getPageAriaLabel(page) }}"
ng-disabled="page === $ctrl.currentPage"
ng-bind="page"
ng-click="$ctrl.onPageChange(page)"></button>
</div>
</oui-dropdown-content>
</oui-dropdown>
<button type="button" class="oui-button oui-button_secondary oui-button_icon-only oui-button_small-width"
type="button"
<!-- /Dropdown (> 5 && <= 100 pages) -->

<!-- Numeric (> 100 pages) -->
<form class="oui-pagination-numeric"
ng-if="$ctrl.pageCount > 100"
ng-submit="$ctrl.checkPageRange($ctrl.inputPage)"
novalidate>
<span aria-hidden="true"
ng-bind="$ctrl.translations.inputPageOfPageCount[0]">
</span>
<input class="oui-pagination-numeric__input oui-input oui-input_xs"
type="number"
min="1"
max="{{$ctrl.pageCount}}"
ng-attr-aria-label="{{ $ctrl.getPageAriaLabel($ctrl.inputPage) }}"
ng-model="$ctrl.inputPage">
<span aria-hidden="true"
ng-bind="$ctrl.translations.inputPageOfPageCount[1]">
</span>
</form>
<!-- /Input (> 100 pages) -->

<button type="button"
class="oui-button oui-button_secondary oui-button_icon-only oui-button_small-width"
ng-attr-aria-label="{{ ::$ctrl.translations.nextPage }}"
ng-disabled="$ctrl.currentPage === $ctrl.pageCount"
ng-click="$ctrl.onPageChange($ctrl.currentPage + 1)">
Expand Down