diff options
Diffstat (limited to 'ecomp-portal-FE/client/app/directives/left-menu')
3 files changed, 286 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/app/directives/left-menu/left-menu.directive.js b/ecomp-portal-FE/client/app/directives/left-menu/left-menu.directive.js new file mode 100644 index 00000000..363485fe --- /dev/null +++ b/ecomp-portal-FE/client/app/directives/left-menu/left-menu.directive.js @@ -0,0 +1,96 @@ +/*- + * ================================================================================ + * 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. + * ================================================================================ + */ + +(function () { + class LeftMenu { + constructor($rootScope, $log, userbarUpdateService) { + this.templateUrl = 'app/directives/left-menu/left-menu.tpl.html'; + this.restrict = 'AE'; + this.$rootScope = $rootScope; + this.$log = $log; + this.userbarUpdateService = userbarUpdateService; + this.link = this._link.bind(this); + this.scope = { + sidebarModel: '=' + } + } + + _link(scope) { + let init = () => { + scope.isOpen = true; + }; + + init(); + + scope.refreshOnlineUsers = () => { + this.userbarUpdateService.setRefreshCount(this.userbarUpdateService.maxCount); + }; + + scope.toggleSidebar = () => { + scope.isOpen = !scope.isOpen; + if(scope.isOpen) + setContentPos(1); + else + setContentPos(0); + + }; + + scope.isBrowserInternetExplorer = false; + scope.browserName = bowser.name; + + if (bowser.msie || bowser.msedge) { + scope.isBrowserInternetExplorer = true; + } else { + scope.isBrowserInternetExplorer = false; + } + + let log = this.$log; + + this.userbarUpdateService.getWidthThresholdLeftMenu().then(function (res) { + if (res == null || res.response == null) { + log.error('userbarUpdateService: failed to get window width threshold for collapsing left menu; please make sure "window_width_threshold_left_menu" is specified in system.properties file.'); + } else { + var leftMenuCollapseWidthThreshold = parseInt(res.response.windowWidth); + if ($(window).width()<leftMenuCollapseWidthThreshold) { + scope.toggleSidebar(); + } + } + })['catch'](function (err) { + log.error('LeftMenu Controller:: getWidthThresholdLeftMenu() failed: ' + err); + }); + + + + this.$rootScope.$on('$stateChangeStart', () => { + scope.isOpen = true; + }); + } + } + angular.module('ecompApp').directive('leftMenu', ($rootScope,$log,userbarUpdateService) => new LeftMenu($rootScope,$log,userbarUpdateService)); +})(); + +function setContentPos(open) { + if(open==1){ + $("#contentId" ).css( "padding-left", "210px" ); + }else{ + $("#contentId" ).css( "padding-left", "50px" ); + } + +} diff --git a/ecomp-portal-FE/client/app/directives/left-menu/left-menu.less b/ecomp-portal-FE/client/app/directives/left-menu/left-menu.less new file mode 100644 index 00000000..276fb409 --- /dev/null +++ b/ecomp-portal-FE/client/app/directives/left-menu/left-menu.less @@ -0,0 +1,133 @@ +/*- + * ================================================================================ + * 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. + * ================================================================================ + */ +@sidebar-width: 200px; +@transition-duration: 0.25s; +@overlayer-opacity: 0.65; + + +.close-button { + .a24r; + font-size: 3em; + line-height: 18px; + position: absolute; + cursor: pointer; + vertical-align: middle; + top: @second-level-top; + left: 0; + -webkit-font-smoothing: antialiased; + height: 53px; + z-index: 101; +} +.ecomp-sidebar-container { + position: absolute; + display: block; + left: 0; + z-index: 100; + transition: left @transition-duration; + margin-top: -15px; + + .ecomp-sidebar-main { + position: absolute; + margin-top: 65px; + width: @sidebar-width; + height: 100vh; + .bg_u; + box-shadow: 0 4px 5px rgba(0, 0, 0, .2); + + padding-right: 10px; + padding-left: 10px; + + .accordion-container{ + margin-top: 45px; + overflow-y:auto; + overflow-x:hidden; + } + .att-accordion-font{ + font-size: .875rem; + color: #666; + display: inline-block; + font-family: arial; + + } + + .att-accordion-active{ + color: #199DDF !important; + } + + .sub-item{ + .att-accordion-font; + cursor: pointer; + height: 37px; + line-height: 37px; + padding-left: 20px; + padding-bottom: 10px; + vertical-align: middle; + width: 100%; + } + .sub-item:hover{ + .att-accordion-active; + } + + .parent-item{ + .att-accordion-font; + border-bottom: 1px solid #bbb; + cursor: pointer; + height: 37px; + line-height: 37px; + padding-bottom: 10px; + vertical-align: middle; + width: 100%; + } + .parent-item:hover{ + .att-accordion-active; + } + + } +} + +.open-sidebar { + left: 0; +} + +.close-sidebar { + left: -@sidebar-width; +} + +.content-overlayed { + position: fixed; + top: 110px; + right: 0; + bottom: 0; + left: 0; + background: none repeat scroll 0 0 rgb(242, 242, 242); + z-index: 9999; +} +.fade-animation{ + opacity: @overlayer-opacity; + transition: opacity @transition-duration ease-in-out; +} +.fade-animation.ng-hide { + opacity:0; + transition: opacity @transition-duration ease-in-out; +} + +#contentId{ + padding-left:210px +}
\ No newline at end of file diff --git a/ecomp-portal-FE/client/app/directives/left-menu/left-menu.tpl.html b/ecomp-portal-FE/client/app/directives/left-menu/left-menu.tpl.html new file mode 100644 index 00000000..0059d6a4 --- /dev/null +++ b/ecomp-portal-FE/client/app/directives/left-menu/left-menu.tpl.html @@ -0,0 +1,57 @@ +<!-- + ================================================================================ + 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. + ================================================================================ + --> +<div class="close-button" ng-click="toggleSidebar()"> + <span id="icon-hamburger" class="ion-navicon-round" ></span> +</div> +<div id="ecomp-sidebar-container" class="ecomp-sidebar-container" ng-class="isOpen ? 'open-sidebar': 'close-sidebar'"> + <div class="ecomp-sidebar-main" > + <div class="accordion-container" id="accordion-container"> + <accordion close-others="true" css="att-accordion--no-box"> + <div ng-repeat="parent in sidebarModel.navItems"> + <div ng-click="refreshOnlineUsers()" id="parent-item-{{parent.name.split(' ').join('-')}}" + class="parent-item" + ng-if="!parent.subMenu" + class="child-row" + ui-sref="{{parent.state}}" ui-sref-active="att-accordion-active"> + <i id="icon-image-{{parent.name.split(' ').join('-')}}" ng-class="parent.imageSrc" class=\"pull-left\"></i> + {{parent.name}} + </div> + + <accordion-group + id="accordion-group" + ng-if="parent.subMenu" + heading="{{parent.name}}" + image-source="{{parent.imageSrc}}" > + <div id="sub-item-{{child.name.split(' ').join('-')}}" + class="sub-item" + ng-repeat="child in parent.subMenu" + class="child-row" + ui-sref="{{child.state}}" ui-sref-active="att-accordion-active" + image-source="{{parent.imageSrc}}"> + <i id="child-item-{{child.name.split(' ').join('-')}}" ng-class="child.imageSrc" class=\"pull-left\"></i> {{child.name}} + </div> + </accordion-group> + + </div> + </accordion> + + </div> + </div> +</div> |