diff options
Diffstat (limited to 'catalog-ui/src/app/view-models/modals/icons-modal')
3 files changed, 194 insertions, 0 deletions
diff --git a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html new file mode 100644 index 0000000000..4b89701201 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html @@ -0,0 +1,18 @@ +<sdc-modal modal="modalIcons" type="classic" class="w-sdc-modal-icons" buttons="footerButtons" header="Choose Icon" show-close-button="true"> + + <div class="suggested-icons-container"> + <div class ="suggested-icon-wrapper" data-ng-class="{'selected': selectedIcon == iconSrc}" data-ng-repeat="iconSrc in icons track by $index"> + <div class="i-sdc-form-item-suggested-icon large hand {{iconSprite}} {{iconSrc}}" + data-tests-id="{{iconSrc}} iconBox" + data-ng-click="changeIcon(iconSrc)" + tooltips tooltip-content='{{iconSrc | translate}}' + > + </div> + </div> + </div> + + <div class="w-sdc-modal-footer classic"> + <button class="tlv-btn blue" data-tests-id="OK" data-ng-click="updateIcon()">OK</button> + <button class="tlv-btn grey" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button> + </div> +</sdc-modal> diff --git a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less new file mode 100644 index 0000000000..660846c883 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less @@ -0,0 +1,33 @@ +.suggested-icons-container { + text-align: left; + width: 370px; + margin-bottom: 20px; + position: relative; + + .suggested-icon-wrapper { + padding: 5px; + margin: 14px 0 14px 28px; + display: inline-block; + height: 71px; + width: 71px; + + &.selected { + border: 2px solid @main_color_a; + border-radius: 35px; + display: inline-block; + line-height: 0px; + padding: 3px; + } + + } + .i-sdc-form-item-suggested-icon { + opacity: 0.8; + &:hover{ + opacity: 1; + } + } + .suggested-icon-wrapper:nth-child(4n+1) { + margin-left: 0; + } +} + diff --git a/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.ts b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.ts new file mode 100644 index 0000000000..eeadcd4e83 --- /dev/null +++ b/catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.ts @@ -0,0 +1,143 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 7/4/2017. + */ +'use strict'; +import {ComponentFactory} from "app/utils"; +import {AvailableIconsService} from "app/services"; +import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model"; +import {IMainCategory, ISubCategory} from "app/models"; +import {Component} from "app/models"; +import {ResourceType} from "app/utils/constants"; + +interface IIconsModalViewModelScope { + modalIcons:ng.ui.bootstrap.IModalServiceInstance; + icons:Array<string>, + iconSprite:string, + selectedIcon:string, + changeIcon(icon:string):void, + cancel():void + updateIcon():void; +} + +export class IconsModalViewModel { + static '$inject' = [ + '$scope', + 'Sdc.Services.AvailableIconsService', + 'ComponentFactory', + '$state', + '$uibModalInstance', + 'component' + ]; + + constructor(private $scope:IIconsModalViewModelScope, + private availableIconsService:AvailableIconsService, + private ComponentFactory:ComponentFactory, + private $state:ng.ui.IStateService, + private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance, + private component: Component) { + this.initScope(); + this._initIcons(); + this.$scope.iconSprite = this.component.iconSprite; + this.$scope.selectedIcon = this.component.icon; + + if (this.component.isResource()) { + this.initVendor(); + } + + } + + private _initIcons = ():void => { + + // For subcategories that where created by admin, there is no icons + this.$scope.icons = new Array<string>(); + if (this.component.categories && this.component.categories.length > 0) { + + _.forEach(this.component.categories, (category:IMainCategory):void => { + if (category.icons) { + this.$scope.icons = this.$scope.icons.concat(category.icons); + } + if (category.subcategories) { + _.forEach(category.subcategories, (subcategory:ISubCategory):void => { + if (subcategory.icons) { + this.$scope.icons = this.$scope.icons.concat(subcategory.icons); + } + }); + } + }); + } + + if (this.component.isResource()) { + let resourceType:string = this.component.getComponentSubType(); + if (resourceType === ResourceType.VL) { + this.$scope.icons = ['vl']; + } + if (resourceType === ResourceType.CP) { + this.$scope.icons = ['cp']; + } + } + + if (this.$scope.icons.length === 0) { + this.$scope.icons = this.availableIconsService.getIcons(this.component.componentType); + } + //we always add the defual icon to the list + this.$scope.icons.push('defaulticon'); + }; + + private initVendor = ():void => { + let vendors:Array<string> = this.availableIconsService.getIcons(this.component.componentType).slice(5, 19); + let vendorName = this.component.vendorName.toLowerCase(); + if ('at&t' === vendorName) { + vendorName = 'att'; + } + if ('nokia' === vendorName) { + vendorName = 'nokiasiemens'; + } + let vendor:string = _.find(vendors, (vendor:string)=> { + return vendor.replace(/[_]/g, '').toLowerCase() === vendorName; + }); + + if (vendor && this.$scope.icons.indexOf(vendor) === -1) { + this.$scope.icons.push(vendor); + } + }; + + private initScope():void { + this.$scope.modalIcons = this.$uibModalInstance; + this.$scope.icons = []; + this.$scope.changeIcon = (icon:string):void => { + this.$scope.selectedIcon = icon; + }; + this.$scope.cancel = ():void => { + this.$uibModalInstance.dismiss(); + }; + this.$scope.updateIcon = ():void => { + let isDirty:boolean = this.component.icon != this.$scope.selectedIcon; + this.component.icon = this.$scope.selectedIcon; + this.$uibModalInstance.close(isDirty); + } + } + +} + + + |