@wizishop/img-manager 0.2.48 → 0.2.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/i18n/en.json +1 -1
- package/assets/i18n/es.json +1 -1
- package/assets/i18n/fr.json +1 -1
- package/assets/i18n/it.json +1 -1
- package/bundles/wizishop-img-manager.umd.js +6 -16
- package/bundles/wizishop-img-manager.umd.js.map +1 -1
- package/bundles/wizishop-img-manager.umd.min.js +1 -1
- package/bundles/wizishop-img-manager.umd.min.js.map +1 -1
- package/esm2015/lib/components/canva-btn/canva-btn.component.js +2 -13
- package/esm2015/lib/components/images-view/images-view.component.js +2 -2
- package/esm2015/lib/components/images-view/mosaic-view/img-card/img-card.component.js +3 -2
- package/esm2015/lib/components/img-selection/img-selection.component.js +2 -2
- package/esm2015/lib/services/user-settings.service.js +2 -2
- package/esm2015/lib/wz-img-manager.component.js +1 -2
- package/esm5/lib/components/canva-btn/canva-btn.component.js +2 -13
- package/esm5/lib/components/images-view/images-view.component.js +2 -2
- package/esm5/lib/components/images-view/mosaic-view/img-card/img-card.component.js +3 -2
- package/esm5/lib/components/img-selection/img-selection.component.js +2 -2
- package/esm5/lib/services/user-settings.service.js +2 -2
- package/esm5/lib/wz-img-manager.component.js +1 -2
- package/fesm2015/wizishop-img-manager.js +6 -16
- package/fesm2015/wizishop-img-manager.js.map +1 -1
- package/fesm5/wizishop-img-manager.js +6 -16
- package/fesm5/wizishop-img-manager.js.map +1 -1
- package/lib/components/canva-btn/canva-btn.component.d.ts +1 -4
- package/lib/components/images-view/mosaic-view/img-card/img-card.component.d.ts +1 -0
- package/package.json +1 -1
- package/wizishop-img-manager-0.2.52.tgz +0 -0
- package/wizishop-img-manager.metadata.json +1 -1
- package/wz-img-manager.scss +633 -547
- package/wizishop-img-manager-0.2.48.tgz +0 -0
|
@@ -375,7 +375,7 @@ var UserSettingsService = /** @class */ (function () {
|
|
|
375
375
|
};
|
|
376
376
|
UserSettingsService.prototype.getUserDisplayPreference = function () {
|
|
377
377
|
var value = localStorage.getItem(this.userdisplayPreference);
|
|
378
|
-
return value == 'true'
|
|
378
|
+
return value == 'true';
|
|
379
379
|
};
|
|
380
380
|
UserSettingsService.ɵprov = ɵɵdefineInjectable({ factory: function UserSettingsService_Factory() { return new UserSettingsService(); }, token: UserSettingsService, providedIn: "root" });
|
|
381
381
|
UserSettingsService = __decorate([
|
|
@@ -615,7 +615,6 @@ var WzImgManagerComponent = /** @class */ (function () {
|
|
|
615
615
|
}
|
|
616
616
|
};
|
|
617
617
|
WzImgManagerComponent.prototype.setCurrentTab = function (event) {
|
|
618
|
-
console.log(event);
|
|
619
618
|
if (event === 'img-edition') {
|
|
620
619
|
this.hideTab = true;
|
|
621
620
|
return;
|
|
@@ -1699,6 +1698,7 @@ var ImgCardComponent = /** @class */ (function (_super) {
|
|
|
1699
1698
|
_this.focusInput = false;
|
|
1700
1699
|
_this.toggleImgSelected = new EventEmitter();
|
|
1701
1700
|
_this.isUploadSection = false;
|
|
1701
|
+
_this.activeConfirmDelete = false;
|
|
1702
1702
|
return _this;
|
|
1703
1703
|
}
|
|
1704
1704
|
ImgCardComponent.prototype.ngOnInit = function () {
|
|
@@ -1740,7 +1740,7 @@ var ImgCardComponent = /** @class */ (function (_super) {
|
|
|
1740
1740
|
ImgCardComponent = __decorate([
|
|
1741
1741
|
Component({
|
|
1742
1742
|
selector: 'img-card',
|
|
1743
|
-
template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n <div class=\"img-card\">\n <div class=\"img-card__container\"\n [ngClass]=\"{\n 'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n 'imgSelected': picture.selected,\n 'deletion': picture.deleted}\">\n <img\n class=\"img-card__container__img\"\n [src]=\"picture.file_name | imgSrc : '400'\"\n [alt]=\"picture.display_name\"\n (click)=\"onToggleImgSelected()\"\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n />\n <div\n class=\"img-card__container__config\"\n *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n >\n <button class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n <button class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n <button class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n <button class=\"deleted\" (click)=\"
|
|
1743
|
+
template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n <div class=\"img-card\">\n <div class=\"img-card__container\"\n [ngClass]=\"{\n 'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n 'imgSelected': picture.selected,\n 'deletion': picture.deleted}\">\n <img\n class=\"img-card__container__img\"\n [src]=\"picture.file_name | imgSrc : '400'\"\n [alt]=\"picture.display_name\"\n (click)=\"onToggleImgSelected()\"\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n />\n <div\n class=\"img-card__container__config\"\n *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n >\n <button class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n <button class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n <button class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n <button class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n <button class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n <i *ngIf=\"picture.selected\" class=\"fas fa-check-square checked\"></i>\n <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n </button>\n </div>\n <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' : activeConfirmDelete}\">\n <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n <div>\n <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n </div>\n </div>\n <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n <i class=\"far fa-check\"></i>\n <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n </div>\n <div\n *ngIf=\"picture.imgNotLoaded\"\n class=\"img-card__container__overlay\"\n [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n </div>\n <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n </div>\n <div\n class=\"img-card__nameContainer\"\n [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n <input\n type=\"text\"\n class=\"wzImgMngInput img-card__nameContainer__name\"\n [(ngModel)]=\"picture.display_name\"\n (ngModelChange)=\"onNameChange(picture.id_file)\"\n (focus)=\"previousName=picture.display_name;focusInput = true;\"\n (blur)=\"focusInput = false;\"\n >\n <span>{{picture.display_name}}</span>\n </div>\n\n </div>\n</div>\n",
|
|
1744
1744
|
animations: [
|
|
1745
1745
|
easeInOut
|
|
1746
1746
|
]
|
|
@@ -1864,12 +1864,11 @@ var ImgEditorComponent = /** @class */ (function () {
|
|
|
1864
1864
|
}());
|
|
1865
1865
|
|
|
1866
1866
|
var CanvaBtnComponent = /** @class */ (function () {
|
|
1867
|
-
function CanvaBtnComponent(canvaService, imgManager, wzImgEventService, translateService,
|
|
1867
|
+
function CanvaBtnComponent(canvaService, imgManager, wzImgEventService, translateService, alertService, renderer) {
|
|
1868
1868
|
this.canvaService = canvaService;
|
|
1869
1869
|
this.imgManager = imgManager;
|
|
1870
1870
|
this.wzImgEventService = wzImgEventService;
|
|
1871
1871
|
this.translateService = translateService;
|
|
1872
|
-
this.imgSelectionService = imgSelectionService;
|
|
1873
1872
|
this.alertService = alertService;
|
|
1874
1873
|
this.renderer = renderer;
|
|
1875
1874
|
this.showImgUploaded = new EventEmitter();
|
|
@@ -1906,12 +1905,10 @@ var CanvaBtnComponent = /** @class */ (function () {
|
|
|
1906
1905
|
if (mediaDTO) {
|
|
1907
1906
|
_this.expectedWidth = parseInt(mediaDTO.image_width, 10);
|
|
1908
1907
|
_this.expectedHeight = parseInt(mediaDTO.image_height, 10);
|
|
1909
|
-
_this.imgExpectedByWiziblock = true;
|
|
1910
1908
|
}
|
|
1911
1909
|
else {
|
|
1912
1910
|
_this.expectedWidth = undefined;
|
|
1913
1911
|
_this.expectedHeight = undefined;
|
|
1914
|
-
_this.imgExpectedByWiziblock = false;
|
|
1915
1912
|
}
|
|
1916
1913
|
});
|
|
1917
1914
|
this.subs.push(subExpectedImgSizesChange);
|
|
@@ -1957,11 +1954,6 @@ var CanvaBtnComponent = /** @class */ (function () {
|
|
|
1957
1954
|
var subUploadImg = this.imgManager.uploadFileByUrl(exportUrl, designTitle).subscribe(function (img) {
|
|
1958
1955
|
_this.imgLoading = false;
|
|
1959
1956
|
_this.removeOverflowBody();
|
|
1960
|
-
// Close the img manager and display the img create in the wiziblock
|
|
1961
|
-
if (_this.imgExpectedByWiziblock) {
|
|
1962
|
-
_this.imgSelectionService.addImgSelected(img);
|
|
1963
|
-
return;
|
|
1964
|
-
}
|
|
1965
1957
|
_this.wzImgEventService.emitImgAdded(img.id_file);
|
|
1966
1958
|
_this.alertService.openAlert(_this.successUploadPhoto);
|
|
1967
1959
|
}, function (error) {
|
|
@@ -1990,7 +1982,6 @@ var CanvaBtnComponent = /** @class */ (function () {
|
|
|
1990
1982
|
{ type: ImgManagerService },
|
|
1991
1983
|
{ type: ImgEventService },
|
|
1992
1984
|
{ type: TranslateService },
|
|
1993
|
-
{ type: ImgSelectionService },
|
|
1994
1985
|
{ type: AlertService },
|
|
1995
1986
|
{ type: Renderer2 }
|
|
1996
1987
|
]; };
|
|
@@ -2011,7 +2002,6 @@ var CanvaBtnComponent = /** @class */ (function () {
|
|
|
2011
2002
|
ImgManagerService,
|
|
2012
2003
|
ImgEventService,
|
|
2013
2004
|
TranslateService,
|
|
2014
|
-
ImgSelectionService,
|
|
2015
2005
|
AlertService,
|
|
2016
2006
|
Renderer2])
|
|
2017
2007
|
], CanvaBtnComponent);
|
|
@@ -2069,7 +2059,7 @@ var ImgSelectionComponent = /** @class */ (function () {
|
|
|
2069
2059
|
ImgSelectionComponent = __decorate([
|
|
2070
2060
|
Component({
|
|
2071
2061
|
selector: 'img-selection',
|
|
2072
|
-
template: "<div\n class=\"trash\"\n [ngClass]=\"{'trash--visible': dragStart}\"\n cdkDropList\n #unSelectList=\"cdkDropList\"\n (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n\n <i class=\"far fa-trash\"></i>\n <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\">\n\n <div\n cdkDropList\n #selectionList=\"cdkDropList\"\n cdkDropListOrientation=\"horizontal\"\n class=\"list_img_selection\"\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListConnectedTo]=\"[unSelectList]\"\n >\n\n <div\n class=\"img_box\"\n *ngFor=\"let picture of imgSelectedList; let index = index\"\n cdkDrag\n (cdkDragStarted)=\"dragStart = true;\"\n (cdkDragEnded)=\"dragStart = false;\"\n >\n\n <img\n class=\"drag__img\"\n [src]=\"picture.file_name | imgSrc : '
|
|
2062
|
+
template: "<div\n class=\"trash\"\n [ngClass]=\"{'trash--visible': dragStart}\"\n cdkDropList\n #unSelectList=\"cdkDropList\"\n (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n\n <i class=\"far fa-trash\"></i>\n <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\">\n\n <div\n cdkDropList\n #selectionList=\"cdkDropList\"\n cdkDropListOrientation=\"horizontal\"\n class=\"list_img_selection\"\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListConnectedTo]=\"[unSelectList]\"\n >\n\n <div\n class=\"img_box\"\n *ngFor=\"let picture of imgSelectedList; let index = index\"\n cdkDrag\n (cdkDragStarted)=\"dragStart = true;\"\n (cdkDragEnded)=\"dragStart = false;\"\n >\n\n <img\n *ngIf=\"index < 1\"\n class=\"drag__img\"\n [src]=\"picture.file_name | imgSrc : '400'\"\n [title]=\"picture.display_name\"\n />\n\n <img\n *ngIf=\"index > 0\"\n class=\"drag__img\"\n [src]=\"picture.file_name | imgSrc : '200'\"\n [title]=\"picture.display_name\"\n />\n\n </div>\n </div>\n</div>\n\n<!-- Loader -->\n<ng-container *ngIf=\"isLoading && !(imgSelectedList && imgSelectedList.length)\">\n <wz-loader></wz-loader>\n</ng-container>\n"
|
|
2073
2063
|
}),
|
|
2074
2064
|
__metadata("design:paramtypes", [ImgSelectionService])
|
|
2075
2065
|
], ImgSelectionComponent);
|
|
@@ -3054,7 +3044,7 @@ var ImagesViewComponent = /** @class */ (function () {
|
|
|
3054
3044
|
ImagesViewComponent = __decorate([
|
|
3055
3045
|
Component({
|
|
3056
3046
|
selector: 'images-view',
|
|
3057
|
-
template: "<div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n <div\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n class=\"images-view__container\"\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n >\n\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{length}}</p>\n </div>\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n </div>\n\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n <!-- For listforma : Display btn del multiple img & Confirm action -->\n <div class=\"images-view__container__boxAction\">\n\n\n <!-- S\u00E9lectionner -->\n <button\n class=\"button success images-view__container__boxAction__import\"\n @insertRemoveAnnim\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n (click)=\"selectImgChosen()\"\n >\n <i class=\"fal fa-check\"></i>\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n </button>\n\n <!-- Display btn del multiple img -->\n <button\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n (click)=\"displayConfirmImgSup()\"\n class=\"button images-view__container__boxAction__delBtn danger\"\n @insertRemoveAnnim\n >\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n </button>\n\n <!-- Confirm action -->\n <div\n class=\"images-view__container__boxAction__confirmSup\"\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n <p class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <div>\n <button\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\n (click)=\"cancelSup()\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <button\n (click)=\"removeListImg()\"\n class=\"button images-view__container__delBtn danger\"\n >\n {{ 'ImgManager.ImgLib.confirm' | translate }}\n </button>\n </div>\n </div>\n\n </div>\n\n\n <!-- Swith mosaic/list forma -->\n <div class=\"field has-addons images-view__container__buttonBox\">\n <p class=\"control\">\n <button\n class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(false)\"\n >\n <span class=\"icon is-small\">\n <i class=\"far fa-th\"></i>\n </span>\n </button>\n </p>\n\n <p class=\"control\">\n <button class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(true)\"\n >\n <span class=\"icon is-small\">\n <i class=\"fas fa-bars\"></i>\n </span>\n </button>\n </p>\n </div>\n </div>\n </div>\n</div>\n\n\n <!-- Images section -->\n<ng-scrollbar\n #scrollable\n [visibility]=\"'native'\"\n class=\"images-view__scroll\"\n [ngClass]=\"{\n 'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n 'images-view__scroll--hide--mosaic--small': displayPexelsResults && !listDisplayed && stateDisplayed === 'small',\n 'images-view__scroll--hide--table': displayPexelsResults && listDisplayed,\n 'images-view__scroll--full': stateDisplayed === 'full',\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n 'images-view__scroll--window': stateDisplayed === 'window'\n}\"\n>\n <div #imgLibContainer class=\"images-view__wrapper\">\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n <mosaic-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [nbFakeImg]=\"nbFakeImg\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [isLoading]=\"isLoading\"\n [fullSize]=\"fullSize\"\n >\n </mosaic-view>\n </div>\n\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n <table-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [stateDisplayed]=\"stateDisplayed\"\n [isLoading]=\"isLoading\"\n >\n </table-view>\n </div>\n\n </div>\n</ng-scrollbar>\n\n<!-- Pexels Section - When no img found -->\n<div\n *ngIf=\"displayPexelsResults\"\n class=\"images-view--pexels\"\n [@easeInOut]=\"'in'\">\n <pexels-lib\n [searchValue]=\"tableFilters.searchValue\"\n (showImgUploaded)=\"onShowImgUploaded()\"\n [disableSearch]=\"true\"\n >\n </pexels-lib>\n</div>\n",
|
|
3047
|
+
template: "<div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n <div\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n class=\"images-view__container\"\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n >\n\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{length}}</p>\n </div>\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n </div>\n\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n <!-- For listforma : Display btn del multiple img & Confirm action -->\n <div class=\"images-view__container__boxAction\">\n\n\n <!-- S\u00E9lectionner -->\n <button\n class=\"button success images-view__container__boxAction__import\"\n @insertRemoveAnnim\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n (click)=\"selectImgChosen()\"\n >\n <i class=\"fal fa-check\"></i>\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n </button>\n\n <!-- Display btn del multiple img -->\n <button\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n (click)=\"displayConfirmImgSup()\"\n class=\"button images-view__container__boxAction__delBtn danger\"\n @insertRemoveAnnim\n >\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n </button>\n\n <!-- Confirm action -->\n <div\n class=\"images-view__container__boxAction__confirmSup\"\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <div>\n <button\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\n (click)=\"cancelSup()\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <button\n (click)=\"removeListImg()\"\n class=\"button images-view__container__delBtn danger\"\n >\n {{ 'ImgManager.ImgLib.confirm' | translate }}\n </button>\n </div>\n </div>\n\n </div>\n\n\n <!-- Swith mosaic/list forma -->\n <div class=\"field has-addons images-view__container__buttonBox\">\n <p class=\"control\">\n <button\n class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(false)\"\n >\n <span class=\"icon is-small\">\n <i class=\"far fa-th\"></i>\n </span>\n </button>\n </p>\n\n <p class=\"control\">\n <button class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(true)\"\n >\n <span class=\"icon is-small\">\n <i class=\"fas fa-bars\"></i>\n </span>\n </button>\n </p>\n </div>\n </div>\n </div>\n</div>\n\n\n <!-- Images section -->\n<ng-scrollbar\n #scrollable\n [visibility]=\"'native'\"\n class=\"images-view__scroll\"\n [ngClass]=\"{\n 'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n 'images-view__scroll--hide--mosaic--small': displayPexelsResults && !listDisplayed && stateDisplayed === 'small',\n 'images-view__scroll--hide--table': displayPexelsResults && listDisplayed,\n 'images-view__scroll--full': stateDisplayed === 'full',\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n 'images-view__scroll--window': stateDisplayed === 'window'\n}\"\n>\n <div #imgLibContainer class=\"images-view__wrapper\">\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n <mosaic-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [nbFakeImg]=\"nbFakeImg\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [isLoading]=\"isLoading\"\n [fullSize]=\"fullSize\"\n >\n </mosaic-view>\n </div>\n\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n <table-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [stateDisplayed]=\"stateDisplayed\"\n [isLoading]=\"isLoading\"\n >\n </table-view>\n </div>\n\n </div>\n</ng-scrollbar>\n\n<!-- Pexels Section - When no img found -->\n<div\n *ngIf=\"displayPexelsResults\"\n class=\"images-view--pexels\"\n [@easeInOut]=\"'in'\">\n <pexels-lib\n [searchValue]=\"tableFilters.searchValue\"\n (showImgUploaded)=\"onShowImgUploaded()\"\n [disableSearch]=\"true\"\n >\n </pexels-lib>\n</div>\n",
|
|
3058
3048
|
animations: [
|
|
3059
3049
|
easeInOut,
|
|
3060
3050
|
insertRemove
|