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

frontend/app/js/common/directives/splitter-vertical.directive.js

@@ -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' });
         };
       },

frontend/app/js/editor/editor.controller.js

@@ -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
   };
 });

frontend/app/js/editor/editor.html

@@ -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>

frontend/app/js/editor/editor.less

@@ -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;
 }

frontend/app/js/editor/properties-panel/properties-panel.less

+@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

frontend/app/less/palette.less

 .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;
-  }
-}
-

frontend/test/e2e/pages/editor.page.js

@@ -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() {

frontend/test/unit/common/directives/splitter-vertical.directive.spec.js

@@ -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');
     });
   });
 

frontend/test/unit/editor/editor.controller.spec.js

@@ -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);
+  });
 });