From b826b0d9980a44eab73e22ac354067cf876e6211 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 19 Dec 2018 12:11:21 +0100 Subject: [PATCH 1/3] Add redesign feedback dialog + button in tag panel --- res/css/structures/_TagPanel.scss | 22 ++++++-- res/img/feather-icons/life-buoy.svg | 21 ++++++++ src/components/structures/TagPanel.js | 21 +++++++- .../views/dialogs/RedesignFeedbackDialog.js | 52 +++++++++++++++++++ src/components/views/elements/ActionButton.js | 8 ++- src/components/views/elements/GroupsButton.js | 5 +- src/i18n/strings/en_EN.json | 6 ++- 7 files changed, 123 insertions(+), 12 deletions(-) create mode 100644 res/img/feather-icons/life-buoy.svg create mode 100644 src/components/views/dialogs/RedesignFeedbackDialog.js diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index 1ffb017e28..361c8cdf60 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -124,10 +124,24 @@ 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 +152,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; diff --git a/res/img/feather-icons/life-buoy.svg b/res/img/feather-icons/life-buoy.svg new file mode 100644 index 0000000000..3ba383fa9a --- /dev/null +++ b/res/img/feather-icons/life-buoy.svg @@ -0,0 +1,21 @@ + + + + life-buoy + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js index f23ac698ba..7e77a64e62 100644 --- a/src/components/structures/TagPanel.js +++ b/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
- + +
; }, diff --git a/src/components/views/dialogs/RedesignFeedbackDialog.js b/src/components/views/dialogs/RedesignFeedbackDialog.js new file mode 100644 index 0000000000..29ee233522 --- /dev/null +++ b/src/components/views/dialogs/RedesignFeedbackDialog.js @@ -0,0 +1,52 @@ +/* +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 view existing issues " + + "first (and add a +1) or create a new issue " + + "if you can't find it.", {}, + { + existingIssuesLink: (sub) => { + return { sub }; + }, + newIssueLink: (sub) => { + return { sub }; + }, + }); + + return (

{description1}

{description2}

} + button={_t("Go back")} + onFinished={props.onFinished} + />); +}; diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.js index a9d95e4a52..1ca5ab9983 100644 --- a/src/components/views/elements/ActionButton.js +++ b/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({ () : undefined; + const classNames = ["mx_RoleButton"]; + if (this.props.className) { + classNames.push(this.props.className); + } + return ( - ); }; GroupsButton.propTypes = { size: PropTypes.string, - tooltip: PropTypes.bool, }; export default GroupsButton; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c137253a43..14e5c14529 100644 --- a/src/i18n/strings/en_EN.json +++ b/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 view existing issues first (and add a +1) or create a new issue if you can't find it.": "To help avoid duplicate issues, please view existing issues first (and add a +1) or create a new issue if you can't find it.", + "Go back": "Go back" } From b3a12867a67b475e1cb1de6d1f098da5f8f73ecd Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 19 Dec 2018 12:56:08 +0100 Subject: [PATCH 2/3] remove extra blank lines --- res/css/structures/_TagPanel.scss | 1 - src/components/views/dialogs/RedesignFeedbackDialog.js | 1 - 2 files changed, 2 deletions(-) diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index 361c8cdf60..1275c9c60e 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -129,7 +129,6 @@ limitations under the License. margin: 17px 0 3px 0; } - .mx_TagPanel_groupsButton > .mx_GroupsButton:before { mask: url('../../img/feather-icons/users.svg'); mask-position: center 10px; diff --git a/src/components/views/dialogs/RedesignFeedbackDialog.js b/src/components/views/dialogs/RedesignFeedbackDialog.js index 29ee233522..c428aca16a 100644 --- a/src/components/views/dialogs/RedesignFeedbackDialog.js +++ b/src/components/views/dialogs/RedesignFeedbackDialog.js @@ -19,7 +19,6 @@ 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" + From f7ed1ff046894841b23c777295de2207cced1f47 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 19 Dec 2018 12:59:03 +0100 Subject: [PATCH 3/3] avoid buttons being deformed in collapsed state unsure what this was doing before, I suspect the BottomLeftMenu which is gone now. --- res/css/structures/_LeftPanel.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 1fe7a42678..47cb231b58 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/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; }