diff --git a/web/package.json b/web/package.json
index 23e66f73..87ecebc1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -51,6 +51,7 @@
"react-router-dom": "next",
"react-select": "1.0.0-rc.4",
"react-spinners": "0.2.6",
+ "react-transition-group": "^2.3.1",
"rx": "^4.1.0",
"rx-connect": "0.7.0",
"rxjs": "5.4.2",
diff --git a/web/src/components/Browsers/style.scss b/web/src/components/Browsers/style.scss
index 3bd2172e..a6e14e2a 100644
--- a/web/src/components/Browsers/style.scss
+++ b/web/src/components/Browsers/style.scss
@@ -40,4 +40,5 @@
bottom: 0;
left: 0;
border-bottom: 1px dashed;
+ transition: all 300ms ease-in;
}
diff --git a/web/src/components/Sessions/index.js b/web/src/components/Sessions/index.js
index 752d50fe..64bc8cac 100644
--- a/web/src/components/Sessions/index.js
+++ b/web/src/components/Sessions/index.js
@@ -3,6 +3,7 @@ import {Link} from "react-router-dom";
import "./style.scss";
+import {CSSTransition, TransitionGroup,} from 'react-transition-group';
const Sessions = (props) => {
const {sessions = {}} = props;
@@ -13,39 +14,59 @@ const Sessions = (props) => {
Sessions
-
+
{list.length && list.map(session => {
- return (
-
-
-
-
{sessions[session].caps.browserName}
-
{sessions[session].caps.version}
+ return (
+
+
+
+
+
+ {sessions[session].caps.browserName}
+
+
+ {sessions[session].caps.version}
+
+
+ {sessions[session].caps.name && (
+
+ {sessions[session].caps.name}
+
+ )}
+ {sessions[session].caps.enableVNC && (
+
+
+ VNC
+
+ )}
+
- {sessions[session].caps.name && (
-
- {sessions[session].caps.name}
-
- )}
- {sessions[session].caps.enableVNC && (
-
-
- VNC
-
- )}
-
-
- );
- })
- || (
+
+ );
+ }
+ )}
+
+ {(
+
- )}
-
+
+ )}
+
);
};
diff --git a/web/src/components/Sessions/style.scss b/web/src/components/Sessions/style.scss
index 57ad0a4f..70b1b0e9 100644
--- a/web/src/components/Sessions/style.scss
+++ b/web/src/components/Sessions/style.scss
@@ -33,6 +33,11 @@ $big-screen: 1280px;
.nosession-any-text {
margin: 10px;
}
+
+ // don't show until all sessions are gone
+ &_state-enter-active {
+ display: none;
+ }
}
}
@@ -76,6 +81,25 @@ $big-screen: 1280px;
flex-basis: 33.333%;
max-width: 33.333%;
}
+
+ //TRANSITIONS
+ &_state-enter {
+ opacity: 0.01;
+ }
+
+ &_state-enter-active {
+ opacity: 1;
+ transition: opacity 500ms ease-in;
+ }
+
+ &_state-exit {
+ opacity: 1;
+ }
+
+ &_state-exit-active {
+ opacity: 0.01;
+ transition: opacity 500ms ease-out;
+ }
}
.session-link {
diff --git a/web/yarn.lock b/web/yarn.lock
index 897bde6a..905ad084 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1755,6 +1755,10 @@ dom-converter@~0.1:
dependencies:
utila "~0.3"
+dom-helpers@^3.3.1:
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
+
dom-serializer@0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -4157,7 +4161,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
-prop-types@^15.5.10:
+prop-types@^15.5.10, prop-types@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
dependencies:
@@ -4365,6 +4369,14 @@ react-transform-hmr@^1.0.3:
global "^4.3.0"
react-proxy "^1.1.7"
+react-transition-group@^2.3.1:
+ version "2.3.1"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.3.1.tgz#31d611b33e143a5e0f2d94c348e026a0f3b474b6"
+ dependencies:
+ dom-helpers "^3.3.1"
+ loose-envify "^1.3.1"
+ prop-types "^15.6.1"
+
react@15.4.2:
version "15.4.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"