add resize handlers to sides of widgets

Wirecloud · Mar 28, 2019 · 9fb071f · 9fb071f
1 parent 0a37b4e
commit 9fb071f
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 43 deletions.
diff --git a/src/wirecloud/commons/static/js/wirecloud/ui/ResizeHandle.js b/src/wirecloud/commons/static/js/wirecloud/ui/ResizeHandle.js
@@ -145,6 +145,7 @@
             dragboardCover.style.top = "0";
             dragboardCover.style.left = "0";
             dragboardCover.style.width = "100%";
+            dragboardCover.style.cursor = handleElement.dataset.cursor;
             dragboardCover.style.height = dragboard.scrollHeight + "px";
 
             scrollStart = dragboard.scrollTop;

diff --git a/src/wirecloud/commons/utils/remote.py b/src/wirecloud/commons/utils/remote.py
@@ -683,6 +683,14 @@ def bottom_left_handle(self):
     @property
     def bottom_right_handle(self):
         return WebElementTester(self.testcase, self.find_element(".wc-bottom-right-resize-handle"))
+
+    @property
+    def left_side_handle(self):
+        return WebElementTester(self.testcase, self.find_element(".wc-left-side-resize-handle"))
+
+    @property
+    def right_side_handle(self):
+        return WebElementTester(self.testcase, self.find_element(".wc-right-side-resize-handle"))
 
     @property
     def content(self):

diff --git a/src/wirecloud/defaulttheme/static/css/workspace/widget.scss b/src/wirecloud/defaulttheme/static/css/workspace/widget.scss
@@ -106,44 +106,60 @@
     }
 }
 
-.wc-widget .wc-bottom-resize-handle {
-    position: absolute;
-    height: 12px;
-    bottom: -6px;
-    left: 34px;
-    right: 34px;
-    cursor: s-resize;
-}
+.wc-widget {
+    .wc-bottom-resize-handle {
+        position: absolute;
+        height: 12px;
+        bottom: -6px;
+        left: 34px;
+        right: 34px;
+        cursor: s-resize;
+    }
 
-.wc-widget .wc-bottom-left-resize-handle {
-    position: absolute;
-    width: 40px;
-    height: 12px;
-    bottom: -6px;
-    left: -6px;
-    cursor: sw-resize;
+    .wc-bottom-left-resize-handle {
+        position: absolute;
+        height: 12px;
+        width: 40px;
+        bottom: -6px;
+        left: -6px;
+        cursor: sw-resize;
+    }
 
-    &.inUse {
-        right: 0px;
-        top: 0px;
-        bottom: auto;
-        left: auto;
+    .wc-bottom-right-resize-handle {
+        position: absolute;
+        height: 12px;
+        width: 40px;
+        bottom: -6px;
+        right: -6px;
+        cursor: se-resize;
+    }
+
+    .wc-right-side-resize-handle {
+        position: absolute;
+        width: 12px;
+        height: 100%;
+        right: -6px;
+        cursor: e-resize;
     }
-}
 
-.wc-widget .wc-bottom-right-resize-handle {
-    position: absolute;
-    width: 40px;
-    height: 12px;
-    bottom: -6px;
-    right: -6px;
-    cursor: se-resize;
-
-    &.inUse {
-        left: 0px;
-        top: 0px;
-        bottom: auto;
-        right: auto;
+    .wc-left-side-resize-handle {
+        position: absolute;
+        width: 12px;
+        height: 100%;
+        left: -6px;
+        cursor: w-resize;
+    }
+
+    .wc-bottom-left-resize-handle,
+    .wc-bottom-right-resize-handle,
+    .wc-right-side-resize-handle,
+    .wc-left-side-resize-handle {
+        &.inUse {
+            right: 0px;
+            top: 0px;
+            bottom: auto;
+            left: auto;
+        }
     }
 }
 

diff --git a/src/wirecloud/defaulttheme/templates/wirecloud/workspace/widget.html b/src/wirecloud/defaulttheme/templates/wirecloud/workspace/widget.html
@@ -2,6 +2,7 @@
 <div class="fade panel panel-default">
     <div class="wc-widget-heading panel-heading"><h4 class="panel-title"><t:title/></h4><div class="wc-widget-infobuttons"><t:errorbutton/></div><div class="wc-widget-buttons"><t:minimizebutton/><t:menubutton/><t:closebutton/></div></div>
     <div class="wc-widget-body"><t:iframe/></div>
+    <t:leftsideresizehandle/><t:rightsideresizehandle/>
     <div class="wc-widget-footer panel-footer"><t:leftresizehandle/><t:bottomresizehandle/><t:rightresizehandle/></div>
 </div>
 </s:styledgui>
diff --git a/src/wirecloud/platform/static/js/wirecloud/ui/WidgetView.js b/src/wirecloud/platform/static/js/wirecloud/ui/WidgetView.js
@@ -169,6 +169,7 @@
 
                 handle.addClassName("wc-bottom-resize-handle");
                 handle.setDisabled(!view.model.isAllowed('resize'));
+                handle.get().dataset.cursor = 's-resize';
                 view.bottomresizehandle = handle;
                 return handle;
             },
@@ -177,6 +178,7 @@
 
                 handle.addClassName("wc-bottom-left-resize-handle");
                 handle.setDisabled(!view.model.isAllowed('resize'));
+                handle.get().dataset.cursor = 'sw-resize';
                 view.leftresizehandle = handle;
                 return handle;
             },
@@ -185,23 +187,39 @@
 
                 handle.addClassName("wc-bottom-right-resize-handle");
                 handle.setDisabled(!view.model.isAllowed('resize'));
+                handle.get().dataset.cursor = 'se-resize';
                 view.rightresizehandle = handle;
                 return handle;
             },
+            'leftsideresizehandle': function (options, tcomponents, view) {
+                var handle = new Wirecloud.ui.WidgetViewResizeHandle(view, {resizeLeftSide: true, fixHeight: true});
+
+                handle.addClassName("wc-left-side-resize-handle");
+                handle.setDisabled(!view.model.isAllowed('resize'));
+                handle.get().dataset.cursor = 'w-resize';
+                view.leftsideresizehandle = handle;
+                return handle;
+            },
+            'rightsideresizehandle': function (options, tcomponents, view) {
+                var handle = new Wirecloud.ui.WidgetViewResizeHandle(view, {resizeLeftSide: false, fixHeight: true});
+
+                handle.addClassName("wc-right-side-resize-handle");
+                handle.setDisabled(!view.model.isAllowed('resize'));
+                handle.get().dataset.cursor = 'e-resize';
+                view.rightsideresizehandle = handle;
+                return handle;
+            },
             'iframe': function (options, tcomponents, view) {
                 return view.model.wrapperElement;
             }
         }, this).children[1];
 
-        if ('bottomresizehandle' in this) {
-            this.bottomresizehandle.setResizableElement(this.wrapperElement);
-        }
-        if ('leftresizehandle' in this) {
-            this.leftresizehandle.setResizableElement(this.wrapperElement);
-        }
-        if ('rightresizehandle' in this) {
-            this.rightresizehandle.setResizableElement(this.wrapperElement);
-        }
+        ['bottomresizehandle', 'leftresizehandle', 'rightresizehandle',
+            'rightsideresizehandle', 'leftsideresizehandle'].forEach(handle => {
+                if (handle in this) {
+                    this[handle].setResizableElement(this.wrapperElement);
+                }
+            });
 
         this.wrapperElement.classList.add("wc-widget");
         this.wrapperElement.setAttribute('data-id', model.id);