Iterate to match design on Zeplin

This commit is contained in:
Michael Telatynski 2019-12-19 20:53:34 +00:00
parent b2249d0561
commit d9ea9b4ad3
5 changed files with 30 additions and 34 deletions
res/css/structures
src/components

View file

@ -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
}

View file

@ -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;

View file

@ -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 = (<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}
@ -115,9 +95,8 @@ class CustomRoomTagTile extends React.Component {
height={avatarHeight}
/>
{ badgeElement }
{ tip }
</div>
</AccessibleButton>
</AccessibleTooltipButton>
);
}
}

View file

@ -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 }
<div><AccessibleTooltipButton title={_t("Communities")} className="mx_TagTile mx_TagTile_plus" /></div>
<div>
<ActionButton
tooltip
label={_t("Communities")}
action="toggle_my_groups"
className="mx_TagTile mx_TagTile_plus" />
</div>
{ provided.placeholder }
</div>
) }

View file

@ -129,6 +129,7 @@ export class TopLeftMenu extends React.Component {
}
openHelp() {
this.closeMenu();
const RedesignFeedbackDialog = sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
}