Merge remote-tracking branch 'upstream/develop' into fix/12652/screen-share
This commit is contained in:
commit
c25feb9b9f
27 changed files with 871 additions and 215 deletions
|
@ -162,6 +162,7 @@
|
|||
@import "./views/messages/_CreateEvent.scss";
|
||||
@import "./views/messages/_DateSeparator.scss";
|
||||
@import "./views/messages/_EventTileBubble.scss";
|
||||
@import "./views/messages/_CallEvent.scss";
|
||||
@import "./views/messages/_MEmoteBody.scss";
|
||||
@import "./views/messages/_MFileBody.scss";
|
||||
@import "./views/messages/_MImageBody.scss";
|
||||
|
|
|
@ -118,10 +118,6 @@ limitations under the License.
|
|||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_FilePanel_empty::before {
|
||||
mask-image: url('$(res)/img/element-icons/room/files.svg');
|
||||
}
|
||||
|
|
|
@ -30,5 +30,12 @@ limitations under the License.
|
|||
mask-position: center;
|
||||
content: '';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_InfoTooltip_icon_info::before {
|
||||
mask-image: url('$(res)/img/element-icons/info.svg');
|
||||
}
|
||||
|
||||
.mx_InfoTooltip_icon_warning::before {
|
||||
mask-image: url('$(res)/img/element-icons/warning.svg');
|
||||
}
|
||||
|
|
154
res/css/views/messages/_CallEvent.scss
Normal file
154
res/css/views/messages/_CallEvent.scss
Normal file
|
@ -0,0 +1,154 @@
|
|||
/*
|
||||
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_CallEvent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
background-color: $dark-panel-bg-color;
|
||||
border-radius: 8px;
|
||||
margin: 10px auto;
|
||||
max-width: 75%;
|
||||
box-sizing: border-box;
|
||||
height: 60px;
|
||||
|
||||
&.mx_CallEvent_voice {
|
||||
.mx_CallEvent_type_icon::before,
|
||||
.mx_CallEvent_content_button_callBack span::before,
|
||||
.mx_CallEvent_content_button_answer span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_CallEvent_video {
|
||||
.mx_CallEvent_type_icon::before,
|
||||
.mx_CallEvent_content_button_callBack span::before,
|
||||
.mx_CallEvent_content_button_answer span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 12px;
|
||||
|
||||
.mx_CallEvent_info_basic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 10px; // To match mx_CallEvent
|
||||
|
||||
.mx_CallEvent_sender {
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.8rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.mx_CallEvent_type {
|
||||
font-weight: 400;
|
||||
color: $secondary-fg-color;
|
||||
font-size: 1.2rem;
|
||||
line-height: $font-13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_CallEvent_type_icon {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
margin-right: 5px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
background-color: $tertiary-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: $secondary-fg-color;
|
||||
margin-right: 16px;
|
||||
|
||||
.mx_CallEvent_content_button {
|
||||
height: 24px;
|
||||
padding: 0px 12px;
|
||||
margin-left: 8px;
|
||||
|
||||
span {
|
||||
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;
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_content_button_reject span::before {
|
||||
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
|
||||
}
|
||||
|
||||
.mx_CallEvent_content_tooltip {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mx_CallEvent_iconButton {
|
||||
display: inline-flex;
|
||||
margin-right: 8px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $tertiary-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CallEvent_silence::before {
|
||||
mask-image: url('$(res)/img/voip/silence.svg');
|
||||
}
|
||||
|
||||
.mx_CallEvent_unSilence::before {
|
||||
mask-image: url('$(res)/img/voip/un-silence.svg');
|
||||
}
|
||||
}
|
||||
}
|
|
@ -333,6 +333,13 @@ $hover-select-border: 4px;
|
|||
.mx_EventTile_msgOption {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.mx_EventTile_line {
|
||||
// To avoid bubble events being highlighted
|
||||
background-color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_readAvatars {
|
||||
|
|
Binary file not shown.
Binary file not shown.
3
res/img/element-icons/warning.svg
Normal file
3
res/img/element-icons/warning.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM6.9806 4.5101C6.9306 3.9401 7.3506 3.4401 7.9206 3.4001C8.4806 3.3601 8.9806 3.7801 9.0406 4.3501V4.5101L8.7206 8.5101C8.6906 8.8801 8.3806 9.1601 8.0106 9.1601H7.9506C7.6006 9.1301 7.3306 8.8601 7.3006 8.5101L6.9806 4.5101ZM8.88012 11.1202C8.88012 11.6062 8.48613 12.0002 8.00012 12.0002C7.51411 12.0002 7.12012 11.6062 7.12012 11.1202C7.12012 10.6342 7.51411 10.2402 8.00012 10.2402C8.48613 10.2402 8.88012 10.6342 8.88012 11.1202Z" fill="#8D99A5"/>
|
||||
</svg>
|
After Width: | Height: | Size: 713 B |
Loading…
Add table
Add a link
Reference in a new issue