Merge pull request #2111 from vector-im/dbkr/toggle_dm_room

Support toggling DM status of rooms

src/components/views/context_menus/RoomTagContextMenu.js

@@ -21,6 +21,8 @@ var React = require('react');
 var classNames = require('classnames');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var dis = require('matrix-react-sdk/lib/dispatcher');
+var DMRoomMap = require('matrix-react-sdk/lib/utils/DMRoomMap');
+var Rooms = require('matrix-react-sdk/lib/Rooms');
 
 module.exports = React.createClass({
     displayName: 'RoomTagContextMenu',
@@ -32,9 +34,11 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
+        const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
         return {
             isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
             isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
+            isDirectMessage: Boolean(dmRoomMap.getUserIdForRoomId(this.props.room.roomId)),
         };
     },
 
@@ -113,6 +117,43 @@ module.exports = React.createClass({
         }
     },
 
+    _onClickDM: function() {
+        const newIsDirectMessage = !this.state.isDirectMessage;
+        this.setState({
+            isDirectMessage: newIsDirectMessage,
+        });
+
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        let newTarget;
+        if (newIsDirectMessage) {
+            const guessedTarget = Rooms.guessDMRoomTarget(
+                this.props.room,
+                this.props.room.getMember(MatrixClientPeg.get().credentials.userId),
+            );
+            newTarget = guessedTarget.userId;
+        } else {
+            newTarget = null;
+        }
+
+        // give some time for the user to see the icon change first, since
+        // this will hide the context menu once it completes
+        q.delay(500).done(() => {
+            return Rooms.setDMRoom(this.props.room.roomId, newTarget).finally(() => {
+                // Close the context menu
+                if (this.props.onFinished) {
+                    this.props.onFinished();
+                };
+            }, (err) => {
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Failed to set Direct Message status of room",
+                    description: err.toString()
+                });
+            });
+        });
+    },
+
     _onClickLeave: function() {
         // Leave room
         dis.dispatch({
@@ -146,27 +187,33 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var myUserId = MatrixClientPeg.get().credentials.userId;
+        const myUserId = MatrixClientPeg.get().credentials.userId;
-        var myMember = this.props.room.getMember(myUserId);
+        const myMember = this.props.room.getMember(myUserId);
 
-        var favouriteClasses = classNames({
+        const favouriteClasses = classNames({
             'mx_RoomTagContextMenu_field': true,
             'mx_RoomTagContextMenu_fieldSet': this.state.isFavourite,
             'mx_RoomTagContextMenu_fieldDisabled': false,
         });
 
-        var lowPriorityClasses = classNames({
+        const lowPriorityClasses = classNames({
             'mx_RoomTagContextMenu_field': true,
             'mx_RoomTagContextMenu_fieldSet': this.state.isLowPriority,
             'mx_RoomTagContextMenu_fieldDisabled': false,
         });
 
-        var leaveClasses = classNames({
+        const leaveClasses = classNames({
             'mx_RoomTagContextMenu_field': true,
             'mx_RoomTagContextMenu_fieldSet': false,
             'mx_RoomTagContextMenu_fieldDisabled': false,
         });
 
+        const dmClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldSet': this.state.isDirectMessage,
+            'mx_RoomTagContextMenu_fieldDisabled': false,
+        });
+
         if (myMember && myMember.membership === "leave") {
             return (
                 <div>
@@ -190,6 +237,11 @@ module.exports = React.createClass({
                     <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
                     Low Priority
                 </div>
+                <div className={ dmClasses } onClick={this._onClickDM} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_person.svg" width="15" height="15" />
+                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
+                    Direct Message
+                </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" />

src/skins/vector/img/icon_context_person.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="11.000464"
+   height="13"
+   viewBox="0 0 11.000464 13"
+   version="1.1"
+   id="svg4500"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="icon_context_person.svg">
+  <metadata
+     id="metadata4520">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>81230A28-D944-4572-B5DB-C03CAA2B1FCA</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1013"
+     inkscape:window-height="777"
+     id="namedview4518"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="24.48"
+     inkscape:cx="4.9078557"
+     inkscape:cy="9.7756405"
+     inkscape:window-x="495"
+     inkscape:window-y="175"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="icons_people_svg" />
+  <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title4502">81230A28-D944-4572-B5DB-C03CAA2B1FCA</title>
+  <desc
+     id="desc4504">Created with sketchtool.</desc>
+  <defs
+     id="defs4506" />
+  <g
+     style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
+     id="g4511"
+     transform="translate(-56.999768,-730.5)">
+    <g
+       transform="translate(50,725)"
+       id="icons_people">
+      <g
+         style="stroke:#00000f;stroke-opacity:0.94117647"
+         transform="translate(7,6)"
+         id="icons_people_svg">
+        <path
+           style="stroke:#cecece;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+           inkscape:connector-curvature="0"
+           id="Oval-40"
+           d="m 10.5,12 c 0,-2.7614237 0,-5 -5,-5 -5.0000002,0 -5,2.2385763 -5,5 3.4756747,0 5.5712891,0 10,0 z" />
+        <circle
+           r="2.75"
+           cy="2.75"
+           cx="5.5"
+           id="Oval"
+           style="stroke:#cecece;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>

src/skins/vector/img/icon_context_person_on.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="11.000464"
+   height="13"
+   viewBox="0 0 11.000464 13"
+   version="1.1"
+   id="svg4500"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="icon_context_person_on.svg">
+  <metadata
+     id="metadata4520">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>81230A28-D944-4572-B5DB-C03CAA2B1FCA</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1013"
+     inkscape:window-height="777"
+     id="namedview4518"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="24.48"
+     inkscape:cx="4.9078557"
+     inkscape:cy="9.7756405"
+     inkscape:window-x="495"
+     inkscape:window-y="175"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="icons_people_svg" />
+  <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title4502">81230A28-D944-4572-B5DB-C03CAA2B1FCA</title>
+  <desc
+     id="desc4504">Created with sketchtool.</desc>
+  <defs
+     id="defs4506" />
+  <g
+     style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
+     id="g4511"
+     transform="translate(-56.999768,-730.5)">
+    <g
+       transform="translate(50,725)"
+       id="icons_people">
+      <g
+         style="stroke:#00000f;stroke-opacity:0.94117647"
+         transform="translate(7,6)"
+         id="icons_people_svg">
+        <path
+           style="stroke:#4a4a4a;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;fill:#4a4a4a;fill-opacity:1"
+           inkscape:connector-curvature="0"
+           id="Oval-40"
+           d="m 10.5,12 c 0,-2.7614237 0,-5 -5,-5 -5.0000002,0 -5,2.2385763 -5,5 3.4756747,0 5.5712891,0 10,0 z" />
+        <circle
+           r="2.75"
+           cy="2.75"
+           cx="5.5"
+           id="Oval"
+           style="stroke:#4a4a4a;stroke-opacity:1;fill:#4a4a4a;fill-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>

src/skins/vector/img/icons-people.svg

@@ -1,9 +0,0 @@
-<?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>
-</svg>