mirror of
https://github.com/vector-im/element-call.git
synced 2026-07-12 18:39:19 +00:00
Move ringing status indicator to header on mobile
On mobile, the ringing status indicator is supposed to display in the header rather than on a tile. The exact layout differs between Android and iOS. To get it right I had to refactor AppBar to use CSS grid templates. (Also, I changed my mind about the exact ringing data I needed out of CallViewModel - sorry. A little move of the ringtone audio renderer into its own component was necessary to accommodate that.)
This commit is contained in:
@@ -121,18 +121,22 @@ unconditionally select the container so we can use cqmin units */
|
||||
.status {
|
||||
grid-area: status;
|
||||
color: var(--cpd-color-text-primary);
|
||||
display: flex;
|
||||
flex-wrap: none;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
margin-block-start: calc(var(--cpd-space-3x) - var(--fg-inset));
|
||||
margin-inline-start: calc(var(--cpd-space-4x) - var(--fg-inset));
|
||||
}
|
||||
|
||||
.status svg {
|
||||
color: var(--cpd-color-icon-tertiary);
|
||||
span {
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--cpd-color-icon-tertiary);
|
||||
vertical-align: center;
|
||||
margin-inline-end: 3px;
|
||||
block-size: 1.2em;
|
||||
inline-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.reactions {
|
||||
|
||||
Reference in New Issue
Block a user