From f10bc8eef17a56b50ba4901184ad325fa181e04c Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Wed, 18 Jan 2017 16:49:20 +0100 Subject: [PATCH 1/5] Animate status bar max-height and margin-top When collapsed, the max-height is set to 0px. When expanded, max-height is set to 50px, margin-top is set to 0px. When expanded and when the timeline is not scrolled down to the bottom, margin-top is set to -50px to offset the change in height, keeping it at the same scroll position. Without the animation, there would be a jump when the user starts scrolling up from the bottom whilst the StatusBar is expanded. --- .../matrix-react-sdk/structures/RoomView.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index c3f7ceed..3b3c396f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -202,6 +202,25 @@ hr.mx_RoomView_myReadMarker { width: 100%; -webkit-flex: 0 0 auto; flex: 0 0 auto; + + max-height: 0px; + background-color: #fff; + z-index: 1000; + overflow: hidden; + + -webkit-transition: all .5s ease-in-out; + -moz-transition: all .5s ease-in-out; + -ms-transition: all .5s ease-in-out; + -o-transition: all .5s ease-in-out; +} + +.mx_RoomView_statusArea_expanded { + max-height: 50px; + margin-top: 0px; +} + +.mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline { + margin-top: -50px; } .mx_RoomView_statusAreaBox { From e08f97a549925ee6bada12963dac1afdae0de714 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Thu, 19 Jan 2017 11:52:15 +0100 Subject: [PATCH 2/5] Reduce animation time to 200ms --- .../vector/css/matrix-react-sdk/structures/RoomView.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 3b3c396f..b7fe0441 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -208,10 +208,10 @@ hr.mx_RoomView_myReadMarker { z-index: 1000; overflow: hidden; - -webkit-transition: all .5s ease-in-out; - -moz-transition: all .5s ease-in-out; - -ms-transition: all .5s ease-in-out; - -o-transition: all .5s ease-in-out; + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + -ms-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; } .mx_RoomView_statusArea_expanded { From 6b1d1389187c3a0904ae2c04097033cd7631a12d Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Thu, 19 Jan 2017 12:45:26 +0100 Subject: [PATCH 3/5] Make scrolling to bottom whilst expanded seem less weird inertially --- .../css/matrix-react-sdk/structures/RoomView.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index b7fe0441..6dc22e2f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -208,10 +208,10 @@ hr.mx_RoomView_myReadMarker { z-index: 1000; overflow: hidden; - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - -ms-transition: all .2s ease-in-out; - -o-transition: all .2s ease-in-out; + -webkit-transition: all .2s ease-out; + -moz-transition: all .2s ease-out; + -ms-transition: all .2s ease-out; + -o-transition: all .2s ease-out; } .mx_RoomView_statusArea_expanded { @@ -221,6 +221,11 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline { margin-top: -50px; + + -webkit-transition: all .2s ease-in; + -moz-transition: all .2s ease-in; + -ms-transition: all .2s ease-in; + -o-transition: all .2s ease-in; } .mx_RoomView_statusAreaBox { From b582cf0a5f24155f4de25320030f34b1b581dbe8 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Mon, 23 Jan 2017 13:30:39 +0000 Subject: [PATCH 4/5] Remove CSS for StatusBar mid-timeline --- .../css/matrix-react-sdk/structures/RoomView.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 6dc22e2f..43434d3f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -216,16 +216,6 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusArea_expanded { max-height: 50px; - margin-top: 0px; -} - -.mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline { - margin-top: -50px; - - -webkit-transition: all .2s ease-in; - -moz-transition: all .2s ease-in; - -ms-transition: all .2s ease-in; - -o-transition: all .2s ease-in; } .mx_RoomView_statusAreaBox { From b7204bf868cdf93040afb581465b5b04712081a7 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Mon, 23 Jan 2017 13:33:39 +0000 Subject: [PATCH 5/5] Use primary bg color on statusArea --- src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index 9e30b9f2..8623e032 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -160,7 +160,7 @@ hr.mx_RoomView_myReadMarker { flex: 0 0 auto; max-height: 0px; - background-color: #fff; + background-color: $primary-bg-color; z-index: 1000; overflow: hidden;