Merge pull request #5161 from matrix-org/travis/communities/proto/use…

…rinfo

Communities v2 prototype: "In community" view

res/css/_components.scss

@@ -68,6 +68,7 @@
 @import "./views/dialogs/_CreateRoomDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
+@import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_InviteDialog.scss";

res/css/structures/_UserMenu.scss

@@ -16,9 +16,33 @@ limitations under the License.
 
 .mx_UserMenu {
 
-    // to make the ... button sort of aligned with the explore button below
+    // to make the menu button sort of aligned with the explore button below
     padding-right: 6px;
 
+    &.mx_UserMenu_prototype {
+        // The margin & padding combination between here and the ::after is to
+        // align the border line with the tag panel.
+        margin-bottom: 6px;
+
+        padding-right: 0; // make the right edge line up with the explore button
+
+        .mx_UserMenu_headerButtons {
+            // considering we've eliminated right padding on the menu itself, we need to
+            // push the chevron in slightly (roughly lining up with the center of the
+            // plus buttons)
+            margin-right: 2px;
+        }
+
+        // we cheat opacity on the theme colour with an after selector here
+        &::after {
+            content: '';
+            border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
+            opacity: 0.2;
+            display: block;
+            padding-top: 8px;
+        }
+    }
+
     .mx_UserMenu_headerButtons {
         width: 16px;
         height: 16px;
@@ -36,7 +60,7 @@ limitations under the License.
             mask-size: contain;
             mask-repeat: no-repeat;
             background: $primary-fg-color;
-            mask-image: url('$(res)/img/element-icons/context-menu.svg');
+            mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
         }
     }
 
@@ -56,6 +80,28 @@ limitations under the License.
             }
         }
 
+        .mx_UserMenu_doubleName {
+            flex: 1;
+            min-width: 0; // make flexbox aware that it can crush this to a tiny width
+
+            .mx_UserMenu_userName,
+            .mx_UserMenu_subUserName {
+                display: block;
+            }
+
+            .mx_UserMenu_subUserName {
+                color: $muted-fg-color;
+                font-size: $font-13px;
+                line-height: $font-18px;
+                flex: 1;
+
+                // Ellipsize any text overflow
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+        }
+
         .mx_UserMenu_userName {
             font-weight: 600;
             font-size: $font-15px;
@@ -89,6 +135,44 @@ limitations under the License.
 .mx_UserMenu_contextMenu {
     width: 247px;
 
+    // These override the styles already present on the user menu rather than try to
+    // define a new menu. They are specifically for the stacked menu when a community
+    // is being represented as a prototype.
+    &.mx_UserMenu_contextMenu_prototype {
+        padding-bottom: 16px;
+
+        .mx_UserMenu_contextMenu_header {
+            padding-bottom: 0;
+            padding-top: 16px;
+
+            &:nth-child(n + 2) {
+                padding-top: 8px;
+            }
+        }
+
+        hr {
+            width: 85%;
+            opacity: 0.2;
+            border: none;
+            border-bottom: 1px solid $primary-fg-color; // XXX: Variable abuse
+        }
+
+        &.mx_IconizedContextMenu {
+            > .mx_IconizedContextMenu_optionList {
+                margin-top: 4px;
+
+                &::before {
+                    border: none;
+                }
+
+                > .mx_AccessibleButton {
+                    padding-top: 2px;
+                    padding-bottom: 2px;
+                }
+            }
+        }
+    }
+
     &.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red {
         .mx_AccessibleButton {
             padding-top: 16px;
@@ -193,4 +277,12 @@ limitations under the License.
     .mx_UserMenu_iconSignOut::before {
         mask-image: url('$(res)/img/element-icons/leave.svg');
     }
+
+    .mx_UserMenu_iconMembers::before {
+        mask-image: url('$(res)/img/element-icons/room/members.svg');
+    }
+
+    .mx_UserMenu_iconInvite::before {
+        mask-image: url('$(res)/img/element-icons/room/invite.svg');
+    }
 }

res/css/views/dialogs/_EditCommunityPrototypeDialog.scss

@@ -0,0 +1,77 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+// XXX: many of these styles are shared with the create dialog
+.mx_EditCommunityPrototypeDialog {
+    &.mx_Dialog_fixedWidth {
+        width: 360px;
+    }
+
+    .mx_Dialog_content {
+        margin-bottom: 12px;
+
+        .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
+            display: block;
+            height: 32px;
+            font-size: $font-16px;
+            line-height: 32px;
+        }
+
+        .mx_EditCommunityPrototypeDialog_rowAvatar {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+
+        .mx_EditCommunityPrototypeDialog_avatarContainer {
+            margin-top: 20px;
+            margin-bottom: 20px;
+
+            .mx_EditCommunityPrototypeDialog_avatar,
+            .mx_EditCommunityPrototypeDialog_placeholderAvatar {
+                width: 96px;
+                height: 96px;
+                border-radius: 96px;
+            }
+
+            .mx_EditCommunityPrototypeDialog_placeholderAvatar {
+                background-color: #368bd6; // hardcoded for both themes
+
+                &::before {
+                    display: inline-block;
+                    background-color: #fff; // hardcoded because the background is
+                    mask-repeat: no-repeat;
+                    mask-size: 96px;
+                    width: 96px;
+                    height: 96px;
+                    mask-position: center;
+                    content: '';
+                    vertical-align: middle;
+                    mask-image: url('$(res)/img/element-icons/add-photo.svg');
+                }
+            }
+        }
+
+        .mx_EditCommunityPrototypeDialog_tip {
+            margin-left: 20px;
+
+            & > b, & > span {
+                display: block;
+                color: $muted-fg-color;
+            }
+        }
+    }
+}

src/RoomInvite.js

@@ -24,7 +24,7 @@ import * as sdk from './';
 import { _t } from './languageHandler';
 import {KIND_DM, KIND_INVITE} from "./components/views/dialogs/InviteDialog";
 import CommunityPrototypeInviteDialog from "./components/views/dialogs/CommunityPrototypeInviteDialog";
-import GroupStore from "./stores/GroupStore";
+import {CommunityPrototypeStore} from "./stores/CommunityPrototypeStore";
 
 /**
  * Invites multiple addresses to a room
@@ -66,18 +66,10 @@ export function showCommunityRoomInviteDialog(roomId, communityName) {
 }
 
 export function showCommunityInviteDialog(communityId) {
-    const rooms = GroupStore.getGroupRooms(communityId)
-        .map(r => MatrixClientPeg.get().getRoom(r.roomId))
-        .filter(r => !!r);
-    let chat = rooms.find(r => {
-        const idState = r.currentState.getStateEvents("im.vector.general_chat", "");
-        if (!idState || idState.getContent()['groupId'] !== communityId) return false;
-        return true;
-    });
-    if (!chat) chat = rooms[0];
+    const chat = CommunityPrototypeStore.instance.getGeneralChat(communityId);
     if (chat) {
-        const summary = GroupStore.getSummary(communityId);
-        showCommunityRoomInviteDialog(chat.roomId, summary?.profile?.name || communityId);
+        const name = CommunityPrototypeStore.instance.getCommunityName(communityId);
+        showCommunityRoomInviteDialog(chat.roomId, name);
     } else {
         throw new Error("Failed to locate appropriate room to start an invite in");
     }

src/accessibility/context_menu/MenuItem.tsx

@@ -26,8 +26,9 @@ interface IProps extends React.ComponentProps<typeof AccessibleButton> {
 
 // Semantic component for representing a role=menuitem
 export const MenuItem: React.FC<IProps> = ({children, label, ...props}) => {
+    const ariaLabel = props["aria-label"] || label;
     return (
-        <AccessibleButton {...props} role="menuitem" tabIndex={-1} aria-label={label}>
+        <AccessibleButton {...props} role="menuitem" tabIndex={-1} aria-label={ariaLabel}>
             { children }
         </AccessibleButton>
     );