Merge pull request #1941 from vector-im/wmwragg/room-tag-menu

Wmwragg/room tag menu
This commit is contained in:
Matthew Hodgson 2016-08-11 09:00:48 -05:00 committed by GitHub
commit d65477891e
21 changed files with 520 additions and 9 deletions

View File

@ -36,6 +36,7 @@ module.exports.components['structures.SearchBox'] = require('./components/struct
module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource');
module.exports.components['views.context_menus.MessageContextMenu'] = require('./components/views/context_menus/MessageContextMenu');
module.exports.components['views.context_menus.NotificationStateContextMenu'] = require('./components/views/context_menus/NotificationStateContextMenu');
module.exports.components['views.context_menus.RoomTagContextMenu'] = require('./components/views/context_menus/RoomTagContextMenu');
module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar');

View File

@ -149,11 +149,26 @@ var RoomSubList = React.createClass({
return this.tsOfNewestEvent(roomB) - this.tsOfNewestEvent(roomA);
},
lexicographicalComparator: function(roomA, roomB) {
return roomA.name > roomB.name ? 1 : -1;
},
// Generates the manual comparator using the given list
manualComparator: function(roomA, roomB) {
if (!roomA.tags[this.props.tagName] || !roomB.tags[this.props.tagName]) return 0;
// Make sure the room tag has an order element, if not set it to be the bottom
var a = roomA.tags[this.props.tagName].order;
var b = roomB.tags[this.props.tagName].order;
return a == b ? this.recentsComparator(roomA, roomB) : ( a > b ? 1 : -1);
// Order undefined room tag orders to the bottom
if (a === undefined && b !== undefined) {
return 1;
} else if (a !== undefined && b === undefined) {
return -1;
}
return a == b ? this.lexicographicalComparator(roomA, roomB) : ( a > b ? 1 : -1);
},
sortList: function(list, order) {
@ -164,6 +179,9 @@ var RoomSubList = React.createClass({
if (order === "manual") comparator = this.manualComparator;
if (order === "recent") comparator = this.recentsComparator;
// Fix undefined orders here, and make sure the backend gets updated as well
this._fixUndefinedOrder(list);
//if (debug) console.log("sorting list for sublist " + this.props.label + " with length " + list.length + ", this.props.list = " + this.props.list);
this.setState({ sortedList: list.sort(comparator) });
},
@ -312,6 +330,46 @@ var RoomSubList = React.createClass({
this.props.onShowMoreRooms();
},
// Fix any undefined order elements of a room in a manual ordered list
// room.tag[tagname].order
_fixUndefinedOrder: function(list) {
if (this.props.order === "manual") {
var order = 0.0;
var self = this;
// Find the highest (lowest position) order of a room in a manual ordered list
list.forEach(function(room) {
if (room.tags.hasOwnProperty(self.props.tagName)) {
if (order < room.tags[self.props.tagName].order) {
order = room.tags[self.props.tagName].order;
}
}
});
// Fix any undefined order elements of a room in a manual ordered list
// Do this one at a time, as each time a rooms tag data is updated the RoomList
// gets triggered and another list is passed in. Doing it one at a time means that
// we always correctly calculate the highest order for the list - stops multiple
// rooms getting the same order. This is only really relevant for the first time this
// is run with historical room tag data, after that there should only be undefined
// in the list at a time anyway.
for (let i = 0; i < list.length; i++) {
if (list[i].tags[self.props.tagName].order === undefined) {
MatrixClientPeg.get().setRoomTag(list[i].roomId, self.props.tagName, {order: (order + 1.0) / 2.0}).finally(function() {
// Do any final stuff here
}).fail(function(err) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Failed to add tag " + self.props.tagName + " to room",
description: err.toString()
});
});
break;
};
};
}
},
render: function() {
var connectDropTarget = this.props.connectDropTarget;
var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');

View File

@ -57,7 +57,7 @@ module.exports = React.createClass({
// Wrapping this in a q promise, as setRoomMutePushRule can return
// a promise or a value
q(cli.setRoomMutePushRule("global", roomId, areNotifsMuted))
.then(function(s) {
.then(function() {
self.setState({areNotifsMuted: areNotifsMuted});
// delay slightly so that the user can see their state change

View File

@ -0,0 +1,171 @@
/*
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.
*/
'use strict';
var q = require("q");
var React = require('react');
var classNames = require('classnames');
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
var dis = require('matrix-react-sdk/lib/dispatcher');
module.exports = React.createClass({
displayName: 'RoomTagContextMenu',
propTypes: {
room: React.PropTypes.object.isRequired,
/* callback called when the menu is dismissed */
onFinished: React.PropTypes.func,
},
getInitialState: function() {
return {
isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
};
},
_toggleTag: function(tagNameOn, tagNameOff) {
var self = this;
const roomId = this.props.room.roomId;
var cli = MatrixClientPeg.get();
if (!cli.isGuest()) {
q.delay(500).then(function() {
if (tagNameOff !== null && tagNameOff !== undefined) {
cli.deleteRoomTag(roomId, tagNameOff).finally(function() {
// Close the context menu
if (self.props.onFinished) {
self.props.onFinished();
};
}).fail(function(err) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Failed to remove tag " + tagNameOff + " from room",
description: err.toString()
});
});
}
if (tagNameOn !== null && tagNameOn !== undefined) {
// If the tag ordering meta data is required, it is added by
// the RoomSubList when it sorts its rooms
cli.setRoomTag(roomId, tagNameOn, {}).finally(function() {
// Close the context menu
if (self.props.onFinished) {
self.props.onFinished();
};
}).fail(function(err) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Failed to add tag " + tagNameOn + " to room",
description: err.toString()
});
});
}
});
}
},
_onClickFavourite: function() {
// Tag room as 'Favourite'
if (!this.state.isFavourite && this.state.isLowPriority) {
this.setState({
isFavourite: true,
isLowPriority: false,
});
this._toggleTag("m.favourite", "m.lowpriority");
} else if (this.state.isFavourite) {
this.setState({isFavourite: false});
this._toggleTag(null, "m.favourite");
} else if (!this.state.isFavourite) {
this.setState({isFavourite: true});
this._toggleTag("m.favourite");
}
},
_onClickLowPriority: function() {
// Tag room as 'Low Priority'
if (!this.state.isLowPriority && this.state.isFavourite) {
this.setState({
isFavourite: false,
isLowPriority: true,
});
this._toggleTag("m.lowpriority", "m.favourite");
} else if (this.state.isLowPriority) {
this.setState({isLowPriority: false});
this._toggleTag(null, "m.lowpriority");
} else if (!this.state.isLowPriority) {
this.setState({isLowPriority: true});
this._toggleTag("m.lowpriority");
}
},
_onClickLeave: function() {
// Leave room
dis.dispatch({
action: 'leave_room',
room_id: this.props.room.roomId,
});
// Close the context menu
if (this.props.onFinished) {
this.props.onFinished();
};
},
render: function() {
var myUserId = MatrixClientPeg.get().credentials.userId;
var myMember = this.props.room.getMember(myUserId);
var favouriteClasses = classNames({
'mx_RoomTagContextMenu_field': true,
'mx_RoomTagContextMenu_fieldSet': this.state.isFavourite,
'mx_RoomTagContextMenu_fieldDisabled': false,
});
var lowPriorityClasses = classNames({
'mx_RoomTagContextMenu_field': true,
'mx_RoomTagContextMenu_fieldSet': this.state.isLowPriority,
'mx_RoomTagContextMenu_fieldDisabled': false,
});
var leaveClasses = classNames({
'mx_RoomTagContextMenu_field': true,
'mx_RoomTagContextMenu_fieldSet': false,
'mx_RoomTagContextMenu_fieldDisabled': false,
});
return (
<div>
<div className={ favouriteClasses } onClick={this._onClickFavourite} >
<img className="mx_RoomTagContextMenu_icon" src="img/icon_context_fave.svg" width="15" height="15" />
<img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
Favourite
</div>
<div className={ lowPriorityClasses } onClick={this._onClickLowPriority} >
<img className="mx_RoomTagContextMenu_icon" src="img/icon_context_low.svg" width="15" height="15" />
<img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
Low Priority
</div>
<hr className="mx_RoomTagContextMenu_separator" />
<div className={ leaveClasses } onClick={(myMember && myMember.membership === "join") ? this._onClickLeave : null} >
<img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />
Leave
</div>
</div>
);
}
});

View File

@ -32,6 +32,8 @@ body {
color: #454545;
border: 0px;
margin: 0px;
/* This should render the fonts the same accross browsers */
-webkit-font-smoothing: subpixel-antialiased;
}
div.error {

View File

@ -55,7 +55,7 @@ limitations under the License.
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_right:after{
.mx_ContextualMenu_chevron_right:after {
content:'';
width: 0;
height: 0;

View File

@ -16,8 +16,8 @@ limitations under the License.
.mx_SearchBox {
height: 24px;
margin-left: 18px;
margin-right: 18px;
margin-left: 16px;
margin-right: 16px;
padding-top: 24px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);

View File

@ -233,7 +233,7 @@ limitations under the License.
}
.mx_RoomHeader_button {
margin-left: 8px;
margin-left: 12px;
cursor: pointer;
}

View File

@ -32,13 +32,49 @@ limitations under the License.
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 18px;
padding-left: 16px;
padding-right: 6px;
width: 24px;
height: 24px;
vertical-align: middle;
}
.mx_RoomTile_avatar_container:hover:before,
.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before {
display: block;
position: absolute;
content: "";
border-radius: 40px;
background-image: url("img/icons_ellipsis.svg");
background-size: 25px;
left: 15px;
width: 24px;
height: 24px;
z-index: 4;
}
.mx_RoomTile_avatar_container:hover:after,
.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:after {
display: block;
position: absolute;
content: "";
border-radius: 40px;
background: #4A4A4A;
top: 5px;
width: 24px;
height: 24px;
opacity: 0.6;
z-index: 2;
}
.collapsed .mx_RoomTile_avatar_container:hover:before {
display: none;
}
.collapsed .mx_RoomTile_avatar_container:hover:after {
display: none;
}
.mx_RoomTile_name {
display: inline-block;
position: relative;
@ -116,13 +152,13 @@ limitations under the License.
}
.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge {
.mx_RoomTile.mx_RoomTile_notificationStateMenu .mx_RoomTile_badge {
letter-spacing: 0.1em;
opacity: 1;
}
.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
.mx_RoomTile.mx_RoomTile_menu.mx_RoomTile_noBadges .mx_RoomTile_badge {
.mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge {
background-color: rgb(214, 214, 214);
}

View File

@ -0,0 +1,79 @@
/*
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_RoomTagContextMenu_field {
padding-top: 8px;
padding-right: 20px;
padding-bottom: 8px;
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
line-height: 16px;
}
.mx_RoomTagContextMenu_field:first-child {
padding-top: 4px;
}
.mx_RoomTagContextMenu_field:last-child {
padding-bottom: 4px;
color: #ff0064;
}
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
font-weight: bold;
}
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
display: none;
}
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon_set {
display: inline-block;
}
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldDisabled {
color: rgba(0, 0, 0, 0.2);
}
.mx_RoomTagContextMenu_icon {
padding-right: 8px;
padding-left: 4px;
display: inline-block
}
.mx_RoomTagContextMenu_icon_set {
padding-right: 8px;
padding-left: 4px;
display: none;
}
.mx_RoomTagContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: solid;
border-top-width: 1px;
border-color: #bbbbbb;
opacity: 0.4;
}
.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
/* Something to indicate that the icon is the set tag */
}

View File

@ -0,0 +1,10 @@
<?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="15" height="15" viewBox="0, 0, 15, 15">
<g id="Extra-icons">
<g>
<path d="M3.45,3.45 L11.55,11.55" fill-opacity="0" stroke="#FF0064" stroke-width="1" stroke-linecap="round" id="Line"/>
<path d="M11.55,3.45 L3.45,11.55" fill-opacity="0" stroke="#FF0064" stroke-width="1" stroke-linecap="round" id="Line-Copy-2"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 607 B

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="13px" viewBox="0 0 13 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>DAE17B64-40B5-478A-8E8D-97AD1A6E25C8</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Extra-icons-sheet" transform="translate(-93.000000, -313.000000)">
<g id="icon_context_fave_on" transform="translate(92.000000, 312.000000)">
<rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
<polygon id="Star-1" stroke="#4A4A4A" stroke-linejoin="round" fill="#4A4A4A" points="7.5 10.75 3.67939586 12.7586105 4.40906632 8.50430523 1.31813264 5.49138954 5.58969793 4.87069477 7.5 1 9.41030207 4.87069477 13.6818674 5.49138954 10.5909337 8.50430523 11.3206041 12.7586105"></polygon>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="13px" viewBox="0 0 13 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>8A6E1837-F0F1-432E-A0DA-6F3741F71EBF</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2">
<g id="Extra-icons-sheet" transform="translate(-63.000000, -313.000000)">
<g id="icon_context_fave" transform="translate(62.000000, 312.000000)">
<rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
<polygon id="Star-1" stroke="#000000" stroke-linejoin="round" points="7.5 10.75 3.67939586 12.7586105 4.40906632 8.50430523 1.31813264 5.49138954 5.58969793 4.87069477 7.5 1 9.41030207 4.87069477 13.6818674 5.49138954 10.5909337 8.50430523 11.3206041 12.7586105"></polygon>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="13px" viewBox="0 0 13 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>CD51482C-F2D4-4F63-AF9E-86513F9AF87F</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Extra-icons-sheet" transform="translate(-93.000000, -338.000000)">
<g id="icon_context_low_on" transform="translate(92.000000, 337.000000)">
<rect id="Rectangle-Copy" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
<path d="M12.7604081,8 C13.2413214,8 13.3067421,8.25679316 12.9190465,8.57356358 L8.20351162,12.4264364 C7.81340686,12.7451752 7.18723719,12.7432068 6.79954156,12.4264364 L2.08400668,8.57356358 C1.69390193,8.25482476 1.76733588,8 2.24264506,8 L4.46666667,8 L4.46666667,3.00292933 C4.46666667,2.44902676 4.84616384,2 5.33587209,2 L9.66412791,2 C10.1441768,2 10.5333333,2.43788135 10.5333333,3.00292933 L10.5333333,8 L12.7604081,8 Z" id="Combined-Shape" stroke="#4A4A4A" stroke-linejoin="round" fill="#4A4A4A"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="13px" viewBox="0 0 13 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>B160345F-40D3-4BE6-A860-6D04BF223EF7</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Extra-icons-sheet" transform="translate(-63.000000, -338.000000)">
<g id="icon_context_low" transform="translate(62.000000, 337.000000)">
<rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
<path d="M12.7604081,8 C13.2413214,8 13.3067421,8.25679316 12.9190465,8.57356358 L8.20351162,12.4264364 C7.81340686,12.7451752 7.18723719,12.7432068 6.79954156,12.4264364 L2.08400668,8.57356358 C1.69390193,8.25482476 1.76733588,8 2.24264506,8 L4.46666667,8 L4.46666667,3.00292933 C4.46666667,2.44902676 4.84616384,2 5.33587209,2 L9.66412791,2 C10.1441768,2 10.5333333,2.43788135 10.5333333,3.00292933 L10.5333333,8 L12.7604081,8 Z" id="Combined-Shape" stroke="#000000" stroke-linejoin="round" opacity="0.2"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1,0,0,1,-0,-80)">
<g id="icon_context_delete" transform="matrix(0.600982,0,0,0.600982,0,80)">
<g transform="matrix(1.66394,0,0,1.66394,0,-133.116)">
<path d="M7.508,86.728C8.739,85.523 9.979,84.326 11.196,83.109C11.277,83.034 11.364,82.99 11.472,82.968C11.512,82.964 11.549,82.962 11.589,82.964C11.668,82.973 11.743,82.994 11.811,83.036C11.994,83.148 12.086,83.371 12.036,83.579C12.017,83.657 11.98,83.724 11.93,83.787C10.749,85.064 9.524,86.299 8.285,87.52C9.489,88.752 10.686,89.991 11.904,91.209C11.958,91.267 12.001,91.331 12.026,91.408C12.042,91.458 12.05,91.51 12.05,91.562C12.05,91.82 11.846,92.041 11.589,92.061C11.454,92.071 11.33,92.025 11.225,91.942C9.948,90.762 8.713,89.536 7.492,88.297C6.261,89.501 5.021,90.698 3.804,91.916C3.745,91.97 3.681,92.013 3.605,92.038C3.555,92.054 3.502,92.062 3.45,92.062C3.192,92.062 2.972,91.858 2.952,91.602C2.941,91.466 2.987,91.342 3.07,91.238C4.251,89.96 5.476,88.726 6.715,87.505C5.511,86.273 4.314,85.034 3.096,83.816C3.042,83.757 2.999,83.693 2.974,83.617C2.908,83.413 2.983,83.184 3.156,83.058C3.221,83.01 3.294,82.984 3.372,82.968C3.412,82.964 3.449,82.962 3.489,82.964C3.598,82.977 3.689,83.014 3.775,83.082C5.052,84.263 6.287,85.488 7.508,86.728Z" style="fill:rgb(255,0,100);"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1,0,0,1,-0,-40)">
<g id="icon_context_fave" transform="matrix(0.600982,0,0,0.600982,0,40)">
<g transform="matrix(1.66394,0,0,1.66394,1.66394,2.71716)">
<rect x="0" y="0" width="13" height="13" style="fill:rgb(224,223,224);fill-opacity:0;fill-rule:nonzero;"/>
<path d="M6.572,-0.495C6.614,-0.486 6.625,-0.486 6.666,-0.472C6.793,-0.427 6.884,-0.337 6.948,-0.221L8.742,3.414L12.754,3.997L12.801,4.006C12.88,4.029 12.951,4.062 13.013,4.117C13.161,4.248 13.218,4.459 13.157,4.646C13.132,4.725 13.087,4.789 13.031,4.849L10.128,7.679L10.813,11.674L10.819,11.722C10.821,11.804 10.812,11.882 10.779,11.958C10.7,12.139 10.517,12.259 10.32,12.259C10.237,12.259 10.162,12.236 10.088,12.201L6.5,10.315L2.912,12.201L2.868,12.222C2.791,12.249 2.714,12.264 2.631,12.256C2.435,12.237 2.265,12.1 2.204,11.913C2.178,11.834 2.177,11.756 2.187,11.674L2.872,7.679L-0.031,4.849L-0.064,4.814C-0.114,4.749 -0.152,4.681 -0.17,4.599C-0.213,4.407 -0.135,4.202 0.024,4.087C0.092,4.038 0.166,4.012 0.246,3.997L4.258,3.414L6.052,-0.221L6.075,-0.264C6.099,-0.299 6.104,-0.309 6.134,-0.34C6.211,-0.423 6.316,-0.478 6.428,-0.495C6.477,-0.502 6.523,-0.499 6.572,-0.495ZM5.038,4.092C5.017,4.13 5.013,4.14 4.987,4.174C4.928,4.251 4.847,4.31 4.755,4.342C4.715,4.357 4.704,4.357 4.662,4.365L1.393,4.841L3.758,7.146L3.791,7.182C3.817,7.216 3.825,7.224 3.846,7.261C3.903,7.364 3.916,7.474 3.902,7.589L3.343,10.845L6.267,9.307L6.311,9.287C6.42,9.249 6.531,9.237 6.643,9.271C6.684,9.283 6.694,9.289 6.733,9.307L9.657,10.845L9.098,7.589L9.092,7.541C9.089,7.425 9.113,7.317 9.18,7.22C9.204,7.185 9.213,7.178 9.242,7.146L11.607,4.841L8.338,4.365L8.291,4.356C8.25,4.344 8.239,4.342 8.2,4.324C8.093,4.275 8.018,4.193 7.962,4.092L6.5,1.13C6.013,2.117 5.525,3.105 5.038,4.092Z" style="fill:rgb(205,205,205);fill-rule:nonzero;"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1,0,0,1,-20,-40)">
<g id="icon_context_fave_on" transform="matrix(0.600982,0,0,0.600982,20,40)">
<g transform="matrix(1.66394,0,0,1.66394,-14.9755,2.71716)">
<g transform="matrix(1,0,0,1,10.0123,0)">
<clipPath id="_clip1">
<rect x="-1" y="-1" width="15" height="15"/>
</clipPath>
<g clip-path="url(#_clip1)">
<g transform="matrix(0.575972,0,0,0.576771,2.73925,2.16505)">
<rect x="-6" y="-6" width="25" height="25" style="fill:rgb(216,216,216);fill-opacity:0;fill-rule:nonzero;"/>
</g>
<clipPath id="_clip2">
<path d="M6.5,9.75L2.679,11.759L3.409,7.504L0.318,4.491L4.59,3.871L6.5,0L8.41,3.871L12.682,4.491L9.591,7.504L10.321,11.759L6.5,9.75Z"/>
</clipPath>
<g clip-path="url(#_clip2)">
<path d="M-0.682,-1L13.682,-1L13.682,12.759L-0.682,12.759L-0.682,-1Z" style="fill:rgb(74,74,74);fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1,0,0,1,10.0123,0)">
<path d="M6.572,-0.495C6.614,-0.486 6.625,-0.486 6.666,-0.472C6.793,-0.427 6.884,-0.337 6.948,-0.221L8.742,3.414L12.754,3.997L12.801,4.006C12.88,4.029 12.951,4.062 13.013,4.117C13.161,4.248 13.218,4.459 13.157,4.646C13.132,4.725 13.087,4.789 13.031,4.849L10.128,7.679L10.813,11.674L10.819,11.722C10.821,11.804 10.812,11.882 10.779,11.958C10.7,12.139 10.517,12.259 10.32,12.259C10.237,12.259 10.162,12.236 10.088,12.201L6.5,10.315L2.912,12.201L2.868,12.222C2.791,12.249 2.714,12.264 2.631,12.256C2.435,12.237 2.265,12.1 2.204,11.913C2.178,11.834 2.177,11.756 2.187,11.674L2.872,7.679L-0.031,4.849L-0.064,4.814C-0.114,4.749 -0.152,4.681 -0.17,4.599C-0.213,4.407 -0.135,4.202 0.024,4.087C0.092,4.038 0.166,4.012 0.246,3.997L4.258,3.414L6.052,-0.221L6.075,-0.264C6.15,-0.372 6.25,-0.453 6.38,-0.485C6.422,-0.496 6.433,-0.495 6.476,-0.499C6.524,-0.499 6.524,-0.499 6.572,-0.495ZM5.038,4.092C5.017,4.13 5.013,4.14 4.987,4.174C4.928,4.251 4.847,4.31 4.755,4.342C4.715,4.357 4.704,4.357 4.662,4.365L1.393,4.841L3.758,7.146L3.791,7.182C3.861,7.273 3.906,7.375 3.909,7.492C3.91,7.536 3.907,7.546 3.902,7.589L3.343,10.845L6.267,9.307L6.311,9.287C6.42,9.249 6.531,9.237 6.643,9.271C6.684,9.283 6.694,9.289 6.733,9.307L9.657,10.845L9.098,7.589L9.092,7.541C9.091,7.498 9.089,7.487 9.095,7.444C9.109,7.328 9.163,7.231 9.242,7.146L11.607,4.841L8.338,4.365L8.291,4.356C8.18,4.323 8.084,4.267 8.013,4.174C7.987,4.14 7.983,4.13 7.962,4.092L6.5,1.13C6.013,2.117 5.525,3.105 5.038,4.092Z" style="fill:rgb(74,74,74);fill-rule:nonzero;"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1,0,0,1,-0,-60)">
<g id="icon_context_fave" transform="matrix(0.600982,0,0,0.600982,0,60)">
<g transform="matrix(1.66394,0,0,1.66394,1.66394,1.96327)">
<path d="M8.737,0.502C8.882,0.514 9.02,0.542 9.155,0.598C9.544,0.759 9.832,1.105 9.958,1.503C10.008,1.664 10.03,1.829 10.033,1.998L10.033,6.5C10.63,6.5 11.226,6.491 11.822,6.501C11.882,6.504 11.882,6.504 11.942,6.51C12.067,6.527 12.188,6.556 12.301,6.614C12.494,6.715 12.636,6.904 12.665,7.122C12.682,7.246 12.662,7.376 12.613,7.492C12.541,7.662 12.419,7.799 12.282,7.921C10.713,9.244 9.104,10.519 7.515,11.818C7.423,11.889 7.328,11.952 7.223,12.003C6.836,12.19 6.376,12.215 5.969,12.079C5.814,12.028 5.673,11.951 5.539,11.857C3.901,10.585 2.306,9.258 0.72,7.921C0.583,7.798 0.46,7.66 0.389,7.488C0.284,7.235 0.332,6.938 0.528,6.743C0.596,6.676 0.678,6.622 0.766,6.585C0.915,6.521 1.077,6.503 1.238,6.5L2.967,6.5L2.967,1.998C2.968,1.927 2.968,1.928 2.973,1.858C2.991,1.692 3.025,1.532 3.088,1.378C3.229,1.035 3.495,0.744 3.84,0.6C3.975,0.543 4.116,0.515 4.262,0.502C5.753,0.459 7.246,0.46 8.737,0.502ZM4.343,1.5C4.313,1.501 4.285,1.503 4.256,1.511C4.096,1.559 4.003,1.732 3.977,1.886C3.972,1.915 3.969,1.944 3.967,1.973C3.932,3.648 3.967,5.324 3.967,7C3.964,7.063 3.956,7.122 3.933,7.181C3.877,7.326 3.753,7.438 3.603,7.481C3.558,7.494 3.514,7.498 3.467,7.5L1.784,7.5C3.234,8.685 4.656,9.904 6.134,11.053C6.16,11.071 6.187,11.087 6.215,11.102C6.433,11.202 6.7,11.184 6.892,11.035L11.219,7.5L9.533,7.5L9.487,7.498C9.441,7.491 9.397,7.483 9.353,7.466C9.223,7.416 9.118,7.311 9.067,7.181C9.05,7.137 9.042,7.093 9.035,7.046C8.957,5.357 9.069,3.663 9.033,1.972C9.021,1.793 8.941,1.581 8.757,1.516C8.732,1.507 8.707,1.503 8.68,1.501C7.235,1.46 5.789,1.5 4.343,1.5Z" style="fill:rgb(206,206,206);fill-rule:nonzero;"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1,0,0,1,-20,-60)">
<g id="icon_context_fave_on" transform="matrix(0.600982,0,0,0.600982,20,60)">
<clipPath id="_clip1">
<rect x="0" y="0" width="25" height="25"/>
</clipPath>
<g clip-path="url(#_clip1)">
<g transform="matrix(1.66394,0,0,1.66394,1.68116,1.96327)">
<clipPath id="_clip2">
<rect x="-1" y="-1" width="15" height="15"/>
</clipPath>
<g clip-path="url(#_clip2)">
<rect x="-6" y="-6" width="25" height="25" style="fill:rgb(74,74,74);fill-opacity:0;fill-rule:nonzero;"/>
<clipPath id="_clip3">
<path d="M11.76,7C12.241,7 12.307,7.257 11.919,7.574L7.204,11.426C6.813,11.745 6.187,11.743 5.8,11.426L1.084,7.574C0.694,7.255 0.767,7 1.243,7L3.467,7L3.467,2.003C3.467,1.449 3.846,1 4.336,1L8.664,1C9.144,1 9.533,1.438 9.533,2.003L9.533,7L11.76,7Z"/>
</clipPath>
<g clip-path="url(#_clip3)">
<rect x="-4.167" y="-4" width="21.338" height="20.665" style="fill:rgb(74,74,74);fill-rule:nonzero;"/>
</g>
</g>
</g>
<g transform="matrix(1.66394,0,0,1.66394,1.68116,1.96327)">
<path d="M8.737,0.502C8.882,0.514 9.02,0.542 9.155,0.598C9.544,0.759 9.832,1.105 9.958,1.503C10.008,1.664 10.03,1.829 10.033,1.998L10.033,6.5C10.63,6.5 11.226,6.491 11.822,6.501C11.882,6.504 11.882,6.504 11.942,6.51C12.067,6.527 12.188,6.556 12.301,6.614C12.494,6.715 12.636,6.904 12.665,7.122C12.682,7.246 12.662,7.376 12.613,7.492C12.541,7.662 12.419,7.799 12.282,7.921C10.713,9.244 9.104,10.519 7.515,11.818C7.423,11.889 7.328,11.952 7.223,12.003C6.836,12.19 6.376,12.215 5.969,12.079C5.814,12.028 5.673,11.951 5.539,11.857C3.901,10.585 2.306,9.258 0.72,7.921C0.583,7.798 0.46,7.66 0.389,7.488C0.284,7.235 0.332,6.938 0.528,6.743C0.596,6.676 0.678,6.622 0.766,6.585C0.915,6.521 1.077,6.503 1.238,6.5L2.967,6.5L2.967,1.998C2.968,1.927 2.968,1.928 2.973,1.858C2.991,1.692 3.025,1.532 3.088,1.378C3.229,1.035 3.495,0.744 3.84,0.6C3.975,0.543 4.116,0.515 4.262,0.502C5.753,0.459 7.246,0.46 8.737,0.502ZM4.343,1.5C4.313,1.501 4.285,1.503 4.256,1.511C4.096,1.559 4.003,1.732 3.977,1.886C3.972,1.915 3.969,1.944 3.967,1.973C3.932,3.648 3.967,5.324 3.967,7C3.964,7.047 3.96,7.091 3.948,7.137C3.905,7.286 3.792,7.41 3.647,7.466C3.588,7.489 3.529,7.497 3.467,7.5L1.784,7.5C3.234,8.685 4.656,9.904 6.134,11.053C6.16,11.071 6.187,11.087 6.215,11.102C6.433,11.202 6.7,11.184 6.892,11.035L11.219,7.5L9.533,7.5L9.487,7.498C9.441,7.491 9.397,7.483 9.353,7.466C9.223,7.416 9.118,7.311 9.067,7.181C9.05,7.137 9.042,7.093 9.035,7.046C8.957,5.357 9.069,3.663 9.033,1.972C9.021,1.793 8.941,1.581 8.757,1.516C8.732,1.507 8.707,1.503 8.68,1.501C7.235,1.46 5.789,1.5 4.343,1.5Z" style="fill:rgb(74,74,74);fill-rule:nonzero;"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M7.831,13.382c0.504,0 0.826,-0.378 0.826,-0.882c0,-0.518 -0.322,-0.882 -0.826,-0.882c-0.49,0 -0.826,0.364 -0.826,0.882c-0.014,0.504 0.336,0.882 0.826,0.882ZM12.493,13.382c0.504,0 0.84,-0.378 0.84,-0.882c-0.014,-0.518 -0.336,-0.882 -0.826,-0.882c-0.49,0 -0.84,0.364 -0.84,0.882c-0.014,0.504 0.336,0.882 0.826,0.882ZM17.155,13.382c0.518,0 0.84,-0.378 0.84,-0.882c0,-0.518 -0.336,-0.882 -0.826,-0.882c-0.49,0 -0.84,0.364 -0.84,0.882c0,0.504 0.336,0.882 0.826,0.882Z" style="fill:#fff;"/></svg>

After

Width:  |  Height:  |  Size: 910 B