Iterate PR based on Figma design and feedback

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-01 13:59:50 +01:00
parent 508dea1c89
commit b5014282a4
4 changed files with 11 additions and 3 deletions

View file

@ -631,6 +631,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}
.mx_AccessibleButton {
// pad the inside of the button so that the hover background is padded too
padding-top: 12px;
padding-bottom: 12px;
text-decoration: none;

View file

@ -92,6 +92,7 @@ limitations under the License.
justify-content: center;
}
// The context menu buttons are hidden by default
.mx_RoomTile2_menuButton,
.mx_RoomTile2_notificationsButton {
width: 20px;
@ -114,6 +115,7 @@ limitations under the License.
}
}
// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
display: block;
}
@ -166,6 +168,9 @@ limitations under the License.
.mx_RoomTile2_iconBellCrossed::before {
mask-image: url('$(res)/img/feather-customised/bell-crossed.svg');
}
.mx_RoomTile2_iconBellMentions::before {
mask-image: url('$(res)/img/feather-customised/bell-mentions.custom.svg');
}
.mx_RoomTile2_iconCheck::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}

View file

@ -202,6 +202,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
return (
<ContextMenu
chevronFace="none"
// -20 to overlap the context menu by just over the width of the `...` icon and make it look connected
left={elementRect.width + elementRect.left - 20}
top={elementRect.top + elementRect.height}
onFinished={this.onCloseMenu}

View file

@ -70,7 +70,7 @@ interface IState {
const contextMenuBelow = (elementRect) => {
const left = elementRect.left + window.pageXOffset - 6;
let top = elementRect.bottom + window.pageYOffset + 21;
let top = elementRect.bottom + window.pageYOffset + 17;
const chevronFace = "none";
return {left, top, chevronFace};
};
@ -209,10 +209,11 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
if (MatrixClientPeg.get().isGuest()) return;
try {
// TODO add local echo
// TODO add local echo - https://github.com/vector-im/riot-web/issues/14280
await setRoomNotifsState(this.props.room.roomId, newState);
} catch (error) {
// TODO: some form of error notification to the user to inform them that their state change failed.
// https://github.com/vector-im/riot-web/issues/14281
console.error(error);
}
@ -254,7 +255,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
<NotifOption
label={_t("Mentions & Keywords")}
active={state === MENTIONS_ONLY}
iconClassName=""
iconClassName="mx_RoomTile2_iconBellMentions"
onClick={this.onClickMentions}
/>
<NotifOption