From b2249d056117cb0c3f1891f476c0547ee5fcbfc3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 19 Dec 2019 20:09:05 +0000
Subject: [PATCH] Initial rejig

---
 res/css/_components.scss                      |  1 -
 res/css/structures/_TagPanel.scss             | 27 ++++++++-
 res/css/structures/_TagPanelButtons.scss      | 56 ------------------
 res/css/views/context_menus/_TopLeftMenu.scss |  4 ++
 res/img/feather-customised/plus.svg           |  4 ++
 src/components/structures/LeftPanel.js        |  1 -
 src/components/structures/TagPanel.js         |  2 +
 src/components/structures/TagPanelButtons.js  | 59 -------------------
 .../views/context_menus/TopLeftMenu.js        | 13 ++++
 .../views/elements/AccessibleTooltipButton.js |  3 +-
 src/components/views/elements/GroupsButton.js | 37 ------------
 src/components/views/elements/TagTile.js      | 18 +-----
 src/i18n/strings/en_EN.json                   |  3 +-
 13 files changed, 56 insertions(+), 172 deletions(-)
 delete mode 100644 res/css/structures/_TagPanelButtons.scss
 create mode 100644 res/img/feather-customised/plus.svg
 delete mode 100644 src/components/structures/TagPanelButtons.js
 delete mode 100644 src/components/views/elements/GroupsButton.js

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 233c781d7f..20395550ab 100644
--- a/res/css/_components.scss
+++ b/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";
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 8efd0796f5..307925335f 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/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
 }
 
diff --git a/res/css/structures/_TagPanelButtons.scss b/res/css/structures/_TagPanelButtons.scss
deleted file mode 100644
index 70fea92959..0000000000
--- a/res/css/structures/_TagPanelButtons.scss
+++ /dev/null
@@ -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;
-    }
-}
diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss
index d17d683e7e..ed0d0106bc 100644
--- a/res/css/views/context_menus/_TopLeftMenu.scss
+++ b/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');
         }
diff --git a/res/img/feather-customised/plus.svg b/res/img/feather-customised/plus.svg
new file mode 100644
index 0000000000..c747253139
--- /dev/null
+++ b/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>
diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index a0ad2b5c81..f733888db9 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -243,7 +243,6 @@ const LeftPanel = createReactClass({
             tagPanelContainer = (<div className="mx_LeftPanel_tagPanelContainer">
                 <TagPanel />
                 { isCustomTagsEnabled ? <CustomRoomTagPanel /> : undefined }
-                <TagPanelButtons />
             </div>);
         }
 
diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index a758092dc8..6410af174e 100644
--- a/src/components/structures/TagPanel.js
+++ b/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>
                     ) }
diff --git a/src/components/structures/TagPanelButtons.js b/src/components/structures/TagPanelButtons.js
deleted file mode 100644
index 7255e12307..0000000000
--- a/src/components/structures/TagPanelButtons.js
+++ /dev/null
@@ -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;
diff --git a/src/components/views/context_menus/TopLeftMenu.js b/src/components/views/context_menus/TopLeftMenu.js
index b9aabdc608..db388a657d 100644
--- a/src/components/views/context_menus/TopLeftMenu.js
+++ b/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();
diff --git a/src/components/views/elements/AccessibleTooltipButton.js b/src/components/views/elements/AccessibleTooltipButton.js
index c824ea4025..4f2b1f1a96 100644
--- a/src/components/views/elements/AccessibleTooltipButton.js
+++ b/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>
         );
diff --git a/src/components/views/elements/GroupsButton.js b/src/components/views/elements/GroupsButton.js
deleted file mode 100644
index 7b15e96424..0000000000
--- a/src/components/views/elements/GroupsButton.js
+++ /dev/null
@@ -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;
diff --git a/src/components/views/elements/TagTile.js b/src/components/views/elements/TagTile.js
index 767980f0a0..f3dbc5dd21 100644
--- a/src/components/views/elements/TagTile.js
+++ b/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
-                className={className}
-                onClick={this.onClick}
-                onContextMenu={this.openMenu}
-                label={_t("Options")}
-                isExpanded={this.state.menuDisplayed}
-            >
+            <AccessibleTooltipButton className={className} onClick={this.onClick} onContextMenu={this.openMenu} title={name}>
                 <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>;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 1dbd94f64f..57479bc70e 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",