Commit dbfa534f authored by Vincent Elcrin's avatar Vincent Elcrin Committed by Colin PUY

Refactor useflex on part of the editor (#2092)

* refactor(editor-layout) Use flexbox instead of absolute position
* refactor(bottom-panel) Use angular-resizable to resize panel
parent 6c6325e9
......@@ -35,6 +35,7 @@
'org.bonitasoft.dragAndDrop',
'gettext',
'ngUpload',
'angularMoment'
'angularMoment',
'angularResizable'
]);
})();
......@@ -21,7 +21,6 @@
angular
.module('bonitasoft.designer.common.directives')
.controller('SplitterContainerCtrl', function($scope, $state) {
var splitter;
var isOpen = true;
this.isActive = function(stateName) {
......@@ -32,25 +31,15 @@ angular
return isOpen;
};
this.register = function(controller) {
splitter = controller;
};
this.toggle = function(stateName) {
if (!isOpen) {
splitter.openBottom();
isOpen = true;
} else if ($state.current.name === stateName) {
splitter.closeBottom();
isOpen = false;
}
$state.go(stateName, undefined, { location: false });
};
$scope.$on('$destroy', function() {
splitter = undefined;
});
})
.directive('splitterContainer', function() {
return {
......
<header ui-view="header" confirm-on-exit confirm-data="page"></header>
<div class="Editor">
<header ui-view="header" confirm-on-exit confirm-data="page"></header>
<div class="content-wrapper">
<!-- Palette -->
<div class="Palette"
ng-class="{'Palette--closed': isPaletteClosed, 'Palette--narrow': isPaletteNarrow}"
editor-palette
on-resize="resizePaletteHandler(isClosed, isNarrow)" >
</div>
<div id="editor-container" ng-class="{'': !sectionOpened}" >
<div class="workspace">
<container container="page" editor="editor" id="editor" ng-click="editor.selectComponent(null, $event)" component-highlighter="component-element--hover" data-is-editor-container="true" bo-dropzone bo-drop-success="appendComponent($event, $data)"></container>
<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>
</div>
<div class="content-wrapper">
<!-- Palette -->
<div class="Palette"
ng-class="{'Palette--closed': isPaletteClosed, 'Palette--narrow': isPaletteNarrow}"
editor-palette
on-resize="resizePaletteHandler(isClosed, isNarrow)">
</div>
<div id="data-sidebar" class="BottomPanel" splitter-container>
<div class="BottomPanel-toggleBar">
<div class="BottomPanel-toggle clickable"
splitter-toggle="#data-sidebar-splitter"
ng-class="{ 'BottomPanel-toggle--active': splitterContainer.isActive( 'designer.' + mode) && splitterContainer.isOpen() }"
ng-click="splitterContainer.toggle( 'designer.' + mode)">
<span translate>Variables</span>
<i class="fa"
ng-if="splitterContainer.isActive( 'designer.' + mode) || !splitterContainer.isOpen()"
ng-class="{'fa-angle-down':splitterContainer.isOpen(), 'fa-angle-up':!splitterContainer.isOpen()}">
</i>
<div id="editor-container" ng-class="{'': !sectionOpened}">
<div class="workspace">
<container container="page" editor="editor" id="editor" ng-click="editor.selectComponent(null, $event)"
component-highlighter="component-element--hover" data-is-editor-container="true" bo-dropzone
bo-drop-success="appendComponent($event, $data)"></container>
<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>
</div>
</div>
<div class="BottomPanel-toggle clickable"
splitter-toggle="#data-sidebar-splitter"
ng-class="{ 'BottomPanel-toggle--active': splitterContainer.isActive('designer.page.asset') && splitterContainer.isOpen() }"
ng-click="splitterContainer.toggle('designer.page.asset')"
ng-if="mode==='page'">
<span translate>Assets</span>
<i class="fa"
ng-if="splitterContainer.isActive('designer.page.asset') || !splitterContainer.isOpen()"
ng-class="{'fa-angle-down':splitterContainer.isOpen(), 'fa-angle-up':!splitterContainer.isOpen()}">
</i>
<div id="data-sidebar" class="BottomPanel" splitter-container resizable r-directions="['top']" ng-class="{ 'splitter-pane-closed': !splitterContainer.isOpen() }">
<div class="BottomPanel-toggleBar">
<div class="BottomPanel-toggle clickable"
ng-class="{ 'BottomPanel-toggle--active': splitterContainer.isActive('designer.' + mode) && splitterContainer.isOpen() }"
ng-click="splitterContainer.toggle('designer.' + mode)">
<span translate>Variables</span>
<i class="fa"
ng-if="splitterContainer.isActive( 'designer.' + mode) || !splitterContainer.isOpen()"
ng-class="{'fa-angle-down':splitterContainer.isOpen(), 'fa-angle-up':!splitterContainer.isOpen()}">
</i>
</div>
<div class="BottomPanel-toggle clickable"
ng-class="{ 'BottomPanel-toggle--active': splitterContainer.isActive('designer.page.asset') && splitterContainer.isOpen() }"
ng-click="splitterContainer.toggle('designer.page.asset')"
ng-if="mode==='page'">
<span translate>Assets</span>
<i class="fa"
ng-if="splitterContainer.isActive('designer.page.asset') || !splitterContainer.isOpen()"
ng-class="{'fa-angle-down':splitterContainer.isOpen(), 'fa-angle-up':!splitterContainer.isOpen()}">
</i>
</div>
</div>
<div class="BottomPanel-content" ui-view="data"></div>
</div>
<div id="data-sidebar-splitter"
splitter-horizontal
default-state="designer.page"
pane-top="#editor"
pane-bottom="#data-sidebar"
pane-bottom-max="600"
pane-bottom-min="250">
<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 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 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-popover" ng-include="'js/editor/properties-panel/properties-panel.html'"></div>
</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-popover" ng-include="'js/editor/properties-panel/properties-panel.html'"></div>
</div>
</div>
</div>
\ No newline at end of file
.content-wrapper {
position: absolute;
top: @nav-bar-height;
left: 0;
right: 0;
bottom: 0;
position: relative;
overflow: hidden;
}
.form-control.form-control--pagename {
width: 250px;
flex: 1;
display: flex;
flex-direction: row;
}
#editor-container {
......@@ -17,36 +12,36 @@
bottom: 0;
left: @sidebar-palette-width;
right: @sidebar-properties-default-width;
display: flex;
flex-direction: column;
}
.Palette--closed + #editor-container{
.Palette--closed + #editor-container {
left: @sidebar-palette-section-width;
}
.Palette--narrow + #editor-container{
.Palette--narrow + #editor-container {
left: @sidebar-palette-width--narrow;
}
.workspace {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
flex: 1;
overflow: auto;
}
#editor {
overflow: auto;
background-color: rgba(239, 241, 245, 0.15);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: @sidebar-data-default-height;
padding:0 2em;
display: block;
height: 100%;
padding: 0 2em;
}
.Editor {
display: flex;
flex-direction: column;
height: 100%;
}
.FileViewer-fileName {
......@@ -58,4 +53,3 @@
text-overflow: ellipsis;
vertical-align: top;
}
......@@ -6,6 +6,5 @@
row="row"
container="container"
ng-click="editor.selectComponent(component, $event)"
ng-class="{'component-element--selected': editor.isCurrentComponent(component)}"
resizable="true">
ng-class="{'component-element--selected': editor.isCurrentComponent(component)}">
</component>
......@@ -28,8 +28,7 @@ angular.module('bonitasoft.designer.editor.whiteboard').directive('component', f
editor: '=',
componentIndex: '=',
container: '=',
row: '=',
resizable: '='
row: '='
},
link: function(scope, element) {
var componentScope = componentScopeBuilder.build(scope);
......
@bottom-tab-height: 2.2em;
.BottomPanel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: @sidebar-data-default-height;
z-index: @z-index-sidebar;
transition: height .5s ease, min-height .5s ease;
min-height: 220px;
max-height: 500px;
}
.BottomPanel-splitter {
......@@ -42,7 +41,7 @@
text-align: left;
display: inline-block;
height: @bottom-tab-height;
background-color:lighten(@color-data-bg, 5%);
background-color: lighten(@color-data-bg, 5%);
}
.BottomPanel-toggle--active {
......@@ -53,6 +52,7 @@
padding-bottom: .7em;
display: flex;
align-items: center;
flex-shrink: 0;
}
.Toolbar-action {
......@@ -112,4 +112,19 @@
.BottomPanel-scrollableView {
flex: 1;
overflow: auto;
}
.BottomPanel.splitter-pane-closed {
// We need to override height directly
// added to the element via angular-resizable
height: 0 !important;
min-height: 0;
}
.rg-top {
margin-top: -7px;
span {
display: none;
}
}
\ No newline at end of file
......@@ -33,10 +33,12 @@ var paths = {
'bower_components/identicon.js/identicon.js',
'bower_components/angular-sha/src/angular-sha.js',
'node_modules/angular-switcher/dist/angular-switcher.min.js',
'node_modules/ngstorage/ngStorage.min.js'
'node_modules/ngstorage/ngStorage.min.js',
'node_modules/angular-resizable/angular-resizable.min.js'
],
css: [
'node_modules/angular-switcher/dist/angular-switcher.min.css'
'node_modules/angular-switcher/dist/angular-switcher.min.css',
'node_modules/angular-resizable/angular-resizable.min.css'
],
jsFolder: 'app/js',
js: [
......
......@@ -7,6 +7,7 @@
"npm": ">=2.0.0"
},
"dependencies": {
"angular-resizable": "1.2.0",
"angular-switcher": "0.2.7",
"babel-polyfill": "6.3.14",
"mousetrap": "1.5.3",
......
......@@ -38,6 +38,7 @@ module.exports = function(config) {
'bower_components/angular-sha/src/angular-sha.js',
'node_modules/angular-switcher/dist/angular-switcher.min.js',
'node_modules/ngstorage/ngStorage.min.js',
'node_modules/angular-resizable/angular-resizable.min.js',
'app/js/**/*.module.js',
'app/js/**/*.js',
......
......@@ -28,31 +28,15 @@ describe('splitter container directive', function() {
expect(controller.isActive('toto')).toBe(false);
expect(controller.isActive('stateTest')).toBe(true);
});
it('should register a splitter-horizontal', function() {
var splitter = {
openBottom: jasmine.createSpy('openBottom'),
closeBottom: jasmine.createSpy('closeBottom')
};
controller.register(splitter);
controller.toggle('stateTest');
expect(splitter.closeBottom).toHaveBeenCalled();
});
it('should toggle a splitter-horizontal', function() {
var splitter = {
openBottom: jasmine.createSpy('openBottom'),
closeBottom: jasmine.createSpy('closeBottom')
};
controller.register(splitter);
controller.toggle('stateTest');
expect(splitter.closeBottom).toHaveBeenCalled();
expect(controller.isOpen()).toBe(false);
controller.toggle('stateTest');
expect(splitter.openBottom).toHaveBeenCalled();
expect(controller.isOpen()).toBe(true);
expect($state.go.calls.count()).toBe(2);
});
});
});
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