diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/user-header-details')
3 files changed, 143 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/user-header-details/user-header-details-directive.html b/catalog-ui/app/scripts/directives/user-header-details/user-header-details-directive.html new file mode 100644 index 0000000000..1c99a18ab5 --- /dev/null +++ b/catalog-ui/app/scripts/directives/user-header-details/user-header-details-directive.html @@ -0,0 +1,9 @@ +<div class="w-sdc-header-user-container" data-tests-id="ffff"> + <div class="w-sdc-header-user-icon"></div> + <div class="w-sdc-header-user-details"> + <div sdc-smart-tooltip class="w-sdc-header-user-name" data-ng-bind="user.getName()"></div> + <div class="w-sdc-header-user-role" data-ng-bind="user.getRoleToView()"></div> + <div class="w-sdc-header-user-last-login" data-ng-show="user.getLastLogin()!==''">Last Login: {{user.getLastLogin() | date: 'MMM dd hh:mm a' : 'UTC'}} UTC</div> + </div> + <!--<div class="w-sdc-header-logout-icon"></div>--> +</div> diff --git a/catalog-ui/app/scripts/directives/user-header-details/user-header-details-directive.less b/catalog-ui/app/scripts/directives/user-header-details/user-header-details-directive.less new file mode 100644 index 0000000000..a14db7c6ee --- /dev/null +++ b/catalog-ui/app/scripts/directives/user-header-details/user-header-details-directive.less @@ -0,0 +1,62 @@ +.w-sdc-header-user-container { + .b_7; + width: 400px; + .flex-fixed(400px); + padding: 0 23px; + display: flex; + justify-content: flex-end; +} + +.w-sdc-header-user-icon { + background: no-repeat url('../../../styles/images/anonymous.jpg'); + border-radius: 50%; + height: 47px; + width: 47px; + background-size: cover; + border: solid 2px @color_m; + .flex-fixed(47px); +} + +.w-sdc-header-user-details { + padding: 4px 4px 4px 14px; + .vcenter; +} + +.w-sdc-header-user-name { + max-width: 160px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: bottom; + + .bold; + display: inline-block; +} + +.w-sdc-header-user-role { + .bold; + display: inline-block; + margin-left: 6px; + + &:before { + content: ''; + margin-right: 8px; + border-left: 1px solid @color_m; + } +} + +.w-sdc-header-user-last-login { + .font-type._3; + display: block; +} + +.w-sdc-header-logout-icon { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE5RjgxM0QxMDgzQTExRTVBQzA2OTg5ODlFNDVBNTZDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE5RjgxM0QyMDgzQTExRTVBQzA2OTg5ODlFNDVBNTZDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTlGODEzQ0YwODNBMTFFNUFDMDY5ODk4OUU0NUE1NkMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTlGODEzRDAwODNBMTFFNUFDMDY5ODk4OUU0NUE1NkMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Riq1bAAAA20lEQVR42mJ0CUv+z0Aa+AvEertXzrmGLMgCpZcD8S4iDfoDxHfQBWEGnQLasICBAsDEQCUwcAa5hqeEAHEKNVykB8SzgYZVUGpQPRDPAOJ2oGHNZBsEjF1QussC4mlAXAM0rAM5+tHDwQJIVRBh7m0gLgeql6ZarLHgcP4JIBWAJ+YYgdQUIPYH4k6g+gpyop8RGj6gcGoGGYLTRQRAIxBnAHEl0JAOvF4jAC4BcSrQkDkEw4hA9K8ZGpkW5jUzYGwkkFCwrQJ68Rc2gyKhmNii9hwQoxS1AAEGAO5PP/+ClIDAAAAAAElFTkSuQmCC'); + height: 20px; + width: 18px; + position: absolute; + right: 20px; + top: 29px; +} + + diff --git a/catalog-ui/app/scripts/directives/user-header-details/user-header-details-directive.ts b/catalog-ui/app/scripts/directives/user-header-details/user-header-details-directive.ts new file mode 100644 index 0000000000..46c43a266b --- /dev/null +++ b/catalog-ui/app/scripts/directives/user-header-details/user-header-details-directive.ts @@ -0,0 +1,72 @@ +/*- + * ============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========================================================= + */ +/// <reference path="../../references"/> +module Sdc.Directives { + 'use strict'; + export interface IUserHeaderDetailsScope extends ng.IScope { + name: string; + role: string; + iconUrl: string; + UserResourceClass:Services.IUserResourceClass; + user: Models.IUser; + sdcConfig:Models.IAppConfigurtaion; + initUser:Function; + } + + export class UserHeaderDetailsDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService, private $http:ng.IHttpService, private sdcConfig:Models.IAppConfigurtaion, private UserResourceClass:Services.IUserResourceClass) { + } + + scope = { + iconUrl: '=?' + }; + + replace = true; + restrict = 'E'; + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/user-header-details/user-header-details-directive.html'); + }; + + link = (scope:IUserHeaderDetailsScope) => { + + scope.initUser = ():void => { + let defaultUserId:string; + let user:Services.IUserResource = this.UserResourceClass.getLoggedinUser(); + if (!user) { + defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix]; + user = this.UserResourceClass.get({id: defaultUserId}, ():void => { + scope.user = new Models.User(user); + }); + } else { + scope.user = new Models.User(user); + } + }; + scope.initUser(); + }; + + public static factory = ($templateCache:ng.ITemplateCacheService, $http:ng.IHttpService, sdcConfig:Models.IAppConfigurtaion, UserResourceClass:Services.IUserResourceClass)=> { + return new UserHeaderDetailsDirective($templateCache, $http, sdcConfig, UserResourceClass); + }; + + } + + UserHeaderDetailsDirective.factory.$inject = ['$templateCache', '$http', 'sdcConfig', 'Sdc.Services.UserResourceService']; +} |