Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-26 02:18:25 +08:00
Code Issues Packages Projects Releases Wiki Activity
cafa02ccc2
element-web-Github/res/css/views/rooms/_RoomBreadcrumbs.pcss

44 lines
1.4 KiB
Plaintext
Raw Normal View History

Reimplement breadcrumbs for new room list This all-new component handles breadcrumbs a bit more smoothly for the app by always listening to changes even if the component isn't present. This allows the breadcrumbs to remain up to date for when the user re-enables breadcrumbs. The new behaviour is that we turn breadcrumbs on once the user has a room, and we don't turn it back off for them. This also introduces a new animation which is more stable and not laggy, though instead of sliding the breadcrumbs pop. This might be undesirable - to be reviewed.
2020-06-09 07:11:58 +08:00
/*
Change license (#13) * Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
2024-09-09 21:57:16 +08:00
Copyright 2024 New Vector Ltd.
Reimplement breadcrumbs for new room list This all-new component handles breadcrumbs a bit more smoothly for the app by always listening to changes even if the component isn't present. This allows the breadcrumbs to remain up to date for when the user re-enables breadcrumbs. The new behaviour is that we turn breadcrumbs on once the user has a room, and we don't turn it back off for them. This also introduces a new animation which is more stable and not laggy, though instead of sliding the breadcrumbs pop. This might be undesirable - to be reviewed.
2020-06-09 07:11:58 +08:00
Copyright 2020 The Matrix.org Foundation C.I.C.
Change license (#13) * Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
2024-09-09 21:57:16 +08:00
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
Reimplement breadcrumbs for new room list This all-new component handles breadcrumbs a bit more smoothly for the app by always listening to changes even if the component isn't present. This allows the breadcrumbs to remain up to date for when the user re-enables breadcrumbs. The new behaviour is that we turn breadcrumbs on once the user has a room, and we don't turn it back off for them. This also introduces a new animation which is more stable and not laggy, though instead of sliding the breadcrumbs pop. This might be undesirable - to be reviewed.
2020-06-09 07:11:58 +08:00
*/
RoomBreadcrumbs2 -> RoomBreadcrumbs
2020-07-18 05:32:06 +08:00
.mx_RoomBreadcrumbs {
Update the CSS transition for breadcrumbs The actual transition length might need adjusting, but this is fairly close to what was requested.
2020-06-10 05:06:54 +08:00
width: 100%;
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 21:39:29 +08:00
/* Create a flexbox for the crumbs */
Reimplement breadcrumbs for new room list This all-new component handles breadcrumbs a bit more smoothly for the app by always listening to changes even if the component isn't present. This allows the breadcrumbs to remain up to date for when the user re-enables breadcrumbs. The new behaviour is that we turn breadcrumbs on once the user has a room, and we don't turn it back off for them. This also introduces a new animation which is more stable and not laggy, though instead of sliding the breadcrumbs pop. This might be undesirable - to be reviewed.
2020-06-09 07:11:58 +08:00
display: flex;
flex-direction: row;
align-items: flex-start;
Tweaks to informational architecture 1.1 (#7052) * Move user avatar to Space panel * Add room list header for 'Home' or 'Space Name' to room list Add existing Space context menus to room list header * Re-add pending room join spinner * Iterate RoomListHeader plus context menu * Iterate space context menu * Iterate room list + interactions * Move DND to new iA model * Replace composer custom status management with usermenu one * Cull Quick Actions * Iterate minimized room list state * delint * Merge the RoomListNumResults into the RoomListHeader * Make the search shortcut prompt semi-bold * Iterate RoomListHeader based on design review * Iterate UserMenu based on feedback * Add name to expanded spacepanel usermenu button * i18n * Make room sub list aux button components more generic * Change left panel explore button to only refer to room directory * Iterate RoomListHeader * Fix custom user status input field width in Chrome * Bring back Notification settings button * delint * i18n * post-merge fix * iterate pr * Remove unused state * update copy * Apply suggestions from PR review * delint * Update invite iconography * Iterate Space context menu to match Figma * Fix chevron alignment * Fix edge case for RoomListHeader on metaspaces * Wire up general rageshake-driven feedback mechanism * Add IA1.1 info toast * add missing alt attribute * delint * delint * tweak ia toast priority * e2e test account for new toast * autofocus feedback field and remove old subheading * tweak copy * Iterate space panel colours to match Figma * Iterate PR * delint * Fix feedback submission with object setting values * iterate based on review * Tweak colours and update splash image * Tweaks based on review * Remove room list prompt, made redundant by the big fat `+` * Fix edge cases around User Menu positioning and dnd * Add missing import, bad merge? * Update aria label in e2e test * Fix room list space rooms context menu explore button behaviour * Tweak copy * Revert order of options in the UserMenu * Tweak copy * i18n
2021-12-01 02:08:46 +08:00
margin-bottom: 12px;
Reimplement breadcrumbs for new room list This all-new component handles breadcrumbs a bit more smoothly for the app by always listening to changes even if the component isn't present. This allows the breadcrumbs to remain up to date for when the user re-enables breadcrumbs. The new behaviour is that we turn breadcrumbs on once the user has a room, and we don't turn it back off for them. This also introduces a new animation which is more stable and not laggy, though instead of sliding the breadcrumbs pop. This might be undesirable - to be reviewed.
2020-06-09 07:11:58 +08:00
RoomBreadcrumbs2 -> RoomBreadcrumbs
2020-07-18 05:32:06 +08:00
.mx_RoomBreadcrumbs_crumb {
Reimplement breadcrumbs for new room list This all-new component handles breadcrumbs a bit more smoothly for the app by always listening to changes even if the component isn't present. This allows the breadcrumbs to remain up to date for when the user re-enables breadcrumbs. The new behaviour is that we turn breadcrumbs on once the user has a room, and we don't turn it back off for them. This also introduces a new animation which is more stable and not laggy, though instead of sliding the breadcrumbs pop. This might be undesirable - to be reviewed.
2020-06-09 07:11:58 +08:00
margin-right: 8px;
width: 32px;
Update the CSS transition for breadcrumbs The actual transition length might need adjusting, but this is fairly close to what was requested.
2020-06-10 05:06:54 +08:00
}
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 21:39:29 +08:00
/* These classes come from the CSSTransition component. There's many more classes we */
/* could care about, but this is all we worried about for now. The animation works by */
/* first triggering the enter state with the newest breadcrumb off screen (-40px) then */
/* sliding it into view. */
RoomBreadcrumbs2 -> RoomBreadcrumbs
2020-07-18 05:32:06 +08:00
&.mx_RoomBreadcrumbs-enter {
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 21:39:29 +08:00
transform: translateX(-40px); /* 32px for the avatar, 8px for the margin */
Update the CSS transition for breadcrumbs The actual transition length might need adjusting, but this is fairly close to what was requested.
2020-06-10 05:06:54 +08:00
}
RoomBreadcrumbs2 -> RoomBreadcrumbs
2020-07-18 05:32:06 +08:00
&.mx_RoomBreadcrumbs-enter-active {
Make breadcrumb animation run on the compositing layer
2021-05-28 16:34:08 +08:00
transform: translateX(0);
Reimplement breadcrumbs for new room list This all-new component handles breadcrumbs a bit more smoothly for the app by always listening to changes even if the component isn't present. This allows the breadcrumbs to remain up to date for when the user re-enables breadcrumbs. The new behaviour is that we turn breadcrumbs on once the user has a room, and we don't turn it back off for them. This also introduces a new animation which is more stable and not laggy, though instead of sliding the breadcrumbs pop. This might be undesirable - to be reviewed.
2020-06-09 07:11:58 +08:00
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 21:39:29 +08:00
/* Timing function is as-requested by design. */
/* NOTE: The transition time MUST match the value passed to CSSTransition! */
Make breadcrumb animation run on the compositing layer
2021-05-28 16:34:08 +08:00
transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
Reimplement breadcrumbs for new room list This all-new component handles breadcrumbs a bit more smoothly for the app by always listening to changes even if the component isn't present. This allows the breadcrumbs to remain up to date for when the user re-enables breadcrumbs. The new behaviour is that we turn breadcrumbs on once the user has a room, and we don't turn it back off for them. This also introduces a new animation which is more stable and not laggy, though instead of sliding the breadcrumbs pop. This might be undesirable - to be reviewed.
2020-06-09 07:11:58 +08:00
}
RoomBreadcrumbs2 -> RoomBreadcrumbs
2020-07-18 05:32:06 +08:00
.mx_RoomBreadcrumbs_placeholder {
Compound Typography pass (#11103) * Integrate compound design tokens The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here * Delete unused or incorrect - sass variables * Typography pass * Deprecate _font-weights.pcss and use Compound instead * lint fix * Fix snapshot * Fix typography pass feedback * Remove unwanted e2e test cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties * lintfix * Migration script for baseFontSize * Updates after design review * Update font scaling panel to use min/max size * Fix custom font * Fix font slider e2e test * Update custom font * Update new baseFontSizeV2 * Disambiguate heading props * Fix appearance test * change max font size * fix e2ee test * fix tests * test baseFontSize migration code * typescript strict * Migrate baseFontSize account setting * Change assertion for font size * Fix font size controller test
2023-06-29 18:30:25 +08:00
font: var(--cpd-font-body-md-semibold);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 21:39:29 +08:00
line-height: 32px; /* specifically to match the height this is not scaled */
Reimplement breadcrumbs for new room list This all-new component handles breadcrumbs a bit more smoothly for the app by always listening to changes even if the component isn't present. This allows the breadcrumbs to remain up to date for when the user re-enables breadcrumbs. The new behaviour is that we turn breadcrumbs on once the user has a room, and we don't turn it back off for them. This also introduces a new animation which is more stable and not laggy, though instead of sliding the breadcrumbs pop. This might be undesirable - to be reviewed.
2020-06-09 07:11:58 +08:00
height: 32px;
}
}
Reference in New Issue Copy Permalink