OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Add icons to buttons 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-07-08 14:35:06 +02:00
parent 9ec3d93402
commit 2615ea7f3f
No known key found for this signature in database
GPG Key ID: 9760693FDD98A790
2 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
res/css/views/messages/_CallEvent.scss
View File

@ -28,13 +28,17 @@ limitations under the License.
height: 60px; height: 60px;
&.mx_CallEvent_voice { &.mx_CallEvent_voice {
.mx_CallEvent_type_icon::before { .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'); mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
} }
} }
&.mx_CallEvent_video { &.mx_CallEvent_video {
.mx_CallEvent_type_icon::before { .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'); mask-image: url('$(res)/img/element-icons/call/video-call.svg');
} }
} }
@ -95,10 +99,28 @@ limitations under the License.
height: 24px; height: 24px;
padding: 0px 12px; padding: 0px 12px;
margin-left: 8px; 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_callBack { .mx_CallEvent_content_button_reject span::before {
margin-left: 10px; // To match mx_callEvent mask-image: url('$(res)/img/element-icons/call/hangup.svg');
} }
.mx_CallEvent_content_tooltip { .mx_CallEvent_content_tooltip {

10
src/components/views/messages/CallEvent.tsx
View File

@ -85,18 +85,18 @@ export default class CallEvent extends React.Component<IProps, IState> {
title={this.state.silenced ? _t("Sound on"): _t("Silence call")} title={this.state.silenced ? _t("Sound on"): _t("Silence call")}
/> />
<AccessibleButton <AccessibleButton
className="mx_CallEvent_content_button" className="mx_CallEvent_content_button mx_CallEvent_content_button_reject"
onClick={ this.props.callEventGrouper.rejectCall } onClick={ this.props.callEventGrouper.rejectCall }
kind="danger" kind="danger"
> >
{ _t("Decline") } <span> { _t("Decline") } </span>
</AccessibleButton> </AccessibleButton>
<AccessibleButton <AccessibleButton
className="mx_CallEvent_content_button" className="mx_CallEvent_content_button mx_CallEvent_content_button_answer"
onClick={ this.props.callEventGrouper.answerCall } onClick={ this.props.callEventGrouper.answerCall }
kind="primary" kind="primary"
> >
{ _t("Accept") } <span> { _t("Accept") } </span>
</AccessibleButton> </AccessibleButton>
</div> </div>
); );
@ -168,7 +168,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
onClick={ this.props.callEventGrouper.callBack } onClick={ this.props.callEventGrouper.callBack }
kind="primary" kind="primary"
> >
{ _t("Call back") } <span> { _t("Call back") } </span>
</AccessibleButton> </AccessibleButton>
</div> </div>
); );