diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/sdc-tabs')
5 files changed, 222 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts new file mode 100644 index 0000000000..26390a7501 --- /dev/null +++ b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts @@ -0,0 +1,67 @@ +/*- + * ============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 class SdcSingleTabDirective implements ng.IDirective { + + constructor(private $compile:ng.ICompileService, private $parse:ng.IParseService) { + } + restrict = 'E'; + + link = (scope, elem:any, attrs:any, ctrl:any) => { + if(!elem.attr('inner-sdc-single-tab')) { + let name = this.$parse(elem.attr('ctrl'))(scope); + elem = elem.removeAttr('ctrl'); + elem.attr('inner-sdc-single-tab', name); + this.$compile(elem)(scope); + } + }; + + public static factory = ($compile:ng.ICompileService, $parse:ng.IParseService)=> { + return new SdcSingleTabDirective($compile, $parse); + }; + } + + export class InnerSdcSingleTabDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService) { + } + + scope = { + singleTab: "=", + isViewOnly: "=" + }; + + replace = true; + restrict = 'A'; + controller = '@'; + template = '<div ng-include src="singleTab.templateUrl"></div>'; + + public static factory = ($templateCache:ng.ITemplateCacheService)=> { + return new InnerSdcSingleTabDirective($templateCache); + }; + } + + SdcSingleTabDirective.factory.$inject = ['$compile', '$parse']; + InnerSdcSingleTabDirective.factory.$inject = ['$templateCache']; + +} diff --git a/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less @@ -0,0 +1 @@ + diff --git a/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive-view.html b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive-view.html new file mode 100644 index 0000000000..d51d221922 --- /dev/null +++ b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive-view.html @@ -0,0 +1,17 @@ +<div class="sdc-tabs-body"> + <div class="sdc-tabs" ng-class="{'not-active': !isActive}"> + <div class="sdc-tab-arrow" ng-click="isActive = !isActive"> + <span class="sprite-new close-open-left-arrow" ng-class="{'close-open-right-arrow': !isActive}"></span> + </div> + <div ng-repeat="tab in tabs track by $index"> + <div class="sdc-tab" ng-click="onTabSelected(tab)" data-tests-id="{{tab.name}}-tab" ng-mouseenter="hover = true" + ng-mouseleave="hover = false" + ng-class="{'last-tab':$last, 'first-tab': $first, 'selected' :tab.name === selectedTab.name }"> + <div class="sdc-tab-icon sprite-new {{tab.icon}}" ng-class="{'selected' :tab.name === selectedTab.name, 'hover': hover}"></div> + </div> + </div> + </div> + <div class="sdc-single-tab-content" ng-if="isActive"> + <sdc-single-tab class="sdc-single-tab-content-body" ng-if="selectedTab" ctrl="selectedTab.controller" data-dests-id="selected-tab" single-tab="selectedTab" is-view-only="isViewOnly"></sdc-single-tab> + </div> +</div> diff --git a/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive.ts b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive.ts new file mode 100644 index 0000000000..91d1744ae5 --- /dev/null +++ b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive.ts @@ -0,0 +1,69 @@ +/*- + * ============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========================================================= + */ +/** + * Created by obarda on 7/28/2016. + */ +/// <reference path="../../references"/> +module Sdc.Directives { + 'use strict'; + + export interface ISdcTabsDirectiveScope extends ng.IScope { + tabs:Array<Models.Tab>; + selectedTab: Models.Tab; + isActive: boolean; + onTabSelected(selectedTab: Models.Tab); + } + + export class SdcTabsDirective implements ng.IDirective { + + constructor(private $templateCache:ng.ITemplateCacheService) { + } + + scope = { + tabs: "=", + selectedTab: "=?", + isViewOnly: "=" + }; + + replace = true; + restrict = 'E'; + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/sdc-tabs/sdc-tabs-directive-view.html'); + }; + + link = (scope:ISdcTabsDirectiveScope) => { + scope.isActive = true; + + if(!scope.selectedTab){ + scope.selectedTab = scope.tabs[0]; + } + + scope.onTabSelected = (selectedTab: Models.Tab) => { + scope.selectedTab = selectedTab; + } + }; + + public static factory = ($templateCache:ng.ITemplateCacheService)=> { + return new SdcTabsDirective($templateCache); + }; + } + + SdcTabsDirective.factory.$inject = ['$templateCache']; +} diff --git a/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs.less b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs.less new file mode 100644 index 0000000000..ad390010ed --- /dev/null +++ b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs.less @@ -0,0 +1,68 @@ +.sdc-tabs-body { + height: 100%; + width: 330px; + position: absolute; + .sdc-tabs { + display: inline-block; + width: 40px; + vertical-align: top; + position: relative; + z-index: 99; + right: 332px; + .sdc-tab-arrow { + cursor: pointer; + width: 40px; + height: 20px; + background-color: @tlv_color_u; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.17); + text-align: center; + padding: 1px 4px 0px 0px; + + &:hover { + background-color: @main_color_o; + } + + } + .sdc-tab { + cursor: pointer; + width: 40px; + height: 43px; + background-color: @tlv_color_u; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.17); + text-align: center; + + .sdc-tab-icon { + margin-top: 12px; + } + } + .selected { + background-color: @tlv_color_t; + } + + .last-tab { + border-bottom-left-radius: 12px; + } + } + + .not-active { + // position: absolute; + right: 41px; + } + + .sdc-single-tab-content { + padding: 15px 0px 0px 0px; + width: 290px; + background-color: @tlv_color_t; + height: 100%; + display: inline-block; + bottom: 0; + top: 0; + position: absolute; + box-shadow: 0.3px 1px 3px rgba(24, 24, 25, 0.42); + right: 331px; + .sdc-single-tab-content-body { + height: 100%; + display: flex; + } + } +} |