diff options
Diffstat (limited to 'catalog-ui/src/app/directives/layout')
6 files changed, 531 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.html b/catalog-ui/src/app/directives/layout/top-nav/top-nav.html new file mode 100644 index 0000000000..60d3d63855 --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-nav/top-nav.html @@ -0,0 +1,54 @@ +<nav class="top-nav"> + + <div class="asdc-app-title-wrapper"> + <a class="asdc-app-title" translate="PROJECT_TITLE"></a> + <div class="asdc-version"> v.{{version}}</div> + </div> + + <ul class="top-menu" data-ng-show="!menuModel"> + <!-- no hierarchy & dropdowns mode --> + <li data-ng-repeat="item in topLvlMenu.menuItems" + data-ng-class="{'selected': $index == topLvlMenu.selectedIndex}"> + <a data-ng-click="menuItemClick(topLvlMenu, item)" + data-tests-id="main-menu-button-{{item.text | lowercase}}">{{item.text}}</a> + </li> + </ul> + + <ul class="top-menu" data-ng-show="menuModel"> + <!-- with hierarchy & dropdowns mode --> + <li data-ng-repeat-start="groupItem in menuModel" + data-ng-class="{'selected': $last }"> + <a data-ng-click="menuItemClick(groupItem, groupItem.menuItems[groupItem.selectedIndex])" + data-tests-id="breadcrumbs-button-{{$index}}"> + {{groupItem.menuItems[groupItem.selectedIndex].text}} + </a> + </li> + <li data-ng-repeat-end="" class="triangle-dropdown" + data-ng-class="{'item-click': groupItem.itemClick}" data-ng-mouseover="groupItem.itemClick = true"> + <div class="triangle"><span class="sprite-new arrow-right"></span></div> + <perfect-scrollbar scroll-y-margin-offset="15" include-padding="true"> + <ul> + <li data-ng-repeat="ddItem in groupItem.menuItems" + data-ng-click="menuItemClick(groupItem, ddItem)" + data-ng-class="{'selected': $index == groupItem.selectedIndex, 'disabled': ddItem.isDisabled}" + data-tests-id="sub-menu-button-{{ddItem.text | lowercase}}"> + <span sdc-smart-tooltip="">{{ddItem.text}}</span> + </li> + </ul> + </perfect-scrollbar> + </li> + </ul> + + <div class="top-search" data-ng-hide="hideSearch === true"> + <input type="text" + class="search-text" + placeholder="Search" + data-ng-model="searchBind" + data-tests-id="main-menu-input-search" + ng-model-options="{ debounce: 500 }" /> + <span class="w-sdc-search-icon magnification"></span> + </div> + + <div class="notification-icon" data-ng-disabled= "progress > 0" data-ng-class="{'disabled' : progress > 0}" data-ng-if="user.role === 'DESIGNER' && notificationIconCallback" data-ng-click="notificationIconCallback()" tooltips tooltip-side="left" tooltip-content="Vendor Software Product Repository" data-tests-id="repository-icon"></div> + +</nav> diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.less b/catalog-ui/src/app/directives/layout/top-nav/top-nav.less new file mode 100644 index 0000000000..65021bdc4d --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-nav/top-nav.less @@ -0,0 +1,218 @@ +.top-nav { + position: fixed; + top: @header_height; + background-color: @main_color_p; + .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33)); + width: 100%; + height: @top_nav_height; + line-height: @top_nav_height; + z-index: 10; + display: flex; + flex-direction: row; + align-items: center; + + .asdc-app-title-wrapper { + flex-grow: 1; + line-height: 16px; + margin: 0 20px; + + a.asdc-app-title { + .m_18_r; + text-decoration: none; + } + + .asdc-version { + .m_12_r; + .opacity(0.8); + line-height: 14px; + flex-grow: 1; + } + + } + + ul.top-menu { + list-style-type: none; + margin: 0 0 0 20px; + padding: 0; + flex-grow: 999; + + & > li { + float: left; + cursor: pointer; + line-height: 50px; + height: 50px; + padding: 0 20px; + + &.selected { + border-bottom: solid 4px @main_color_a; + + a { + color: @func_color_s; + } + } + + /*&:hover { + border-bottom: solid 4px @main_color_a; + }*/ + + a { + font-family: @font-omnes-medium; + color: @main_color_m; + font-size: 18px; + display: block; + text-align: center; + text-decoration: none; + } + + &.triangle-dropdown { + padding: 0; + position: relative; + + div.triangle { + margin-top: 15px; + border-radius: 2px; + width: 17px; + height: 18px; + + //temp use - until new triangle gets in + line-height: 18px; + text-align: center; + font-size: 10px; + + &:hover { + background-color: rgba(156, 156, 156, 0.2); + + span { + .arrow-right-hover; + } + } + } + + + li a { + font-size: 16px; + } + + .ps-container { + .perfect-scrollbar; + position: absolute; + left: 0; + top: 40px; + z-index: 1; + + overflow: hidden; + max-height: 0; + -webkit-transition: max-height 200ms ease-in; + -moz-transition: max-height 200ms ease-in; + -o-transition: max-height 200ms ease-in; + transition: max-height 200ms ease-in; + + div ul { + + padding: 0; + background-color: white; + + li { + + height: 35px; + background-color: white; + font-size: 13px; + width: 150px; + line-height: 35px; + padding: 0 10px; + + &.disabled { + opacity: 1; + } + &.selected { + background-color: @tlv_color_v; + font-weight: bold; + } + &:hover { + color: @main_color_a; + } + span { + height: 35px; + width: 130px; + display: inline-block; + } + } + } + } + &.item-click:hover .ps-container, + &.item-click:active .ps-container { + max-height: 500px; + border: 1px solid @func_color_b; + border-radius: 2px; + box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); + + div ul { + + } + } + } + } + + } + + .top-search { + position: relative; + flex-grow: 1; + padding: 0 20px; + + input.search-text { + .border-radius(2px); + width: 245px; + height: 32px; + line-height: 32px; + border: 1px solid @main_color_o; + outline: none; + text-indent: 10px; + + &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ + &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ + &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ + &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ + &:-ms-input-placeholder { font-style: italic; } /* Edge */ + /* font-style: italic; + }*/ + /* Firefox 18- */ + &::-moz-placeholder { + font-style: italic; + } + /* Firefox 19+ */ + &:-ms-input-placeholder { + font-style: italic; + } + /* IE 10+ */ + &:-ms-input-placeholder { + font-style: italic; + } + /* Edge */ + } + + .magnification { + position: absolute; + top: 19px; + right: 26px; + } + + } + + .notification-icon { + cursor: pointer; + flex-grow: 1; + margin: 0 10px 6px 0; + .sprite-new; + .vsp-list-icon; + + &:hover { + .vsp-list-icon-hover; + } + + &:active { + .vsp-list-icon-active; + } + + } + +} diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts b/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts new file mode 100644 index 0000000000..c7208a909a --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts @@ -0,0 +1,141 @@ +'use strict'; +import {IAppConfigurtaion, IHostedApplication, IUserProperties} from "app/models"; +import {IUserResourceClass} from "app/services"; +import {MenuItemGroup, MenuItem} from "app/utils"; + +export interface ITopNavScope extends ng.IScope { + topLvlSelectedIndex:number; + hideSearch:boolean; + searchBind:any; + menuModel:Array<MenuItemGroup>; + + topLvlMenu:MenuItemGroup; + goToState(state:string, params:Array<any>):ng.IPromise<boolean>; + menuItemClick:Function; + user:IUserProperties; + version:string; +} + + +export class TopNavDirective implements ng.IDirective { + + constructor(private $filter:ng.IFilterService, + private $state:ng.ui.IStateService, + private $q:ng.IQService, + private userResourceService:IUserResourceClass, + private sdcConfig:IAppConfigurtaion) { + } + + public replace = true; + public restrict = 'E'; + public transclude = false; + + + scope = { + topLvlSelectedIndex: '@?', + hideSearch: '=', + searchBind: '=', + version: '@', + notificationIconCallback: '=', + menuModel: '=?', + }; + + template = ():string => { + return require('./top-nav.html'); + }; + + public link = (scope:ITopNavScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { + + let getTopLvlSelectedIndexByState = ():number => { + if (!scope.topLvlMenu.menuItems) { + return 0; + } + + let result = -1; + + //set result to current state + scope.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + if (item.state === this.$state.current.name) { + result = index; + } + }); + + //if it's a different state , checking previous state param + if (result === -1) { + scope.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + if (item.state === this.$state.params['previousState']) { + result = index; + } + }); + } + + if (result === -1) { + result = 0; + } + + return result; + }; + + scope.user = this.userResourceService.getLoggedinUser(); + + let tmpArray:Array<MenuItem> = [ + new MenuItem(this.$filter('translate')("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null), + new MenuItem(this.$filter('translate')("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null) + ]; + + // Only designer can perform onboarding + if (scope.user && scope.user.role === 'DESIGNER') { + tmpArray.push(new MenuItem(this.$filter('translate')("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null)); + _.each(this.sdcConfig.hostedApplications, (hostedApp:IHostedApplication)=> { + if (hostedApp.exists) { + tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null)); + } + }); + } + + scope.topLvlMenu = new MenuItemGroup(0, tmpArray, true); + scope.topLvlMenu.selectedIndex = isNaN(scope.topLvlSelectedIndex) ? getTopLvlSelectedIndexByState() : scope.topLvlSelectedIndex; + + let generateMenu = () => { + if (scope.menuModel && scope.menuModel[0] !== scope.topLvlMenu) { + scope.menuModel.unshift(scope.topLvlMenu); + } + }; + scope.$watch('menuModel', generateMenu); + + generateMenu(); + + /////scope functions//// + + scope.goToState = (state:string, params:Array<any>):ng.IPromise<boolean> => { + let deferred = this.$q.defer(); + this.$state.go(state, params && params.length > 0 ? [0] : undefined); + deferred.resolve(true); + return deferred.promise; + }; + + scope.menuItemClick = (itemGroup:MenuItemGroup, item:MenuItem) => { + + itemGroup.itemClick = false; + + let onSuccess = ():void => { + itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item); + }; + let onFailed = ():void => { + }; + + if (item.callback) { + (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed); + } else { + scope[item.action](item.state, item.params).then(onSuccess, onFailed); + } + }; + }; + + public static factory = ($filter:ng.IFilterService, $state:ng.ui.IStateService, $q:ng.IQService, userResourceService:IUserResourceClass, sdcConfig:IAppConfigurtaion)=> { + return new TopNavDirective($filter, $state, $q, userResourceService, sdcConfig); + }; + +} + +TopNavDirective.factory.$inject = ['$filter', '$state', '$q', 'Sdc.Services.UserResourceService', 'sdcConfig']; diff --git a/catalog-ui/src/app/directives/layout/top-progress/top-progress.html b/catalog-ui/src/app/directives/layout/top-progress/top-progress.html new file mode 100644 index 0000000000..ab2c8e364e --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-progress/top-progress.html @@ -0,0 +1,22 @@ +<div class="top-progress"> + + <!--======================= Top progress var =======================--> + <div data-ng-if="progressValue>0 && progressValue<100"> + <span class="sdc-progress-title">{{progressMessage}}<span class="progress-percentage">{{progressValue}} %</span></span> + <div class="sdc-progress"> + <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{progressValue}}" aria-valuemin="0" aria-valuemax="100" data-ng-style="{width: progressValue+'%'}"></div> + </div> + </div> + + <div class="sdc-progress-success-wrapper" data-ng-if="progressValue===100"> + <span class="sdc-progress-success"></span> + <span class="sdc-progress-success-title">{{progressMessage}}</span> + </div> + + <div class="sdc-progress-error-wrapper" data-ng-if="progressValue===-1"> + <span class="sdc-progress-error"></span> + <span class="sdc-progress-error-title">{{progressMessage}}</span> + </div> + <!--======================= Top progress var =======================--> + +</div> diff --git a/catalog-ui/src/app/directives/layout/top-progress/top-progress.less b/catalog-ui/src/app/directives/layout/top-progress/top-progress.less new file mode 100644 index 0000000000..ce70bd7378 --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-progress/top-progress.less @@ -0,0 +1,60 @@ +.top-progress { + text-align: left; + + .sdc-progress-title { + .n_12_r; + height: 17px; + display: block; + + .progress-percentage { + float: right; + } + } + + .sdc-progress { + position: relative; + display: block; + height: 6px; + background-color: @main_color_o; + border-radius: 3px; + box-shadow: inset 0 1px 2px rgba(0,0,0,.1); + + .progress-bar { + border-radius: 3px; + background-color: @main_color_a; + } + + } + + .sdc-progress-success-wrapper { + display: flex; + align-items: flex-end; + + .sdc-progress-success-title { + .d_12_r; + margin-left: 10px; + } + + .sdc-progress-success { + .sprite-new; + .success-circle; + } + } + + .sdc-progress-error-wrapper { + display: flex; + align-items: flex-end; + + .sdc-progress-error-title { + .q_12_r; + margin-left: 10px; + } + + .sdc-progress-error { + .sprite-new; + .error-icon; + } + + } + +} diff --git a/catalog-ui/src/app/directives/layout/top-progress/top-progress.ts b/catalog-ui/src/app/directives/layout/top-progress/top-progress.ts new file mode 100644 index 0000000000..06beb43ea1 --- /dev/null +++ b/catalog-ui/src/app/directives/layout/top-progress/top-progress.ts @@ -0,0 +1,36 @@ +'use strict'; + +export interface ITopProgressScope extends ng.IScope { + progressValue:number; + progressMessage:string; +} + +export class TopProgressDirective implements ng.IDirective { + + constructor() { + } + + public replace = true; + public restrict = 'E'; + public transclude = false; + + scope = { + progressValue: '=', + progressMessage: '=' + }; + + template = ():string => { + return require('./top-progress.html'); + }; + + public link = (scope:ITopProgressScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { + + }; + + public static factory = ()=> { + return new TopProgressDirective(); + }; + +} + +TopProgressDirective.factory.$inject = []; |