Add dock for pinned messages at the top of the room

Signed-off-by: Travis Ralston <travpc@gmail.com>

src/components/structures/RoomView.js

@@ -1128,6 +1128,10 @@ module.exports = React.createClass({
         return ret;
     },
 
+    onPinnedClick: function() {
+        this.setState({showingPinned: !this.state.showingPinned, searching: false});
+    },
+
     onSettingsClick: function() {
         this.showSettings(true);
     },
@@ -1248,7 +1252,7 @@ module.exports = React.createClass({
     },
 
     onSearchClick: function() {
-        this.setState({ searching: true });
+        this.setState({ searching: true, showingPinned: false });
     },
 
     onCancelSearchClick: function() {
@@ -1447,6 +1451,7 @@ module.exports = React.createClass({
         const RoomSettings = sdk.getComponent("rooms.RoomSettings");
         const AuxPanel = sdk.getComponent("rooms.AuxPanel");
         const SearchBar = sdk.getComponent("rooms.SearchBar");
+        const PinnedEventsPanel = sdk.getComponent("rooms.PinnedEventsPanel");
         const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const RoomPreviewBar = sdk.getComponent("rooms.RoomPreviewBar");
@@ -1587,7 +1592,11 @@ module.exports = React.createClass({
             aux = <ForwardMessage onCancelClick={this.onCancelClick} />;
         } else if (this.state.searching) {
             hideCancel = true; // has own cancel
-            aux = <SearchBar ref="search_bar" searchInProgress={this.state.searchInProgress } onCancelClick={this.onCancelSearchClick} onSearch={this.onSearch}/>;
+            aux = <SearchBar ref="search_bar" searchInProgress={this.state.searchInProgress}
+                             onCancelClick={this.onCancelSearchClick} onSearch={this.onSearch}/>;
+        } else if (this.state.showingPinned) {
+            hideCancel = true; // has own cancel
+            aux = <PinnedEventsPanel room={this.state.room} />;
         } else if (!myMember || myMember.membership !== "join") {
             // We do have a room object for this room, but we're not currently in it.
             // We may have a 3rd party invite to it.
@@ -1761,6 +1770,7 @@ module.exports = React.createClass({
                     collapsedRhs={ this.props.collapsedRhs }
                     onSearchClick={this.onSearchClick}
                     onSettingsClick={this.onSettingsClick}
+                    onPinnedClick={this.onPinnedClick}
                     onSaveClick={this.onSettingsSaveClick}
                     onCancelClick={(aux && !hideCancel) ? this.onCancelClick : null}
                     onForgetClick={(myMember && myMember.membership === "leave") ? this.onForgetClick : null}

src/components/views/rooms/RoomHeader.js

@@ -45,6 +45,7 @@ module.exports = React.createClass({
         inRoom: React.PropTypes.bool,
         collapsedRhs: React.PropTypes.bool,
         onSettingsClick: React.PropTypes.func,
+        onPinnedClick: React.PropTypes.func,
         onSaveClick: React.PropTypes.func,
         onSearchClick: React.PropTypes.func,
         onLeaveClick: React.PropTypes.func,
@@ -172,6 +173,7 @@ module.exports = React.createClass({
         let spinner = null;
         let saveButton = null;
         let settingsButton = null;
+        let pinnedEventsButton = null;
 
         let canSetRoomName;
         let canSetRoomAvatar;
@@ -290,6 +292,13 @@ module.exports = React.createClass({
                 </AccessibleButton>;
         }
 
+        if (this.props.onPinnedClick) {
+            pinnedEventsButton =
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onPinnedClick} title={_t("Pinned Messages")}>
+                    <TintableSvg src="img/icons-pin.svg" width="16" height="16" />
+                </AccessibleButton>;
+        }
+
 //        var leave_button;
 //        if (this.props.onLeaveClick) {
 //            leave_button =
@@ -334,6 +343,7 @@ module.exports = React.createClass({
             rightRow =
                 <div className="mx_RoomHeader_rightRow">
                     { settingsButton }
+                    { pinnedEventsButton }
                     { manageIntegsButton }
                     { forgetButton }
                     { searchButton }

src/i18n/strings/en_EN.json

@@ -875,6 +875,7 @@
     "Add rooms to the group summary": "Add rooms to the group summary",
     "Which rooms would you like to add to this summary?": "Which rooms would you like to add to this summary?",
     "Room name or alias": "Room name or alias",
+    "Pinned Messages": "Pinned Messages",
     "%(senderName)s changed the pinned messages for the room.": "%(senderName)s changed the pinned messages for the room.",
     "You are an administrator of this group": "You are an administrator of this group",
     "Failed to add the following rooms to the summary of %(groupId)s:": "Failed to add the following rooms to the summary of %(groupId)s:",

src/i18n/strings/en_US.json

@@ -837,6 +837,7 @@
     "+example:%(domain)s": "+example:%(domain)s",
     "Group IDs must be of the form +localpart:%(domain)s": "Group IDs must be of the form +localpart:%(domain)s",
     "Room creation failed": "Room creation failed",
+    "Pinned Messages": "Pinned Messages",
     "You are a member of these groups:": "You are a member of these groups:",
     "Create a group to represent your community! Define a set of rooms and your own custom homepage to mark out your space in the Matrix universe.": "Create a group to represent your community! Define a set of rooms and your own custom homepage to mark out your space in the Matrix universe.",
     "Join an existing group": "Join an existing group",