PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Normalize call buttons (#8129)

Browse source 
- Set a mixin to use it on call events and toasts

Fixes https://github.com/vector-im/element-web/issues/21493

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-04-04 06:34:39 +00:00 committed by GitHub
parent 19c665f5b8
commit 631fd87509
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
res/css/_common.scss
View file

@ -670,3 +670,25 @@ legend {
line-height: inherit; line-height: inherit;
cursor: pointer; cursor: pointer;
} }
@define-mixin CallButton {
box-sizing: border-box;
font-weight: 600;
height: $font-24px;
line-height: $font-24px;
margin-right: 0;
span {
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
margin-right: 8px;
}
}
}

20
res/css/views/messages/_CallEvent.scss
View file

@ -147,32 +147,20 @@ limitations under the License.
align-items: center; align-items: center;
color: $secondary-content; color: $secondary-content;
margin-right: 16px; margin-right: 16px;
gap: 8px; gap: 12px; // See mx_IncomingCallToast_buttons
min-width: max-content; min-width: max-content;
.mx_CallEvent_content_button { .mx_CallEvent_content_button {
padding: 0px 12px; @mixin CallButton;
padding: 0 12px;
span { span::before {
padding: 1px 0;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 16px; mask-size: 16px;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: 8px;
flex-shrink: 0; flex-shrink: 0;
} }
} }
}
.mx_CallEvent_content_button_reject span::before { .mx_CallEvent_content_button_reject span::before {
mask-image: url('$(res)/img/element-icons/call/hangup.svg'); mask-image: url('$(res)/img/element-icons/call/hangup.svg');

15
res/css/views/toasts/_IncomingCallToast.scss
View file

@ -90,27 +90,14 @@ limitations under the License.
gap: 12px; gap: 12px;
.mx_IncomingCallToast_button { .mx_IncomingCallToast_button {
height: 24px; @mixin CallButton;
padding: 0px 8px; padding: 0px 8px;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 1; flex-grow: 1;
margin-right: 0;
font-size: $font-15px; font-size: $font-15px;
line-height: $font-24px;
span { span {
padding: 8px 0; padding: 8px 0;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
margin-right: 8px;
}
} }
&.mx_IncomingCallToast_button_accept span::before { &.mx_IncomingCallToast_button_accept span::before {