diff --git a/client/components/drop-zone/index.jsx b/client/components/drop-zone/index.jsx index 4583b0245e4f13..513d25030befd3 100644 --- a/client/components/drop-zone/index.jsx +++ b/client/components/drop-zone/index.jsx @@ -152,6 +152,11 @@ module.exports = React.createClass( { rect = this.refs.zone.getDOMNode().getBoundingClientRect(); + /// make sure the rect is a valid rect + if ( rect.bottom === rect.top || rect.left === rect.right ) { + return false; + } + return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom; }, diff --git a/client/components/drop-zone/test/index.jsx b/client/components/drop-zone/test/index.jsx index 3f31f40d051ca9..c42ea2797d2e32 100644 --- a/client/components/drop-zone/test/index.jsx +++ b/client/components/drop-zone/test/index.jsx @@ -83,9 +83,8 @@ describe( 'DropZone', function() { it( 'should highlight the drop zone when dragging over the body', function() { var tree = React.render( React.createElement( DropZone ), container ), - dragEnterEvent = new window.MouseEvent(); + dragEnterEvent = new window.MouseEvent( 'dragenter' ); - dragEnterEvent.initMouseEvent( 'dragenter', true, true ); window.dispatchEvent( dragEnterEvent ); expect( tree.state.isDraggingOverDocument ).to.be.ok; @@ -94,9 +93,8 @@ describe( 'DropZone', function() { it( 'should start observing the body for mutations when dragging over', function( done ) { var tree = React.render( React.createElement( DropZone ), container ), - dragEnterEvent = new window.MouseEvent(); + dragEnterEvent = new window.MouseEvent( 'dragenter' ); - dragEnterEvent.initMouseEvent( 'dragenter', true, true ); window.dispatchEvent( dragEnterEvent ); process.nextTick( function() { @@ -107,13 +105,10 @@ describe( 'DropZone', function() { it( 'should stop observing the body for mutations upon drag ending', function( done ) { var tree = React.render( React.createElement( DropZone ), container ), - dragEnterEvent = new window.MouseEvent(), - dragLeaveEvent = new window.MouseEvent(); + dragEnterEvent = new window.MouseEvent( 'dragenter' ), + dragLeaveEvent = new window.MouseEvent( 'dragleave' ); - dragEnterEvent.initMouseEvent( 'dragenter', true, true ); window.dispatchEvent( dragEnterEvent ); - - dragLeaveEvent.initMouseEvent( 'dragleave', true, true ); window.dispatchEvent( dragLeaveEvent ); process.nextTick( function() { @@ -123,7 +118,7 @@ describe( 'DropZone', function() { } ); it( 'should not highlight if onVerifyValidTransfer returns false', function() { - var dragEnterEvent = new window.MouseEvent(), + var dragEnterEvent = new window.MouseEvent( 'dragenter' ), tree; tree = React.render( React.createElement( DropZone, { @@ -132,7 +127,6 @@ describe( 'DropZone', function() { } } ), container ); - dragEnterEvent.initMouseEvent( 'dragenter', true, true ); window.dispatchEvent( dragEnterEvent ); expect( tree.state.isDraggingOverDocument ).to.not.be.ok; @@ -146,8 +140,7 @@ describe( 'DropZone', function() { tree = React.render( React.createElement( DropZone ), container ); - dragEnterEvent = new window.MouseEvent(); - dragEnterEvent.initMouseEvent( 'dragenter', true, true ); + dragEnterEvent = new window.MouseEvent( 'dragenter' ); window.dispatchEvent( dragEnterEvent ); expect( tree.state.isDraggingOverDocument ).to.be.ok; @@ -159,8 +152,7 @@ describe( 'DropZone', function() { fullScreen: true } ), container ), dragEnterEvent; - dragEnterEvent = new window.MouseEvent(); - dragEnterEvent.initMouseEvent( 'dragenter', true, true ); + dragEnterEvent = new window.MouseEvent( 'dragenter' ); window.dispatchEvent( dragEnterEvent ); expect( tree.state.isDraggingOverDocument ).to.be.ok; @@ -177,8 +169,7 @@ describe( 'DropZone', function() { onDrop: spyDrop } ), container ); - dropEvent = new window.MouseEvent(); - dropEvent.initMouseEvent( 'drop', true, true ); + dropEvent = new window.MouseEvent( 'drop' ); window.dispatchEvent( dropEvent ); expect( spyDrop.calledOnce ).to.be.ok; @@ -194,8 +185,7 @@ describe( 'DropZone', function() { onFilesDrop: spyDrop } ), container ); - dropEvent = new window.MouseEvent(); - dropEvent.initMouseEvent( 'drop', true, true ); + dropEvent = new window.MouseEvent( 'drop' ); dropEvent.dataTransfer = { files: [ 1, 2, 3 ] }; window.dispatchEvent( dropEvent ); @@ -205,7 +195,7 @@ describe( 'DropZone', function() { it( 'should not call onFilesDrop if onVerifyValidTransfer returns false', function() { var spyDrop = sandbox.spy(), - dropEvent = new window.MouseEvent(); + dropEvent = new window.MouseEvent( 'drop' ); React.render( React.createElement( DropZone, { onFilesDrop: spyDrop, @@ -214,7 +204,6 @@ describe( 'DropZone', function() { } } ), container ); - dropEvent.initMouseEvent( 'drop', true, true ); dropEvent.dataTransfer = { files: [ 1, 2, 3 ] }; window.dispatchEvent( dropEvent ); @@ -233,8 +222,7 @@ describe( 'DropZone', function() { rendered = TestUtils.scryRenderedComponentsWithType( tree, DropZone ); - dragEnterEvent = new window.MouseEvent(); - dragEnterEvent.initMouseEvent( 'dragenter', true, true ); + dragEnterEvent = new window.MouseEvent( 'dragenter' ); window.dispatchEvent( dragEnterEvent ); expect( rendered ).to.have.length.of( 2 ); diff --git a/client/components/follow-button/_style.scss b/client/components/follow-button/_style.scss deleted file mode 100644 index 98308e3855d2e4..00000000000000 --- a/client/components/follow-button/_style.scss +++ /dev/null @@ -1,95 +0,0 @@ -.follow-button { - position: relative; - background: inherit; - border: none; - border-radius: 0; - color: darken( $gray, 10% ); - cursor: pointer; - display: block; - font-size: 14px; - font-weight: 400; - margin: 0; - padding: 8px 16px; - text-align: left; - - &:first-child { - margin-top: 5px; - } - - &:hover, - &:focus { - border: 0; - box-shadow: none; - } - - &:last-child { - margin-bottom: 5px; - } - - &::-moz-focus-inner { - border: 0; - } - - // Menu Items with Icons - &.has-icon { - padding-left: 42px; - } - - .gridicon__follow { - opacity: 1; - } - - .gridicon__following { - opacity: 0; - pointer-events: none; - transform: rotate( 180deg ) scale( 3 ); - } - - .gridicon__unfollow { - display: none; - } - - &.is-following { - color: $alert-green; - - .gridicon { - fill: $alert-green; - } - - .gridicon__follow { - opacity: 0; - pointer-events: none; - transform: rotate( -180deg ) scale( 0.5 ); - } - - .gridicon__following { - opacity: 1; - pointer-events: auto; - transform: rotate( 0 ) scale( 1 ); - } - } - - &:hover { - color: $alert-green; - .gridicon { - fill: $alert-green; - } - - &.is-following { - .gridicon { - fill: lighten( $gray, 10 ); - } - - color: lighten( $gray, 10 ); - - } - } - - .gridicon { - position: absolute; - top: 8px; - left: 13px; - fill: lighten( $gray, 10 ); - transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } -} diff --git a/client/components/follow-button/style.scss b/client/components/follow-button/style.scss index 56760a2857f322..98308e3855d2e4 100644 --- a/client/components/follow-button/style.scss +++ b/client/components/follow-button/style.scss @@ -1,64 +1,95 @@ -// FollowButton Component .follow-button { position: relative; + background: inherit; + border: none; + border-radius: 0; + color: darken( $gray, 10% ); cursor: pointer; + display: block; + font-size: 14px; + font-weight: 400; + margin: 0; + padding: 8px 16px; + text-align: left; - @include breakpoint( "<480px" ) { - padding-left: 16px; + &:first-child { + margin-top: 5px; } - .gridicon { - position: absolute; - top: 0; - left: 0; - height: 24px; - width: 24px; + &:hover, + &:focus { + border: 0; + box-shadow: none; + } + + &:last-child { + margin-bottom: 5px; } - .gridicon-follow { - fill: $gray; + &::-moz-focus-inner { + border: 0; + } + + // Menu Items with Icons + &.has-icon { + padding-left: 42px; + } + + .gridicon__follow { opacity: 1; - transform: rotate( 0 ); - transition: all 0.1s ease-in-out; } - .gridicon-following { - fill: $alert-green; + .gridicon__following { opacity: 0; - transform: rotate( -90deg ); - transition: all 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275); + pointer-events: none; + transform: rotate( 180deg ) scale( 3 ); } - &.is-mini { - .follow-button__label { - font-size: 13px; - } + .gridicon__unfollow { + display: none; + } + + &.is-following { + color: $alert-green; + .gridicon { - height: 16px; - width: 16px; + fill: $alert-green; } - } - &.is-followed { - .gridicon-follow { + .gridicon__follow { opacity: 0; - transform: rotate( -30deg ); + pointer-events: none; + transform: rotate( -180deg ) scale( 0.5 ); } - .gridicon-following { + .gridicon__following { opacity: 1; - transform: rotate( 0 ); + pointer-events: auto; + transform: rotate( 0 ) scale( 1 ); } } -} -.follow-button__label { - display: inline-block; - padding-left: 30px; - color: $gray; - transition: all 0.1s linear; + &:hover { + color: $alert-green; + .gridicon { + fill: $alert-green; + } + + &.is-following { + .gridicon { + fill: lighten( $gray, 10 ); + } - @include breakpoint( "<480px" ) { - display: none; + color: lighten( $gray, 10 ); + + } + } + + .gridicon { + position: absolute; + top: 8px; + left: 13px; + fill: lighten( $gray, 10 ); + transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); } } diff --git a/client/components/tinymce/plugins/media/restrict-size/test/index.js b/client/components/tinymce/plugins/media/restrict-size/test/index.js index e47c605ef7507a..a47dbaa0a81f62 100644 --- a/client/components/tinymce/plugins/media/restrict-size/test/index.js +++ b/client/components/tinymce/plugins/media/restrict-size/test/index.js @@ -17,14 +17,15 @@ describe( 'restrictSize', () => { } ); describe( '#getMaxWidth()', () => { - let getMaxWidth, matchMedia; + let getMaxWidth, matchMedia, devicePixelRatio; before( () => { getMaxWidth = restrictSize.__get__( 'getMaxWidth' ); matchMedia = window.matchMedia; + devicePixelRatio = window.devicePixelRatio; } ); afterEach( () => { - delete window.devicePixelRatio; + window.devicePixelRatio = devicePixelRatio; window.matchMedia = matchMedia; } ); @@ -35,12 +36,14 @@ describe( 'restrictSize', () => { } ); it( 'should return twice the base if the device resolution matches the retina media query', () => { + window.devicePixelRatio = undefined; window.matchMedia = () => ( { matches: true } ); expect( getMaxWidth() ).to.equal( 1118 ); } ); it( 'should return the base max width if the device is not retina-capable', () => { + window.devicePixelRatio = undefined; expect( getMaxWidth() ).to.equal( 559 ); } ); } ); diff --git a/client/lib/react-test-env-setup/index.js b/client/lib/react-test-env-setup/index.js index d8f44e38951d54..ebcb6af2489d31 100644 --- a/client/lib/react-test-env-setup/index.js +++ b/client/lib/react-test-env-setup/index.js @@ -16,7 +16,7 @@ module.exports = function( markup, features ) { features = assign( {}, defaultFeatures, features ); global.document = jsdom( markup ); - global.window = document.parentWindow; + global.window = document.defaultView; global.navigator = window.navigator; global.Element = window.Element; diff --git a/package.json b/package.json index ef70ecdb647c91..1397c3a5b552a7 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "moment": "2.10.6", "moment-timezone": "^0.4.0", "morgan": "1.2.0", - "node-sass": "3.3.3", + "node-sass": "3.4.2", "page": "1.6.1", "phone": "git+https://github.com/Automattic/node-phone.git#1.0.4-6", "photon": "1.0.4", @@ -91,8 +91,8 @@ "walk": "2.3.4", "webpack": "1.12.6", "webpack-dev-middleware": "1.2.0", - "wpcom-unpublished": "1.0.7", "wpcom-proxy-request": "1.0.5", + "wpcom-unpublished": "1.0.7", "wpcom-xhr-request": "0.3.3", "xgettext-js": "0.2.0" }, @@ -117,7 +117,7 @@ "esformatter-special-bangs": "1.0.1", "eslint": "1.3.1", "eslint-plugin-react": "3.3.1", - "jsdom": "3.1.2", + "jsdom": "7.2.0", "localStorage": "1.0.2", "lodash-deep": "1.5.3", "mocha": "2.3.4",