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

Merge pull request #2110 from vector-im/wmwragg/one-to-one-chat 

Wmwragg/one to one chat
pull/2134/head
Matthew Hodgson 2016-09-09 10:46:01 +01:00 committed by GitHub
parent bf02a21c7d ac365622b8
commit 8376f0d75a
14 changed files with 456 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/structures/BottomLeftMenu.js
View File

@ -17,48 +17,88 @@ limitations under the License.
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
module.exports = React.createClass({
displayName: 'BottomLeftMenu',
propTypes: {
collapsed: React.PropTypes.bool.isRequired,
},
getInitialState: function() {
return({
roomsHover : false,
peopleHover : false,
settingsHover : false,
});
},
// Room events
onRoomsClick: function() {
dis.dispatch({action: 'view_create_room'});
},
onRoomsMouseEnter: function() {
this.setState({ roomsHover: true });
},
onRoomsMouseLeave: function() {
this.setState({ roomsHover: false });
},
// People events
onPeopleClick: function() {
dis.dispatch({action: 'view_create_chat'});
},
onPeopleMouseEnter: function() {
this.setState({ peopleHover: true });
},
onPeopleMouseLeave: function() {
this.setState({ peopleHover: false });
},
// Settings events
onSettingsClick: function() {
dis.dispatch({action: 'view_user_settings'});
},
onRoomDirectoryClick: function() {
dis.dispatch({action: 'view_room_directory'});
onSettingsMouseEnter: function() {
this.setState({ settingsHover: true });
},
onCreateRoomClick: function() {
dis.dispatch({action: 'view_create_room'});
onSettingsMouseLeave: function() {
this.setState({ settingsHover: false });
},
getLabel: function(name) {
if (!this.props.collapsed) {
return <div className="mx_RoomTile_name">{name}</div>
}
else if (this.state.hover) {
// Get the label/tooltip to show
getLabel: function(label, show) {
if (show) {
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
return <RoomTooltip name={name}/>;
return <RoomTooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
}
},
render: function() {
var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
var TintableSvg = sdk.getComponent('elements.TintableSvg');
return (
<div className="mx_BottomLeftMenu">
<div className="mx_BottomLeftMenu_options">
<div className="mx_BottomLeftMenu_createRoom" title="Start chat" onClick={ this.onCreateRoomClick }>
<TintableSvg src="img/icons-create-room.svg" width="25" height="25"/>
<div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
<TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
{ this.getLabel("Rooms", this.state.roomsHover) }
</div>
<div className="mx_BottomLeftMenu_directory" title="Room directory" onClick={ this.onRoomDirectoryClick }>
<TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
<div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
<TintableSvg src="img/icons-people.svg" width="25" height="25" />
{ this.getLabel("New direct message", this.state.peopleHover) }
</div>
<div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
<TintableSvg src="img/icons-settings.svg" width="25" height="25"/>
<div className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } >
<TintableSvg src="img/icons-settings.svg" width="25" height="25" />
{ this.getLabel("Settings", this.state.settingsHover) }
</div>
</div>
</div>

12
src/components/structures/RoomSubList.js
View File

@ -418,8 +418,18 @@ var RoomSubList = React.createClass({
badge = <div className={badgeClasses}>{subListNotifCount > 99 ? "99+" : subListNotifCount}</div>;
}
// When collapsed, allow a long hover on the header to show user
// the full tag name and room count
var title;
if (this.props.collapsed) {
title = this.props.label;
if (roomCount !== '') {
title += " [" + roomCount + "]";
}
}
return (
<div className="mx_RoomSubList_labelContainer" ref="header">
<div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
<div onClick={ this.onClick } className="mx_RoomSubList_label">
{ this.props.collapsed ? '' : this.props.label }
<div className="mx_RoomSubList_roomCount">{roomCount}</div>

85
src/components/views/rooms/RoomTooltip.js
View File

@ -18,42 +18,79 @@ limitations under the License.
var React = require('react');
var ReactDOM = require('react-dom');
var dis = require('matrix-react-sdk/lib/dispatcher');
module.exports = React.createClass({
displayName: 'RoomTooltip',
componentDidMount: function() {
var tooltip = ReactDOM.findDOMNode(this);
if (!this.props.bottom) {
// tell the roomlist about us so it can position us
dis.dispatch({
action: 'view_tooltip',
tooltip: tooltip,
});
}
else {
tooltip.style.top = (70 + tooltip.parentElement.getBoundingClientRect().top) + "px";
tooltip.style.display = "block";
}
propTypes: {
// Alllow the tooltip to be styled by the parent element
className: React.PropTypes.string.isRequired,
// The tooltip is derived from either the room name or a label
room: React.PropTypes.object,
label: React.PropTypes.string,
},
// Create a wrapper for the tooltip outside the parent and attach it to the body element
componentDidMount: function() {
this.tooltipContainer = document.createElement("div");
this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper";
document.body.appendChild(this.tooltipContainer);
this._renderTooltip();
},
componentDidUpdate: function() {
this._renderTooltip();
},
// Remove the wrapper element, as the tooltip has finished using it
componentWillUnmount: function() {
if (!this.props.bottom) {
dis.dispatch({
action: 'view_tooltip',
tooltip: null,
});
}
dis.dispatch({
action: 'view_tooltip',
tooltip: null,
parent: null,
});
ReactDOM.unmountComponentAtNode(this.tooltipContainer);
document.body.removeChild(this.tooltipContainer);
},
_renderTooltip: function() {
var label = this.props.room ? this.props.room.name : this.props.label;
// Add the parent's position to the tooltips, so it's correctly
// positioned, also taking into account any window zoom
// NOTE: The additional 6 pixels for the left position, is to take account of the
// tooltips chevron
var parent = ReactDOM.findDOMNode(this);
var style = {};
style.top = parent.getBoundingClientRect().top + window.pageYOffset;
style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset;
style.display = "block";
var tooltip = (
<div className="mx_RoomTooltip" style={style} >
<div className="mx_RoomTooltip_chevron"></div>
{ label }
</div>
);
// Render the tooltip manually, as we wish it not to be rendered within the parent
this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer);
// Tell the roomlist about us so it can manipulate us if it wishes
dis.dispatch({
action: 'view_tooltip',
tooltip: this.tooltip,
parent: parent,
});
},
render: function() {
var label = this.props.room ? this.props.room.name : this.props.label;
// Render a placeholder
return (
<div className="mx_RoomTooltip">
<img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/>
{ label }
<div className={ this.props.className } >
</div>
);
}

12
src/skins/vector/css/common.css
View File

@ -64,6 +64,11 @@ input[type=text]:focus, textarea:focus {
box-shadow: none;
}
/* Required by Firefox */
textarea {
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
}
/* Prevent ugly dotted highlight around selected elements in Firefox */
::-moz-focus-inner {
border: 0;
@ -198,14 +203,15 @@ input[type=text]:focus, textarea:focus {
height: 36px;
border-radius: 40px;
border: solid 1px #76cfa6;
font-weight: 400;
font-size: 15px;
font-weight: 600;
font-size: 14px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
margin-left: 0px;
margin-right: 8px;
padding-left: 1.5em;
padding-right: 1.5em;
outline: none;
cursor: pointer;
color: #76cfa6;
background-color: #fff;
}

83
src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css Normal file
View File

@ -0,0 +1,83 @@
/*
Copyright 2016 OpenMarket Ltd
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.
*/
/* Using a textarea for this element, to circumvent autofill */
.mx_ChatInviteDialog_input,
.mx_ChatInviteDialog_input:focus
{
height: 26px;
font-size: 14px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
padding-left: 12px;
padding-right: 12px;
margin: 0 !important;
border: 0 !important;
outline: 0 !important;
width: 1000%; /* Pretend that this is an "input type=text" */
resize: none;
overflow: hidden;
vertical-align: middle;
box-sizing: border-box;
word-wrap: nowrap;
}
.mx_ChatInviteDialog_inputContainer {
border-radius: 3px;
border: solid 1px #f0f0f0;
line-height: 36px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
overflow: hidden;
}
.mx_ChatInviteDialog_queryList {
position: absolute;
background-color: #fff;
width: 470px;
max-height: 116px;
overflow-y: scroll;
border-radius: 3px;
background-color: #fff;
border: solid 1px #76cfa6;
cursor: pointer;
}
.mx_ChatInviteDialog_queryListElement .mx_AddressTile {
background-color: #fff;
border: solid 1px #fff;
}
.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected {
background-color: #eaf5f0; /* selected colour */
}
.mx_ChatInviteDialog_queryListElement.mx_ChatInviteDialog_selected .mx_AddressTile {
background-color: #eaf5f0; /* selected colour */
border: solid 1px #eaf5f0; /* selected colour */
}
.mx_ChatInviteDialog_cancel {
position: absolute;
right: 11px;
top: 13px;
cursor: pointer;
}
.mx_ChatInviteDialog_cancel object {
pointer-events: none;
}

83
src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css Normal file
View File

@ -0,0 +1,83 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
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_AddressTile {
display: inline-block;
border-radius: 3px;
background-color: rgba(74, 73, 74, 0.1);
border: solid 1px #f0f0f0;
line-height: 26px;
color: #454545;
font-size: 14px;
font-weight: normal;
}
.mx_AddressTile_network {
display: inline-block;
position: relative;
padding-left: 2px;
padding-right: 4px;
vertical-align: middle;
}
.mx_AddressTile_avatar {
display: inline-block;
position: relative;
padding-left: 2px;
padding-right: 7px;
vertical-align: middle;
}
.mx_AddressTile_name {
display: inline-block;
padding-right: 4px;
font-weight: 600;
overflow: hidden;
height: 26px;
vertical-align: middle;
}
.mx_AddressTile_name.mx_AddressTile_justified {
width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_id {
display: inline-block;
padding-right: 11px;
}
.mx_AddressTile_id.mx_AddressTile_justified {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.mx_AddressTile_dismiss {
display: inline-block;
padding-right: 11px;
padding-left: 1px;
cursor: pointer;
}
.mx_AddressTile_dismiss object {
pointer-events: none;
}

10
src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
View File

@ -22,6 +22,14 @@ limitations under the License.
height: 34px;
}
.mx_RoomTile_tooltip {
display: inline-block;
position: relative;
top: -62px;
left: 46px;
}
.mx_RoomTile_nameContainer {
display: inline-block;
width: 180px;
@ -113,7 +121,7 @@ limitations under the License.
min-width: 12px;
border-radius: 16px;
padding: 0px 4px 0px 4px;
z-index: 200;
z-index: 3;
}
/* Hide the bottom of speech bubble */

13
src/skins/vector/css/vector-web/structures/LeftPanel.css
View File

@ -80,21 +80,21 @@ limitations under the License.
}
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
.mx_LeftPanel .mx_BottomLeftMenu_directory,
.mx_LeftPanel .mx_BottomLeftMenu_people,
.mx_LeftPanel .mx_BottomLeftMenu_settings {
display: inline-block;
cursor: pointer;
}
.collapsed .mx_BottomLeftMenu_createRoom,
.collapsed .mx_BottomLeftMenu_directory,
.collapsed .mx_BottomLeftMenu_people,
.collapsed .mx_BottomLeftMenu_settings {
margin-left: 0px ! important;
padding-top: 3px ! important;
padding-bottom: 3px ! important;
}
.mx_LeftPanel .mx_BottomLeftMenu_directory {
.mx_LeftPanel .mx_BottomLeftMenu_people {
margin-left: 10px;
}
@ -105,3 +105,10 @@ limitations under the License.
.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
float: none;
}
.mx_LeftPanel .mx_BottomLeftMenu_tooltip {
display: inline-block;
position: relative;
top: -25px;
left: 6px;
}

4
src/skins/vector/css/vector-web/structures/RoomSubList.css
View File

@ -39,7 +39,7 @@ limitations under the License.
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
background-color: rgba(118, 207, 166, 0.2);
background-color: rgba(118, 207, 166, 0.2); /* Should be #d3ede1, but not a magic colour */
border-top: solid 2px #eaf5f0;
}
@ -90,9 +90,11 @@ limitations under the License.
background-color: #76cfa6;
}
/*
.collapsed .mx_RoomSubList_badge {
display: none;
}
*/
.mx_RoomSubList_badgeHighlight {
background-color: #ff0064;

32
src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
View File

@ -16,17 +16,37 @@ limitations under the License.
.mx_RoomTooltip_chevron {
position: absolute;
left: -9px;
top: 7px;
left: -8px;
top: 4px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_RoomTooltip_chevron:after{
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #fff;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
left: 1px;
}
.mx_RoomTooltip {
display: none;
position: fixed;
border: 1px solid #a4a4a4;
border-radius: 8px;
border: 1px solid rgba(187, 187, 187, 0.5);
border-radius: 5px;
background-color: #fff;
z-index: 2000;
left: 52px;
padding: 6px;
padding: 5px;
pointer-events: none;
line-height: 14px;
font-size: 13px;
}

15
src/skins/vector/img/icon-address-delete.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="11px" height="9px" viewBox="0 0 11 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>943783E9-DBD7-4D4E-BAC9-35437C17C2C4</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="Chat-People-2b-Invite-modal" transform="translate(-579.000000, -346.000000)" stroke="#FF0064">
<g id="icon_context_delete-copy" transform="translate(580.000000, 346.000000)">
<path d="M0.45,0.45 L8.55,8.55" id="Line"></path>
<path d="M0.45,0.45 L8.55,8.55" id="Line-Copy-2" transform="translate(4.500000, 4.500000) scale(-1, 1) translate(-4.500000, -4.500000) "></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 984 B

15
src/skins/vector/img/icons-close-button.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>206C270A-EB00-48E4-8CC3-5D403C59177C</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Chat-People-2-Invite-modal-(similar-to-chat-group-5)" transform="translate(-909.000000, -263.000000)">
<g id="icons_close" transform="translate(909.000000, 263.000000)">
<path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-1-Copy-7" fill="#EAF5F0"></path>
<polyline id="icon_close" fill="#76CFA6" opacity="0.9" transform="translate(17.468897, 17.470577) rotate(-315.000000) translate(-17.468897, -17.470577) " points="18.2115394 5.97057742 16.674774 5.97057742 16.674774 16.7275762 5.9688975 16.7275762 5.9688975 18.2642903 16.674774 18.2642903 16.674774 28.9705774 18.2115394 28.9705774 18.2115394 18.2642903 28.9688975 18.2642903 28.9688975 16.7275762 18.2115394 16.7275762 18.2115394 5.97057742"></polyline>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

29
src/skins/vector/img/icons-people.svg
View File

@ -1,9 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="25" height="25" viewBox="0, 0, 25, 25">
<g id="Symbols">
<path d="M12.5,25 C19.404,25 25,19.404 25,12.5 C25,5.596 19.404,0 12.5,0 C5.596,0 0,5.596 0,12.5 C0,19.404 5.596,25 12.5,25 z" fill="#76CFA6" id="Oval-1-Copy-7"/>
<path d="M12.5,11.439 C13.881,11.439 15,10.32 15,8.939 C15,7.558 13.881,6.439 12.5,6.439 C11.119,6.439 10,7.558 10,8.939 C10,10.32 11.119,11.439 12.5,11.439 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="1" id="path-1" opacity="0.8"/>
<path d="M17.89,19 C17.89,15.134 17.89,12 12.445,12 C6.999,12 6.999,15.134 6.999,19 C10.785,19 13.067,19 17.89,19 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" id="path-3" opacity="0.8"/>
</g>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>81230A28-D944-4572-B5DB-C03CAA2B1FCA</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Left-nav-default" transform="translate(-50.000000, -725.000000)">
<g id="Left-panel">
<g>
<g id="icons_people" transform="translate(50.000000, 725.000000)">
<path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7" fill="#76CFA6"></path>
<g id="icons_people_svg" transform="translate(7.000000, 6.000000)" stroke="#FFFFFF">
<path d="M10.5,12 C10.5,9.23857625 10.5000002,7 5.5,7 C0.499999803,7 0.5,9.23857625 0.5,12 C3.97567472,12 6.07128906,12 10.5,12 Z" id="Oval-40" stroke-linecap="round" stroke-linejoin="round"></path>
<circle id="Oval" cx="5.5" cy="2.75" r="2.75"></circle>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 984 B

After

Width:  |  Height:  |  Size: 1.4 KiB

53
src/skins/vector/img/search-icon-vector.svg Normal file
View File

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>2EFF6BB8-D2CC-44E6-85E9-D057E4AE9DF2</title>
<desc>Created with sketchtool.</desc>
<defs>
<ellipse id="path-1" cx="7.68292683" cy="15.4246795" rx="1.35501355" ry="1.40224359"></ellipse>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-0.780487805" y="-0.780487805" width="4.36546279" height="4.27100271">
<rect x="5.50019543" y="13.2891781" width="4.36546279" height="4.27100271" fill="white"></rect>
<use xlink:href="#path-1" fill="black"></use>
</mask>
<ellipse id="path-3" cx="1.72109346" cy="4.95482816" rx="1.35501355" ry="1.40224359"></ellipse>
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-0.780487805" y="-0.780487805" width="4.29534171" height="4.3426507">
<rect x="-0.426577393" y="2.78350281" width="4.29534171" height="4.3426507" fill="white"></rect>
<use xlink:href="#path-3" fill="black"></use>
</mask>
<ellipse id="path-5" cx="13.4645442" cy="4.95482816" rx="1.35501355" ry="1.40224359"></ellipse>
<mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-0.780487805" y="-0.780487805" width="4.29534171" height="4.3426507">
<rect x="11.3168734" y="2.78350281" width="4.29534171" height="4.3426507" fill="white"></rect>
<use xlink:href="#path-5" fill="black"></use>
</mask>
</defs>
<g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Chat-People-2a-Invite-modal-HOVER" transform="translate(-314.000000, -391.000000)">
<g id="search_icon_vector" transform="translate(314.000000, 391.000000)">
<circle id="Oval-2-Copy" fill="#FFFFFF" cx="12.5" cy="12.5" r="12.5"></circle>
<g id="Mark" transform="translate(5.000000, 4.000000)">
<ellipse id="large-circ-copy-42" stroke="#E2E2E2" stroke-width="0.780487805" fill="#FFFFFF" cx="7.68292683" cy="8.50694444" rx="6.77506775" ry="7.01121795"></ellipse>
<ellipse id="Oval-1-Copy-200" stroke="#E2E2E2" stroke-width="0.780487805" fill="#FFFFFF" cx="7.68292683" cy="1.40224359" rx="1.35501355" ry="1.40224359"></ellipse>
<ellipse id="Oval-1-Copy-201" stroke="#E2E2E2" stroke-width="0.780487805" fill="#FFFFFF" cx="1.72109346" cy="11.8725632" rx="1.35501355" ry="1.40224359"></ellipse>
<ellipse id="Oval-1-Copy-202" stroke="#E2E2E2" stroke-width="0.780487805" fill="#FFFFFF" cx="13.4645442" cy="11.8725632" rx="1.35501355" ry="1.40224359"></ellipse>
<path d="M7.77326107,14.0224359 C7.77326107,14.0224359 3.07588076,10.0441118 3.07588076,5.04807692" id="Path-72-Copy-2" stroke="#73D0A5" stroke-width="0.780487805"></path>
<path d="M12.2899729,14.0224359 C12.2899729,14.0224359 7.59259259,10.0441118 7.59259259,5.04807692" id="Path-72-Copy-3" stroke="#73D0A5" stroke-width="0.780487805" transform="translate(9.941283, 9.535256) scale(-1, 1) translate(-9.941283, -9.535256) "></path>
<g id="Oval-1-Copy-203">
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
<use stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="1.56097561" xlink:href="#path-1"></use>
<use stroke="#73D0A5" stroke-width="0.780487805" xlink:href="#path-1"></use>
</g>
<g id="Oval-1-Copy-204">
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-3"></use>
<use stroke="#FFFFFF" mask="url(#mask-4)" stroke-width="1.56097561" xlink:href="#path-3"></use>
<use stroke="#73D0A5" stroke-width="0.780487805" xlink:href="#path-3"></use>
</g>
<g id="Oval-1-Copy-205">
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-5"></use>
<use stroke="#FFFFFF" mask="url(#mask-6)" stroke-width="1.56097561" xlink:href="#path-5"></use>
<use stroke="#76CFA6" stroke-width="0.780487805" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB