Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-08-29 21:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Try to make menu a bit more responsive

Browse Source
This commit is contained in:
Half-Shot
2024-11-15 11:25:12 +00:00
parent 171b5a522e
commit 003a16387c
1 changed files with 11 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/button/ReactionToggleButton.module.css
View File

@@ -3,23 +3,25 @@
} }
.reactionPopupMenu { .reactionPopupMenu {
--reaction-button-padding: 10px;
--reaction-button-fontsize: 20px;
display: flex; display: flex;
width: fit-content; width: fit-content;
} }
div.reactionPopupMenuRoot.reactionPopupMenuModal { div.reactionPopupMenuRoot.reactionPopupMenuModal {
--overlay-top: 82vh; --overlay-top: 82vh;
width: fit-content;
} }
div.reactionPopupMenuRoot { div.reactionPopupMenuRoot {
/* Center the drawer */ /* Center the drawer */
--inset-inline: 30em; --inset-inline: 30em;
width: fit-content;
} }
.reactionPopupMenuRoot > div { .reactionPopupMenuRoot > div {
width: fit-content; width: fit-content;
max-width: 100%; max-width: 100vw;
} }
div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div { div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
@@ -38,15 +40,9 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
flex: auto; flex: auto;
} }
:root {
--reaction-button-padding: 1em;
--reaction-button-size: 1.4em;
--reaction-button-fontsize: 1.6em;
}
.reactionsMenu { .reactionsMenu {
min-height: calc( min-height: calc(
var(--reaction-button-size) + var(--reaction-button-padding) (var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2
); );
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -54,16 +50,10 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
gap: var(--cpd-separator-spacing); gap: var(--cpd-separator-spacing);
/* Height of 3 rows plus padding. */ /* Height of 3 rows plus padding. */
max-height: calc( max-height: calc(
( ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 3
var(--reaction-button-size) + var(--reaction-button-padding) +
var(--cpd-separator-spacing)
) * 4
); );
width: calc( max-width: calc(
( ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 5
var(--reaction-button-size) + var(--reaction-button-padding) +
var(--cpd-separator-spacing)
) * 6.5
); );
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@@ -75,6 +65,7 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
justify-content: start; justify-content: start;
align-items: auto; align-items: auto;
align-content: start; align-content: start;
width: fit-content;
} }
.reactionsMenu > * { .reactionsMenu > * {
@@ -83,13 +74,12 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
.reactionButton { .reactionButton {
padding: var(--reaction-button-padding); padding: var(--reaction-button-padding);
font-size: 1.6em;
width: var(--reaction-button-size);
height: var(--reaction-button-size);
border-radius: var(--cpd-radius-pill-effect); border-radius: var(--cpd-radius-pill-effect);
font-size: var(--reaction-button-fontsize); font-size: var(--reaction-button-fontsize);
min-block-size: unset; min-block-size: unset;
border: none; border: none;
aspect-ratio: 1 / 1;
height: 100%;
} }
.verticalSeperator { .verticalSeperator {