aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/view-models/modals/icons-modal
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/view-models/modals/icons-modal')
-rw-r--r--catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.html18
-rw-r--r--catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.less33
-rw-r--r--catalog-ui/src/app/view-models/modals/icons-modal/icons-modal-view.ts143
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);
+ }
+ }
+
+}
+
+
+