diff options
Diffstat (limited to 'ecomp-portal-FE-common/client/app/views/tabs')
4 files changed, 1077 insertions, 0 deletions
diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html b/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html new file mode 100644 index 00000000..0155592a --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/tabs/tabframe.html @@ -0,0 +1,22 @@ +<!-- + ================================================================================ + eCOMP Portal + ================================================================================ + Copyright (C) 2017 AT&T Intellectual Property + ================================================================================ + 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. + ================================================================================ + --> +<iframe id= "tabframe-{{tab.title.split(' ').join('-')}}" scrolling='yes' frameBorder='0' width='100%' style='height: 90vh;' +src='{{tab.content | trusted}}' +></iframe>
\ No newline at end of file diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js new file mode 100644 index 00000000..5a5b7e49 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.js @@ -0,0 +1,314 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * 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. + * ================================================================================ + */ +'use strict'; +(function () { + const HTTP_PROTOCOL_RGX = /https?:\/\//; + class TabsCtrl { + constructor(applicationsService, $log, $window, conf, userProfileService, userbarUpdateService, $scope,$cookies,$rootScope,confirmBoxService,auditLogService) { + // Tab counter + var counter = 1; + var tabLimit = 6; + this.conf = conf; + var cookieDomain = this.conf.cookieDomain; + // Array to store the tabs + $scope.tabs = []; + $scope.notificationShow=true; + $rootScope.showFooter = ""; + $cookies.putObject('show_app_header', false,{domain: cookieDomain, path : '/'}); + + + let noRefresh = function () { + window.onbeforeunload = function(e) { + + var isQtoHref = false; + try{ + isQtoHref = e.srcElement.activeElement.href.includes("to"); + } catch(err) { + + } + + if ($scope.tabs.length > 1 && isQtoHref == false) { + return "Changes you made may not be saved. Are you sure you want to refresh?"; + } else { + return null; + } + } + } + // Add tab to the end of the array + var addTab = function (title, content) { + if($scope.tabs.length===tabLimit){ + //alert + confirmBoxService.showInformation('You have reached your maximum limit of tabs allowed.').then(isConfirmed => {}); + } else { + // console.log(window.performance.memory); + // var usedperc = (window.performance.memory.usedJSHeapSize/window.performance.memory.jsHeapSizeLimit)*100; + // console.log('Current memory usage: '+usedperc+'%'); + if(title!=='Home' && content.indexOf('https') == -1){ + console.log('App URL: '+content+'. The application URL you are trying to open is not HTTPS. We recommend to use secured HTTPS URL while on-boarding the application.'); + //confirmBoxService.showInformation('The application URL you are trying to open is not HTTPS. We recommend to use secured HTTPS URL while on-boarding the application.').then(isConfirmed => {}); + } + + $scope.tabs.push({ title: title, content: content }); + counter++; + //$scope.tabs[$scope.tabs.length - 1].disabled = false; + $scope.selectedIndex = $scope.tabs.length - 1; + if ($scope.tabs.length > 1) { + noRefresh(); + } + $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'}); + $cookies.putObject('visInVisCookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'}); + } + }; + + //with APP ID + var addTab = function (title, content, appId) { + if($scope.tabs.length===tabLimit){ + //alert + confirmBoxService.showInformation('You have reached your maximum limit of tabs allowed.').then(isConfirmed => {}); + } else { + if(title!=='Home' && content.indexOf('https') === -1){ + console.log('App URL: '+content+'. The application URL you are trying to open is not HTTPS. We recommend to use secured HTTPS URL while on-boarding the application.'); + } + $scope.tabs.push({ title: title, content: content, appId:appId }); + counter++; + $scope.selectedIndex = $scope.tabs.length - 1; + if ($scope.tabs.length > 1) { + noRefresh(); + } + $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'}); + $cookies.putObject('visInVisCookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'}); + } + }; + + // adjust title - trim the title and append ... + var adjustTitle = function (title) { + var index = 15; + var nonEmptyCharPattern = /(\s|\w)/; + var adjustedTitle = title.substring(0,index); + var ext = title.charAt(index).replace(nonEmptyCharPattern,'...'); + return adjustedTitle.concat(ext); + + + }; + + //store audit log + $scope.auditLog = function(app) { + $log.debug('auditLog::auditLog: auditLog.ping() = ' + app); + var comment = ''; + if(app.content==null || app.content=='') + comment= app.title; + else + comment = app.content; + auditLogService.storeAudit(app.appId, 'tab', comment); + }; + + // Remove tab by index + var removeTab = function (event, index) { + event.preventDefault(); + event.stopPropagation(); + $scope.tabs.splice(index, 1); + $cookies.putObject('cookieTabs', $scope.tabs,{domain: cookieDomain, path : '/'}); + }; + + //adjust height of the tab due to the search popup being hidden + $scope.adjustTabStyle = function(title){ + if(title=='Home'){ + $(".w-ecomp-tabs").css('height',"50px"); + }else{ + $(".w-ecomp-tabs").css('height',"100%"); + } + } + + // select tab + var selectTab = function (title) { + $scope.adjustTabStyle(title); + if(title==='Home') { + $rootScope.ContentModel.IsVisible=true; + $rootScope.showFooter = true; + $rootScope.tabBottom = 75; + userbarUpdateService.setRefreshCount(userbarUpdateService.maxCount); + } + else { + $rootScope.ContentModel.IsVisible=false; + $rootScope.showFooter = false; + $rootScope.tabBottom = 0; + } + }; + + // Initialize the scope functions + $scope.addTab = addTab; + $scope.removeTab = removeTab; + $scope.selectTab = selectTab; + $scope.adjustTitle = adjustTitle; + + + $rootScope.ContentModel = { + IsVisible : false, + ViewUrl : null, + }; + + + var sessionActive = applicationsService.ping() + .then(sessionActive => { + // $log.debug('TabsCtrl::addTab: applicationsService.ping() = ' + JSON.stringify(sessionActive)); + // For demonstration add 5 tabs + + var cookieTabs = $cookies.getObject('cookieTabs'); + if(cookieTabs!=null){ + for(var t in cookieTabs){ + // console.log('TabsCtrl::addTab: cookieTabs title: '+cookieTabs[t].title); + if(cookieTabs[t].title!=null && cookieTabs[t].title==='Home'){ + cookieTabs[t].content = ""; + $rootScope.ContentModel.IsVisible=true; + addTab( cookieTabs[t].title, cookieTabs[t].content,1) ; + }else{ + addTab( cookieTabs[t].title, cookieTabs[t].content,cookieTabs[t].appId) ; + } + + } + } else { + for (var i = 0; i < 1; i++) { + var content=""; + var title=""; + var appId="" + if(i===0){ + title="Home"; + $rootScope.ContentModel.IsVisible=true; + addTab(title, content,1); + }else{ + addTab(title, content,appId); + } + } + } + + + + //$scope.tabs[$scope.tabs.length - 1].active = false; + //$scope.tabs[0].disabled = false; + $scope.selectedIndex = 0; + }); + + $scope.$watchCollection(function() { return $cookies.getObject('addTab'); }, function(newValue) { + // $log.log('Cookie string: ' + $cookies.get('test')) + var tabContent = $cookies.getObject('addTab'); + if(tabContent!=null && tabContent.url!=null){ + var tabExists = false; + for(var x in $scope.tabs){ + // console.log($scope.tabs[x].content); + if($scope.tabs[x].title==tabContent.title){ + tabExists = true; + //$scope.tabs[x].disabled = false; + $scope.selectedIndex = x; + // added dummy variable to get iframe reloded if tab is already opened. + if(tabContent.url.indexOf('?')===-1){ + $scope.tabs[x].content=tabContent.url+'?dummyVar='+(new Date()).getTime(); + } + else{ + $scope.tabs[x].content=tabContent.url+'&dummyVar='+(new Date()).getTime(); + } + } + } + if(!tabExists){ + addTab( tabContent.title, tabContent.url,tabContent.appId) ; + } + $cookies.remove('addTab'); + } + }); + } + } + TabsCtrl.$inject = ['applicationsService', '$log', '$window', 'conf', 'userProfileService', 'userbarUpdateService', '$scope','$cookies','$rootScope','confirmBoxService','auditLogService']; + angular.module('ecompApp').controller('TabsCtrl', TabsCtrl); + + angular.module('ecompApp').directive('mainArea', function() { + return { + restrict: "E", + templateUrl: 'app/views/tabs/tabframe.html', + link: function(scope, element) { + + //var iframeId = "#tabframe-" + scope.$parent.tab.title.split(' ').join('-'); + // jQuery(iframeId).load(function() { + // alert("hello"); + // }); //.attr("src",'{{tab.content | trusted}}' ); //src='{{tab.content | trusted}}' + // jQuery(iframeId).attr('src', '{{tab.content | trusted}}'); + + //element.childNodes[0].on('load', function() { + // alert('hello'); + //}); + } + } + }); + + + + angular.module('ecompApp').directive('tabHighlight', [function () { + return { + restrict: 'A', + link: function (scope, element) { + // Here is the major jQuery usage where we add the event + // listeners mousemove and mouseout on the tabs to initalize + // the moving highlight for the inactive tabs + var x, y, initial_background = '#c3d5e6'; + + element + .removeAttr('style') + .mousemove(function (e) { + // Add highlight effect on inactive tabs + if(!element.hasClass('md-active')) + { + x = e.pageX - this.offsetLeft; + y = e.pageY - this.offsetTop; + + // Set the background when mouse moves over inactive tabs + element + .css({ background: '-moz-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background }) + .css({ background: '-webkit-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background }) + .css({ background: 'radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background }); + } + }) + .mouseout(function () { + // Return the inital background color of the tab + element.removeAttr('style'); + }); + } + }; + }]); + + + +})(); + +function getParameterByName(name, url) { + if (!url) url = window.location.href; + name = name.replace(/[\[\]]/g, "\\$&"); + var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), + results = regex.exec(url); + if (!results) return ''; + if (!results[2]) return ''; + return (results[2].replace(/\+/g, " ")); +} + +function isCascadeFrame(ref) { + // alert(ref.id); + if (self != top) { + var e = document.body; + e.parentNode.removeChild(e); + window.location = "unKnownError"; + } +} diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.spec.js b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.spec.js new file mode 100644 index 00000000..b9fd0acc --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.controller.spec.js @@ -0,0 +1,81 @@ +/*- + * ================================================================================ + * eCOMP Portal + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property + * ================================================================================ + * 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. + * ================================================================================ + */ +'use strict'; + +describe('Controller: TabsCtrl ',() => { + beforeEach(module('ecompApp')); + + //destroy $http default cache before starting to prevent the error 'default cache already exists' + beforeEach(inject((_CacheFactory_)=>{ + _CacheFactory_.destroyAll(); + })); + + let TabsCtrl, $controller, $q, $rootScope, $log, $window, $cookies,$scope; + + beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_, _$window_, _$cookies_)=>{ + [$controller, $q, $rootScope, $log, $window, $cookies] = [_$controller_, _$q_, _$rootScope_, _$log_, _$window_, _$cookies_]; + })); + + var deferredApps, deferredUserProfile; + beforeEach(()=>{ + deferredApps = $q.defer(); + deferredUserProfile = $q.defer(); + let applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock', ['getUserApps']); + applicationsServiceMock.getUserApps.and.returnValue(deferredApps.promise); + + let userProfileServiceMock = jasmine.createSpyObj('userProfileServiceMock',['getUserProfile']); + userProfileServiceMock.getUserProfile.and.returnValue(deferredUserProfile.promise); + + $scope = $rootScope.$new(); + TabsCtrl = $controller('TabsCtrl', { + applicationsService: applicationsServiceMock, + $log: $log, + $window: $window, + userProfileService: userProfileServiceMock, + $scope: $scope, + $cookies: $cookies, + $rootScope: $rootScope + }); + }); + + it('should populate this.apps with data from portals service getUserApps', ()=>{ + var profile = {roles:'superAdmin',userId:'userid'}; + deferredUserProfile.resolve(profile); + deferredApps.resolve([{name: 'portal1'},{name: 'portal2'},{name: 'portal3'}]); + $rootScope.$apply(); + expect($scope.appsViewData.length).toBe(3); + }); + + it('should call $log error when getAllPortals fail', ()=>{ + spyOn($log, 'error'); + deferredUserProfile.reject('something happened!'); + $rootScope.$apply(); + expect($log.error).toHaveBeenCalled(); + }); + + it('should open link in a new window when clicking app thumbnail', () => { + spyOn($window, 'open'); + let someUrl = 'http://some/url/'; + TabsCtrl.goToPortal(someUrl); + expect($window.open).toHaveBeenCalledWith(someUrl, '_self'); + }); + + +});
\ No newline at end of file diff --git a/ecomp-portal-FE-common/client/app/views/tabs/tabs.less b/ecomp-portal-FE-common/client/app/views/tabs/tabs.less new file mode 100644 index 00000000..9f90d610 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/tabs/tabs.less @@ -0,0 +1,660 @@ +.w-ecomp-tabs { + //.bg_portalWhite;//white for 1702 + .bg_portalGray; // gray for 1610 + + position: fixed; + left: 0; + right: 0; + bottom: @page-main-bottom; + overflow-y: hidden; + top: @header-height; + padding-left: 0; + height:50px; + z-index:101; + .go-button { + .btn-green; + width: 96px; + position: absolute; + border-radius: 0px; + } + + .tabs-container { + .content_justify; + position: relative; + padding: 15px 0 32px 0; + width: 100%; + + .tabs-title { + //.a24r; + .dBlue24r; // AT&T Dark Blue + margin: auto; + .content_justify; + } + .portals-list { + min-height: 70vh; + //display: flex; + justify-content: center; + flex-flow: row wrap; + width: 1170px; + + margin: auto; + margin-bottom: 63px; + + .app-gridster-header { + background-color: @portalWhite; + } + + .app-gridster-footer { + background-color: @portalWhite; + } + + .portals-list-item { + background-color: @portalWhite; + border-radius: 2px; + box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1); + display: inline-block; + width: 360px; + height: 300px; + background-size: cover; + cursor: pointer; + margin: 15px; + overflow: hidden; + + .portals-item-info { + background-color: @portalWhite; + height: 120px; + top: 180px; + position: relative; + box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1); + padding: 16px; + + .info-title { + //.a24r; + .dBlue24r; // AT&T Dark Blue + margin-bottom: 4px; + + text-overflow: ellipsis; + overflow: hidden; + } + .info-description { + .portalDBlue16r; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + .info-button { + .btn-green; + width: 96px; + position: absolute; + bottom: 16px; + left: 16px; + } + + &:hover { + opacity: .93; + z-index: 3; + } + } + } + } + } +} + +.w-ecomp-main-disclaimer { + text-align: center; + .dGray14r; + bottom: -37px; + width: 100%; + line-height: 1.5em; + +} +//.build-number { +// .o12i; +//} + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + + + +.tab-container { + background: @portalLGray; + margin: 0; + padding: 0; + max-height: 40px; +} +.tab-container ul.nav-tabs { + margin: 0; + list-style-type: none; + line-height: 40px; + max-height: 40px; + overflow: hidden; + display: inline-block; + display: -webkit-flex; + display: flex; + padding-right: 20px; + border-bottom: 5px solid @funcBkgGray; +} +.tab-container ul.nav-tabs > li { + margin: 5px -14px 0; + -moz-border-radius-topleft: 28px 145px; + -webkit-border-top-left-radius: 28px 145px; + border-top-left-radius: 28px 145px; + -moz-border-radius-topright: 28px 145px; + -webkit-border-top-right-radius: 28px 145px; + border-top-right-radius: 28px 145px; + padding: 0 30px 0 25px; + height: 170px; + background: #c3d5e6; + position: relative; + -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); + width: 200px; + max-width: 200px; + min-width: 20px; + border: 1px solid @portalGray; +} +.tab-container ul.nav-tabs > li:first-child { + margin-left: 0; +} +.tab-container ul.nav-tabs > li:last-of-type { + margin-right: 0; +} +.tab-container ul.nav-tabs > li > a { + display: block; + max-width: 100%; + text-decoration: none; + color: @portalBlack; + padding: 3px 7px; +} +.tab-container ul.nav-tabs > li > a span { + overflow: hidden; + white-space: nowrap; + display: block; +} +.tab-container ul.nav-tabs > li > a:focus, .tab-container ul.nav-tabs > li > a:hover { + background-color: transparent; + border-color: transparent; +} +.tab-container ul.nav-tabs > li > a .glyphicon-remove { + color: @portalDGray; + display: inline-block; + padding: 3px; + font-size: 10px; + position: absolute; + z-index: 10; + top: 7px; + right: -10px; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} +.tab-container ul.nav-tabs > li > a .glyphicon-remove:hover { + background: @portalLPurple; + color: @portalWhite; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); +} +.tab-container ul.nav-tabs > li.active { + z-index: 4; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 30, color-stop(0%, @portalWhite), color-stop(100%, @funcBkgGray)); + background-image: -moz-linear-gradient(@portalWhite, @funcBkgGray 30px); + background-image: -webkit-linear-gradient(@portalWhite, @funcBkgGray 30px); + background-image: linear-gradient(@portalWhite, @funcBkgGray 30px); +} +.tab-container ul.nav-tabs > li.active > a { + background-color: transparent; + border-color: transparent; + border-bottom-color: transparent; +} +.tab-container ul.nav-tabs > li.active > a:focus, .tab-container ul.nav-tabs > li.active > a:hover { + background-color: transparent; + border-color: transparent; + border-bottom-color: transparent; +} +.tab-container ul.nav-tabs .btn { + float: left; + height: 20px; + width: 35px; + min-width: 35px; + max-width: 35px; + margin: 10px 0 0 0; + border-color: @portalLBlue; + outline: none; + -moz-transform: skew(30deg); + -ms-transform: skew(30deg); + -webkit-transform: skew(30deg); + transform: skew(30deg); +} +.tab-container ul.nav-tabs .btn.btn-default { + background: #c3d5e6; +} +.tab-container ul.nav-tabs .btn.btn-default:hover { + background: #d2deeb; +} +.tab-container ul.nav-tabs .btn.btn-default:active { + background: #9cb5cc; +} +.tab-container .tab-pane { + padding: 0px 0px; + text-align: center; +} +.tab-container .tab-pane.active { + border-top: 1px solid #ddd; +} + +.tab-container md-content { + background-color: transparent !important; } + .tab-container md-content md-tabs { + border: 1px solid #e1e1e1; } + .tab-container md-content md-tabs md-tab-content { + background: #f6f6f6; } + .tab-container md-content md-tabs md-tabs-canvas { + background: white; } + .tab-container md-content h1:first-child { + margin-top: 0; } +.tab-container md-input-container { + padding-bottom: 0; } +.tab-container .remove-tab { + margin-bottom: 40px; } +.tab-container .demo-tab > div > div { + padding: 25px; + box-sizing: border-box; } +.tab-container .edit-form input { + width: 100%; } +.tab-container md-tabs { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); } +.tab-container md-tab[disabled] { + opacity: 0.5; } +.tab-container label { + text-align: left; } +.tab-container .long > input { + width: 264px; } +.tab-container .md-button.add-tab { + transform: translateY(5px); } + +.md-tab{ + font-size: 13px; + line-height: 30px; + margin: 5px -3px 0; + border-top-left-radius: 88px 205px; + border-top-right-radius: 88px 205px; + padding: 0 30px 0 25px; + height: 40px; + background: @portalLGray; + position: relative; + box-shadow: 0 4px 6px rgba(0,0,0,.5); + width: 180px; + max-width: 200px; + min-width: 20px; + border: 1px solid #aaa; + text-transform: capitalize; + text-align: left; +} + +md-tabs .md-tab { + color: #222; +} + +md-tabs-canvas { + border-bottom: 5px solid #f7f7f7; + height: 40px; +} +.md-tab.md-active { + z-index: 4; + background-color: #f5f5f5 !important; +} +.md-tab:first-child{ + margin-left: 10px; +} +md-ink-bar{ + z-index: 5 !important; +} + +.glyphicon { + position: fixed; + line-height: 4; +} +.close_button { + font-size: x-small;width: 10px; + margin-left: 130px; +} +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .close_button { + font-size: x-small;width: 10px;margin-left: 130px;margin-top: 55px; + } +} + +*, +*:after, +*:before +{ + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +.button-default +{ + .transition(@transitionDefault color); + background: transparent; + border: none; + cursor: pointer; + margin: 0; + outline: none; + position: relative; +} + +.show-notifications +{ + position: relative; + + &:hover, + &:focus, + &.active + { + #icon-bell + { + fill: @colorWetAsphalt; + } + } + + #icon-bell + { + fill: @colorAsbestos; + } + + + + &.active ~ .notifications + { + opacity: 1; + top: 35px; + } +} +.notifications_li{ + border-top: 1px solid #bdc3c7; + color: #7f8c8d; + cursor: default; + display: block; + padding: 10px; + position: relative; + white-space: nowrap; + width: 350px; +} +.notifications_li:hover{ + background:#eee; +} +.notifications_detail{ + margin-left: 10px; + white-space: normal; + width: 280px; + display: inline-block; + vertical-align: middle; +} + +.notifications_empty{ + display: none; + text-align: center; +} +.notifications_title{ + display: block; +} + +.notifications_date{ + color: #95a5a6; + font-size: .85em; + margin-top: 3px; +} +.notifications +{ + .border-radius(@borderRadius); + .transition(@transitionDefault opacity); + background: @colorClouds; + border: 1px solid @colorSilver; + left: 10px; + opacity: 0; + // position: absolute; + //top: -999px; + + &:after + { + border: 10px solid transparent; + border-bottom-color: @colorPeterRiver; + content: ''; + display: block; + height: 0; + left: 10px; + position: absolute; + top: -20px; + width: 0; + } + + h3, + .show-all + { + background: @colorPeterRiver; + color: @colorWhite; + margin: 0; + padding: 10px; + width: 350px; + } + + h3 + { + cursor: default; + font-size: 1.05em; + font-weight: normal; + } + + .show-all + { + display: block; + text-align: center; + text-decoration: none; + + &:hover, + &:focus + { + text-decoration: underline; + } + } + + .notifications-list + { + list-style: none; + margin: 0; + overflow: hidden; + padding: 0; + + .item + { + .transition-transform(@transitionDefault); + border-top: 1px solid @colorSilver; + color: @colorAsbestos; + cursor: default; + display: block; + padding: 10px; + position: relative; + white-space: nowrap; + width: 350px; + + &:before, + .details, + .button-dismiss + { + display: inline-block; + vertical-align: middle; + } + + &:before + { + .border-radius(50%); + background: @colorPeterRiver; + content: ''; + height: 8px; + width: 8px; + } + + .details + { + margin-left: 10px; + white-space: normal; + width: 280px; + + .title, + .date + { + display: block; + } + + .date + { + color: @colorConcrete; + font-size: .85em; + margin-top: 3px; + } + } + + .button-dismiss + { + color: @colorSilver; + font-size: 2.25em; + + &:hover, + &:focus + { + color: @colorConcrete; + } + } + + &.no-data + { + display: none; + text-align: center; + + &:before + { + display: none; + } + } + + &.expired + { + color: @colorSilver; + + &:before + { + background: @colorSilver; + } + + .details + { + .date + { + color: @colorSilver; + } + } + } + + &.dismissed + { + .transform(translateX(100%)); + } + } + } + + &.empty + { + .notifications-list + { + .no-data + { + display: block; + padding: 10px; + } + } + } +} + +/* variables */ +@colorClouds: #ecf0f1; +@colorSilver: #bdc3c7; +@colorWhite: #fefefe; +@colorPeterRiver: #3498db; +@colorConcrete: #95a5a6; +@colorAsbestos: #7f8c8d; +@colorWetAsphalt: #34495e; + +@borderRadius: 2px; + +@transitionDefault: 0.25s ease-out 0.10s; + +/* mixins */ +.background-clip(@value: border-box) +{ + -moz-background-clip: @value; + -webkit-background-clip: @value; + background-clip: @value; +} + +.border-radius(@value: 5px) +{ + -moz-border-radius: @value; + -webkit-border-radius: @value; + border-radius: @value; + .background-clip(padding-box); +} + +.transform(@value) +{ + -webkit-transform: @value; + -moz-transform: @value; + -ms-transform: @value; + -o-transform: @value; + transform: @value; +} + +.transition(@value: all 0.25s ease-out) +{ + -webkit-transition: @value; + -moz-transition: @value; + -o-transition: @value; + transition: @value; +} + +.transition-transform(@transition: 0.25s ease-out) +{ + -webkit-transition: -webkit-transform @transition; + -moz-transition: -moz-transform @transition; + -o-transition: -o-transform @transition; + transition: transform @transition; +} + +.tab-cross-sign{ + position:relative; + margin-left: 126px; + top:-70px; + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + top:-70px; + } +} + +#tab-cross-sign-icon{ + margin: 48px 0px 0px 0px; + width: 16.1px; + border-bottom-width:0px; + padding: 6px 6px 6px 3px; +} |