Message/event pinning

src/components/views/context_menus/MessageContextMenu.js

@@ -43,26 +43,37 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             canRedact: false,
+            canPin: false,
         };
     },
 
     componentWillMount: function() {
-        MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkCanRedact);
-        this._checkCanRedact();
+        MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkPermissions);
+        this._checkPermissions();
     },
 
     componentWillUnmount: function() {
         const cli = MatrixClientPeg.get();
         if (cli) {
-            cli.removeListener('RoomMember.powerLevel', this._checkCanRedact);
+            cli.removeListener('RoomMember.powerLevel', this._checkPermissions);
         }
     },
 
-    _checkCanRedact: function() {
+    _checkPermissions: function() {
         const cli = MatrixClientPeg.get();
         const room = cli.getRoom(this.props.mxEvent.getRoomId());
+
         const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
-        this.setState({canRedact});
+        const canPin = room.currentState.mayClientSendStateEvent('m.room.pinned_events', cli);
+
+        this.setState({canRedact, canPin});
+    },
+
+    _isPinned: function() {
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        const pinnedEvent = room.currentState.getStateEvents('m.room.pinned_events', '');
+        if (!pinnedEvent) return false;
+        return pinnedEvent.getContent().pinned.includes(this.props.mxEvent.getId());
     },
 
     onResendClick: function() {
@@ -122,6 +133,28 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    onPinClick: function() {
+        MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '')
+            .catch(e => {
+                // Intercept the Event Not Found error and fall through the promise chain with no event.
+                if (e.errcode === "M_NOT_FOUND") return null;
+                throw e;
+            })
+            .then(event => {
+                const eventIds = (event ? event.pinned : []) || [];
+                if (!eventIds.includes(this.props.mxEvent.getId())) {
+                    // Not pinned - add
+                    eventIds.push(this.props.mxEvent.getId());
+                } else {
+                    // Pinned - remove
+                    eventIds.splice(eventIds.indexOf(this.props.mxEvent.getId()), 1);
+                }
+
+                MatrixClientPeg.get().sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
+            });
+        this.closeMenu();
+    },
+
     closeMenu: function() {
         if (this.props.onFinished) this.props.onFinished();
     },
@@ -147,6 +180,7 @@ module.exports = React.createClass({
         let redactButton;
         let cancelButton;
         let forwardButton;
+        let pinButton;
         let viewSourceButton;
         let viewClearSourceButton;
         let unhidePreviewButton;
@@ -186,6 +220,14 @@ module.exports = React.createClass({
                         { _t('Forward Message') }
                     </div>
                 );
+
+                if (this.state.canPin) {
+                    pinButton = (
+                        <div className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
+                            {this._isPinned() ? _t('Unpin Message') : _t('Pin Message')}
+                        </div>
+                    );
+                }
             }
         }
 
@@ -246,6 +288,7 @@ module.exports = React.createClass({
                 {redactButton}
                 {cancelButton}
                 {forwardButton}
+                {pinButton}
                 {viewSourceButton}
                 {viewClearSourceButton}
                 {unhidePreviewButton}

src/i18n/strings/en_EN.json

@@ -213,6 +213,11 @@
   "You have successfully set a password!": "You have successfully set a password!",
   "You can now return to your account after signing out, and sign in on other devices.": "You can now return to your account after signing out, and sign in on other devices.",
   "Continue": "Continue",
+  "Pin Message": "Pin Message",
+  "Unpin Message": "Unpin Message",
+  "Jump to message": "Jump to message",
+  "No pinned messages.": "No pinned messages.",
+  "Loading...": "Loading...",
   "Please set a password!": "Please set a password!",
   "This will allow you to return to your account after signing out, and sign in on other devices.": "This will allow you to return to your account after signing out, and sign in on other devices.",
   "You have successfully set a password and an email address!": "You have successfully set a password and an email address!",

src/i18n/strings/en_US.json

@@ -199,6 +199,11 @@
     "You have successfully set a password and an email address!": "You have successfully set a password and an email address!",
     "Remember, you can always set an email address in user settings if you change your mind.": "Remember, you can always set an email address in user settings if you change your mind.",
     "Warning": "Warning",
+    "Pin Message": "Pin Message",
+    "Unpin Message": "Unpin Message",
+    "Jump to message": "Jump to message",
+    "No pinned messages.": "No pinned messages.",
+    "Loading...": "Loading...",
     "Checking for an update...": "Checking for an update...",
     "Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).",
     "No update available.": "No update available.",

src/skins/vector/css/_components.scss

@@ -64,6 +64,8 @@
 @import "./matrix-react-sdk/views/voip/_CallView.scss";
 @import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
 @import "./matrix-react-sdk/views/voip/_VideoView.scss";
+@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss";
+@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss";
 @import "./vector-web/_fonts.scss";
 @import "./vector-web/structures/_CompatibilityPage.scss";
 @import "./vector-web/structures/_HomePage.scss";

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

@@ -0,0 +1,67 @@
+/*
+Copyright 2017 Travis Ralston
+
+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_PinnedEventTile {
+    min-height: 40px;
+    margin-bottom: 5px;
+    width: 100%;
+    border-radius: 5px; // for the hover
+}
+
+.mx_PinnedEventTile:hover {
+    background-color: $event-selected-color;
+}
+
+.mx_PinnedEventTile .mx_PinnedEventTile_sender {
+    color: #868686;
+    font-size: 0.8em;
+    vertical-align: top;
+    display: block;
+    padding-bottom: 3px;
+}
+
+.mx_PinnedEventTile .mx_EventTile_content {
+    margin-left: 50px;
+    position: relative;
+    top: 0;
+    left: 0;
+}
+
+.mx_PinnedEventTile .mx_BaseAvatar {
+    float: left;
+    margin-right: 10px;
+}
+
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
+    display: block;
+}
+
+.mx_PinnedEventTile_actions {
+    float: right;
+    margin-right: 10px;
+    display: none;
+}
+
+.mx_PinnedEventTile_unpinButton {
+    display: inline-block;
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+.mx_PinnedEventTile_gotoButton {
+    display: inline-block;
+    font-size: 0.8em;
+}

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

@@ -0,0 +1,37 @@
+/*
+Copyright 2017 Travis Ralston
+
+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_PinnedEventsPanel {
+    border-top: 1px solid $primary-hairline-color;
+}
+
+.mx_PinnedEventsPanel_body {
+    max-height: 300px;
+    overflow-y: auto;
+    padding-bottom: 15px;
+}
+
+.mx_PinnedEventsPanel_header {
+    margin: 0;
+    padding-top: 8px;
+    padding-bottom: 15px;
+}
+
+.mx_PinnedEventsPanel_cancel {
+    margin: 12px;
+    float: right;
+    display: inline-block;
+}