diff options
Diffstat (limited to 'catalog-ui/src/app/view-models/catalog')
3 files changed, 806 insertions, 0 deletions
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts new file mode 100644 index 0000000000..0e7e4aaeae --- /dev/null +++ b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts @@ -0,0 +1,303 @@ +'use strict'; +import {Component, IMainCategory, IGroup, IConfigStatuses, IAppMenu, IAppConfigurtaion, IUserProperties, ISubCategory} from "app/models"; +import {EntityService, IUserResourceClass, CacheService} from "app/services"; +import {ComponentFactory, ResourceType, MenuHandler, ChangeLifecycleStateHandler} from "app/utils"; + + +interface Checkboxes { + componentTypes:Array<string>; + resourceSubTypes:Array<string>; +} + +interface CheckboxesFilter { + // Types + selectedComponentTypes:Array<string>; + selectedResourceSubTypes:Array<string>; + // Categories + selectedCategoriesModel:Array<string>; + // Statuses + selectedStatuses:Array<string>; +} + +interface Gui { + isLoading:boolean; + onResourceSubTypesClick:Function; + onComponentTypeClick:Function; + onCategoryClick:Function; + onSubcategoryClick:Function; + onGroupClick:Function; +} + +export interface ICatalogViewModelScope extends ng.IScope { + checkboxes:Checkboxes; + checkboxesFilter:CheckboxesFilter; + gui:Gui; + + categories:Array<IMainCategory>; + confStatus:IConfigStatuses; + sdcMenu:IAppMenu; + catalogFilterdItems:Array<Component>; + expandedSection:Array<string>; + actionStrategy:any; + user:IUserProperties; + catalogMenuItem:any; + version:string; + sortBy:string; + reverse:boolean; + vfcmtType:string; + + //this is for UI paging + numberOfItemToDisplay:number; + isAllItemDisplay:boolean; + + changeLifecycleState(entity:any, state:string):void; + sectionClick (section:string):void; + order(sortBy:string):void; + getNumOfElements(num:number):string; + goToComponent(component:Component):void; + raiseNumberOfElementToDisplay():void; +} + +export class CatalogViewModel { + static '$inject' = [ + '$scope', + '$filter', + 'Sdc.Services.EntityService', + 'sdcConfig', + 'sdcMenu', + '$state', + '$q', + 'Sdc.Services.UserResourceService', + 'Sdc.Services.CacheService', + 'ComponentFactory', + 'ChangeLifecycleStateHandler', + 'MenuHandler' + ]; + + constructor(private $scope:ICatalogViewModelScope, + private $filter:ng.IFilterService, + private EntityService:EntityService, + private sdcConfig:IAppConfigurtaion, + private sdcMenu:IAppMenu, + private $state:ng.ui.IStateService, + private $q:ng.IQService, + private userResourceService:IUserResourceClass, + private cacheService:CacheService, + private ComponentFactory:ComponentFactory, + private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler, + private MenuHandler:MenuHandler) { + + + this.initScopeMembers(); + this.initCatalogData(); // Async task to get catalog from server. + this.initScopeMethods(); + } + + private initCatalogData = ():void => { + let onSuccess = (followedResponse:Array<Component>):void => { + this.$scope.catalogFilterdItems = followedResponse; + this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length; + this.$scope.categories = this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories')).concat(this.cacheService.get('productCategories')); + this.$scope.gui.isLoading = false; + }; + + let onError = ():void => { + console.info('Failed to load catalog CatalogViewModel::initCatalog'); + this.$scope.gui.isLoading = false; + }; + this.EntityService.getCatalog().then(onSuccess, onError); + }; + + + private initScopeMembers = ():void => { + // Gui init + this.$scope.gui = <Gui>{}; + this.$scope.gui.isLoading = true; + this.$scope.numberOfItemToDisplay = 0; + //this.$scope.categories = this.cacheService.get('categoriesMap'); + this.$scope.sdcMenu = this.sdcMenu; + this.$scope.confStatus = this.sdcMenu.statuses; + this.$scope.expandedSection = ["type", "category", "product-category", "status"]; + this.$scope.user = this.userResourceService.getLoggedinUser(); + this.$scope.catalogMenuItem = this.sdcMenu.catalogMenuItem; + this.$scope.version = this.cacheService.get('version'); + this.$scope.sortBy = 'lastUpdateDate'; + this.$scope.reverse = true; + + + // Checklist init + this.$scope.checkboxes = <Checkboxes>{}; + this.$scope.checkboxes.componentTypes = ['Resource', 'Service', 'Product']; + this.$scope.checkboxes.resourceSubTypes = ['VF', 'VFC', 'CP', 'VL']; + + // Checkboxes filter init + this.$scope.checkboxesFilter = <CheckboxesFilter>{}; + this.$scope.checkboxesFilter.selectedComponentTypes = []; + this.$scope.checkboxesFilter.selectedResourceSubTypes = []; + this.$scope.checkboxesFilter.selectedCategoriesModel = []; + this.$scope.checkboxesFilter.selectedStatuses = []; + + // this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length; + + this.$scope.vfcmtType = ResourceType.VFCMT; + }; + + private initScopeMethods = ():void => { + this.$scope.sectionClick = (section:string):void => { + let index:number = this.$scope.expandedSection.indexOf(section); + if (index !== -1) { + this.$scope.expandedSection.splice(index, 1); + } else { + this.$scope.expandedSection.push(section); + } + }; + + + this.$scope.order = (sortBy:string):void => {//default sort by descending last update. default for alphabetical = ascending + this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : (sortBy === 'lastUpdateDate') ? true : false; + this.$scope.sortBy = sortBy; + }; + + + this.$scope.goToComponent = (component:Component):void => { + this.$scope.gui.isLoading = true; + this.$state.go('workspace.general', {id: component.uniqueId, type: component.componentType.toLowerCase()}); + }; + + + // Will print the number of elements found in catalog + this.$scope.getNumOfElements = (num:number):string => { + if (!num || num === 0) { + return "No Elements found"; + } else if (num === 1) { + return "1 Element found"; + } else { + return num + " Elements found"; + } + }; + + /** + * Select | unselect sub resource when resource is clicked | unclicked. + * @param type + */ + this.$scope.gui.onComponentTypeClick = (type:string):void => { + if (type === 'Resource') { + if (this.$scope.checkboxesFilter.selectedComponentTypes.indexOf('Resource') === -1) { + // If the resource was not selected, unselect all childs. + this.$scope.checkboxesFilter.selectedResourceSubTypes = []; + } else { + // If the resource was selected, select all childs + this.$scope.checkboxesFilter.selectedResourceSubTypes = angular.copy(this.$scope.checkboxes.resourceSubTypes); + } + } + }; + + /** + * Selecting | unselect resources when sub resource is clicked | unclicked. + */ + this.$scope.gui.onResourceSubTypesClick = ():void => { + if (this.$scope.checkboxesFilter.selectedResourceSubTypes && this.$scope.checkboxesFilter.selectedResourceSubTypes.length === this.$scope.checkboxes.resourceSubTypes.length) { + this.$scope.checkboxesFilter.selectedComponentTypes.push('Resource'); + } else { + this.$scope.checkboxesFilter.selectedComponentTypes = _.without(this.$scope.checkboxesFilter.selectedComponentTypes, 'Resource'); + } + }; + + this.$scope.gui.onCategoryClick = (category:IMainCategory):void => { + // Select | Unselect all childs + if (this.isCategorySelected(category.uniqueId)) { + this.$scope.checkboxesFilter.selectedCategoriesModel = this.$scope.checkboxesFilter.selectedCategoriesModel.concat(angular.copy(_.map(category.subcategories, (item) => { + return item.uniqueId; + }))); + if (category.subcategories) { + category.subcategories.forEach((sub:ISubCategory)=> { // Loop on all selected subcategories and mark the childrens + this.$scope.checkboxesFilter.selectedCategoriesModel = this.$scope.checkboxesFilter.selectedCategoriesModel.concat(angular.copy(_.map(sub.groupings, (item) => { + return item.uniqueId; + }))); + }); + } + } else { + this.$scope.checkboxesFilter.selectedCategoriesModel = _.difference(this.$scope.checkboxesFilter.selectedCategoriesModel, _.map(category.subcategories, (item) => { + return item.uniqueId; + })); + if (category.subcategories) { + category.subcategories.forEach((sub:ISubCategory)=> { // Loop on all selected subcategories and un mark the childrens + this.$scope.checkboxesFilter.selectedCategoriesModel = _.difference(this.$scope.checkboxesFilter.selectedCategoriesModel, _.map(sub.groupings, (item) => { + return item.uniqueId; + })); + }); + } + } + }; + + this.$scope.gui.onSubcategoryClick = (category:IMainCategory, subCategory:ISubCategory):void => { + // Select | Unselect all childs + if (this.isCategorySelected(subCategory.uniqueId)) { + this.$scope.checkboxesFilter.selectedCategoriesModel = this.$scope.checkboxesFilter.selectedCategoriesModel.concat(angular.copy(_.map(subCategory.groupings, (item) => { + return item.uniqueId; + }))); + } else { + this.$scope.checkboxesFilter.selectedCategoriesModel = _.difference(this.$scope.checkboxesFilter.selectedCategoriesModel, _.map(subCategory.groupings, (item) => { + return item.uniqueId; + })); + } + + // Mark | Un mark the parent when all childs selected. + if (this.areAllCategoryChildsSelected(category)) { + // Add the category to checkboxesFilter.selectedCategoriesModel + this.$scope.checkboxesFilter.selectedCategoriesModel.push(category.uniqueId); + } else { + this.$scope.checkboxesFilter.selectedCategoriesModel = _.without(this.$scope.checkboxesFilter.selectedCategoriesModel, category.uniqueId); + } + + }; + + this.$scope.raiseNumberOfElementToDisplay = ():void => { + this.$scope.numberOfItemToDisplay = this.$scope.numberOfItemToDisplay + 35; + if (this.$scope.catalogFilterdItems) { + this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length; + } + }; + + this.$scope.gui.onGroupClick = (subCategory:ISubCategory):void => { + // Mark | Un mark the parent when all childs selected. + if (this.areAllSubCategoryChildsSelected(subCategory)) { + // Add the category to checkboxesFilter.selectedCategoriesModel + this.$scope.checkboxesFilter.selectedCategoriesModel.push(subCategory.uniqueId); + } else { + this.$scope.checkboxesFilter.selectedCategoriesModel = _.without(this.$scope.checkboxesFilter.selectedCategoriesModel, subCategory.uniqueId); + } + }; + + + }; + + private areAllCategoryChildsSelected = (category:IMainCategory):boolean => { + if (!category.subcategories) { + return false; + } + let allIds = _.map(category.subcategories, (sub:ISubCategory)=> { + return sub.uniqueId; + }); + let total = _.intersection(this.$scope.checkboxesFilter.selectedCategoriesModel, allIds); + return total.length === category.subcategories.length ? true : false; + }; + + private areAllSubCategoryChildsSelected = (subCategory:ISubCategory):boolean => { + if (!subCategory.groupings) { + return false; + } + let allIds = _.map(subCategory.groupings, (group:IGroup)=> { + return group.uniqueId; + }); + let total = _.intersection(this.$scope.checkboxesFilter.selectedCategoriesModel, allIds); + return total.length === subCategory.groupings.length ? true : false; + }; + + private isCategorySelected = (uniqueId:string):boolean => { + if (this.$scope.checkboxesFilter.selectedCategoriesModel.indexOf(uniqueId) !== -1) { + return true; + } + return false; + }; +} diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view.html b/catalog-ui/src/app/view-models/catalog/catalog-view.html new file mode 100644 index 0000000000..03ca4cb81f --- /dev/null +++ b/catalog-ui/src/app/view-models/catalog/catalog-view.html @@ -0,0 +1,199 @@ +<div class="sdc-catalog-container"> + + <loader data-display="gui.isLoading"></loader> +<!-- + <ecomp-header menu-data="menuItems" version="{{version}}"></ecomp-header> +--> + + <div class="w-sdc-main-container"> + + <!-- LEFT SIDE --> + <perfect-scrollbar scroll-y-margin-offset="0" class="sdc-catalog-body-container w-sdc-left-sidebar" include-padding="true"> + <div class="sdc-catalog-leftbar-container"> + + <div class="sdc-catalog-type-filter-container"> + <div + class="i-sdc-designer-leftbar-section-title pointer" + data-ng-click="sectionClick('type')" + data-ng-class="{'expanded': expandedSection.indexOf('type') !== -1}"> + <span class="i-sdc-designer-leftbar-section-title-icon"></span> + <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="typeFilterTitle">Type</span> + </div> + <div class="i-sdc-designer-leftbar-section-content"> + <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul"> + <li class="i-sdc-designer-leftbar-section-content-ul-li" data-ng-repeat="type in checkboxes.componentTypes"> + + <sdc-checkbox elem-id="checkbox-{{type | lowercase | clearWhiteSpaces}}" + sdc-checklist-model="checkboxesFilter.selectedComponentTypes" + sdc-checklist-value="type" + data-ng-click="gui.onComponentTypeClick(type)" + text="{{type}}"></sdc-checkbox> + + <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="type==='Resource'"> + <li data-ng-repeat="subType in checkboxes.resourceSubTypes"> + + <sdc-checkbox elem-id="checkbox-{{subType | lowercase | clearWhiteSpaces}}" + sdc-checklist-model="checkboxesFilter.selectedResourceSubTypes" + sdc-checklist-value="subType" + data-ng-click="gui.onResourceSubTypesClick()" + text="{{subType}}"></sdc-checkbox> + + </li> + </ul> + </li> + </ul> + </div> + </div> + + <div class="sdc-catalog-categories-filter-container"> + <div + class="i-sdc-designer-leftbar-section-title pointer" + data-ng-click="sectionClick('category')" + data-ng-class="{'expanded': expandedSection.indexOf('category') !== -1}"> + <span class="i-sdc-designer-leftbar-section-title-icon"></span> + <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="categoriesFilterTitle">Categories</span> + </div> + <div class="i-sdc-designer-leftbar-section-content"> + <!-- CATEGORY CHECKBOX --> + <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul"> + <li class="i-sdc-designer-leftbar-section-content-ul-li" + data-ng-repeat="category in categories | categoryTypeFilter:checkboxesFilter.selectedComponentTypes:checkboxesFilter.selectedResourceSubTypes | orderBy: category"> + + <sdc-checkbox elem-id="checkbox-{{category.uniqueId | lowercase | clearWhiteSpaces}}" + sdc-checklist-model="checkboxesFilter.selectedCategoriesModel" + sdc-checklist-value="category.uniqueId" + data-tests-id="{{category.uniqueId}}" + data-ng-click="gui.onCategoryClick(category)" + text="{{category.name}}"></sdc-checkbox> + + <!-- SUB CATEGORY CHECKBOX --> + <ul class="list-unstyled i-sdc-catalog-subcategories-checkbox" data-ng-if="category.subcategories && category.subcategories.length>0"> + <li ng-repeat="subcategory in category.subcategories track by subcategory.uniqueId | orderBy:'name'"> + + <sdc-checkbox elem-id="checkbox-{{subcategory.uniqueId | lowercase | clearWhiteSpaces}}" + sdc-checklist-model="checkboxesFilter.selectedCategoriesModel" + sdc-checklist-value="subcategory.uniqueId" + data-tests-id="{{subcategory.uniqueId}}" + data-ng-click="gui.onSubcategoryClick($parent.category, subcategory)" + text="{{subcategory.name}}"></sdc-checkbox> + + <!-- GROUPING CHECKBOX --> + <ul class=" list-unstyled i-sdc-catalog-grouping-checkbox" data-ng-if="subcategory.groupings && subcategory.groupings.length>0"> + <li ng-repeat="grouping in subcategory.groupings track by grouping.uniqueId | orderBy:'name'"> + + <sdc-checkbox elem-id="checkbox-{{grouping.uniqueId | lowercase | clearWhiteSpaces}}" + sdc-checklist-model="checkboxesFilter.selectedCategoriesModel" + sdc-checklist-value="grouping.uniqueId" + data-ng-click="gui.onGroupClick($parent.subcategory)" + text="{{grouping.name}}"></sdc-checkbox> + + </li> + </ul> + </li><!-- Close subcategory --> + </ul><!-- Close subcategories --> + </li><!-- Close main category --> + </ul><!-- Close main categories --> + + </div> + </div> + + <!-- STATUS --> + <div class="sdc-catalog-status-filter-container"> + <div + class="i-sdc-designer-leftbar-section-title pointer" + data-ng-click="sectionClick('status')" + data-ng-class="{'expanded': expandedSection.indexOf('status') !== -1}"> + <span class="i-sdc-designer-leftbar-section-title-icon"></span> + <span class="i-sdc-designer-leftbar-section-title-text" data-tests-id="statusFilterTitle">Status</span> + </div> + + <div class="i-sdc-designer-leftbar-section-content"> + <ul class="list-unstyled i-sdc-designer-leftbar-section-content-ul"> + <!--li data-ng-repeat="(key, value) in confStatus" --> + + <li class="i-sdc-designer-leftbar-section-content-ul-li" + data-ng-repeat="(key, state) in confStatus | catalogStatusFilter"> + + <sdc-checkbox elem-id="checkbox-{{key | lowercase | clearWhiteSpaces}}" + sdc-checklist-model="checkboxesFilter.selectedStatuses" + sdc-checklist-value="state.values" + text="{{state.name}}"></sdc-checkbox> + + <div class="i-sdc-categories-list-item-icon"></div> + </label> + </li> + </ul> + </div> + </div> + + </div> + </perfect-scrollbar> + + <!-- RIGHT SIDE --> + <perfect-scrollbar id="catalog-main-scroll" include-padding="true" class="w-sdc-main-right-container w-sdc-catalog-main"> + + <!-- HEADER --> + <div> + <div class="w-sdc-dashboard-catalog-header"> + {{getNumOfElements((catalogFilterdItems| filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search).length)}} + </div> + <div class="w-sdc-dashboard-catalog-header-right"> + <span class="w-sdc-dashboard-catalog-header-order" translate="SORT_CAPTION"></span> + <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-last-update" data-ng-class="{'blue' : sortBy==='lastUpdateDate'}" + ng-click="order('lastUpdateDate')" translate="SORT_BY_UPDATE_DATE"></a> + <span data-ng-show="sortBy === 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span> + | + <a class="w-sdc-dashboard-catalog-sort" data-tests-id="sort-by-alphabetical" data-ng-class="{'blue' : sortBy!=='lastUpdateDate'}" + ng-click="order('name | resourceName')" translate="SORT_ALPHABETICAL"></a> + <span data-ng-show="sortBy !== 'lastUpdateDate'" class="w-sdc-catalog-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"></span> + </div> + </div> + + <div infinite-scroll-disabled='isAllItemDisplay' infinite-scroll="raiseNumberOfElementToDisplay()" infinite-scroll-container="'#catalog-main-scroll'" infinite-scroll-parent> + + <div class='w-sdc-row-flex-items'> + + <!-- Tile new --> + <div data-ng-init="component.filterTerm = component.name + ' ' + component.description + ' ' + component.tags.toString() + ' ' + component.version" + class="sdc-tile-catalog sdc-tile-fix-width" + data-ng-repeat="component in catalogFilterdItems| filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search | orderBy:sortBy:reverse | limitTo:numberOfItemToDisplay" + > + + <div class="sdc-tile-header"> + <div class='sdc-tile-header-type' data-ng-class="{'purple': component.isResource(), 'blue': !component.isResource()}"> + <div data-ng-if="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div> + <div data-ng-if="component.isService()">S</div> + </div> + </div> + <div class='sdc-tile-content' data-ng-click="gui.isLoading || goToComponent(component)"> + <div class='sdc-tile-content-icon'> + <div class="{{component.iconSprite}} {{component.icon}}" + data-ng-class="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}" + data-tests-id="{{component.name}}"></div> + </div> + <div class='sdc-tile-content-info'> + <div class="sdc-tile-content-info-item-name" data-tests-id="{{component.name | resourceName}}" sdc-smart-tooltip>{{component.name | resourceName}}</div> + <div class="sdc-tile-content-info-version-info"> + <div class="sdc-tile-content-info-version-info-text" data-tests-id="{{component.name}}Version">V {{component.version}}</div> + </div> + </div> + </div> + <div class='sdc-tile-footer'> + <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div> + </div> + + </div> + <!-- Tile new --> + + </div> + + </div> + </perfect-scrollbar> + + </div> + + <top-nav top-lvl-selected-index="1" search-bind="search.filterTerm" version="{{version}}"></top-nav> + + <ecomp-footer></ecomp-footer> + +</div> diff --git a/catalog-ui/src/app/view-models/catalog/catalog.less b/catalog-ui/src/app/view-models/catalog/catalog.less new file mode 100644 index 0000000000..9db9192167 --- /dev/null +++ b/catalog-ui/src/app/view-models/catalog/catalog.less @@ -0,0 +1,304 @@ +.sdc-catalog-container { + + .i-sdc-categories-list-item { + font-weight: normal; + } + + // Checkboxes + .i-sdc-designer-leftbar-section-content-ul { + padding: 0; + margin: 0; + + .i-sdc-catalog-subcategories-checkbox { + padding: 0 0 0 20px; + margin: 0; + + .i-sdc-catalog-grouping-checkbox { + padding: 0 0 0 20px; + margin: 0; + } + + } + + } + + .i-sdc-designer-leftbar-section-content-li { + &:last-child { + .i-sdc-categories-list-item { + margin: 0; + } + } + } + + .i-sdc-categories-list-item { + display: block; + //margin-bottom: 5px; + //padding-left: 15px; + //text-indent: -24px; + vertical-align: top; + font-weight: bold; + } + + .i-sdc-subcategories-list-item { + display: block; + //padding-left: 20px; + vertical-align: top; + font-weight: normal; + margin: 0; + //text-indent: -10px; + } + + /*Added by - Ikram */ + .i-sdc-product-input, + .i-sdc-product-select { + border: 1px solid @border_color_f; + min-height: 30px; + padding: 0; + width: 100%; + margin: 1px 0; + background-color: #F2F2F2; + outline: none; + + &:disabled { + .disabled; + } + optgroup{ + color: @color_u; + option{ + color: @color_b; + } + } + } + + .i-sdc-categories-list-item-icon { + display: inline-block; + float: right; + position: relative; + right: -8px; + top: 6px; + } + + .i-sdc-categories-list-item { + margin-top: 7px; + &.NOT_CERTIFIED_CHECKOUT, + &.NOT_CERTIFIED_CHECKIN { + .i-sdc-categories-list-item-icon { + background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2889px; + width: 14px; + height: 14px; + + } + } + + &.CERTIFIED { + .i-sdc-categories-list-item-icon { + background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -3034px; + width: 14px; + height: 16px; + } + } + + &.READY_FOR_CERTIFICATION { + .i-sdc-categories-list-item-icon { + background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2985px; + width: 14px; + height: 16px; + } + } + + &.CERTIFICATION_IN_PROGRESS { + .i-sdc-categories-list-item-icon { + background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -53px -2934px; + width: 14px; + height: 16px; + } + } + + &.DISTRIBUTED, + &.TBD { + .i-sdc-categories-list-item-icon { + background: url('/assets/styles/images/sprites/sprite-global-old.png') no-repeat -43px -3087px; + width: 24px; + height: 14px; + + } + } + } + + .i-sdc-categories-list-input { + margin: 8px; + + } + + .i-sdc-subcategories-list-input { + + margin: 8px; + } + .i-sdc-subcategories-list-input-container { + margin: 0px 0px 0px 20px; + padding: 2px; + } + + .w-sdc-header-catalog-search-container { + display: table; + padding: 21px 0; + position: relative; + + .w-sdc-designer-leftbar-search-input { + color: #000; + width: 300px; + } + + // .magnification { + // .sprite; + // .sprite.magnification-glass; + // .hand; + // position: absolute; + // top: 40px; + // right: 42px; + // } + } + + .w-sdc-catalog-main { + padding: 10px 12px; + } + .w-sdc-dashboard-catalog-header { + .b_9; + display: inline-block; + font-style: italic; + font-weight: bold; + padding-left: 10px; + } + + .w-sdc-dashboard-catalog-header-order { + .b_9; + font-weight: 800; + } + + .w-sdc-dashboard-catalog-sort { + .b_9; + font-weight: bold; + white-space:pre; + &:hover{ + .hand; + text-decoration: none; + .a_9; + } + &.blue { + .a_9; + } + } + + .w-sdc-catalog-sort-arrow{ + display: inline-block; + &.up{ + .b_9; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid ; + } + &.down{ + .b_9; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid; + } + } + + + + + .w-sdc-dashboard-catalog-header-right{ + float: right; + display: inline-block; + padding-right:34px; + } + + .w-sdc-header-catalog-search-input { + width: 420px; + display: table-cell; + padding: 0 25px 1px 10px; + border: 1px solid #bcbcbc; + .border-radius(10px); + height: 30px; + margin: 10px 30px; + outline: none; + } + + .sdc-catalog-type-filter-container { + margin-top: -1px; + } + + .i-sdc-designer-leftbar-section-title { + text-transform: uppercase; + .l_14_m; + line-height: 30px; + } + + .i-sdc-designer-leftbar-section-title-icon { + .hand; + .tlv-sprite; + .footer-close; + transition: .3s all; + margin-top: -4px; + } + + .i-sdc-designer-leftbar-section-title-text { + margin-left: 20px; + } + + .seperator-left, + .seperator-right { + border-right: solid 1px @color_m; + display: table-cell; + width: 2px; + } + + // Rotate catalog left side arrows + .i-sdc-designer-leftbar-section-title.expanded .i-sdc-designer-leftbar-section-title-icon { + transform: rotate(180deg); + } + + // Transform catalog left side sections + .i-sdc-designer-leftbar-section-title + .i-sdc-designer-leftbar-section-content { + max-height: 0px; + margin: 0 auto; + transition: all .3s; + overflow: hidden; + padding: 0 10px 0 18px; + } + + .i-sdc-designer-leftbar-section-title.expanded + .i-sdc-designer-leftbar-section-content { + max-height: 9999px; + margin: 0 auto 1px; + transition: all .3s; + padding: 10px 18px 10px 18px; + overflow: hidden; + } + +} + +.w-sdc-search-icon{ + position: absolute; + right: 40px; + top: 40px; + &.leftbar{ + top: 19px; + right: 18px; + } + &.magnification { + .sprite; + .sprite.magnification-glass; + .hand; + } + + &.cancel { + .sprite; + .sprite.clear-text; + .hand; + } +} |