summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/directives/sdc-tabs
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/app/scripts/directives/sdc-tabs')
-rw-r--r--catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts67
-rw-r--r--catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less1
-rw-r--r--catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive-view.html17
-rw-r--r--catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive.ts69
-rw-r--r--catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs.less68
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;
+ }
+ }
+}