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

Wmwragg/room tag menu

src/component-index.js

@@ -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');

src/components/structures/RoomSubList.js

@@ -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');

src/components/views/context_menus/NotificationStateContextMenu.js

@@ -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

src/components/views/context_menus/RoomTagContextMenu.js

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

src/skins/vector/css/common.css

@@ -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 {

src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css

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

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css

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

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

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

src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css

@@ -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 */
+}

src/skins/vector/img/icon-context-delete.svg

@@ -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>

src/skins/vector/img/icon-context-fave-on.svg

@@ -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>

src/skins/vector/img/icon-context-fave.svg

@@ -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>

src/skins/vector/img/icon-context-low-on.svg

@@ -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>

src/skins/vector/img/icon-context-low.svg

@@ -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>

src/skins/vector/img/icon_context_delete.svg

@@ -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>

src/skins/vector/img/icon_context_fave.svg

@@ -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>

src/skins/vector/img/icon_context_fave_on.svg

@@ -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>

src/skins/vector/img/icon_context_low.svg

@@ -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>

src/skins/vector/img/icon_context_low_on.svg

@@ -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>

src/skins/vector/img/icons_ellipsis.svg

@@ -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>