diff --git a/src/wirecloud/commons/static/js/wirecloud/ui/ResizeHandle.js b/src/wirecloud/commons/static/js/wirecloud/ui/ResizeHandle.js index 16a4930df9..17a920cf9d 100644 --- 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 index f5458e1fc9..1915368829 100644 --- 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 index ee94298c3f..a7cc505408 100644 --- a/src/wirecloud/defaulttheme/static/css/workspace/widget.scss +++ b/src/wirecloud/defaulttheme/static/css/workspace/widget.scss @@ -93,7 +93,6 @@ } .wc-widget-footer { - height: 3px; padding: 0 32px; position: static; flex-grow: 0; @@ -106,44 +105,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 index a482bbb735..0911bdb73a 100644 --- a/src/wirecloud/defaulttheme/templates/wirecloud/workspace/widget.html +++ b/src/wirecloud/defaulttheme/templates/wirecloud/workspace/widget.html @@ -2,6 +2,7 @@

+
diff --git a/src/wirecloud/platform/static/js/wirecloud/ui/WidgetView.js b/src/wirecloud/platform/static/js/wirecloud/ui/WidgetView.js index ae33b8800b..86f8f07d35 100644 --- 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);