UX: Move user-cards above composer ()

There is currently only one scenario when both the composer and a user card would be present at the same time:

if you have the composer open and then you click on something outside it that triggers a card. Which implies intent to see the card (unobstructed by the composer 😉)

The reverse doesn't happen because opening the composer would close an existing user card.

In theory there's also displaying a user card by clicking on a mention in composer's preview but that functionality is currently broken (and this PR is a prerequisite 😉)

---

I changed `.user-card, .group-card` to `.fk-d-menu[data-identifier="card"]` because that regressed when we moved user cards to float-kit – they are nested inside `.fk-d-menu` so its `z-index` is now important (effectively the cards had `z-index: z("dropdown")` instead of `z("usercard")`)
This commit is contained in:
Jarek Radosz 2024-06-18 15:12:41 +02:00 committed by GitHub
parent 2a22a3b51d
commit 1defb9449b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 4 additions and 5 deletions
app/assets/stylesheets/common/foundation
plugins/chat/assets/stylesheets

View File

@ -95,6 +95,7 @@ $z-layers: (
"header": 1000, "header": 1000,
"footer-nav": 900, "footer-nav": 900,
"tooltip": 600, "tooltip": 600,
"usercard": 500,
"composer": ( "composer": (
"dropdown": 700, "dropdown": 700,
"tooltip": 600, "tooltip": 600,
@ -102,7 +103,6 @@ $z-layers: (
"content": 400, "content": 400,
), ),
"dropdown": 300, "dropdown": 300,
"usercard": 200,
"timeline": 100, "timeline": 100,
"base": 1, "base": 1,
); );

View File

@ -26,7 +26,7 @@ html.rtl {
.chat-drawer-outlet-container { .chat-drawer-outlet-container {
// higher than timeline, lower than composer, lower than user card (bump up below) // higher than timeline, lower than composer, lower than user card (bump up below)
z-index: z("usercard"); z-index: z("composer", "content") - 1;
position: fixed; position: fixed;
right: var(--composer-right, 20px); right: var(--composer-right, 20px);
left: 0; left: 0;

View File

@ -1,6 +1,5 @@
.user-card, .fk-d-menu[data-identifier="card"] {
.group-card { z-index: z("usercard");
z-index: z("usercard") + 1; // bump up user card
} }
.full-page-chat { .full-page-chat {