Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animate status bar max-height and margin-top #2981

Merged
merged 6 commits into from
Jan 23, 2017
Merged

Animate status bar max-height and margin-top #2981

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f10bc8e
Animate status bar max-height and margin-top
lukebarnard1 Jan 18, 2017
e08f97a
Reduce animation time to 200ms
lukebarnard1 Jan 19, 2017
6b1d138
Make scrolling to bottom whilst expanded seem less weird inertially
lukebarnard1 Jan 19, 2017
b582cf0
Remove CSS for StatusBar mid-timeline
Jan 23, 2017
c4d246c
Merge branch 'develop' into luke/feature-animated-status-bar
Jan 23, 2017
b7204bf
Use primary bg color on statusArea
Jan 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please use $primary-bg-color or whatever the variable is in our brave new SCSS world

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there something I might have to merge in to get that to work? I've got npm start:css running, but it doesn't seem to be doing SCSS

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this might have to be done as a separate PR because this was branched prior to scss stuff.

z-index: 1000;
overflow: hidden;

-webkit-transition: all .5s ease-in-out;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as per main comment, suggest .2s

-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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hm. this is almost a beautiful hack, but it does result in a weird "inertial scrolling transition when you scroll from middle to bottom of timeline whilst the statusbar is visible. Feels like there should be a way to skip the transition in that scenario.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using ease-out instead of ease-in-out on .mx_RoomView_statusArea seems to make this weird inertia feel less weird. Ideally we would do the transition based on the scroll position of the scroll view... or lose the _mid_timeline class earlier on.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or lose the _mid_timeline class earlier on.

would require some major threading-through of a theoretical isNearlyAtBottom on ScrollPanel of react sdk

}

.mx_RoomView_statusAreaBox {
Expand Down