From 6087dca2061ff8d3b5f1ca374abc65a392aeee4f Mon Sep 17 00:00:00 2001 From: Bilal Budhani Date: Sun, 10 Dec 2017 18:39:15 +0530 Subject: [PATCH 1/3] Adds animation in collapse/uncollapse sidebar workspace item using React Show library --- packages/app/package.json | 3 ++- .../pages/Sandbox/Editor/Workspace/WorkspaceItem.js | 12 +++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 028df73962d..fa0fde21ff9 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -172,7 +172,8 @@ "tern": "^0.21.0", "vue": "^2.5.2", "vue-template-compiler": "^2.5.2", - "vue-template-es2015-compiler": "^1.6.0" + "vue-template-es2015-compiler": "^1.6.0", + "react-show": "^1.1.2" }, "jest": { "roots": [ diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js index 823dfbb194f..ffc489459ae 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js @@ -2,13 +2,13 @@ import React from 'react'; import styled from 'styled-components'; import ExpandIcon from 'react-icons/lib/md/keyboard-arrow-down'; +import ReactShow from 'react-show'; const ChildContainer = styled.div` position: relative; margin: 0; padding: 0; - overflow: ${props => (props.open ? 'inherit' : 'hidden')}; - height: ${props => (props.open ? '100%' : 0)}; + height: '100%'; ${({ disabled }) => disabled && @@ -116,9 +116,11 @@ export default class WorkspaceItem extends React.Component { {open && {actions}} - - {(keepState || open) && children} - + + + {(keepState || open) && children} + + ); } From 9c23f8195f9e7cdd53dd609395e4599db9b60deb Mon Sep 17 00:00:00 2001 From: Bilal Budhani Date: Sun, 10 Dec 2017 18:41:06 +0530 Subject: [PATCH 2/3] Add @BilalBudhani as a contributor --- .all-contributorsrc | 9 +++++++++ README.md | 4 ++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 896e39dfffb..d98f0c3911b 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -227,6 +227,15 @@ "contributions": [ "code" ] + }, + { + "login": "BilalBudhani", + "name": "Bilal Budhani", + "avatar_url": "https://avatars0.githubusercontent.com/u/1650995?v=4", + "profile": "https://bilalbudhani.com", + "contributions": [ + "code" + ] } ] } diff --git a/README.md b/README.md index d9a033691c3..aa8d659171a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) +# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) An online code editor tailored for web applications. @@ -40,5 +40,5 @@ Thanks goes to these wonderful people | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [
Johann Hubert Sonntagbauer](https://github.com/johann-sonntagbauer)
[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Ajohann-sonntagbauer "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=johann-sonntagbauer "Code") | [
Joachim Seminck](https://github.com/jseminck)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jseminck "Code") | [
Subramanya Chakravarthy](http://chakrihacker.github.io)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=chakrihacker "Code") | [
Robert (Robby) O'Connor](http://robby.oconnor.ninja)
[🚇](#infra-robbyoconnor "Infrastructure (Hosting, Build-Tools, etc)") | [
Bogdan Luca](https://github.com/lbogdan)
[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Albogdan "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lbogdan "Code") | [
Divjot Singh](http://bogas04.github.io)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bogas04 "Code") | [
Jason Nall](http://www.jsonnull.com)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jsonnull "Code") | | [
Lionel](https://elrumordelaluz.com)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=elrumordelaluz "Code") [🎨](#design-elrumordelaluz "Design") | [
Philipp Brumm](https://github.com/brumm)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=brumm "Code") | [
Valentin Hervieu](http://valentin-hervieu.fr)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ValentinH "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AValentinH "Bug reports") | [
Anenth](http://anenth.js.org)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Anenth "Code") [🎨](#design-Anenth "Design") [🤔](#ideas-Anenth "Ideas, Planning, & Feedback") | [
Dony Sukardi](http://dsds.io)
[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Adonysukardi "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=donysukardi "Code") | [
Geoffrey Dhuyvetters](https://github.com/duivvv)
[🎨](#design-duivvv "Design") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=duivvv "Code") | [
Eswar Yaganti](http://nyaganti.com)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nagamalli9999 "Code") [🚇](#infra-nagamalli9999 "Infrastructure (Hosting, Build-Tools, etc)") | -| [
Frank Tan](https://github.com/tansongyang)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tansongyang "Code") | +| [
Frank Tan](https://github.com/tansongyang)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tansongyang "Code") | [
Bilal Budhani](https://bilalbudhani.com)
[💻](https://github.com/CompuIves/codesandbox-client/commits?author=BilalBudhani "Code") | From 4ebcf89c60b68d14b23a5e6a30b09ee0967dbeb2 Mon Sep 17 00:00:00 2001 From: Bilal Budhani Date: Sun, 10 Dec 2017 22:12:28 +0530 Subject: [PATCH 3/3] Fixes content not animating when uncollapsed when keepState is false --- .../app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js index ffc489459ae..0cad54db814 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js @@ -8,7 +8,7 @@ const ChildContainer = styled.div` position: relative; margin: 0; padding: 0; - height: '100%'; + height: 100%; ${({ disabled }) => disabled && @@ -116,10 +116,8 @@ export default class WorkspaceItem extends React.Component { {open && {actions}} - - - {(keepState || open) && children} - + + {children} );