Esanders has uploaded a new change for review. https://gerrit.wikimedia.org/r/114475
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(-) git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor refs/changes/75/114475/1 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: newchange Gerrit-Change-Id: Icca4ae9cee154a1d07433cb7632182a9cf2795a2 Gerrit-PatchSet: 1 Gerrit-Project: VisualEditor/VisualEditor Gerrit-Branch: master Gerrit-Owner: Esanders <esand...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits