Redesign: add feedback dialog & button in tag panel

res/css/structures/_LeftPanel.scss

@@ -89,12 +89,6 @@ limitations under the License.
     pointer-events: none;
 }
 
-.mx_LeftPanel_container.collapsed .mx_RoleButton {
-    margin-right: 0px ! important;
-    padding-top: 3px ! important;
-    padding-bottom: 3px ! important;
-}
-
 .mx_BottomLeftMenu_options > div {
     display: inline-block;
 }

res/css/structures/_TagPanel.scss

@@ -124,10 +124,23 @@ limitations under the License.
     padding-right: 4px;
 }
 
+.mx_TagPanel_groupsButton {
+    flex: 0;
+    margin: 17px 0 3px 0;
+}
+
+.mx_TagPanel_groupsButton > .mx_GroupsButton:before {
+    mask: url('../../img/feather-icons/users.svg');
+    mask-position: center 10px;
+}
+
+.mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
+    mask: url('../../img/feather-icons/life-buoy.svg');
+    mask-position: center 10px;
+}
+
 .mx_TagPanel_groupsButton > .mx_AccessibleButton {
-    flex: auto;
-    margin-bottom: 17px;
-    margin-top: 18px;
+    margin-bottom: 12px;
     height: 40px;
     width: 40px;
     border-radius: 20px;
@@ -138,9 +151,7 @@ limitations under the License.
 
     &:before {
         background-color: $tagpanel-bg-color;
-        mask: url('../../img/feather-icons/users.svg');
         mask-repeat: no-repeat;
-        mask-position: center 10px;
         content: '';
         position: absolute;
         top: 0;

src/components/structures/TagPanel.js

@@ -23,6 +23,7 @@ import GroupActions from '../../actions/GroupActions';
 
 import sdk from '../../index';
 import dis from '../../dispatcher';
+import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
 
 import { Droppable } from 'react-beautiful-dnd';
@@ -47,6 +48,8 @@ const TagPanel = React.createClass({
         this.context.matrixClient.on("Group.myMembership", this._onGroupMyMembership);
         this.context.matrixClient.on("sync", this._onClientSync);
 
+        this._dispatcherRef = dis.register(this._onAction);
+
         this._tagOrderStoreToken = TagOrderStore.addListener(() => {
             if (this.unmounted) {
                 return;
@@ -67,6 +70,9 @@ const TagPanel = React.createClass({
         if (this._filterStoreToken) {
             this._filterStoreToken.remove();
         }
+        if (this._dispatcherRef) {
+            dis.unregister(this._dispatcherRef);
+        }
     },
 
     _onGroupMyMembership() {
@@ -100,13 +106,21 @@ const TagPanel = React.createClass({
         dis.dispatch({action: 'deselect_tags'});
     },
 
+    _onAction(payload) {
+        if (payload.action === "show_redesign_feedback_dialog") {
+            const RedesignFeedbackDialog =
+                sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
+            Modal.createDialog(RedesignFeedbackDialog);
+        }
+    },
+
     render() {
         const GroupsButton = sdk.getComponent('elements.GroupsButton');
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-
+        const ActionButton = sdk.getComponent("elements.ActionButton");
 
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
@@ -162,7 +176,10 @@ const TagPanel = React.createClass({
             </GeminiScrollbarWrapper>
             <div className="mx_TagPanel_divider" />
             <div className="mx_TagPanel_groupsButton">
-                <GroupsButton tooltip={true} />
+                <GroupsButton />
+                <ActionButton
+                    className="mx_TagPanel_report" action="show_redesign_feedback_dialog"
+                    label={_t("Report bugs & give feedback")} tooltip={true} />
             </div>
         </div>;
     },

src/components/views/dialogs/RedesignFeedbackDialog.js

@@ -0,0 +1,51 @@
+/*
+Copyright 2018 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 QuestionDialog from './QuestionDialog';
+import { _t } from '../../../languageHandler';
+
+export default (props) => {
+    const existingIssuesUrl = "https://github.com/vector-im/riot-web/issues" +
+        "?q=is%3Aopen+is%3Aissue+label%3Aredesign+sort%3Areactions-%2B1-desc";
+    const newIssueUrl = "https://github.com/vector-im/riot-web/issues/new" +
+        "?assignees=&labels=redesign&template=redesign_issue.md&title=";
+
+    const description1 =
+        _t("Thanks for testing the Riot Redesign. " +
+            "If you run into any bugs or visual issues, " +
+            "please let us know on GitHub.");
+    const description2 = _t("To help avoid duplicate issues, " +
+        "please <existingIssuesLink>view existing issues</existingIssuesLink> " +
+        "first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> " +
+        "if you can't find it.", {},
+        {
+            existingIssuesLink: (sub) => {
+                return <a target="_blank" rel="noreferrer noopener" href={existingIssuesUrl}>{ sub }</a>;
+            },
+            newIssueLink: (sub) => {
+                return <a target="_blank" rel="noreferrer noopener" href={newIssueUrl}>{ sub }</a>;
+            },
+        });
+
+    return (<QuestionDialog
+        hasCancelButton={false}
+        title={_t("Report bugs & give feedback")}
+        description={<div><p>{description1}</p><p>{description2}</p></div>}
+        button={_t("Go back")}
+        onFinished={props.onFinished}
+    />);
+};

src/components/views/elements/ActionButton.js

@@ -31,6 +31,7 @@ export default React.createClass({
         mouseOverAction: PropTypes.string,
         label: PropTypes.string.isRequired,
         iconPath: PropTypes.string,
+        className: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -76,8 +77,13 @@ export default React.createClass({
                 (<TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />) :
                 undefined;
 
+        const classNames = ["mx_RoleButton"];
+        if (this.props.className) {
+            classNames.push(this.props.className);
+        }
+
         return (
-            <AccessibleButton className="mx_RoleButton"
+            <AccessibleButton className={classNames.join(" ")}
                 onClick={this._onClick}
                 onMouseEnter={this._onMouseEnter}
                 onMouseLeave={this._onMouseLeave}

src/components/views/elements/GroupsButton.js

@@ -22,17 +22,16 @@ import { _t } from '../../../languageHandler';
 const GroupsButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
-        <ActionButton action="view_my_groups"
+        <ActionButton className="mx_GroupsButton" action="view_my_groups"
             label={_t("Communities")}
             size={props.size}
-            tooltip={props.tooltip}
+            tooltip={true}
         />
     );
 };
 
 GroupsButton.propTypes = {
     size: PropTypes.string,
-    tooltip: PropTypes.bool,
 };
 
 export default GroupsButton;

src/i18n/strings/en_EN.json

@@ -1348,5 +1348,9 @@
     "Import": "Import",
     "Failed to set direct chat tag": "Failed to set direct chat tag",
     "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
-    "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room"
+    "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room",
+    "Report bugs & give feedback": "Report bugs & give feedback",
+    "Thanks for testing the Riot Redesign. If you run into any bugs or visual issues, please let us know on GitHub.": "Thanks for testing the Riot Redesign. If you run into any bugs or visual issues, please let us know on GitHub.",
+    "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.": "To help avoid duplicate issues, please <existingIssuesLink>view existing issues</existingIssuesLink> first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> if you can't find it.",
+    "Go back": "Go back"
 }