Merge pull request #2110 from vector-im/wmwragg/one-to-one-chat
Wmwragg/one to one chatpull/2134/head
Matthew Hodgson
GitHub
commit
8376f0d75a
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
Loading…
Reference in New Issue