Apply new design to highlighted tags and add toggle mechanic

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/_CustomRoomTagPanel.scss

@@ -26,11 +26,16 @@ limitations under the License.
 
 .mx_CustomRoomTagPanel_scroller {
     max-height: inherit;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .mx_CustomRoomTagPanel .mx_AccessibleButton {
-    margin: 9px auto;
+    margin: 0 auto;
     width: 40px;
+    padding: 10px 0 9px 0;
+    position: relative;
 }
 
 .mx_CustomRoomTagPanel .mx_BaseAvatar_image {
@@ -39,7 +44,13 @@ limitations under the License.
     height: 40px;
 }
 
-.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected .mx_BaseAvatar_image {
-    border: 3px solid $warning-color;
-    border-radius: 40px;
+.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected::before {
+    content: '';
+    height: 56px;
+    background-color: $accent-color-alt;
+    width: 5px;
+    position: absolute;
+    left: -15px;
+    border-radius: 0 3px 3px 0;
+    top: 2px; // 10 [padding-top] - (56 - 40)/2
 }

res/css/structures/_TagPanel.scss

@@ -68,7 +68,7 @@ limitations under the License.
 }
 .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
     height: 40px;
-    padding: 5px 0 4px 0;
+    padding: 10px 0 9px 0;
 }
 
 .mx_TagPanel .mx_TagTile {
@@ -82,21 +82,39 @@ limitations under the License.
     // opacity: 1;
 }
 
-.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
-    background-color: $accent-color;
-    border-radius: 40px;
-
-    /* In case this is a "initial" avatar */
-    display: block;
+.mx_TagPanel .mx_TagTile_plus {
+    margin-bottom: 12px;
     height: 40px;
     width: 40px;
-}
-
-.mx_TagPanel .mx_TagTile_selected .mx_BaseAvatar_image {
-    border: 3px solid $accent-color;
-    height: 40px;
-    width: 40px;
-    box-sizing: border-box;
+    border-radius: 20px;
+    background-color: $roomheader-addroom-bg-color;
+    position: relative;
+    /* overwrite mx_RoleButton inline-block */
+    display: block !important;
+
+    &::before {
+        background-color: $roomheader-addroom-fg-color;
+        mask-image: url('$(res)/img/feather-customised/plus.svg');
+        mask-position: center;
+        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;
+    background-color: $accent-color;
+    width: 5px;
+    position: absolute;
+    left: -15px;
+    border-radius: 0 3px 3px 0;
+    top: -8px; // (56 - 40)/2
 }
 
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {

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');
         }

src/components/structures/CustomRoomTagPanel.js

@@ -61,30 +61,13 @@ class CustomRoomTagPanel extends React.Component {
 }
 
 class CustomRoomTagTile extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {hover: false};
-        this.onClick = this.onClick.bind(this);
-        this.onMouseOut = this.onMouseOut.bind(this);
-        this.onMouseOver = this.onMouseOver.bind(this);
-    }
-
-    onMouseOver() {
-        this.setState({hover: true});
-    }
-
-    onMouseOut() {
-        this.setState({hover: false});
-    }
-
-    onClick() {
+    onClick = () => {
         dis.dispatch({action: 'select_custom_room_tag', tag: this.props.tag.name});
-    }
+    };
 
     render() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const Tooltip = sdk.getComponent('elements.Tooltip');
+        const AccessibleTooltipButton = sdk.getComponent('elements.AccessibleTooltipButton');
 
         const tag = this.props.tag;
         const avatarHeight = 40;
@@ -102,22 +85,18 @@ class CustomRoomTagTile extends React.Component {
             badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
         }
 
-        const tip = (this.state.hover ?
-            <Tooltip className="mx_TagTile_tooltip" label={name} /> :
-            <div />);
         return (
-            <AccessibleButton className={className} onClick={this.onClick}>
-                <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+            <AccessibleTooltipButton className={className} onClick={this.onClick} title={name}>
+                <div className="mx_TagTile_avatar">
                     <BaseAvatar
                         name={tag.avatarLetter}
                         idName={name}
                         width={avatarHeight}
                         height={avatarHeight}
                     />
                     { badgeElement }
-                    { tip }
                 </div>
-            </AccessibleButton>
+            </AccessibleTooltipButton>
         );
     }
 }

src/components/structures/LeftPanel.js

@@ -23,7 +23,6 @@ import { Key } from '../../Keyboard';
 import sdk from '../../index';
 import dis from '../../dispatcher';
 import VectorConferenceHandler from '../../VectorConferenceHandler';
-import TagPanelButtons from './TagPanelButtons';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import Analytics from "../../Analytics";
@@ -238,7 +237,6 @@ const LeftPanel = createReactClass({
             tagPanelContainer = (<div className="mx_LeftPanel_tagPanelContainer">
                 <TagPanel />
                 { isCustomTagsEnabled ? <CustomRoomTagPanel /> : undefined }
-                <TagPanelButtons />
             </div>);
         }
 

src/components/structures/TagPanel.js

@@ -103,6 +103,7 @@ const TagPanel = createReactClass({
     render() {
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const ActionButton = sdk.getComponent('elements.ActionButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
@@ -153,6 +154,13 @@ const TagPanel = createReactClass({
                                 ref={provided.innerRef}
                             >
                                 { tags }
+                                <div>
+                                    <ActionButton
+                                        tooltip
+                                        label={_t("Communities")}
+                                        action="toggle_my_groups"
+                                        className="mx_TagTile mx_TagTile_plus" />
+                                </div>
                                 { provided.placeholder }
                             </div>
                     ) }

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,18 @@ export class TopLeftMenu extends React.Component {
             <ul className="mx_TopLeftMenu_section_withIcon" role="none">
                 {homePageItem}
                 {settingsItem}
+                {helpItem}
                 {signInOutItem}
             </ul>
         </div>;
     }
 
+    openHelp() {
+        this.closeMenu();
+        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>
         );