@@ -184,14 +178,9 @@ export default createReactClass({
);
}
+ const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
return
-
+
- { tip }
{ contextButton }
{ badgeElement }
-
+
{ contextMenu }
;
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
create a new issue on GitHub so that we can investigate this bug.": "Please
create a new issue 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",
From d9ea9b4ad3c1b59e1872e8123974b839ce6a04fd Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 19 Dec 2019 20:53:34 +0000
Subject: [PATCH 3/6] Iterate to match design on Zeplin
---
res/css/structures/_CustomRoomTagPanel.scss | 16 +++++++--
res/css/structures/_TagPanel.scss | 4 +--
.../structures/CustomRoomTagPanel.js | 33 ++++---------------
src/components/structures/TagPanel.js | 10 ++++--
.../views/context_menus/TopLeftMenu.js | 1 +
5 files changed, 30 insertions(+), 34 deletions(-)
diff --git a/res/css/structures/_CustomRoomTagPanel.scss b/res/css/structures/_CustomRoomTagPanel.scss
index 45961d7be1..278c7c3d0c 100644
--- a/res/css/structures/_CustomRoomTagPanel.scss
+++ b/res/css/structures/_CustomRoomTagPanel.scss
@@ -26,11 +26,15 @@ 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;
width: 40px;
+ position: relative;
}
.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
@@ -39,7 +43,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: -8px; // (56 - 40)/2
}
diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 307925335f..e2eda433ba 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -87,7 +87,7 @@ limitations under the License.
height: 40px;
width: 40px;
border-radius: 20px;
- background-color: $button-primary-fg-color;
+ background-color: $tagpanel-button-color;
opacity: 0.11;
position: relative;
/* overwrite mx_RoleButton inline-block */
@@ -96,7 +96,7 @@ limitations under the License.
&::before {
mask-image: url('$(res)/img/feather-customised/plus.svg');
mask-position: center;
- background-color: $tagpanel-bg-color;
+ background-color: $button-primary-fg-color;
mask-repeat: no-repeat;
content: '';
position: absolute;
diff --git a/src/components/structures/CustomRoomTagPanel.js b/src/components/structures/CustomRoomTagPanel.js
index ee69d800ed..f1b548d72f 100644
--- a/src/components/structures/CustomRoomTagPanel.js
+++ b/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,12 +85,9 @@ class CustomRoomTagTile extends React.Component {
badgeElement = (
{FormattingUtils.formatCount(badge.count)}
);
}
- const tip = (this.state.hover ?
-
:
-
);
return (
-
-
+
+
{ badgeElement }
- { tip }
-
+
);
}
}
diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index 6410af174e..0e05dbd785 100644
--- a/src/components/structures/TagPanel.js
+++ b/src/components/structures/TagPanel.js
@@ -104,7 +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 ActionButton = sdk.getComponent('elements.ActionButton');
const TintableSvg = sdk.getComponent('elements.TintableSvg');
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
@@ -155,7 +155,13 @@ const TagPanel = createReactClass({
ref={provided.innerRef}
>
{ tags }
-
+
{ provided.placeholder }