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.

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

Redesign: timeline: make date separator stick to bottom of room header #7575

Open
bwindels opened this issue Oct 25, 2018 · 11 comments
Open
Labels
A-Timeline O-Occasional Affects or can be seen by some users regularly or most users rarely T-Enhancement X-Needs-Design

Comments

@bwindels
Copy link
Contributor

bwindels commented Oct 25, 2018

Making it stick to the top should be easy with position: sticky; top: -10px on the li that contains the date separator. Will need to find a way to make it not being clipped by the timeline and appear on the border of the room header.

@t3chguy
Copy link
Member

t3chguy commented Jun 14, 2020

Related #4780

@532910
Copy link
Contributor

532910 commented Jun 14, 2020

@t3chguy from #14023:

That leads to confusion as it makes it look like that is the first message of that date

Every time I see just time label without a date I thought it's today, and it confuses much more than a sticky header could do.

Example: https://codepen.io/brianhaferkamp/pen/xogEXr

Considering that it's not a static image but a dynamic interactive I see no reason to be confused.

@bwindels
Copy link
Contributor Author

Making it stick to the top should be easy with position: sticky; top: -10px on the li that contains the date separator. Will need to find a way to make it not being clipped by the timeline and appear on the border of the room header.

This won't be as easy fwiw, looked further into this and this is not how position sticky works, it will only disappear if it's parent is completely out of view, so you can't make it work with a flat list like our timeline currently.

@t3chguy
Copy link
Member

t3chguy commented Jun 15, 2020

might be possible to workaround using display: contents to effectively flatten the relationships there to make sticky work

@bwindels
Copy link
Contributor Author

bwindels commented Jun 22, 2020

might be possible to workaround using display: contents to effectively flatten the relationships there to make sticky work

Interesting, wasn't aware of that. Although I assumed we would have to add hierarchy (e.g. a container per day) to make sticky work, rather than remove hierarchy?

@bwindels
Copy link
Contributor Author

I was reading https://lea.verou.me/2020/06/hybrid-positioning-with-css-variables-and-max/ the other day and wondered if a hybrid approach like that could be helpful here.

@t3chguy
Copy link
Member

t3chguy commented Jun 22, 2020

Shouldn't need to, if we get display contents on the li that harbours the date separator then Sticky should work on that separator

@bwindels
Copy link
Contributor Author

bwindels commented Jun 22, 2020

Hmm, would be interesting to see how this could work. I just tried on a timeline prototype mockup with sticky dates I made earlier:

.date-separator has position: sticky in both cases.

With a container for messages per day:
date-container
date-container

With a container (with display:contents) just for the date header:
no-date-container
no-date-container

This show the same problem as when not using display: contents, e.g. that when you don't have a grouping container per day, the previous header does not disappear, so if you have transparency or variable size, you run into problems.

@bwindels
Copy link
Contributor Author

Another article on how to do a hybrid js/css approach: https://developers.google.com/web/updates/2017/09/sticky-headers

@ShadowJonathan
Copy link
Contributor

ShadowJonathan commented Dec 10, 2021

This has become more relevant with matrix-org/matrix-react-sdk#7317, as date headers would become a point of functionality.

Edit: new PR; matrix-org/matrix-react-sdk#7339

@SimonBrandner SimonBrandner added the O-Uncommon Most users are unlikely to come across this or unexpected workflow label Dec 11, 2021
su-ex added a commit to SchildiChat/element-web that referenced this issue Jan 31, 2022
* Tweak room list header menu for when space is active ([\element-hq#7577](matrix-org/matrix-react-sdk#7577)). Fixes element-hq#20601.
* Tweak light hover & active color for bubble layout ([\element-hq#7626](matrix-org/matrix-react-sdk#7626)). Fixes element-hq#19475.
* De-labs Metaspaces ([\element-hq#7613](matrix-org/matrix-react-sdk#7613)).
* De-labs Message Bubbles layout ([\element-hq#7612](matrix-org/matrix-react-sdk#7612)).
* Add customisation point for mxid display ([\element-hq#7595](matrix-org/matrix-react-sdk#7595)).
* Add labs flag for default open right panel ([\element-hq#7618](matrix-org/matrix-react-sdk#7618)). Fixes element-hq#20666.
* Tweak copy for the Sidebar tab in User Settings ([\element-hq#7578](matrix-org/matrix-react-sdk#7578)). Fixes element-hq#20619.
* Make widgets not reload (persistent) between center and top container  ([\element-hq#7575](matrix-org/matrix-react-sdk#7575)). Fixes element-hq#20596. Contributed by @toger5.
* Don't render a bubble around emotes in bubble layout ([\element-hq#7573](matrix-org/matrix-react-sdk#7573)). Fixes element-hq#20617.
* Add ability to switch between voice & video in calls ([\element-hq#7155](matrix-org/matrix-react-sdk#7155)). Fixes element-hq#18619. Contributed by @SimonBrandner.
* Re-renable Share option for location messages ([\element-hq#7596](matrix-org/matrix-react-sdk#7596)).
* Make room ID copyable ([\element-hq#7600](matrix-org/matrix-react-sdk#7600)). Fixes element-hq#20675. Contributed by @SimonBrandner.
* Improve the look of the keyboard settings tab ([\element-hq#7562](matrix-org/matrix-react-sdk#7562)). Contributed by @SimonBrandner.
* Add tooltips to emoji in messages ([\element-hq#7592](matrix-org/matrix-react-sdk#7592)). Fixes element-hq#9911 and element-hq#20661. Contributed by @robintown.
* Improve redundant tooltip on send button in forward dialog ([\element-hq#7594](matrix-org/matrix-react-sdk#7594)). Contributed by @twigleingrid.
* Allow downloads from widgets. ([\element-hq#7502](matrix-org/matrix-react-sdk#7502)). Contributed by @Fox32.
* Parse matrix-schemed URIs ([\element-hq#7453](matrix-org/matrix-react-sdk#7453)).
* Show a tile at beginning of visible history ([\element-hq#5887](matrix-org/matrix-react-sdk#5887)). Fixes element-hq#16818 element-hq#16679 and element-hq#19888. Contributed by @robintown.
* Enable the polls feature ([\element-hq#7581](matrix-org/matrix-react-sdk#7581)).
* Display general marker on non-self location shares ([\element-hq#7574](matrix-org/matrix-react-sdk#7574)).
* Improve/add notifications for location and poll events ([\element-hq#7552](matrix-org/matrix-react-sdk#7552)). Fixes element-hq#20561. Contributed by @SimonBrandner.
* Upgrade linkify to v3.0 ([\element-hq#7282](matrix-org/matrix-react-sdk#7282)). Fixes element-hq#17133 element-hq#16825 and element-hq#5808. Contributed by @Palid.
* Update sidebar icon from Compound ([\element-hq#7572](matrix-org/matrix-react-sdk#7572)). Fixes element-hq#20615.
* Replace home icon with new one ([\element-hq#7571](matrix-org/matrix-react-sdk#7571)). Fixes element-hq#20606.
* Make the `Keyboard Shortcuts` dialog into a settings tab ([\element-hq#7198](matrix-org/matrix-react-sdk#7198)). Fixes element-hq#19866. Contributed by @SimonBrandner.
* Add setting for enabling location sharing ([\element-hq#7547](matrix-org/matrix-react-sdk#7547)).
* Add a developer mode 'view source' button to crashed event tiles ([\element-hq#7537](matrix-org/matrix-react-sdk#7537)).
* Replace `kick` terminology with `Remove from chat` ([\element-hq#7469](matrix-org/matrix-react-sdk#7469)). Fixes element-hq#9547.
* Render events as extensible events (behind labs) ([\element-hq#7462](matrix-org/matrix-react-sdk#7462)).
* Render Jitsi (and other sticky widgets) in PiP container, so it can be dragged and the "jump to room functionality" is provided ([\element-hq#7450](matrix-org/matrix-react-sdk#7450)). Fixes element-hq#15682. Contributed by @toger5.
* Allow bubble layout in Thread View ([\element-hq#7478](matrix-org/matrix-react-sdk#7478)). Fixes element-hq#20419.
* Make LocationPicker appearance cleaner ([\element-hq#7516](matrix-org/matrix-react-sdk#7516)).
* Limit max-width for bubble layout to 1200px ([\element-hq#7458](matrix-org/matrix-react-sdk#7458)). Fixes element-hq#18072.
* Improve look of call events in bubble layout ([\element-hq#7445](matrix-org/matrix-react-sdk#7445)). Fixes element-hq#20324. Contributed by @SimonBrandner.
* Make files & voice memos in bubble layout match colouring ([\element-hq#7457](matrix-org/matrix-react-sdk#7457)). Fixes element-hq#20326.
* Allow cancelling events whilst they are encrypting ([\element-hq#7483](matrix-org/matrix-react-sdk#7483)). Fixes element-hq#17726.
* [Release] Fix left panel widgets causing app-wide crash ([\element-hq#7660](matrix-org/matrix-react-sdk#7660)).
* Load light theme prior to HTML export to ensure it is present ([\element-hq#7643](matrix-org/matrix-react-sdk#7643)). Fixes element-hq#20276.
* Fix soft-crash when hanging up Jitsi via PIP ([\element-hq#7645](matrix-org/matrix-react-sdk#7645)). Fixes element-hq#20766.
* Fix RightPanelStore assuming isViewingRoom is false on load ([\element-hq#7642](matrix-org/matrix-react-sdk#7642)).
* Correctly handle Room.timeline events which have a nullable `Room` ([\element-hq#7635](matrix-org/matrix-react-sdk#7635)). Fixes matrix-org/element-web-rageshakes#9490.
* Translate keyboard shortcut alternate key names ([\element-hq#7633](matrix-org/matrix-react-sdk#7633)). Fixes element-hq#20739.
* Fix unfocused paste handling and focus return for file uploads ([\element-hq#7625](matrix-org/matrix-react-sdk#7625)).
* Changed MacOS hotkey for GoToHome view. ([\#7631](matrix-org/matrix-react-sdk#7631)). Contributed by @aj-ya.
* Fix issue with the new composer EmojiPart which caused infinite loops ([\element-hq#7629](matrix-org/matrix-react-sdk#7629)). Fixes element-hq#20746.
* Upgrade linkifyjs to fix schemes as domain prefixes ([\element-hq#7628](matrix-org/matrix-react-sdk#7628)). Fixes element-hq#20720.
* Show bubble tile timestamps for bubble layout inside the bubble ([\element-hq#7622](matrix-org/matrix-react-sdk#7622)). Fixes element-hq#20562.
*  Improve taken username warning in registration for when request fails ([\element-hq#7621](matrix-org/matrix-react-sdk#7621)).
* Avoid double dialog after clicking to remove a public room ([\element-hq#7604](matrix-org/matrix-react-sdk#7604)). Fixes element-hq#20681. Contributed by @c-cal.
* Fix space member list right panel state ([\element-hq#7617](matrix-org/matrix-react-sdk#7617)). Fixes element-hq#20716.
* Fall back to legacy analytics for guest users ([\#7616](matrix-org/matrix-react-sdk#7616)).
* Always emit a space filter update when the space is actually changed ([\element-hq#7611](matrix-org/matrix-react-sdk#7611)). Fixes element-hq#20664.
* Enlarge emoji in composer ([\element-hq#7602](matrix-org/matrix-react-sdk#7602)). Fixes element-hq#20665 element-hq#15635 and element-hq#20688. Contributed by @robintown.
* Disable location sharing button on Desktop ([\element-hq#7590](matrix-org/matrix-react-sdk#7590)).
* Make pills more natural to navigate around ([\element-hq#7607](matrix-org/matrix-react-sdk#7607)). Fixes element-hq#20678. Contributed by @robintown.
* Fix excessive padding on inline images ([\element-hq#7605](matrix-org/matrix-react-sdk#7605)). Contributed by @robintown.
* Prevent pills from being split by formatting actions ([\element-hq#7606](matrix-org/matrix-react-sdk#7606)). Contributed by @robintown.
* Fix translation of "powerText" ([\element-hq#7603](matrix-org/matrix-react-sdk#7603)). Contributed by @c-cal.
* Unhide display names when switching back to modern layout ([\element-hq#7601](matrix-org/matrix-react-sdk#7601)). Fixes element-hq#20676. Contributed by @robintown.
* Fix space member list not opening ([\element-hq#7609](matrix-org/matrix-react-sdk#7609)). Fixes element-hq#20679. Contributed by @SimonBrandner.
* Fix translation for the "Add room" tooltip ([\element-hq#7532](matrix-org/matrix-react-sdk#7532)). Contributed by @c-cal.
* Make the close button of the location share dialog visible in high-contrast theme ([\element-hq#7597](matrix-org/matrix-react-sdk#7597)).
* Cancel pending events in virtual room when call placed ([\element-hq#7583](matrix-org/matrix-react-sdk#7583)). Fixes element-hq#17594.
* Fix alignment of unread badge in thread list ([\element-hq#7582](matrix-org/matrix-react-sdk#7582)). Fixes element-hq#20643.
* Fix left positioned tooltips being wrong and offset by fixed value ([\element-hq#7551](matrix-org/matrix-react-sdk#7551)).
* Fix MAB overlapping or overflowing in bubbles layout and threads regressions ([\element-hq#7569](matrix-org/matrix-react-sdk#7569)). Fixes element-hq#20403 and element-hq#20404.
* Fix wrong icon being used for appearance tab in space preferences dialog ([\element-hq#7570](matrix-org/matrix-react-sdk#7570)). Fixes element-hq#20608.
* Fix `/jumptodate` using wrong MSC feature flag ([\element-hq#7563](matrix-org/matrix-react-sdk#7563)).
* Ensure maps show up in replies and threads, by creating unique IDs ([\element-hq#7568](matrix-org/matrix-react-sdk#7568)).
* Differentiate between hover and roving focus in spotlight dialog ([\element-hq#7564](matrix-org/matrix-react-sdk#7564)). Fixes element-hq#20597.
* Fix timeline jumping issues related to bubble layout ([\element-hq#7529](matrix-org/matrix-react-sdk#7529)). Fixes element-hq#20302.
* Start a conference in a room with 2 people + invitee rather than a 1:1 call ([\element-hq#7557](matrix-org/matrix-react-sdk#7557)). Fixes element-hq#1202. Contributed by @SimonBrandner.
* Wait for initial profile load before displaying widget ([\element-hq#7556](matrix-org/matrix-react-sdk#7556)).
* Make widgets and calls span across the whole room width when using bubble layout ([\element-hq#7553](matrix-org/matrix-react-sdk#7553)). Fixes element-hq#20560. Contributed by @SimonBrandner.
* Always show right panel after setting a card ([\element-hq#7544](matrix-org/matrix-react-sdk#7544)). Contributed by @toger5.
* Support deserialising HR tags for editing ([\element-hq#7543](matrix-org/matrix-react-sdk#7543)). Fixes element-hq#20553.
* Refresh ThreadView after React state has been updated ([\element-hq#7539](matrix-org/matrix-react-sdk#7539)). Fixes element-hq#20549.
* Set initial zoom level to 1 to make zooming to location faster ([\element-hq#7541](matrix-org/matrix-react-sdk#7541)).
* truncate room name on pip header ([\#7538](matrix-org/matrix-react-sdk#7538)).
* Prevent enter to send edit weirdness when no change has been made ([\element-hq#7522](matrix-org/matrix-react-sdk#7522)). Fixes element-hq#20507.
* Allow using room pills in slash commands ([\element-hq#7513](matrix-org/matrix-react-sdk#7513)). Fixes element-hq#20343.
@robintown robintown added X-Needs-Design O-Occasional Affects or can be seen by some users regularly or most users rarely and removed O-Uncommon Most users are unlikely to come across this or unexpected workflow labels Apr 2, 2022
@HarHarLinks
Copy link
Contributor

HarHarLinks commented Nov 25, 2022

keywords: sticky floating date day divider

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Timeline O-Occasional Affects or can be seen by some users regularly or most users rarely T-Enhancement X-Needs-Design
Projects
None yet
Development

No branches or pull requests

9 participants