Initial rejig

res/css/_components.scss

@@ -24,7 +24,6 @@
 @import "./structures/_SearchBox.scss";
 @import "./structures/_TabbedView.scss";
 @import "./structures/_TagPanel.scss";
-@import "./structures/_TagPanelButtons.scss";
 @import "./structures/_ToastContainer.scss";
 @import "./structures/_TopLeftMenuButton.scss";
 @import "./structures/_UploadBar.scss";

res/css/structures/_TagPanel.scss

@@ -82,6 +82,31 @@ limitations under the License.
     // opacity: 1;
 }
 
+.mx_TagPanel .mx_TagTile_plus {
+    margin-bottom: 12px;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    background-color: $button-primary-fg-color;
+    opacity: 0.11;
+    position: relative;
+    /* overwrite mx_RoleButton inline-block */
+    display: block !important;
+
+    &::before {
+        mask-image: url('$(res)/img/feather-customised/plus.svg');
+        mask-position: center;
+        background-color: $tagpanel-bg-color;
+        mask-repeat: no-repeat;
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+}
+
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
     content: '';
     height: 56px;
@@ -89,7 +114,7 @@ limitations under the License.
     width: 5px;
     position: absolute;
     left: -15px;
-    border-radius: 0 2px 2px 0;
+    border-radius: 0 3px 3px 0;
     top: -8px; // (56 - 40)/2
 }
 

res/css/structures/_TagPanelButtons.scss

@@ -1,56 +0,0 @@
-/*
-Copyright 2019 New Vector 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_TagPanelButtons {
-    background-color: $tagpanel-bg-color;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    padding: 17px 0 3px 0;
-}
-
-.mx_TagPanelButtons > .mx_GroupsButton::before {
-    mask: url('$(res)/img/feather-customised/users.svg');
-    mask-position: center 11px;
-}
-
-.mx_TagPanelButtons > .mx_TagPanelButtons_report::before {
-    mask: url('$(res)/img/feather-customised/life-buoy.svg');
-    mask-position: center 9px;
-}
-
-.mx_TagPanelButtons > .mx_AccessibleButton {
-    margin-bottom: 12px;
-    height: 40px;
-    width: 40px;
-    border-radius: 20px;
-    background-color: $tagpanel-button-color;
-    position: relative;
-    /* overwrite mx_RoleButton inline-block */
-    display: block !important;
-
-    &::before {
-        background-color: $tagpanel-bg-color;
-        mask-repeat: no-repeat;
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-}

res/css/views/context_menus/_TopLeftMenu.scss

@@ -53,6 +53,10 @@ limitations under the License.
             mask-image: url('$(res)/img/feather-customised/home.svg');
         }
 
+        .mx_TopLeftMenu_icon_help::after {
+            mask-image: url('$(res)/img/feather-customised/life-buoy.svg');
+        }
+
         .mx_TopLeftMenu_icon_settings::after {
             mask-image: url('$(res)/img/feather-customised/settings.svg');
         }

res/img/feather-customised/plus.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5V19" stroke="#2E2F32" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 12H19" stroke="#2E2F32" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/structures/LeftPanel.js

@@ -243,7 +243,6 @@ const LeftPanel = createReactClass({
             tagPanelContainer = (<div className="mx_LeftPanel_tagPanelContainer">
                 <TagPanel />
                 { isCustomTagsEnabled ? <CustomRoomTagPanel /> : undefined }
-                <TagPanelButtons />
             </div>);
         }
 

src/components/structures/TagPanel.js

@@ -104,6 +104,7 @@ const TagPanel = createReactClass({
     render() {
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const AccessibleTooltipButton = sdk.getComponent('elements.AccessibleTooltipButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
@@ -154,6 +155,7 @@ const TagPanel = createReactClass({
                                 ref={provided.innerRef}
                             >
                                 { tags }
+                                <div><AccessibleTooltipButton title={_t("Communities")} className="mx_TagTile mx_TagTile_plus" /></div>
                                 { provided.placeholder }
                             </div>
                     ) }

src/components/structures/TagPanelButtons.js

@@ -1,59 +0,0 @@
-/*
-Copyright 2019 New Vector 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.
-*/
-
-import React from 'react';
-import createReactClass from 'create-react-class';
-import sdk from '../../index';
-import dis from '../../dispatcher';
-import Modal from '../../Modal';
-import { _t } from '../../languageHandler';
-
-const TagPanelButtons = createReactClass({
-    displayName: 'TagPanelButtons',
-
-
-    componentDidMount: function() {
-        this._dispatcherRef = dis.register(this._onAction);
-    },
-
-    componentWillUnmount() {
-        if (this._dispatcherRef) {
-            dis.unregister(this._dispatcherRef);
-            this._dispatcherRef = null;
-        }
-    },
-
-    _onAction(payload) {
-        if (payload.action === "show_redesign_feedback_dialog") {
-            const RedesignFeedbackDialog =
-                sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
-            Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
-        }
-    },
-
-    render() {
-        const GroupsButton = sdk.getComponent('elements.GroupsButton');
-        const ActionButton = sdk.getComponent("elements.ActionButton");
-
-        return (<div className="mx_TagPanelButtons">
-            <GroupsButton />
-            <ActionButton
-                className="mx_TagPanelButtons_report" action="show_redesign_feedback_dialog"
-                label={_t("Report bugs & give feedback")} tooltip={true} />
-        </div>);
-    },
-});
-export default TagPanelButtons;

src/components/views/context_menus/TopLeftMenu.js

@@ -25,6 +25,7 @@ import SdkConfig from '../../../SdkConfig';
 import { getHostingLink } from '../../../utils/HostingLink';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import {MenuItem} from "../../structures/ContextMenu";
+import sdk from "../../../index";
 
 export class TopLeftMenu extends React.Component {
     static propTypes = {
@@ -100,6 +101,12 @@ export class TopLeftMenu extends React.Component {
             );
         }
 
+        const helpItem = (
+            <MenuItem className="mx_TopLeftMenu_icon_help" onClick={this.openHelp}>
+                {_t("Help")}
+            </MenuItem>
+        );
+
         const settingsItem = (
             <MenuItem className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>
                 {_t("Settings")}
@@ -115,11 +122,17 @@ export class TopLeftMenu extends React.Component {
             <ul className="mx_TopLeftMenu_section_withIcon" role="none">
                 {homePageItem}
                 {settingsItem}
+                {helpItem}
                 {signInOutItem}
             </ul>
         </div>;
     }
 
+    openHelp() {
+        const RedesignFeedbackDialog = sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
+        Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
+    }
+
     viewHomePage() {
         dis.dispatch({action: 'view_home_page'});
         this.closeMenu();

src/components/views/elements/AccessibleTooltipButton.js

@@ -48,7 +48,7 @@ export default class AccessibleTooltipButton extends React.PureComponent {
         const Tooltip = sdk.getComponent("elements.Tooltip");
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
-        const {title, ...props} = this.props;
+        const {title, children, ...props} = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
@@ -57,6 +57,7 @@ export default class AccessibleTooltipButton extends React.PureComponent {
         /> : <div />;
         return (
             <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} aria-label={title}>
+                { children }
                 { tip }
             </AccessibleButton>
         );

src/components/views/elements/GroupsButton.js

@@ -1,37 +0,0 @@
-/*
-Copyright 2017 New Vector 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.
-*/
-
-import React from 'react';
-import sdk from '../../../index';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-
-const GroupsButton = function(props) {
-    const ActionButton = sdk.getComponent('elements.ActionButton');
-    return (
-        <ActionButton className="mx_GroupsButton" action="toggle_my_groups"
-            label={_t("Communities")}
-            size={props.size}
-            tooltip={true}
-        />
-    );
-};
-
-GroupsButton.propTypes = {
-    size: PropTypes.string,
-};
-
-export default GroupsButton;

src/components/views/elements/TagTile.js

@@ -112,12 +112,10 @@ export default createReactClass({
     },
 
     onMouseOver: function() {
-        console.log("DEBUG onMouseOver");
         this.setState({hover: true});
     },
 
     onMouseOut: function() {
-        console.log("DEBUG onMouseOut");
         this.setState({hover: false});
     },
 
@@ -140,7 +138,6 @@ export default createReactClass({
 
     render: function() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const Tooltip = sdk.getComponent('elements.Tooltip');
         const profile = this.state.profile || {};
         const name = profile.name || this.props.tag;
         const avatarHeight = 40;
@@ -164,9 +161,6 @@ export default createReactClass({
             badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
         }
 
-        const tip = this.state.hover ?
-            <Tooltip className="mx_TagTile_tooltip" label={name} /> :
-            <div />;
         // FIXME: this ought to use AccessibleButton for a11y but that causes onMouseOut/onMouseOver to fire too much
         const contextButton = this.state.hover || this.state.menuDisplayed ?
             <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this._contextMenuButton}>
@@ -184,14 +178,9 @@ export default createReactClass({
             );
         }
 
+        const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
         return <React.Fragment>
-            <ContextMenuButton
+            <AccessibleTooltipButton className={className} onClick={this.onClick} onContextMenu={this.openMenu} title={name}>
-                className={className}
-                onClick={this.onClick}
-                onContextMenu={this.openMenu}
-                label={_t("Options")}
-                isExpanded={this.state.menuDisplayed}
-            >
                 <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
                     <BaseAvatar
                         name={name}
@@ -200,11 +189,10 @@ export default createReactClass({
                         width={avatarHeight}
                         height={avatarHeight}
                     />
-                    { tip }
                     { contextButton }
                     { badgeElement }
                 </div>
-            </ContextMenuButton>
+            </AccessibleTooltipButton>
 
             { contextMenu }
         </React.Fragment>;

src/i18n/strings/en_EN.json

@@ -1259,7 +1259,6 @@
     "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.": "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.",
     "collapse": "collapse",
     "expand": "expand",
-    "Communities": "Communities",
     "You cannot delete this image. (%(code)s)": "You cannot delete this image. (%(code)s)",
     "Uploaded on %(date)s by %(user)s": "Uploaded on %(date)s by %(user)s",
     "Rotate Left": "Rotate Left",
@@ -1625,6 +1624,7 @@
     "Hide": "Hide",
     "Home": "Home",
     "Sign in": "Sign in",
+    "Help": "Help",
     "Reload": "Reload",
     "Take picture": "Take picture",
     "Remove for everyone": "Remove for everyone",
@@ -1768,6 +1768,7 @@
     "Did you know: you can use communities to filter your Riot.im experience!": "Did you know: you can use communities to filter your Riot.im experience!",
     "To set up a filter, drag a community avatar over to the filter panel on the far left hand side of the screen. You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.": "To set up a filter, drag a community avatar over to the filter panel on the far left hand side of the screen. You can click on an avatar in the filter panel at any time to see only the rooms and people associated with that community.",
     "Error whilst fetching joined communities": "Error whilst fetching joined communities",
+    "Communities": "Communities",
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",
     "You have no visible notifications": "You have no visible notifications",