Skip to content

Commit 3a80841

Browse files
lukebarnard1lukebarnard1
authored
Merge pull request element-hq#6127 from vector-im/luke/feature-tag-panel-tile-context-menu
Add context menu to TagPanel
2 parents e671472 + 11b0cc8 commit 3a80841

5 files changed

Lines changed: 142 additions & 10 deletions

File tree

‎src/components/views/context_menus/TagTileContextMenu.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
Copyright 2018 New Vector Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
import PropTypes from 'prop-types';
19+
import { _t } from 'matrix-react-sdk/lib/languageHandler';
20+
import dis from 'matrix-react-sdk/lib/dispatcher';
21+
import TagOrderActions from 'matrix-react-sdk/lib/actions/TagOrderActions';
22+
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
23+
24+
export default class TagTileContextMenu extends React.Component {
25+
static propTypes = {
26+
tag: PropTypes.string.isRequired,
27+
/* callback called when the menu is dismissed */
28+
onFinished: PropTypes.func.isRequired,
29+
};
30+
31+
constructor() {
32+
super();
33+
34+
this._onViewCommunityClick = this._onViewCommunityClick.bind(this);
35+
this._onRemoveClick = this._onRemoveClick.bind(this);
36+
}
37+
38+
_onViewCommunityClick() {
39+
dis.dispatch({
40+
action: 'view_group',
41+
group_id: this.props.tag,
42+
});
43+
this.props.onFinished();
44+
}
45+
46+
_onRemoveClick() {
47+
dis.dispatch(TagOrderActions.removeTag(
48+
// XXX: Context menus don't have a MatrixClient context
49+
MatrixClientPeg.get(),
50+
this.props.tag,
51+
));
52+
this.props.onFinished();
53+
}
54+
55+
render() {
56+
return <div>
57+
<div className="mx_TagTileContextMenu_item" onClick={this._onViewCommunityClick} >
58+
<img className="mx_TagTileContextMenu_item_icon" src="img/icons-groups.svg" width="15" height="15" />
59+
{ _t('View Community') }
60+
</div>
61+
<hr className="mx_TagTileContextMenu_separator" />
62+
<div className="mx_TagTileContextMenu_item" onClick={this._onRemoveClick} >
63+
<img className="mx_TagTileContextMenu_item_icon" src="img/icon_context_delete.svg" width="15" height="15" />
64+
{ _t('Remove') }
65+
</div>
66+
</div>;
67+
}
68+
}

‎src/i18n/strings/en_EN.json‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,6 @@
4343
"Off": "Off",
4444
"On": "On",
4545
"Noisy": "Noisy",
46-
"Failed to set direct chat tag": "Failed to set direct chat tag",
47-
"Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
48-
"Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room",
4946
"Search…": "Search…",
5047
"Search": "Search",
5148
"This Room": "This Room",
@@ -68,8 +65,6 @@
6865
"What's New": "What's New",
6966
"Update": "Update",
7067
"What's new?": "What's new?",
71-
"Appear Offline": "Appear Offline",
72-
"Away": "Away",
7368
"A new version of Riot is available.": "A new version of Riot is available.",
7469
"To return to your account in future you need to <u>set a password</u>": "To return to your account in future you need to <u>set a password</u>",
7570
"Set Password": "Set Password",
@@ -126,6 +121,7 @@
126121
"Resend": "Resend",
127122
"Cancel Sending": "Cancel Sending",
128123
"Forward Message": "Forward Message",
124+
"Reply": "Reply",
129125
"Unpin Message": "Unpin Message",
130126
"Pin Message": "Pin Message",
131127
"View Source": "View Source",
@@ -134,6 +130,10 @@
134130
"Permalink": "Permalink",
135131
"Quote": "Quote",
136132
"Source URL": "Source URL",
133+
"Online": "Online",
134+
"Away": "Away",
135+
"Appear Offline": "Appear Offline",
136+
"Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
137137
"Failed to set Direct Message status of room": "Failed to set Direct Message status of room",
138138
"unknown error code": "unknown error code",
139139
"Failed to forget room %(errCode)s": "Failed to forget room %(errCode)s",
@@ -147,6 +147,7 @@
147147
"Favourite": "Favourite",
148148
"Low Priority": "Low Priority",
149149
"Direct Chat": "Direct Chat",
150+
"View Community": "View Community",
150151
"Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
151152
"Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",
152153
"Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.",
@@ -156,10 +157,10 @@
156157
"Couldn't load home page": "Couldn't load home page",
157158
"Login": "Login",
158159
"Register": "Register",
159-
"Invite to this room": "Invite to this room",
160160
"Members": "Members",
161161
"%(count)s Members|other": "%(count)s Members",
162162
"%(count)s Members|one": "%(count)s Member",
163+
"Invite to this room": "Invite to this room",
163164
"Files": "Files",
164165
"Notifications": "Notifications",
165166
"Rooms": "Rooms",
@@ -189,6 +190,7 @@
189190
"Search for a room": "Search for a room",
190191
"#example": "#example",
191192
"more": "more",
193+
"Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room",
192194
"Expand panel": "Expand panel",
193195
"Collapse panel": "Collapse panel",
194196
"Filter room names": "Filter room names",
@@ -219,6 +221,5 @@
219221
"Contributing code to Matrix and Riot": "Contributing code to Matrix and Riot",
220222
"Dev chat for the Riot/Web dev team": "Dev chat for the Riot/Web dev team",
221223
"Dev chat for the Dendrite dev team": "Dev chat for the Dendrite dev team",
222-
"Co-ordination for Riot/Web translators": "Co-ordination for Riot/Web translators",
223-
"Reply": "Reply"
224+
"Co-ordination for Riot/Web translators": "Co-ordination for Riot/Web translators"
224225
}

‎src/skins/vector/css/_components.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@
3636
@import "./matrix-react-sdk/views/elements/_EditableItemList.scss";
3737
@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
3838
@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
39+
@import "./matrix-react-sdk/views/elements/_Quote.scss";
3940
@import "./matrix-react-sdk/views/elements/_RichText.scss";
4041
@import "./matrix-react-sdk/views/elements/_RoleButton.scss";
4142
@import "./matrix-react-sdk/views/elements/_ToolTipButton.scss";
42-
@import "./matrix-react-sdk/views/elements/_Quote.scss";
4343
@import "./matrix-react-sdk/views/groups/_GroupPublicityToggle.scss";
4444
@import "./matrix-react-sdk/views/groups/_GroupRoomList.scss";
4545
@import "./matrix-react-sdk/views/groups/_GroupUserSettings.scss";
@@ -65,14 +65,14 @@
6565
@import "./matrix-react-sdk/views/rooms/_PinnedEventTile.scss";
6666
@import "./matrix-react-sdk/views/rooms/_PinnedEventsPanel.scss";
6767
@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
68+
@import "./matrix-react-sdk/views/rooms/_QuotePreview.scss";
6869
@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
6970
@import "./matrix-react-sdk/views/rooms/_RoomList.scss";
7071
@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss";
7172
@import "./matrix-react-sdk/views/rooms/_RoomSettings.scss";
7273
@import "./matrix-react-sdk/views/rooms/_RoomTile.scss";
7374
@import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
7475
@import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
75-
@import "./matrix-react-sdk/views/rooms/_QuotePreview.scss";
7676
@import "./matrix-react-sdk/views/settings/_DevicesPanel.scss";
7777
@import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss";
7878
@import "./matrix-react-sdk/views/voip/_CallView.scss";
@@ -89,6 +89,7 @@
8989
@import "./vector-web/views/context_menus/_MessageContextMenu.scss";
9090
@import "./vector-web/views/context_menus/_PresenceContextMenuOption.scss";
9191
@import "./vector-web/views/context_menus/_RoomTileContextMenu.scss";
92+
@import "./vector-web/views/context_menus/_TagTileContextMenu.scss";
9293
@import "./vector-web/views/dialogs/_ChangelogDialog.scss";
9394
@import "./vector-web/views/dialogs/_DevtoolsDialog.scss";
9495
@import "./vector-web/views/dialogs/_SetEmailDialog.scss";

‎src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ limitations under the License.
3737
.mx_TagPanel .mx_TagTile {
3838
padding: 6px 3px;
3939
opacity: 0.5;
40+
position: relative;
4041
}
4142
.mx_TagPanel .mx_TagTile:focus,
4243
.mx_TagPanel .mx_TagTile:hover,
@@ -64,6 +65,23 @@ limitations under the License.
6465
left: 5px;
6566
}
6667

68+
.mx_TagTile_context_button {
69+
min-width: 15px;
70+
height: 15px;
71+
position: absolute;
72+
right: -5px;
73+
top: 1px;
74+
border-radius: 8px;
75+
background-color: $neutral-badge-color;
76+
color: #ffffff;
77+
font-weight: 600;
78+
font-size: 10px;
79+
text-align: center;
80+
padding-top: 1px;
81+
padding-left: 4px;
82+
padding-right: 4px;
83+
}
84+
6785
.mx_TagPanel_createGroupButton {
6886
opacity: 0.5;
6987
margin-bottom: 17px;

‎src/skins/vector/css/vector-web/views/context_menus/_TagTileContextMenu.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
Copyright 2018 New Vector Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_TagTileContextMenu_item {
18+
padding-top: 8px;
19+
padding-right: 20px;
20+
padding-bottom: 8px;
21+
cursor: pointer;
22+
white-space: nowrap;
23+
display: flex;
24+
align-items: center;
25+
line-height: 16px;
26+
}
27+
28+
29+
.mx_TagTileContextMenu_item_icon {
30+
padding-right: 8px;
31+
padding-left: 4px;
32+
display: inline-block
33+
}
34+
35+
.mx_TagTileContextMenu_separator {
36+
margin-top: 0;
37+
margin-bottom: 0;
38+
border-bottom-style: none;
39+
border-left-style: none;
40+
border-right-style: none;
41+
border-top-style: solid;
42+
border-top-width: 1px;
43+
border-color: $menu-border-color;
44+
}

0 commit comments

Comments
 (0)