Merge remote-tracking branch 'origin/develop' into dbkr/memberinfo_list_rooms

This commit is contained in:
David Baker 2016-09-09 16:27:00 +01:00
commit ab9786cc02
16 changed files with 525 additions and 71 deletions

View File

@ -17,31 +17,82 @@ 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({
directoryHover : false,
roomsHover : false,
peopleHover : false,
settingsHover : false,
});
},
// Room events
onDirectoryClick: function() {
dis.dispatch({ action: 'view_room_directory' });
},
onDirectoryMouseEnter: function() {
this.setState({ directoryHover: true });
},
onDirectoryMouseLeave: function() {
this.setState({ directoryHover: false });
},
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'});
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} />;
}
},
@ -50,14 +101,21 @@ module.exports = React.createClass({
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>
<div className="mx_BottomLeftMenu_directory" title="Room directory" onClick={ this.onRoomDirectoryClick }>
<div className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
<TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
{ this.getLabel("Room directory", this.state.directoryHover) }
</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_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
<TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
{ this.getLabel("Create new room", this.state.roomsHover) }
</div>
<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" 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>

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>

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>
);
}

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;
}

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: 485px;
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;
}

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;
}

View File

@ -35,5 +35,5 @@ limitations under the License.
/* Make sure the scrollbar is above the sticky headers from RoomList */
.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
z-index: 5;
z-index: 6;
}

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;
@ -32,6 +40,10 @@ limitations under the License.
width: 170px;
}
.mx_RoomTile_avatar_container {
position: relative;
}
.mx_RoomTile_avatar {
display: inline-block;
padding-top: 5px;
@ -43,6 +55,14 @@ limitations under the License.
vertical-align: middle;
}
.mx_RoomTile_dm {
display: block;
position: absolute;
bottom: 0;
right: -5px;
z-index: 2;
}
.mx_RoomTile_avatar_container:hover:before,
.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before {
display: block;
@ -51,7 +71,6 @@ limitations under the License.
border-radius: 40px;
background-image: url("img/icons_ellipsis.svg");
background-size: 25px;
left: 15px;
width: 24px;
height: 24px;
z-index: 4;
@ -64,11 +83,11 @@ limitations under the License.
content: "";
border-radius: 40px;
background: #4A4A4A;
top: 5px;
bottom: 0;
width: 24px;
height: 24px;
opacity: 0.6;
z-index: 2;
z-index: 1;
}
.collapsed .mx_RoomTile_avatar_container:hover:before {
@ -117,7 +136,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 */

View File

@ -49,11 +49,11 @@ limitations under the License.
flex: 1 1 0;
overflow-y: auto;
z-index: 5;
z-index: 6;
}
.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
flex: 0 0 120px;
flex: 0 0 160px;
}
.mx_LeftPanel .mx_BottomLeftMenu {
@ -79,15 +79,17 @@ limitations under the License.
pointer-events: none;
}
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
.mx_LeftPanel .mx_BottomLeftMenu_directory,
.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
.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_createRoom,
.collapsed .mx_BottomLeftMenu_people,
.collapsed .mx_BottomLeftMenu_settings {
margin-left: 0px ! important;
padding-top: 3px ! important;
@ -95,7 +97,15 @@ limitations under the License.
}
.mx_LeftPanel .mx_BottomLeftMenu_directory {
margin-left: 10px;
margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_createRoom {
margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_people {
margin-right: 10px;
}
.mx_LeftPanel .mx_BottomLeftMenu_settings {
@ -105,3 +115,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;
}

View File

@ -39,14 +39,14 @@ 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;
}
.mx_RoomSubList_label.mx_RoomSubList_fixed {
position: fixed;
top: 0;
z-index: 4;
z-index: 5;
/* pointer-events: none; */
}
@ -90,9 +90,11 @@ limitations under the License.
background-color: #76cfa6;
}
/*
.collapsed .mx_RoomSubList_badge {
display: none;
}
*/
.mx_RoomSubList_badgeHighlight {
background-color: #ff0064;

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;
}

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>

After

Width:  |  Height:  |  Size: 984 B

View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="11px" height="13px" viewBox="0 0 11 13" 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>815EF7DE-169A-4322-AE2A-B65CBE91DCED</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Left-menu" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Left-menu-option-B" transform="translate(-33.000000, -223.000000)" fill="#FFFFFF" stroke="#76CFA6">
<g id="Left-panel">
<g id="Room-list" transform="translate(0.000000, 69.000000)">
<g id="Group-3" transform="translate(16.000000, 144.000000)">
<g id="icon_person" transform="translate(18.000000, 11.000000)">
<g>
<path d="M5.34291667,5.8555 C5.51425,5.86608333 5.68525,5.88091667 5.85566667,5.90108333 C5.987,5.91666667 6.118,5.93533333 6.24825,5.95783333 C6.96516667,6.08175 7.69391667,6.32633333 8.23175,6.83591667 C8.32116667,6.92058333 8.40433333,7.01166667 8.48041667,7.1085 C8.59608333,7.25566667 8.69475,7.41583333 8.77633333,7.58425 C8.92233333,7.8855 9.0125,8.21083333 9.06841667,8.54008333 C9.13758333,8.9475 9.15758333,9.36266667 9.1635,9.77533333 C9.1685,10.1279167 9.167,10.4805833 9.16725,10.8331667 L8.33333344e-05,10.8331667 C0.000250000001,10.4805833 -0.00125,10.1279167 0.00375,9.77533333 C0.00916666667,9.39616667 0.0268333333,9.01533333 0.083,8.63991667 C0.134833333,8.29291667 0.221666667,7.94891667 0.369333333,7.62966667 C0.44775,7.46033333 0.543,7.29875 0.65525,7.14958333 C0.729,7.05166667 0.809833333,6.95925 0.897,6.87308333 C1.41916667,6.35725 2.13533333,6.10216667 2.84408333,5.97125 C2.97233333,5.94758333 3.10125,5.92775 3.23058333,5.91108333 C3.39841667,5.8895 3.56683333,5.87333333 3.73558333,5.86133333 C3.95191667,5.846 4.16858333,5.8385 4.38533333,5.83458333 C4.48475,5.8335 4.58408333,5.83316667 4.6835,5.8335 C4.9035,5.83583333 5.12333333,5.84183333 5.34291667,5.8555 Z" id="Fill-1" stroke-linejoin="round"></path>
<path d="M4.99558333,0.031 C5.28133333,0.0745833333 5.55966667,0.1645 5.81691667,0.29625 C6.32075,0.554333333 6.7375,0.971 6.9955,1.47483333 C7.11691667,1.712 7.20291667,1.967 7.24975,2.22916667 C7.30216667,2.52283333 7.30583333,2.82525 7.26083333,3.12008333 C7.2205,3.38416667 7.14066667,3.642 7.02475,3.88266667 C6.88325,4.17633333 6.68833333,4.44375 6.45233333,4.66866667 C6.21591667,4.89408333 5.93891667,5.07633333 5.638,5.20358333 C5.30525,5.34433333 4.94491667,5.4165 4.58366667,5.4165 C4.22233333,5.4165 3.86208333,5.34433333 3.52925,5.20358333 C3.22833333,5.07633333 2.95133333,4.89408333 2.71491667,4.66866667 C2.479,4.44375 2.284,4.17633333 2.1425,3.88266667 C2.02658333,3.642 1.94675,3.38416667 1.90641667,3.12008333 C1.86141667,2.82525 1.86508333,2.52291667 1.91758333,2.22925 C1.96433333,1.967 2.05033333,1.712 2.17175,1.47483333 C2.42975,0.971 2.8465,0.554333333 3.35033333,0.29625 C3.60758333,0.1645 3.88591667,0.0745833333 4.17166667,0.031 C4.28525,0.0136666667 4.39916667,0.005 4.51391667,0.000666666667 C4.58391667,-0.000166666667 4.58366667,-0.000166666667 4.65333333,0.000666666667 C4.76808333,0.005 4.882,0.0136666667 4.99558333,0.031 Z" id="Fill-2"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

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>

After

Width:  |  Height:  |  Size: 1.4 KiB

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>

Before

Width:  |  Height:  |  Size: 984 B

After

Width:  |  Height:  |  Size: 1.4 KiB

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>

After

Width:  |  Height:  |  Size: 4.5 KiB