Commit 5286a804 authored by Vincent Elcrin's avatar Vincent Elcrin Committed by Colin PUY

refactor(property-panel) Use flexbox and angular-resizable (#2093)

parent dbfa534f
......@@ -35,26 +35,6 @@ angular.module('bonitasoft.designer.common.directives')
this.xPosition = undefined;
this.leftElem = $($scope.paneLeft);
this.rightElem = $($scope.paneRight);
/**
* Close the right pane
*/
this.closeRight = function() {
var rightBounds = this.rightElem[0].getBoundingClientRect();
this.xPosition = rightBounds.right - rightBounds.left;
this.rightElem.addClass('splitter-pane-closed');
this.leftElem.css({ right: 0 }).addClass('splitter-closed-right');
};
/**
* Open the right pane
*/
this.openRight = function() {
this.leftElem.css({ right: this.xPosition + 'px' }).removeClass('splitter-closed-right');
this.rightElem.removeClass('splitter-pane-closed');
};
/**
* Close the left pane
......@@ -63,7 +43,6 @@ angular.module('bonitasoft.designer.common.directives')
var leftBounds = this.leftElem[0].getBoundingClientRect();
this.xPosition = leftBounds.right;
this.rightElem.css({ left: 0 }).addClass('splitter-closed-left');
this.leftElem.addClass('splitter-pane-closed');
};
......@@ -71,16 +50,10 @@ angular.module('bonitasoft.designer.common.directives')
* Open the left pane
*/
this.openLeft = function() {
this.rightElem.css({ left: this.xPosition + 'px' }).removeClass('splitter-closed-left');
this.leftElem.removeClass('splitter-pane-closed');
};
this.toggleRight = function() {
if (this.displayed) {
this.closeRight();
} else {
this.openRight();
}
this.displayed = !this.displayed;
};
......@@ -116,7 +89,6 @@ angular.module('bonitasoft.designer.common.directives')
*/
this.resize = function(pointerX) {
this.xPosition = computeX(pointerX);
this.rightElem.css({ left: this.xPosition + 'px' });
this.leftElem.css({ right: ($window.innerWidth - this.xPosition) + 'px' });
};
},
......
......@@ -302,6 +302,11 @@ angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($
$scope.isPaletteNarrow = isNarrow;
};
$scope.isPropertyPanelClosed = false;
function togglePropertyPanel() {
$scope.isPropertyPanelClosed = !$scope.isPropertyPanelClosed;
}
/**
* Object containing methods helpful for the component and container directives of the editor, and which is passed
* as an attribute of these directives.
......@@ -321,6 +326,7 @@ angular.module('bonitasoft.designer.editor').controller('EditorCtrl', function($
moveAtPosition: $scope.moveAtPosition,
changeComponentWidth: $scope.changeComponentWidth,
getComponentWidth: $scope.getComponentWidth,
page: $scope.page
page: $scope.page,
togglePropertyPanel
};
});
......@@ -17,7 +17,8 @@
<div class="alert alert-editor-hint" ng-if="page.rows.length === 1 && page.rows[0].length === 0">
<i class="fa fa-rotate-90 fa-share"></i>
<h4 class="hint-title" translate>This page is empty.</h4>
<translate>To add content, drag and drop components from the palette to the whiteboard above.
<translate>
To add content, drag and drop components from the palette to the whiteboard above.
</translate>
</div>
</div>
......@@ -47,16 +48,15 @@
</div>
<div class="BottomPanel-content" ui-view="data"></div>
</div>
<div splitter-toggle="#widget-properties-splitter" title="{{'Toggle properties panel' | translate}}"
target-state="designer.page" id="toggle-properties" class="clickable toggle">
<i class="fa toggle-right"></i>
</div>
</div>
<div id="widget-properties" class="PropertyPanel">
<div id="widget-properties-splitter" splitter-vertical="right" pane-left="#editor-container"
pane-right="#widget-properties" pane-right-max="500" pane-right-min="280"></div>
<div class="PropertyPanel"
ng-class="{'PropertyPanel--closed': isPropertyPanelClosed}"
resizable r-directions="['left']">
<button title="{{'Toggle properties panel' | translate}}"
class="PropertyPanel-toggle"
ng-click="editor.togglePropertyPanel()">
</button>
<div class="PropertyPanel-popover" ng-include="'js/editor/properties-panel/properties-panel.html'"></div>
</div>
</div>
......
......@@ -7,11 +7,7 @@
}
#editor-container {
position: absolute;
top: 0;
bottom: 0;
left: @sidebar-palette-width;
right: @sidebar-properties-default-width;
flex: 1;
display: flex;
flex-direction: column;
}
......
@property-panel-min-width: 280px;
.PropertyPanel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: calc(~"100% - "@sidebar-properties-default-width);
padding: 0;
max-width: 500px;
width: 280px;
min-width: @property-panel-min-width;
transition: width .5s ease, min-width .5s ease;
.PropertyPanel-toggle {
position: absolute;
top: 1em;
left: 0;
transform: translateX(-90%);
font-size: 24px;
background-color: @color-palette-item-bg;
color: @color-palette-item-text;
border: none;
box-shadow: none;
&:before {
.fa;
content: @fa-var-angle-right;
padding: 0 .2em;
}
}
&.PropertyPanel--closed {
width: 0 !important;
min-width: 0;
.PropertyPanel-toggle:before {
content: @fa-var-angle-left;
}
}
}
.PropertyPanel-expression {
......@@ -40,6 +68,7 @@
.PropertyPanel-inner {
height: 100%;
min-width: @property-panel-min-width;
display: flex;
flex-direction: column;
}
......@@ -74,6 +103,7 @@
padding: 0 1em;
line-height: 1.5em;
text-align: center;
min-width: @property-panel-min-width;
}
.PropertyPanel-PropertyIcon {
......@@ -155,17 +185,6 @@ widget-property-field ul[typeahead-popup] {
border: 2px solid @btn-bonita-property-linked-border;
}
#toggle-properties {
right: -6px;
padding-right: 4px;
border-right: none;
background-color: @color-properties-bg;
}
.toggle-right:before {
content: @fa-var-angle-right;
}
.splitter-closed-right .toggle-right:before {
content: @fa-var-angle-left;
}
......@@ -174,6 +193,14 @@ widget-property-field ul[typeahead-popup] {
font-size: 85%;
> ul {
padding-left:2em;
padding-left: 2em;
}
}
.rg-left {
margin-left: -7px;
span {
display: none;
}
}
\ No newline at end of file
.Palette {
width: @sidebar-palette-width;
bottom: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: width @sidebar-transition;
background-color: @color-palette-item-bg;
......@@ -166,20 +162,3 @@
padding: 1em 2px 0;
margin: 0;
}
.toggle {
font-size: 24px;
background-color: @color-palette-item-bg;
color: @color-palette-item-text;
position: absolute;
top: 1em;
z-index: @z-index-splitter + 1;
i {
pointer-events: none;
margin: 0 0.3em;
}
}
......@@ -132,7 +132,7 @@ var AssetPanel = require('./asset-panel.page');
},
property: function(propertyName) {
return $('#widget-properties').element(by.id('property-' + propertyName));
return $('.PropertyPanel').element(by.id('property-' + propertyName));
},
back: function() {
......@@ -156,12 +156,6 @@ var AssetPanel = require('./asset-panel.page');
}
},
properties: {
get: function() {
return $('#widget-properties');
}
},
// editor components (i.e component wrap a widget)
components: {
get: function() {
......
......@@ -69,26 +69,6 @@ describe('splitter vertical directive', function() {
expect(controller.openLeft).toHaveBeenCalled();
});
it('should close right element when it is opened', function() {
spyOn(controller, 'closeRight');
controller.displayed = true;
element.triggerHandler('splitter:toggle:right');
expect(controller.displayed).toBeFalsy();
expect(controller.closeRight).toHaveBeenCalled();
});
it('should open right element when it is closed', function() {
spyOn(controller, 'openRight');
controller.displayed = false;
element.triggerHandler('splitter:toggle:right');
expect(controller.displayed).toBeTruthy();
expect(controller.openRight).toHaveBeenCalled();
});
it('should resize left and right elements and add classes when splitter is clicked', function() {
spyOn(controller, 'resize');
var splitter = angular.element(element.find('.splitter').get(0));
......@@ -112,33 +92,11 @@ describe('splitter vertical directive', function() {
scope = element.isolateScope();
});
it('should close right sidebar and save x position', function() {
controller.closeRight();
expect(controller.rightElem).toHaveClass('splitter-pane-closed');
expect(controller.leftElem).toHaveClass('splitter-closed-right');
expect(controller.leftElem.attr('style')).toContain('right: 0');
expect(controller.xPosition).toBeDefined();
});
it('should open right sidebar with previous x position', function() {
controller.xPosition = 100;
controller.openRight();
expect(controller.rightElem).not.toHaveClass('splitter-pane-closed');
expect(controller.leftElem).not.toHaveClass('splitter-closed-right');
expect(controller.leftElem.attr('style')).toContain('right: 100');
});
it('should close left sidebar and save x position', function() {
controller.closeLeft();
expect(controller.leftElem).toHaveClass('splitter-pane-closed');
expect(controller.rightElem).toHaveClass('splitter-closed-left');
expect(controller.rightElem.attr('style')).toContain('left: 0');
expect(controller.xPosition).toBeDefined();
});
......@@ -148,8 +106,6 @@ describe('splitter vertical directive', function() {
controller.openLeft();
expect(controller.leftElem).not.toHaveClass('splitter-pane-closed');
expect(controller.rightElem).not.toHaveClass('splitter-closed-left');
expect(controller.rightElem.attr('style')).toContain('left: 100');
});
// unstable test. Do not pass on phantomjs but pass anywhere else.
......@@ -159,7 +115,6 @@ describe('splitter vertical directive', function() {
controller.resize(100);
expect(controller.leftElem.attr('style')).toContain('right: 900px');
expect(controller.rightElem.attr('style')).toContain('left: 100px');
});
it('should not resize right pane to a width less than min', function() {
......@@ -169,7 +124,6 @@ describe('splitter vertical directive', function() {
controller.resize(900); // > 1000-200
expect(controller.leftElem.attr('style')).toContain('right: 200px');
expect(controller.rightElem.attr('style')).toContain('left: 800px');
});
it('should not resize right pane to a width greater than max', function() {
......@@ -179,7 +133,6 @@ describe('splitter vertical directive', function() {
controller.resize(700); // < 1000-200
expect(controller.leftElem.attr('style')).toContain('right: 200px');
expect(controller.rightElem.attr('style')).toContain('left: 800px');
});
});
......
......@@ -289,7 +289,7 @@ describe('EditorCtrl', function() {
});
it('should add a widget and do not change the length if we already have 12 col', function() {
$scope.addComponent(dragData, 0);
$scope.addComponent(dragData, 0);
expect(container.rows[0][0].dimension.xs).toBe(12);
});
......@@ -551,7 +551,7 @@ describe('EditorCtrl', function() {
$scope.$apply();
// then it should call the service to save
expect(pageRepo.save).toHaveBeenCalledWith( $scope.page);
expect(pageRepo.save).toHaveBeenCalledWith($scope.page);
// and set the path and search
expect($state.go).toHaveBeenCalledWith('designer.widget', { id: 'widgetId' });
});
......@@ -560,4 +560,20 @@ describe('EditorCtrl', function() {
expect($scope.canBeSaved({ name: '' })).toBeFalsy();
expect($scope.canBeSaved({ name: 'pageName' })).toBeTruthy();
});
it('should open property panel when toggle while it is closed', function() {
$scope.isPropertyPanelClosed = true;
$scope.editor.togglePropertyPanel();
expect($scope.isPropertyPanelClosed).toBe(false);
});
it('should close property panel when toggle while it is opened', function() {
$scope.isPropertyPanelClosed = false;
$scope.editor.togglePropertyPanel();
expect($scope.isPropertyPanelClosed).toBe(true);
});
});
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