pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-18 13:35:42 +09:00
Code Issues Packages Projects Releases Wiki Activity

perf(app): show the message action bar from css not remounting (#1896)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:41:24 +02:00
1 parent c54d7bcc88
commit 3a6bc4bc7b
4 files changed
+217 -211
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/channel/components/MessageActionBar.module.css
+45 -6
View File
@@ -6,10 +6,44 @@
right: 0;
z-index: var(--z-index-elevated-1);
padding: 0 0.875rem 0.375rem 2rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
:global([data-flx-action-bar]:hover) .actionBarContainer,
:global([data-flx-action-bar]) .actionBarContainer:has(:focus-visible) {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (pointer: coarse) {
:global([data-flx-action-bar]:not([data-flx-action-bar-forced]):hover) .actionBarContainer {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
:global([data-flx-action-bar][data-flx-action-bar-forced]) .actionBarContainer,
.actionBarContainer.actionBarPinned {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
:global(html:not(.window-focused):not(.unfocused-fully-interactive)) .actionBarContainer,
:global(.window-focus-activation-guard) .actionBarContainer {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.actionBar {
composes: toolbar from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-gap: 0;
--action-toolbar-padding: 0.125rem;
--message-action-bar-surface: var(--settings-surface-background, var(--form-surface-background));
--message-action-bar-border: var(--settings-border-color, var(--background-modifier-accent));
--message-action-bar-hover-background: var(--settings-hover-background, var(--surface-interactive-hover-bg));
@@ -41,6 +75,11 @@
.button {
composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-border-width: 0;
}
.quickReactionGroupEnd {
margin-right: 0.5625rem;
}
.button[hidden] {
@@ -74,8 +113,8 @@
}
.actionBarIcon {
width: 1.125rem;
height: 1.125rem;
width: 1.25rem;
height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
@@ -83,8 +122,8 @@
}
.actionBarIcon > svg {
width: 1.125rem;
height: 1.125rem;
width: 1.25rem;
height: 1.25rem;
display: block;
flex: 0 0 auto;
object-fit: contain;
@@ -103,8 +142,8 @@
}
.emojiImage {
height: 1.125rem;
width: 1.125rem;
height: 1.25rem;
width: 1.25rem;
}
img.emojiImage {