diff --git a/package.json b/package.json index 07b4dbf..d163a08 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-component-playground", - "version": "0.3.5", + "version": "0.3.6", "description": "Isolated loader for React components", "main": "build/bundle.js", "repository": { diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx index df94e95..6abe79b 100644 --- a/src/components/component-playground.jsx +++ b/src/components/component-playground.jsx @@ -207,20 +207,17 @@ module.exports = React.createClass({ }, _renderHomeButton: function() { - return - - - - - - - - - - + var classes = classNames({ + 'button': true, + 'play-button': true, + 'selected-button': !this.constructor.isFixtureSelected(this.props) + }); + + return + ; }, diff --git a/src/components/component-playground.less b/src/components/component-playground.less index 4023636..cf8a6a0 100644 --- a/src/components/component-playground.less +++ b/src/components/component-playground.less @@ -9,19 +9,24 @@ @left-nav-color: #adaaa4; @left-nav-color-selected: #dddcda; -@header-height: 140px; - -@atom-size: 200px; -@atom-nucleus-size: 30px; -@atom-ring-width: 8px; -@atom-ring-rotation: 70deg; -@atom-rotation-duration: 20s; -@atom-color: #61dafb; - -@header-menu-button-size: 50px; -@header-menu-editor-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB/ElEQVR4nL3WX4iMURjH8c/MjkJWhORPKEXKlUIkyeZPmyillb1y5dKFElfbXohLF3LhbmtLDUOaTYOolba4FCWSP+GGWGZtyp9xcc40b+Odmnm1+9Tbe3rOeZ7vec57nt9MrlQcNtWWn3ICCvE9ByewF/OQazP+D97hDEajbxNOYQg36pD5uI/1GTe6Cj/jeAPuYC72ow+lPM5GwEgMyHXw5LEYY+iKlf2OwC5cRm8eB/EDR/CmwypqqGIjnsY8u/E1zs/AxTwW4W1cnMU2C0e0BvfwTfi29XyP67erlhGwBbdxDZewJII+oTeO+//nCm/FLZTwGseif1lM/h49qGaFbIuAqxEw2DT/UeO7ZGrG7ajgSgvAI6GCz1khO3ATxRaAMezCeNJZ0L7tRBmzsQBHm+ZHsQ8TzYHtQnoioIzlQjcn7W70TaYFt3NcM2PyEaFh9+BBYr4iVDCJhVkhBczCK6GzJ3Bc6K0yDgidPqAhkv8kaNdOCj3wRajqOg5riOMAnqcFdnq7+vFM2HFfAkAQzFTlKAhaszSOf6Ws+Y51Tb4XGmoLK+N7PA2SF7SnG+elH18t7j75JAHduBDHlTRIrlQcXo2Hwt2v4kPawhaWwwrhBj4RBDO1T14Kcn1O+C1Y2wGEoFNDOJ0GqENE0KEOk7dt0/JvZVogfwHdM3Runhr5dwAAAABJRU5ErkJggg==); -@header-menu-editor-icon-selected: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB+UlEQVR4nL3WT4iNURjH8c995ypkREj+hFKkrBQiSSZ/mkTZjMzKytJCidVkMbG0kIXdrBSGdCddRI00xVKUxtz8CRtiuGNS/lyLc2737Xqn7n0189Tbe3rOOc/3POc9z++8hcrYqOm2ZNoJKMb3PJzEfixAocX5f/AO/RiOvi04jQHcqkMW4iE25lzoGvyM7U24h/k4iB4MJjgXAUNxQqGNJ8FSjKAjZvY7AjtwBd0JDuMHjuJNm1nUUMVmPI9x9uJr7J+FSwmW4G0cnMe2Clu0Dg/wTfi29XhP66erlhOwDXdxA5exLII+oTu2e//nCG/HHQziNY5H/4oY/D26UM0L2REB1yPgbFP/R43vkqsYd6KMa1MAnggZfM4L2YXbuDoFYAR7MJ52FrVuu1HCXCzCsab+YRzARPPEViFdEVDCSqGa03Y/+iazJreyXbNj8CGhYPfhUaq/LGQwicV5IUXMwSuhsidwQqitEg4Jld6nIZL/BGjVTgk18EXI6iaOaIhjHzIvp3ZPVy9eCCvuSQEIgpmpHEVBa5bH9q+MMd+xocn3UkNtYXV8j2dBEkF7OnFB9vbV4urTTxrQiYuxXc6CFCpjo2vxWDj7VXzIGjiFFbBKOIHPBMHMrJOKINfnhbtgfRsQgk4N4EwWgJBJmzHbtxn5W5kRyF+GYXb8gC07QAAAAABJRU5ErkJggg==); -@header-menu-full-screen-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABxUlEQVR4nL3Wv2sUQRTA8c+eGsHCxipa2QSxUgRLC0WDGITkUgv+ABsRCxv/CEmpiCiIogZSBLUQCwUrY2GjoGArdmJCEHPgj2J3cG5uZ1Yi8cFxu+/te9+d92Nmq4X5uzZaes3/G/zK/N5mfC/gR8ZnDYdTyL7Ci3zK6D+jytjGsDeF5OQ5pjO2BZxTv3lRSpAVzOJb4ZlbuPEvkO24g62FZ/o4ux7ISnR9Qp2WNlAfD7C5uV+VSV0KeYHdeNIBmkkAyziiXtXPHOQdnjUBvzRBcqAZPEwAx7CE2ziN7/gQnKtmGKuWpY41gaci3RL2Y0sEOIrXie9QvLCStlwO1Hl/HOkORoCvGcBIvK45CaBXLbapDGBEuiBwEgda9FeU2/uvIbO470+RYym1dyvkYhOwBFjGITzqAI1jDrtSyBzmcaYAmMTLxhY3QwzaqZ61S+o0D0F66ra7iesZQCh+aIZ0jhbVG+pEo9uUQoJUOF8ABBkYHdjJCDAkpcKvZgAxqI+nhRidkG3Y0+G/Q73XrRvSU58XpzL2ccM16IQMCvZr2o/Zyx2AtXARCnxcdCYn8l773nYVH0VdlADuhZvqf34Sbaj8Bk6ycMLiKlQaAAAAAElFTkSuQmCC); +@header-height: 70px; // 50 + 2 * 10 margins +@header-button-size: @header-height - 2 * @default-spacing; + +@play-button-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABCklEQVR4nLXULUsFQRSH8d+VWwxWg2AUtImYbBaD6Ecwix/AojaxCFaboGISLAoaBKvF4lsQzOIHkNu8GNaB5fqys7szTxqYmfMM5/yZztnpidwMldbHmM8tWcENLjCVSxJYwgP2MZpLAl2s4RUbGM4hCYxgBy+KdnZySALjimDcaRCOWElgRhGOc0zmkgSW8SgyHE0l1AhHG0mgMhwpJIFyOGZzSQJjBuaUUtLDNiZwWd7oJijexxG28PbbgbaSa6zj/r9DTdv1hEUsVAmaSN6ximlcxV6KbVcPe9jFR82HVUr6iuxv+mOobSVRQ20qef4uHt3zOpJbHOIAn6kEg5K5lIXL5Pi7fvAF1F8uXM5LDawAAAAASUVORK5CYII=); +@play-button-icon-selected: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABCUlEQVR4nLXUrUpEQRiH8d/KFoPVIBgFbSImm8Ugeglm8QIsahOLYLUJ6iUoaBCsFotfQVmreAGyzcVwHDisH2fOnDNPGpiZ9xne9890XnsvcjNSWp9iMbdkDdc4x0wuSWAF9zjEeC4JdLGBHrYwmkMSGMMenhXt7OSQBCYVwbiVEI5YSWBOEY4zTOeSBFbxIDIcqRJqhKOJJFAZjjYkgXI45nNJAhOG5tSmpI9dTOGivNFtofgAJ9jB228HmkqusIm7/w6ltusRy1iqEqRI3rGOWVzGXoptVx8H2MdHzYdVSgaK7G/7Y6hNJVFDTZU8fReP7nkdyQ2OcYTPtgTDkoU2C5fJ8Xf94Auuuy70BQy3gwAAAABJRU5ErkJggg==); +@editor-button-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB/ElEQVR4nL3WX4iMURjH8c/MjkJWhORPKEXKlUIkyeZPmyillb1y5dKFElfbXohLF3LhbmtLDUOaTYOolba4FCWSP+GGWGZtyp9xcc40b+Odmnm1+9Tbe3rOeZ7vec57nt9MrlQcNtWWn3ICCvE9ByewF/OQazP+D97hDEajbxNOYQg36pD5uI/1GTe6Cj/jeAPuYC72ow+lPM5GwEgMyHXw5LEYY+iKlf2OwC5cRm8eB/EDR/CmwypqqGIjnsY8u/E1zs/AxTwW4W1cnMU2C0e0BvfwTfi29XyP67erlhGwBbdxDZewJII+oTeO+//nCm/FLZTwGseif1lM/h49qGaFbIuAqxEw2DT/UeO7ZGrG7ajgSgvAI6GCz1khO3ATxRaAMezCeNJZ0L7tRBmzsQBHm+ZHsQ8TzYHtQnoioIzlQjcn7W70TaYFt3NcM2PyEaFh9+BBYr4iVDCJhVkhBczCK6GzJ3Bc6K0yDgidPqAhkv8kaNdOCj3wRajqOg5riOMAnqcFdnq7+vFM2HFfAkAQzFTlKAhaszSOf6Ws+Y51Tb4XGmoLK+N7PA2SF7SnG+elH18t7j75JAHduBDHlTRIrlQcXo2Hwt2v4kPawhaWwwrhBj4RBDO1T14Kcn1O+C1Y2wGEoFNDOJ0GqENE0KEOk7dt0/JvZVogfwHdM3Runhr5dwAAAABJRU5ErkJggg==); +@editor-button-icon-selected: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB+UlEQVR4nL3WT4iNURjH8c995ypkREj+hFKkrBQiSSZ/mkTZjMzKytJCidVkMbG0kIXdrBSGdCddRI00xVKUxtz8CRtiuGNS/lyLc2737Xqn7n0189Tbe3rOOc/3POc9z++8hcrYqOm2ZNoJKMb3PJzEfixAocX5f/AO/RiOvi04jQHcqkMW4iE25lzoGvyM7U24h/k4iB4MJjgXAUNxQqGNJ8FSjKAjZvY7AjtwBd0JDuMHjuJNm1nUUMVmPI9x9uJr7J+FSwmW4G0cnMe2Clu0Dg/wTfi29XhP66erlhOwDXdxA5exLII+oTu2e//nCG/HHQziNY5H/4oY/D26UM0L2REB1yPgbFP/R43vkqsYd6KMa1MAnggZfM4L2YXbuDoFYAR7MJ52FrVuu1HCXCzCsab+YRzARPPEViFdEVDCSqGa03Y/+iazJreyXbNj8CGhYPfhUaq/LGQwicV5IUXMwSuhsidwQqitEg4Jld6nIZL/BGjVTgk18EXI6iaOaIhjHzIvp3ZPVy9eCCvuSQEIgpmpHEVBa5bH9q+MMd+xocn3UkNtYXV8j2dBEkF7OnFB9vbV4urTTxrQiYuxXc6CFCpjo2vxWDj7VXzIGjiFFbBKOIHPBMHMrJOKINfnhbtgfRsQgk4N4EwWgJBJmzHbtxn5W5kRyF+GYXb8gC07QAAAAABJRU5ErkJggg==); +@full-screen-button-icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABxUlEQVR4nL3Wv2sUQRTA8c+eGsHCxipa2QSxUgRLC0WDGITkUgv+ABsRCxv/CEmpiCiIogZSBLUQCwUrY2GjoGArdmJCEHPgj2J3cG5uZ1Yi8cFxu+/te9+d92Nmq4X5uzZaes3/G/zK/N5mfC/gR8ZnDYdTyL7Ci3zK6D+jytjGsDeF5OQ5pjO2BZxTv3lRSpAVzOJb4ZlbuPEvkO24g62FZ/o4ux7ISnR9Qp2WNlAfD7C5uV+VSV0KeYHdeNIBmkkAyziiXtXPHOQdnjUBvzRBcqAZPEwAx7CE2ziN7/gQnKtmGKuWpY41gaci3RL2Y0sEOIrXie9QvLCStlwO1Hl/HOkORoCvGcBIvK45CaBXLbapDGBEuiBwEgda9FeU2/uvIbO470+RYym1dyvkYhOwBFjGITzqAI1jDrtSyBzmcaYAmMTLxhY3QwzaqZ61S+o0D0F66ra7iesZQCh+aIZ0jhbVG+pEo9uUQoJUOF8ABBkYHdjJCDAkpcKvZgAxqI+nhRidkG3Y0+G/Q73XrRvSU58XpzL2ccM16IQMCvZr2o/Zyx2AtXARCnxcdCYn8l773nYVH0VdlADuhZvqf34Sbaj8Bk6ycMLiKlQaAAAAAElFTkSuQmCC); + +@play-button-electron-size: 5px; +@play-button-electron-color: #61dafb; +@play-button-electron-duration: 5s; + +@keyframes roundandround { + to { + transform: rotate(360deg); + } +} @fixture-line-height: 30px; @fixture-component-font-size: 16px; @@ -52,85 +57,76 @@ .header { position: relative; height: @header-height; - background: @default-darken-color; overflow: hidden; - .atom { + .button { + display: inline-block; + width: @header-button-size; + height: @header-button-size; + border-radius: 100%; + background-position: center center; + background-repeat: no-repeat; + color: @left-nav-color; + + &:hover, + &.selected-button { + background-color: @left-nav-bgcolor-selected; + } + } + + .play-button { position: absolute; top: @default-spacing; - left: (@left-nav-width - @atom-size) / 2; - width: @atom-size; - height: @atom-size; - - .electron { - position: absolute; - width: 100%; - height: 100%; + left: @default-spacing; + background-image: @play-button-icon; + background-position: 15px center; // fine tune arrow position - &:nth-child(2) { - transform: rotateZ(60deg); - } - - &:nth-child(3) { - transform: rotateZ(120deg); - } - - .ring { - display: block; - width: 100%; - height: 100%; - border: @atom-ring-width solid @atom-color; - box-sizing: border-box; - border-radius: 50%; - transform: rotateX(@atom-ring-rotation); - } + &.selected-button { + background-image: @play-button-icon-selected; } - .nucleus { + .electron { position: absolute; top: 50%; left: 50%; - width: @atom-nucleus-size; - height: @atom-nucleus-size; - margin: 0.5 * -@atom-nucleus-size 0 0 0.5 * -@atom-nucleus-size; - background: @atom-color; - border-radius: 100%; + width: 0; + height: 0; + animation: roundandround @play-button-electron-duration infinite linear; + + &:after { + content: ''; + position: absolute; + top: -@header-button-size / 2; + margin: -@play-button-electron-size / 2 0 0 + -@play-button-electron-size / 2; + width: @play-button-electron-size; + height: @play-button-electron-size; + border-radius: 100%; + background: @play-button-electron-color; + } } } .menu { position: absolute; bottom: @default-spacing; - right: @default-spacing; + right: 0; margin: 0; .button { - display: inline-block; - width: @header-menu-button-size; - height: @header-menu-button-size; - border-radius: 3px; - background-color: fadeout(@left-nav-bgcolor, 10%); - background-position: center center; - background-repeat: no-repeat; - color: @left-nav-color; - - &:hover, - &.selected-button { - background-color: fadeout(@left-nav-bgcolor-selected, 10%); - } + margin-right: @default-spacing; + } - &.fixture-editor-button { - margin-right: @default-spacing; - background-image: @header-menu-editor-icon; + .fixture-editor-button { + background-image: @editor-button-icon; - &.selected-button { - background-image: @header-menu-editor-icon-selected; - } + &.selected-button { + background-image: @editor-button-icon-selected; } + } - &.full-screen-button { - background-image: @header-menu-full-screen-icon; - } + .full-screen-button { + background-image: @full-screen-button-icon; } } } @@ -141,6 +137,7 @@ bottom: 0; left: 0; right: 0; + background: @default-darken-color; overflow-x: hidden; overflow-y: auto; @@ -151,7 +148,6 @@ .component { padding: 0.5 * @default-spacing 0; - border-top: 1px solid @default-darken-color; .component-name { display: block; diff --git a/tests/components/component-playground/default/render/dom.js b/tests/components/component-playground/default/render/dom.js index 74fb146..920335e 100644 --- a/tests/components/component-playground/default/render/dom.js +++ b/tests/components/component-playground/default/render/dom.js @@ -61,4 +61,9 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() { it('should not render fixture editor', function() { expect(component.refs.editor).to.not.exist; }); + + it('should add selected class on home button', function() { + expect($(component.refs.homeButton.getDOMNode()) + .hasClass('selected-button')).to.be.true; + }); }); diff --git a/tests/components/component-playground/selected-fixture-and-editor/render/dom.js b/tests/components/component-playground/selected-fixture-and-editor/render/dom.js index 46780eb..d40a5bb 100644 --- a/tests/components/component-playground/selected-fixture-and-editor/render/dom.js +++ b/tests/components/component-playground/selected-fixture-and-editor/render/dom.js @@ -24,9 +24,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() { }); it('should add selected class on editor button', function() { - // XXX: Class is set on button parent - expect($(component.getDOMNode()) - .find('.fixture-editor-button') + expect($(component.refs.editorButton.getDOMNode()) .hasClass('selected-button')).to.be.true; }); diff --git a/tests/components/component-playground/selected-fixture/events/dom.js b/tests/components/component-playground/selected-fixture/events/dom.js index 3f0c7ce..2afee06 100644 --- a/tests/components/component-playground/selected-fixture/events/dom.js +++ b/tests/components/component-playground/selected-fixture/events/dom.js @@ -29,7 +29,7 @@ describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() { }); it('should route link on home button', function() { - utils.Simulate.click(component.refs.homeLink.getDOMNode()); + utils.Simulate.click(component.refs.homeButton.getDOMNode()); expect(component.props.router.routeLink).to.have.been.called; }); diff --git a/tests/components/component-playground/selected-fixture/render/dom.js b/tests/components/component-playground/selected-fixture/render/dom.js index e9ae4a4..0f0acc1 100644 --- a/tests/components/component-playground/selected-fixture/render/dom.js +++ b/tests/components/component-playground/selected-fixture/render/dom.js @@ -27,6 +27,11 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() { expect($previewContainer.hasClass(fixture.containerClassName)).to.be.true; }); + it('should remove selected class on home button', function() { + expect($(component.refs.homeButton.getDOMNode()) + .hasClass('selected-button')).to.be.false; + }); + it('should add extra class to selected fixture', function() { var $fixture = $component.find('.component-fixture.selected');