jenkins-bot has submitted this change and it was merged.
Change subject: Resize handle images
......................................................................
Resize handle images
Arrows instead of circles
Change-Id: Icca4ae9cee154a1d07433cb7632182a9cf2795a2
---
M modules/ve/ce/styles/ve.ce.Node.css
M modules/ve/ce/ve.ce.ResizableNode.js
A modules/ve/ui/styles/images/resize-ne-sw.png
A modules/ve/ui/styles/images/resize-ne-sw.svg
A modules/ve/ui/styles/images/resize-nw-se.png
A modules/ve/ui/styles/images/resize-nw-se.svg
M modules/ve/ui/styles/ve.ui.Icons-raster.css
M modules/ve/ui/styles/ve.ui.Icons-vector.css
8 files changed, 111 insertions(+), 29 deletions(-)
Approvals:
Trevor Parscal: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/ve/ce/styles/ve.ce.Node.css
b/modules/ve/ce/styles/ve.ce.Node.css
index c4737a3..f3d112f 100644
--- a/modules/ve/ce/styles/ve.ce.Node.css
+++ b/modules/ve/ce/styles/ve.ce.Node.css
@@ -86,39 +86,33 @@
.ve-ce-resizableNode-handles div {
position: absolute;
- width: 0.66em;
- height: 0.66em;
- border: solid 0.125em #fff;
- background-color: #333;
- box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.75);
- border-radius: 1em;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ width: 11px;
+ height: 11px;
+ background-repeat: no-repeat;
}
.ve-ce-resizableNode-nwHandle {
cursor: nw-resize;
- left: -0.33em;
- top: -0.33em;
+ left: -6px;
+ top: -6px;
}
.ve-ce-resizableNode-neHandle {
cursor: ne-resize;
- right: -0.33em;
- top: -0.33em;
+ right: -6px;
+ top: -6px;
}
.ve-ce-resizableNode-swHandle {
cursor: sw-resize;
- bottom: -0.33em;
- left: -0.33em;
+ bottom: -6px;
+ left: -6px;
}
.ve-ce-resizableNode-seHandle {
cursor: se-resize;
- bottom: -0.33em;
- right: -0.33em;
+ bottom: -6px;
+ right: -6px;
}
.ve-ce-resizableNode-sizeLabel {
diff --git a/modules/ve/ce/ve.ce.ResizableNode.js
b/modules/ve/ce/ve.ce.ResizableNode.js
index a06d3bc..be81980 100644
--- a/modules/ve/ce/ve.ce.ResizableNode.js
+++ b/modules/ve/ce/ve.ce.ResizableNode.js
@@ -54,10 +54,18 @@
// Initialization
this.$resizeHandles
.addClass( 've-ce-resizableNode-handles' )
- .append( this.$( '<div>' ).addClass(
've-ce-resizableNode-nwHandle' ) )
- .append( this.$( '<div>' ).addClass(
've-ce-resizableNode-neHandle' ) )
- .append( this.$( '<div>' ).addClass(
've-ce-resizableNode-seHandle' ) )
- .append( this.$( '<div>' ).addClass(
've-ce-resizableNode-swHandle' ) );
+ .append( this.$( '<div>' )
+ .addClass( 've-ce-resizableNode-nwHandle
ve-ui-icon-resize-nw-se' )
+ .data( 'handle', 'nw' ) )
+ .append( this.$( '<div>' )
+ .addClass( 've-ce-resizableNode-neHandle
ve-ui-icon-resize-ne-sw' )
+ .data( 'handle', 'ne' ) )
+ .append( this.$( '<div>' )
+ .addClass( 've-ce-resizableNode-seHandle
ve-ui-icon-resize-nw-se' )
+ .data( 'handle', 'se' ) )
+ .append( this.$( '<div>' )
+ .addClass( 've-ce-resizableNode-swHandle
ve-ui-icon-resize-ne-sw' )
+ .data( 'handle', 'sw' ) );
this.setCurrentDimensions( {
'width': this.model.getAttribute( 'width' ),
@@ -306,7 +314,7 @@
'left': this.$resizeHandles.position().left,
'height': this.$resizeHandles.height(),
'width': this.$resizeHandles.width(),
- 'handle': e.target.className
+ 'handle': $( e.target ).data( 'handle' )
};
// Bind resize events
@@ -391,19 +399,19 @@
if ( this.resizing ) {
// X and Y diff
switch ( this.resizeInfo.handle ) {
- case 've-ce-resizableNode-seHandle':
+ case 'se':
diff.x = e.screenX - this.resizeInfo.mouseX;
diff.y = e.screenY - this.resizeInfo.mouseY;
break;
- case 've-ce-resizableNode-nwHandle':
+ case 'nw':
diff.x = this.resizeInfo.mouseX - e.screenX;
diff.y = this.resizeInfo.mouseY - e.screenY;
break;
- case 've-ce-resizableNode-neHandle':
+ case 'ne':
diff.x = e.screenX - this.resizeInfo.mouseX;
diff.y = this.resizeInfo.mouseY - e.screenY;
break;
- case 've-ce-resizableNode-swHandle':
+ case 'sw':
diff.x = this.resizeInfo.mouseX - e.screenX;
diff.y = e.screenY - this.resizeInfo.mouseY;
break;
@@ -416,15 +424,15 @@
// Fix the position
switch ( this.resizeInfo.handle ) {
- case 've-ce-resizableNode-neHandle':
+ case 'ne':
dimensions.top = this.resizeInfo.top +
( this.resizeInfo.height -
dimensions.height );
break;
- case 've-ce-resizableNode-swHandle':
+ case 'sw':
dimensions.left = this.resizeInfo.left +
( this.resizeInfo.width -
dimensions.width );
break;
- case 've-ce-resizableNode-nwHandle':
+ case 'nw':
dimensions.top = this.resizeInfo.top +
( this.resizeInfo.height -
dimensions.height );
dimensions.left = this.resizeInfo.left +
diff --git a/modules/ve/ui/styles/images/resize-ne-sw.png
b/modules/ve/ui/styles/images/resize-ne-sw.png
new file mode 100644
index 0000000..2728e9d
--- /dev/null
+++ b/modules/ve/ui/styles/images/resize-ne-sw.png
Binary files differ
diff --git a/modules/ve/ui/styles/images/resize-ne-sw.svg
b/modules/ve/ui/styles/images/resize-ne-sw.svg
new file mode 100644
index 0000000..81897a6
--- /dev/null
+++ b/modules/ve/ui/styles/images/resize-ne-sw.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ version="1.1"
+ width="11"
+ height="11"
+ id="svg2">
+ <defs
+ id="defs4" />
+ <g
+ transform="translate(0,-1041.3622)"
+ id="layer1">
+ <path
+ d="m 9,1043.3622 0,4 -1.5,-1.5 -3,3 1.5,1.5 -4,0 0,-4 1.5,1.5 3,-3
-1.5,-1.5 z"
+ id="path3881"
+
style="opacity:0.25;fill:none;stroke:#000000;stroke-width:3.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
/>
+ <path
+ d="m 9,1043.3622 0,4 -1.5,-1.5 -3,3 1.5,1.5 -4,0 0,-4 1.5,1.5 3,-3
-1.5,-1.5 z"
+ id="path3879"
+
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
/>
+ <path
+ d="m 9,1043.3622 0,4 -1.5,-1.5 -3,3 1.5,1.5 -4,0 0,-4 1.5,1.5 3,-3
-1.5,-1.5 z"
+ id="path3829"
+ style="opacity:0.75;fill:#000000;fill-opacity:1;stroke:none" />
+ </g>
+</svg>
diff --git a/modules/ve/ui/styles/images/resize-nw-se.png
b/modules/ve/ui/styles/images/resize-nw-se.png
new file mode 100644
index 0000000..0d96f5f
--- /dev/null
+++ b/modules/ve/ui/styles/images/resize-nw-se.png
Binary files differ
diff --git a/modules/ve/ui/styles/images/resize-nw-se.svg
b/modules/ve/ui/styles/images/resize-nw-se.svg
new file mode 100644
index 0000000..8201c86
--- /dev/null
+++ b/modules/ve/ui/styles/images/resize-nw-se.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ version="1.1"
+ width="11"
+ height="11"
+ id="svg2">
+ <defs
+ id="defs4" />
+ <g
+ transform="translate(0,-1041.3622)"
+ id="layer1">
+ <path
+ d="m 2,1043.3622 0,4 1.5,-1.5 3,3 -1.5,1.5 4,0 0,-4 -1.5,1.5 -3,-3
1.5,-1.5 z"
+ id="path3881"
+
style="opacity:0.25;fill:none;stroke:#000000;stroke-width:3.5;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
/>
+ <path
+ d="m 2,1043.3622 0,4 1.5,-1.5 3,3 -1.5,1.5 4,0 0,-4 -1.5,1.5 -3,-3
1.5,-1.5 z"
+ id="path3879"
+
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
/>
+ <path
+ d="m 2,1043.3622 0,4 1.5,-1.5 3,3 -1.5,1.5 4,0 0,-4 -1.5,1.5 -3,-3
1.5,-1.5 z"
+ id="path3829"
+ style="opacity:0.75;fill:#000000;fill-opacity:1;stroke:none" />
+ </g>
+</svg>
diff --git a/modules/ve/ui/styles/ve.ui.Icons-raster.css
b/modules/ve/ui/styles/ve.ui.Icons-raster.css
index 2adb335..1a22dd7 100644
--- a/modules/ve/ui/styles/ve.ui.Icons-raster.css
+++ b/modules/ve/ui/styles/ve.ui.Icons-raster.css
@@ -221,3 +221,11 @@
/* @embed */
background-image: url(images/icons/underline-u.png);
}
+
+.ve-ui-icon-resize-nw-se {
+ background-image: url(images/resize-nw-se.png);
+}
+
+.ve-ui-icon-resize-ne-sw {
+ background-image: url(images/resize-ne-sw.png);
+}
diff --git a/modules/ve/ui/styles/ve.ui.Icons-vector.css
b/modules/ve/ui/styles/ve.ui.Icons-vector.css
index 75f96af..08cd8c6 100644
--- a/modules/ve/ui/styles/ve.ui.Icons-vector.css
+++ b/modules/ve/ui/styles/ve.ui.Icons-vector.css
@@ -221,3 +221,11 @@
/* @embed */
background-image: url(images/icons/underline-u.svg);
}
+
+.ve-ui-icon-resize-nw-se {
+ background-image: url(images/resize-nw-se.svg);
+}
+
+.ve-ui-icon-resize-ne-sw {
+ background-image: url(images/resize-ne-sw.svg);
+}
--
To view, visit https://gerrit.wikimedia.org/r/114475
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Icca4ae9cee154a1d07433cb7632182a9cf2795a2
Gerrit-PatchSet: 1
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
