Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/60038
Change subject: Improve resize handle rendering
......................................................................
Improve resize handle rendering
* Only place them in a high z-index while resizing so they don't render above
dialogs and menus
* Consider the border of the bounding box when placing them on focus, so they
don't move when you begin to drag
Change-Id: I4667e394d0af4a80b651c2a0f6d11d30e196bf60
---
M modules/ve/ce/styles/ve.ce.Node.css
M modules/ve/ce/ve.ce.ResizableNode.js
2 files changed, 13 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/38/60038/1
diff --git a/modules/ve/ce/styles/ve.ce.Node.css
b/modules/ve/ce/styles/ve.ce.Node.css
index a6936cb..bcf5b8c 100644
--- a/modules/ve/ce/styles/ve.ce.Node.css
+++ b/modules/ve/ce/styles/ve.ce.Node.css
@@ -89,10 +89,13 @@
.ve-ce-resizableNode-handles {
position: absolute;
border: solid 1px rgba(0,0,0,0.25);
- z-index: 10000;
box-sizing: border-box;
}
+.ve-ce-resizableNode-handles.ve-ce-resizableNode-handles-resizing {
+ z-index: 10000;
+}
+
.ve-ce-resizableNode-handles div {
position: absolute;
width: 0.66em;
diff --git a/modules/ve/ce/ve.ce.ResizableNode.js
b/modules/ve/ce/ve.ce.ResizableNode.js
index b502ad8..36a31a8 100644
--- a/modules/ve/ce/ve.ce.ResizableNode.js
+++ b/modules/ve/ce/ve.ce.ResizableNode.js
@@ -48,7 +48,9 @@
* @method
*/
ve.ce.ResizableNode.prototype.onResizableFocus = function () {
- var offset = this.$image.offset();
+ var offset = this.$image.offset(),
+ // TODO: Come up with a better way to keep the handles in place
between layout modes
+ border = 2;
this.$resizeHandles
.css( {
@@ -61,14 +63,14 @@
this.$resizeHandles
.find('.ve-ce-resizableNode-neHandle').css( {
- 'margin-right': -this.$image.width()
+ 'margin-right': -this.$image.width() + border
} ).end()
.find('.ve-ce-resizableNode-swHandle').css( {
- 'margin-bottom': -this.$image.height()
+ 'margin-bottom': -this.$image.height() + border
} ).end()
.find('.ve-ce-resizableNode-seHandle').css( {
- 'margin-right': -this.$image.width(),
- 'margin-bottom': -this.$image.height()
+ 'margin-right': -this.$image.width() + border,
+ 'margin-bottom': -this.$image.height() + border
} );
};
@@ -91,6 +93,7 @@
// Set bounding box width and undo the handle margins
this.$resizeHandles
+ .addClass( 've-ce-resizableNode-handles-resizing' )
.css( {
'width': this.$image.width(),
'height': this.$image.height()
@@ -212,6 +215,7 @@
selection = surfaceModel.getSelection(),
txs = [];
+ this.$resizeHandles.removeClass( 've-ce-resizableNode-handles-resizing'
);
$( document ).off( '.ve-ce-resizableNode' );
this.resizing = false;
--
To view, visit https://gerrit.wikimedia.org/r/60038
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I4667e394d0af4a80b651c2a0f6d11d30e196bf60
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
