Commit d40271ff authored by benjaminparisel's avatar benjaminparisel

Revert "Feat/add options tab container (#2606)"

This reverts commit 6cfff9d
parent 5824ddb9
......@@ -26,7 +26,6 @@ public class Tab {
private Container container = new Container();
private String title;
private String tabId;
private String id = UUID.randomUUID().toString();
@JsonView({JsonViewPersistence.class})
......@@ -76,13 +75,4 @@ public class Tab {
.append(title)
.toHashCode();
}
@JsonView({JsonViewPersistence.class})
public String getTabId() {
return tabId;
}
public void setTabId(String tabId) {
this.tabId = tabId;
}
}
......@@ -96,7 +96,7 @@ public class HtmlBuilderVisitor implements ElementVisitor<String> {
List<TabTemplate> tabTemplates = new ArrayList<>();
for (Tab tab : tabsContainer.getTabs()) {
tabTemplates.add(new TabTemplate(tab.getTitle(), tab.getTabId(), tab.getContainer().accept(this)));
tabTemplates.add(new TabTemplate(tab.getTitle(), tab.getContainer().accept(this)));
}
return new TemplateEngine("tabsContainer.hbs.html")
......@@ -232,12 +232,10 @@ public class HtmlBuilderVisitor implements ElementVisitor<String> {
class TabTemplate {
private final String title;
private String tabId;
private final String content;
public TabTemplate(String title, String tabId, String content) {
public TabTemplate(String title, String content) {
this.title = title;
this.tabId = tabId;
this.content = content;
}
......@@ -248,9 +246,5 @@ public class HtmlBuilderVisitor implements ElementVisitor<String> {
public String getContent() {
return content;
}
public String getTabId() {
return tabId;
}
}
}
{{=<% %>=}}
<div pb-property-values='<% reference %>'>
<pb-tabs-container>
<div class="<% dimensionAsCssClasses %>" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<tabset vertical="{{properties.vertical}}" type="{{properties.type}}">
<%#each tabTemplates%>
<tab ng-if="'<% tabId %>' && !getOptions('<% tabId %>').hidden && getOptions('<% tabId %>').dynamicTitle && getOptions('<% tabId %>').allowHtml"
disable="getOptions('<% tabId %>').disabled">
<tab-heading
ng-bind-html="getOptions('<% tabId %>').dynamicTitle"
ng-class="getOptions('<% tabId %>').cssClasses"
ui-translate>
</tab-heading>
<%{ content }%>
</tab>
<tab ng-if="'<% tabId %>' && !getOptions('<% tabId %>').hidden && getOptions('<% tabId %>').dynamicTitle && !getOptions('<% tabId %>').allowHtml"
disable="getOptions('<% tabId %>').disabled">
<tab-heading
ng-bind="getOptions('<% tabId %>').dynamicTitle"
ng-class="getOptions('<% tabId %>').cssClasses"
ui-translate>
</tab-heading>
<%{ content }%>
</tab>
<tab ng-if="'<% tabId %>' && !getOptions('<% tabId %>').hidden && !getOptions('<% tabId %>').dynamicTitle"
disable="getOptions('<% tabId %>').disabled">
<tab-heading
ng-class="getOptions('<% tabId %>').cssClasses"
ui-translate>
<% title %>
</tab-heading>
<%{ content }%>
</tab>
<tab ng-if="'<% tabId %>' == ''">
<tab-heading ui-translate><% title %></tab-heading>
<%{ content }%>
</tab>
<%/each%>
</tabset>
</div>
</pb-tabs-container>
<div pb-property-values='{{ reference }}'>
<div class="{{ dimensionAsCssClasses }}" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<tabset>
{{#each tabTemplates}}
<tab>
<tab-heading ui-translate>{{ title }}</tab-heading>
{{{ content }}}
</tab>
{{/each}}
</tabset>
</div>
</div>
<%={{ }}=%>
<uib-tabset class="tabs-left">
<uib-tab heading="{{ 'Basic usage' | translate }}" index="'basic-usage'">
<p translate>Use this container to create tabs which can be displayed over the page, form, or layout content.</p>
<p translate>The basic usage of this container is to define <em>Default title</em> for each tab. In this case, all tab titles will be statics and you can drag and drop any widgets you want to define the tab content.</p>
<p translate>if you want more options for each tab, refer to <em>Advanced usage</em>.</p>
</uib-tab>
<uib-tab heading="{{ 'Advanced usage' | translate }}" index="'advanced-usage'">
<p translate>The usage of advance options allows you to customize default display and behaviour of tabs based on data and/or JS expressions.</p>
<p translate>This is the list of accepted options you can configure for a given tab:</p>
<ul>
<li translate><code>dynamicTitle</code> <em>(Defaults: display "Default title" as text)</em>: In case this options is filled, it will be the tab title displayed. It can be calculated dynamically to display and render html (if allowHtml is set to true).</li>
<li translate><code>allowHtml</code> <em>(Defaults: false)</em>: Define if dynamicTitle will be rendered as HTML.</li>
<li translate><code>hidden</code> <em>(Defaults: false)</em>: Whether tab is hidden or not.</li>
<li translate><code>disabled</code> <em>(Defaults: false)</em>: Whether tab is clickable and can be activated.</li>
<li translate><code>cssClasses</code> <em>(Defaults: "")</em>: Add css classes on tab. This css class will be attached to <strong>tab-heading</strong> html element.</li>
</ul>
<p translate>"Advance tab options" property requires a JSON Object as input, to make it dynamic you can define it in an Javascript Expression or a JSON variable.</p>
<p translate> Here you can find an example of a JS expression:</p>
<pre>
return {
tab1: {
dynamicTitle: "&lt;b&gt;Dynamic tab title&lt;/b&gt;",
allowHtml: true,
hidden: false,
disabled: false,
cssClasses: ""
},
tab2: {
dynamicTitle: "Tab: " + $data.myVar
}
};
</pre>
<p translate>Here we just configured 2 tabs identified as <code>tab1</code> and <code>tab2</code>, <em>these keys will have to be defined in each tab and will allow you to identify them</em>. We recommend you to set a user-friendly name such as "paymentDetails" instead of keeping tab1. You can notice that it is not necessary to define all options (allowHtml, hidden, disabled and cssClasses are not defined for tab2 in this example), in this case default value will be applied.</p>
<p translate>Then, you need to set this variable as input in the property "Advanced tab options" (on the tab container panel).</p>
</uib-tab>
</uib-tabset>
function PbTabsContainerCtrl($scope, $log) {
var ctrl = this;
this.defaultOptions = {
allowHtml: false,
disabled: false,
activated: false,
hidden: false,
cssClasses: ""
};
$scope.getOptions = function(tabTitle) {
return angular.extend({},
ctrl.defaultOptions,
$scope.options && $scope.options[tabTitle]);
};
$scope.$watch('properties.advancedOptions ', function(value) {
if (angular.isString(value)) {
try {
$scope.options = angular.fromJson(value);
} catch (e) {
$log.error('[TabsContainer widget] Advanced options should be a valid json object');
}
} else {
$scope.options = value;
}
});
}
......@@ -2,39 +2,12 @@
"id": "pbTabsContainer",
"name": "Tabs container",
"type": "container",
"controller": "@pbTabsContainer.ctrl.js",
"order": -2,
"hasHelp": true,
"description": "Multiple groups of widgets, each group in a tab",
"template": "",
"requiredModules": ["ui.bootstrap.tabs", "ui.bootstrap.tpls"],
"icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 20\"><path fill=\"#fff\" d=\"M50,11.4V8.6h-1v2.9H50z M50,16.2v-2.9h-1v2.9H50z M49,20h1v-1.9h-1v1V20z M44.1,20h2.9v-1h-2.9V20zM39.2,20h2.9v-1h-2.9V20z M34.3,20h2.9v-1h-2.9V20z M29.4,20h2.9v-1h-2.9V20z M24.5,20h2.9v-1h-2.9V20z M19.6,20h2.9v-1h-2.9V20zM14.7,20h2.9v-1h-2.9V20z M9.8,20h2.9v-1H9.8V20z M4.9,20h2.9v-1H4.9V20z M0,18.1V20h2.9v-1H1v-1H0z M0,13.3v2.9h1v-2.9H0zM0,8.6v2.9h1V8.6H0z M0,1v5.7h1V1H0z M15.7,0H1v1h14.7V0z M16.7,1h-1v4.8h2v-1h-1V1z M22.5,4.8h-2.9v1h2.9V4.8z M27.5,4.8h-2.9v1h2.9V4.8z M32.4,4.8h-2.9v1h2.9V4.8z M37.3,4.8h-2.9v1h2.9V4.8z M42.2,4.8h-2.9v1h2.9V4.8z M47.1,4.8h-2.9v1h2.9V4.8z M50,4.8h-1v1v1h1V4.8z\"/><path fill=\"#CBD5E1\" d=\"M34.3,1h-1v3.8h1V1z M18.6,1h14.7V0H18.6V1z M18.6,4.8V1h-1v3.8H18.6z\"/></svg>",
"properties": [
{
"label": "Vertical Display",
"name": "vertical",
"type": "boolean",
"defaultValue": false,
"bond": "constant"
},
{
"label": "Type",
"name": "type",
"type": "choice",
"help": "Tab display",
"defaultValue": "tabs",
"choiceValues": ["tabs", "pills"],
"bond": "constant"
},
{
"name": "advancedOptions",
"label": "Advanced tabs options",
"help": "Use advanced options to render dynamic tabs",
"caption": "See <em>Tabs container help</em> for details of tabs container options. Specify a JSON structure corresponding to the options you want.",
"type": "text",
"bond": "expression"
}
],
"properties": [],
"assets": [
{
"name": "ui-bootstrap-tpls-0.13.0.min.js",
......
<div pb-property-values="tabs-container-reference">
<pb-tabs-container>
<div class="col-xs-4" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<tabset vertical="{{properties.vertical}}" type="{{properties.type}}"></tabset>
</div>
</pb-tabs-container>
<div pb-property-values='tabs-container-reference'>
<div class="col-xs-4" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<tabset></tabset>
</div>
</div>
"
<div pb-property-values="tabs-container-reference">
<pb-tabs-container>
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<tabset vertical="{{properties.vertical}}" type="{{properties.type}}">
<tab
ng-if="'' &amp;&amp; !getOptions('').hidden &amp;&amp; getOptions('').dynamicTitle &amp;&amp; getOptions('').allowHtml"
disable="getOptions('').disabled">
<tab-heading ng-bind-html="getOptions('').dynamicTitle" ng-class="getOptions('').cssClasses"
ui-translate=""></tab-heading>
<div pb-property-values="container-reference">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<div class="row">
<div pb-property-values="paragraph-reference">
<div ng-if="!properties.hidden" class="component col-xs-12"
ng-class="properties.cssClasses">
<paragraph></paragraph>
</div>
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<tabset>
<tab>
<tab-heading ui-translate=""></tab-heading>
<div pb-property-values="container-reference">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<div class="row">
<div pb-property-values="paragraph-reference">
<div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses">
<paragraph></paragraph>
</div>
</div>
</div>
</div>
</tab>
<tab
ng-if="'' &amp;&amp; !getOptions('').hidden &amp;&amp; getOptions('').dynamicTitle &amp;&amp; !getOptions('').allowHtml"
disable="getOptions('').disabled">
<tab-heading ng-bind="getOptions('').dynamicTitle" ng-class="getOptions('').cssClasses"
ui-translate=""></tab-heading>
<div pb-property-values="container-reference">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<div class="row">
<div pb-property-values="paragraph-reference">
<div ng-if="!properties.hidden" class="component col-xs-12"
ng-class="properties.cssClasses">
<paragraph></paragraph>
</div>
</div>
</div>
</div>
</div>
</tab>
<tab ng-if="'' &amp;&amp; !getOptions('').hidden &amp;&amp; !getOptions('').dynamicTitle"
disable="getOptions('').disabled">
<tab-heading ng-class="getOptions('').cssClasses" ui-translate=""></tab-heading>
<div pb-property-values="container-reference">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<div class="row">
<div pb-property-values="paragraph-reference">
<div ng-if="!properties.hidden" class="component col-xs-12"
ng-class="properties.cssClasses">
<paragraph></paragraph>
</div>
</div>
</div>
</div>
</div>
</tab>
<tab ng-if="'' == ''">
<tab-heading ui-translate=""></tab-heading>
<div pb-property-values="container-reference">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<div class="row">
<div pb-property-values="paragraph-reference">
<div ng-if="!properties.hidden" class="component col-xs-12"
ng-class="properties.cssClasses">
<paragraph></paragraph>
</div>
</div>
</div>
</div>
</div>
</tab>
</tabset>
</div>
</pb-tabs-container>
</div>"
</div>
</tab>
</tabset>
</div>
</div>
"
<div pb-property-values="tabs-container-reference">
<pb-tabs-container>
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<tabset vertical="{{properties.vertical}}" type="{{properties.type}}">
<tab
ng-if="'' &amp;&amp; !getOptions('').hidden &amp;&amp; getOptions('').dynamicTitle &amp;&amp; getOptions('').allowHtml"
disable="getOptions('').disabled">
<tab-heading ng-bind-html="getOptions('').dynamicTitle" ng-class="getOptions('').cssClasses"
ui-translate=""></tab-heading>
<div pb-property-values="first-container">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"></div>
</div>
</tab>
<tab
ng-if="'' &amp;&amp; !getOptions('').hidden &amp;&amp; getOptions('').dynamicTitle &amp;&amp; !getOptions('').allowHtml"
disable="getOptions('').disabled">
<tab-heading ng-bind="getOptions('').dynamicTitle" ng-class="getOptions('').cssClasses"
ui-translate=""></tab-heading>
<div pb-property-values="first-container">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"></div>
</div>
</tab>
<tab ng-if="'' &amp;&amp; !getOptions('').hidden &amp;&amp; !getOptions('').dynamicTitle"
disable="getOptions('').disabled">
<tab-heading ng-class="getOptions('').cssClasses" ui-translate=""> First</tab-heading>
<div pb-property-values="first-container">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"></div>
</div>
</tab>
<tab ng-if="'' == ''">
<tab-heading ui-translate=""> First</tab-heading>
<div pb-property-values="first-container">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"></div>
</div>
</tab>
<tab
ng-if="'' &amp;&amp; !getOptions('').hidden &amp;&amp; getOptions('').dynamicTitle &amp;&amp; getOptions('').allowHtml"
disable="getOptions('').disabled">
<tab-heading ng-bind-html="getOptions('').dynamicTitle" ng-class="getOptions('').cssClasses"
ui-translate=""></tab-heading>
<div pb-property-values="last-container">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"></div>
</div>
</tab>
<tab
ng-if="'' &amp;&amp; !getOptions('').hidden &amp;&amp; getOptions('').dynamicTitle &amp;&amp; !getOptions('').allowHtml"
disable="getOptions('').disabled">
<tab-heading ng-bind="getOptions('').dynamicTitle" ng-class="getOptions('').cssClasses"
ui-translate=""></tab-heading>
<div pb-property-values="last-container">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"></div>
</div>
</tab>
<tab ng-if="'' &amp;&amp; !getOptions('').hidden &amp;&amp; !getOptions('').dynamicTitle"
disable="getOptions('').disabled">
<tab-heading ng-class="getOptions('').cssClasses" ui-translate=""> Last</tab-heading>
<div pb-property-values="last-container">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"></div>
</div>
</tab>
<tab ng-if="'' == ''">
<tab-heading ui-translate=""> Last</tab-heading>
<div pb-property-values="last-container">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"></div>
</div>
</tab>
</tabset>
</div>
</pb-tabs-container>
</div>"
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<tabset>
<tab>
<tab-heading ui-translate="">First</tab-heading>
<div pb-property-values="first-container">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"></div>
</div>
</tab>
<tab>
<tab-heading ui-translate="">Last</tab-heading>
<div pb-property-values="last-container">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden"></div>
</div>
</tab>
</tabset>
</div>
</div>
<div class="form-group ">
<div class="property-label">
<label for="tab-title-input">
<translate>Default title</translate>
<i class="fa fa-info-circle" uib-tooltip="Static title displayed by default as plain text. To allow HTML or set a dynamic title, use advanced tabs options of tab container" tooltip-placement="top-right" tooltip-append-to-body="true"></i>
</label>
</div>
<div class="form-group">
<label for="tab-title-input" translate>Title</label>
<input ng-model="currentComponent.title" name="tab-title-input" class="form-control" id="tab-title-input">
</div>
<form name="idValidation">
<div class="form-group ">
<div class="property-label">
<label for="tab-id-input">
<translate>Advanced tab key</translate>
<i class="fa fa-info-circle" uib-tooltip="Unique key to identify this tab in advanced tab options" tooltip-placement="top-right" tooltip-append-to-body="true"></i>
</label>
<small class="help-block" translate>Must be an alphanumeric string</small>
</div>
<input ng-model="currentComponent.tabId" name="tabTitle" class="form-control" id="tab-id-input"
ng-pattern="/^[a-zA-Z0-9]+$/"
autocomplete="off"
ng-trim="false"
ng-model-options="{ debounce: 500 }"
uib-tooltip="{{idValidation.tabTitle.$valid ? '':'Should contains only alphanumeric characters with no space' | translate}}"
tooltip-trigger="input"
tooltip-is-open="idValidation.tabTitle.$invalid"
tooltip-class="tooltip-danger"
tooltip-placement="left">
</div>
</form>
......@@ -63,7 +63,6 @@
function createTabElement(title) {
return {
title: title,
tabId: title.replace(/\s/g,'').toLowerCase(),
container: {
id: 'pbContainer',
type: 'container',
......
<tabs-container id="{{ component.$$id }}"
class="tabs-element"
class="container-element"
tabs-container="component"
editor="editor"
ng-click="editor.selectComponent(component, $event)"
......
<div class="widget-wrapper">
<component-mover component="tabsContainer" on-delete="editor.removeCurrentComponent()" ng-if="editor.isCurrentComponent(tabsContainer)"></component-mover>
<ul class="nav" ng-class="{'nav-stacked': isPropertyExist('vertical') && tabsContainer.propertyValues.vertical.value, 'nav-pills': isPropertyExist('type') && tabsContainer.propertyValues.type.value == 'pills', 'nav-tabs': !isPropertyExist('type') || tabsContainer.propertyValues.type.value == 'tabs'}" role="tablist">
<li class="tab-element" ng-repeat="tab in tabsContainer.tabs" ng-class="{'active': isOpened(tab), 'current-tab': editor.isCurrentComponent(tab)}">
<ul class="nav nav-tabs" role="tablist">
<li class="tab-element" ng-repeat="tab in tabsContainer.tabs" ng-class="{'active': isOpened(tab), 'current-tab': editor.isCurrentComponent(tab)}">
<a class="clickable" ng-click="openTab(tab, $event)">
<button ng-click="moveTabLeft(tab)" ng-if="moveTabLeftVisible(tab)" class="fa move-tab-left btn-tab" ng-class="{'fa-arrow-circle-up': isPropertyExist('vertical') && tabsContainer.propertyValues.vertical.value, 'fa-arrow-circle-left': !isPropertyExist('vertical') || !tabsContainer.propertyValues.vertical.value}"></button>
<button ng-click="moveTabRight(tab)" ng-if="moveTabRightVisible(tab)" class="fa fa-arrow-circle-right move-tab-right btn-tab" ng-class="{'fa-arrow-circle-down': isPropertyExist('vertical') && tabsContainer.propertyValues.vertical.value, 'fa-arrow-circle-right': !isPropertyExist || !tabsContainer.propertyValues.vertical.value}"></button>
<span class="tab-title">{{ tab.title || tab.tabId}}</span>
<button ng-click="moveTabLeft(tab)" ng-if="moveTabLeftVisible(tab)" class="fa fa-arrow-circle-left move-tab-left btn-tab"></button>
<button ng-click="moveTabRight(tab)" ng-if="moveTabRightVisible(tab)" class="fa fa-arrow-circle-right move-tab-right btn-tab"></button>
<span class="tab-title">{{ tab.title }}</span>
<button title="{{ 'Remove tab' | translate }}" ng-click="removeTab(tab)" ng-if="isRemoveTabVisible(tab)" class="fa fa-times-circle btn-tab"></button>
</a>
</li>
......
......@@ -100,8 +100,7 @@
*/
.container-element,
.form-element,
.modal-element,
.tabs-element {
.modal-element {
box-shadow: 1px 1px 4px #ccc;
display: block;
border: 1px dashed;
......@@ -112,10 +111,6 @@
border-width: 2px;
}
.tabs-element {
padding: 4px;
}
/**
* Modal
*/
......
......@@ -405,24 +405,7 @@
'template': '',
'custom': false,
'icon': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 20"><path fill="#fff" d="M50,11.4V8.6h-1v2.9H50z M50,16.2v-2.9h-1v2.9H50z M49,20h1v-1.9h-1v1V20z M44.1,20h2.9v-1h-2.9V20zM39.2,20h2.9v-1h-2.9V20z M34.3,20h2.9v-1h-2.9V20z M29.4,20h2.9v-1h-2.9V20z M24.5,20h2.9v-1h-2.9V20z M19.6,20h2.9v-1h-2.9V20zM14.7,20h2.9v-1h-2.9V20z M9.8,20h2.9v-1H9.8V20z M4.9,20h2.9v-1H4.9V20z M0,18.1V20h2.9v-1H1v-1H0z M0,13.3v2.9h1v-2.9H0zM0,8.6v2.9h1V8.6H0z M0,1v5.7h1V1H0z M15.7,0H1v1h14.7V0z M16.7,1h-1v4.8h2v-1h-1V1z M22.5,4.8h-2.9v1h2.9V4.8z M27.5,4.8h-2.9v1h2.9V4.8z M32.4,4.8h-2.9v1h2.9V4.8z M37.3,4.8h-2.9v1h2.9V4.8z M42.2,4.8h-2.9v1h2.9V4.8z M47.1,4.8h-2.9v1h2.9V4.8z M50,4.8h-1v1v1h1V4.8z"/><path fill="#CBD5E1" d="M34.3,1h-1v3.8h1V1z M18.6,1h14.7V0H18.6V1z M18.6,4.8V1h-1v3.8H18.6z"/></svg>',
'properties': [
{
'label': 'Vertical Display',
'name': 'vertical',
'type': 'boolean',
'defaultValue': false,
'bond': 'constant'
},
{
'label': 'Type',
'name': 'type',
'type': 'choice',
'help': 'Tab display',
'defaultValue': 'tabs',
'choiceValues': ['tabs', 'pills'],
'bond': 'constant'
},
]
'properties': []
}, {
'custom': false,
'id': 'pbFormContainer',
......
......@@ -35,7 +35,6 @@ describe('moving tab containers test', function() {
lastContainer.click();
//simulate mouseover to display the component toolbar
browser.actions().mouseMove(lastContainer, { x: 1, y: 1 }).perform();
expect(lastContainer.element(by.css('.move-left')).isPresent()).toBe(true);
expect(lastContainer.element(by.css('.move-right')).isPresent()).toBe(false);
});
......
......@@ -101,7 +101,6 @@
tabs: [
{
title: 'Tab 1',
tabId: 'tab1',
container: {
id: 'pbContainer',
type: 'container',
......@@ -112,7 +111,6 @@
},
{
title: 'Tab 2',
tabId: 'tab2',
container: {
id: 'pbContainer',
type: 'container',
......@@ -132,7 +130,6 @@
expect(tab).toEqual({
title: 'tab',
tabId: 'tab',
container: {
id: 'pbContainer',
type: 'container',
......
......@@ -52,11 +52,11 @@ describe('tabsContainer', function() {
it('should display the component', function() {
// then we should have 2 tabs + one 'plus' button
expect(element.find('ul.nav li').length).toBe(3);
expect(element.find('ul.nav li:first').text().trim()).toBe('Tab 1');
expect(element.find('ul.nav li:first').hasClass('active')).toBe(true);
expect(element.find('ul.nav li:nth(1)').text().trim()).toBe('Tab 2');
expect(element.find('ul.nav li:nth(1)').hasClass('active')).toBe(false);
expect(element.find('ul.nav.nav-tabs li').length).toBe(3);
expect(element.find('ul.nav.nav-tabs li:first').text().trim()).toBe('Tab 1');
expect(element.find('ul.nav.nav-tabs li:first').hasClass('active')).toBe(true);
expect(element.find('ul.nav.nav-tabs li:nth(1)').text().trim()).toBe('Tab 2');
expect(element.find('ul.nav.nav-tabs li:nth(1)').hasClass('active')).toBe(false);
expect(element.find('container').length).toBe(2);
});
......@@ -69,7 +69,7 @@ describe('tabsContainer', function() {
};
$rootScope.$apply();
element.find('ul.nav li:nth(2) a').triggerHandler({ type: 'click' });
element.find('ul.nav.nav-tabs li:nth(2) a').triggerHandler({ type: 'click' });
expect($rootScope.tabsContainer.tabs.length).toBe(3);
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment