Merge pull request #668 from vector-im/matthew/roompreview

Support non-guest peeking

src/components/structures/RoomDirectory.js

@@ -72,6 +72,7 @@ module.exports = React.createClass({
         joinOrPeekPromise.done(function() {
             dis.dispatch({
                 action: 'view_room',
+                auto_peek: false, // don't peek as we've already peeked here (if it was needed)
                 room_id: roomId
             });
         }, function(err) {
@@ -97,7 +98,7 @@ module.exports = React.createClass({
         });
         var rows = [];
         var self = this;
-        var guestRead, guestJoin;
+        var guestRead, guestJoin, perms;
         for (var i = 0; i < rooms.length; i++) {
             var name = rooms[i].name || rooms[i].aliases[0];
             guestRead = null;
@@ -106,30 +107,37 @@ module.exports = React.createClass({
 
             if (rooms[i].world_readable) {
                 guestRead = (
-                    <img src="img/members.svg"
+                    <span>[world readable]</span>
-                        alt="World Readable" title="World Readable" width="12" height="12" />
                 );
-                if (MatrixClientPeg.get().isGuest() && !rooms[i].guest_can_join) {
+                    // <img src="img/members.svg"
+                    //     alt="World Readable" title="World Readable" width="12" height="12" />
+                if (rooms[i].world_readable) {
                     shouldPeek = true;
                 }
             }
             if (rooms[i].guest_can_join) {
                 guestJoin = (
-                    <img src="img/leave.svg"
+                    <span>[guests allowed]</span>
-                        alt="Guests can join" title="Guests can join" width="12" height="12" />
                 );
+                    // <img src="img/leave.svg"
+                    //     alt="Guests can join" title="Guests can join" width="12" height="12" />
+            }
+            
+            perms = null;
+            if (guestRead || guestJoin) {
+                perms = <div>{guestRead} {guestJoin}</div>;
             }
 
             // <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(rooms[i].room_id, 40, 40, "crop") } width="40" height="40" alt=""/>
             rows.unshift(
                 <tbody key={ rooms[i].room_id }>
                     <tr onClick={self.joinRoom.bind(null, rooms[i].room_id, shouldPeek)}>
-                        <td className="mx_RoomDirectory_name">{ name } {guestRead} {guestJoin}</td>
+                        <td className="mx_RoomDirectory_name">{ name }</td>
                         <td>{ rooms[i].aliases[0] }</td>
                         <td>{ rooms[i].num_joined_members }</td>
                     </tr>
-                    <tr>
+                    <tr onClick={self.joinRoom.bind(null, rooms[i].room_id, shouldPeek)}>
-                        <td className="mx_RoomDirectory_topic" colSpan="3">{ rooms[i].topic }</td>
+                        <td className="mx_RoomDirectory_topic" colSpan="3">{perms} { rooms[i].topic }</td>
                     </tr>
                 </tbody>
             );

src/components/views/settings/Notifications.js

@@ -75,7 +75,7 @@ var VectorPushRulesDefinitions = {
     // Messages just sent to the user in a 1:1 room
     "im.vector.rule.room_one_to_one": {
         hsDefaultRuleId: ".m.rule.room_one_to_one",
-        description: "Messages just sent to me",
+        description: "Messages in one-to-one chats",
         conditions: [{
             "is": "2",
             "kind": "room_member_count"
@@ -97,7 +97,7 @@ var VectorPushRulesDefinitions = {
 
     // Messages just sent to a group chat room
     "im.vector.rule.room_group": {
-        description: "Messages sent to group",
+        description: "Messages in group chats",
         conditions: [{
             "is": ">2",
             "kind": "room_member_count"

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

@@ -14,14 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MemberTile {
+.mx_EntityTile {
     display: table-row;
     position: relative;
     color: #454545;
     cursor: pointer;
 }
 
-.mx_MemberTile_avatar {
+.mx_EntityTile_invite {
+    display: table-cell;
+    vertical-align: middle;
+    margin-left: 10px;
+}
+
+.mx_EntityTile:hover .mx_MessageTimestamp {
+    display: block;
+}
+
+.mx_EntityTile_avatar {
     display: table-cell;
     padding-left: 3px;
     padding-right: 12px;
@@ -33,66 +43,44 @@ limitations under the License.
     position: relative;
 }
 
-.mx_MemberTile_power {
+.mx_EntityTile_name {
-    position: absolute;
-    width: 16px;
-    height: 17px;
-    top: 0px;
-    right: 6px;
-}
-
-.mx_MemberTile_name {
     display: table-cell;
     vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.mx_MemberTile_details {
+.mx_EntityTile_details {
     display: table-cell;
     padding-right: 14px;
     vertical-align: middle;
 }
 
-.mx_MemberTile_userId {
+.mx_EntityTile_name_hover {
     font-size: 13px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.mx_MemberTile_chevron {
+.mx_EntityTile_chevron {
     margin-top: 8px;
     margin-right: -4px;
     margin-left: 6px;
     float: right;
 }
 
-/*
+.mx_EntityTile_unavailable .mx_EntityTile_avatar,
-.mx_MemberTile_nameWrapper {
+.mx_EntityTile_unavailable .mx_EntityTile_name,
-    display: table-cell;
+.mx_EntityTile_unavailable .mx_EntityTile_name_hover
-    vertical-align: middle;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mx_MemberTile_nameSpan {
-}
-*/
-
-.mx_MemberTile_unavailable .mx_MemberTile_avatar,
-.mx_MemberTile_unavailable .mx_MemberTile_name,
-.mx_MemberTile_unavailable .mx_MemberTile_userId
 {
     opacity: 0.66;
 }
 
-.mx_MemberTile_offline .mx_MemberTile_avatar,
+.mx_EntityTile_offline .mx_EntityTile_avatar,
-.mx_MemberTile_offline .mx_MemberTile_name,
+.mx_EntityTile_offline .mx_EntityTile_name,
-.mx_MemberTile_offline .mx_MemberTile_userId
+.mx_EntityTile_offline .mx_EntityTile_name_hover
 {
     opacity: 0.25;
 }
 
-.mx_MemberTile:hover .mx_MessageTimestamp {
+
-    display: block;
-}

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

@@ -16,8 +16,8 @@ limitations under the License.
 
 /* add 20px to the height of the header when editing */
 .mx_RoomHeader_editing {
-    -webit-flex: 0 0 103px ! important;
+    -webit-flex: 0 0 93px ! important;
-    flex: 0 0 103px ! important;
+    flex: 0 0 93px ! important;
 }
 
 .mx_RoomHeader_wrapper {

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

@@ -16,16 +16,40 @@ limitations under the License.
 
 .mx_RoomPreviewBar {
     text-align: center;
+    height: 176px;
+
+    -webkit-align-items: center;
+    align-items: center;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+    
+    justify-content: center;
+    -webkit-justify-content: center;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
 }
 
-.mx_RoomPreviewBar_preview_text {
+.mx_RoomPreviewBar_wrapper {
-    color: #a4a4a4;
+}
+
+.mx_RoomPreviewBar_invite_text {
+    color: #454545;
 }
 
 .mx_RoomPreviewBar_join_text {
     color: #ff0064;
 }
 
+.mx_RoomPreviewBar_preview_text {
+    margin-top: 25px;
+    color: #a4a4a4;
+}
+
 .mx_RoomPreviewBar_join_text a {
     text-decoration: underline;
     cursor: pointer;

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

@@ -59,8 +59,22 @@ limitations under the License.
 }
 */
 
+.mx_RoomSettings .mx_RoomSettings_toggles label {
+    margin-bottom: 10px;
+    display: block;
+}
+
+.mx_RoomSettings .mx_RoomSettings_toggles input[type="checkbox"] {
+    margin-right: 7px;
+}
+
 .mx_RoomSettings .mx_RoomSettings_tags input[type="checkbox"] {
     margin-left: 1em;
+    margin-right: 7px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_tags {
+    margin-bottom: 10px;
 }
 
 .mx_RoomSettings .mx_RoomSettings_roomColor {

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

@@ -0,0 +1,23 @@
+/*
+Copyright 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_SearchableEntityList_list {
+    border-bottom: 1px solid #e1dddd;
+}
+
+.mx_SearchableEntityList_list:empty {
+    border-bottom: 0px;
+}