aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/directives/sdc-tabs
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/directives/sdc-tabs')
-rw-r--r--catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts46
-rw-r--r--catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less1
-rw-r--r--catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html17
-rw-r--r--catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts48
-rw-r--r--catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less67
5 files changed, 179 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts
new file mode 100644
index 0000000000..a41d9c59e4
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts
@@ -0,0 +1,46 @@
+'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() {
+ }
+
+ scope = {
+ singleTab: "=",
+ isViewOnly: "="
+ };
+
+ replace = true;
+ restrict = 'A';
+ controller = '@';
+ template = '<div ng-include src="singleTab.templateUrl"></div>';
+
+ public static factory = ()=> {
+ return new InnerSdcSingleTabDirective();
+ };
+}
+
+SdcSingleTabDirective.factory.$inject = ['$compile', '$parse'];
+InnerSdcSingleTabDirective.factory.$inject = [];
+
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less
@@ -0,0 +1 @@
+
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html
new file mode 100644
index 0000000000..4dc71b8780
--- /dev/null
+++ b/catalog-ui/src/app/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-show="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/src/app/directives/sdc-tabs/sdc-tabs-directive.ts b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts
new file mode 100644
index 0000000000..1567bfba53
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts
@@ -0,0 +1,48 @@
+/**
+ * Created by obarda on 7/28/2016.
+ */
+'use strict';
+import {Tab} from "app/models";
+
+export interface ISdcTabsDirectiveScope extends ng.IScope {
+ tabs:Array<Tab>;
+ selectedTab:Tab;
+ isActive:boolean;
+ onTabSelected(selectedTab:Tab);
+}
+
+export class SdcTabsDirective implements ng.IDirective {
+
+ constructor() {
+ }
+
+ scope = {
+ tabs: "=",
+ selectedTab: "=?",
+ isViewOnly: "="
+ };
+
+ replace = true;
+ restrict = 'E';
+ template = ():string => {
+ return require('./sdc-tabs-directive-view.html');
+ };
+
+ link = (scope:ISdcTabsDirectiveScope) => {
+ scope.isActive = true;
+
+ if (!scope.selectedTab) {
+ scope.selectedTab = scope.tabs[0];
+ }
+
+ scope.onTabSelected = (selectedTab:Tab) => {
+ scope.selectedTab = selectedTab;
+ }
+ };
+
+ public static factory = ()=> {
+ return new SdcTabsDirective();
+ };
+}
+
+SdcTabsDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less
new file mode 100644
index 0000000000..15b6fe9e1d
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less
@@ -0,0 +1,67 @@
+.sdc-tabs-body {
+ height: 100%;
+ width: 330px;
+ .sdc-tabs {
+ display: inline-block;
+ width: 40px;
+ vertical-align: top;
+ position: relative;
+ z-index: 99;
+
+ .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: 0px;
+ }
+
+ .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);
+
+ .sdc-single-tab-content-body {
+ height: 100%;
+ display: flex;
+ }
+ }
+}