mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-04 10:11:03 +01:00
Code Issues Projects Releases Wiki Activity

Iterate PR based on Figma design and feedback

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
res/css/_common.scss
View File

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

5
res/css/views/rooms/_RoomTile2.scss
View File

@ -92,6 +92,7 @@ limitations under the License.
justify-content: center; justify-content: center;
} }
// The context menu buttons are hidden by default
.mx_RoomTile2_menuButton, .mx_RoomTile2_menuButton,
.mx_RoomTile2_notificationsButton { .mx_RoomTile2_notificationsButton {
width: 20px; 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 { .mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
display: block; display: block;
} }
@ -166,6 +168,9 @@ limitations under the License.
.mx_RoomTile2_iconBellCrossed::before { .mx_RoomTile2_iconBellCrossed::before {
mask-image: url('$(res)/img/feather-customised/bell-crossed.svg'); 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 { .mx_RoomTile2_iconCheck::before {
mask-image: url('$(res)/img/feather-customised/check.svg'); mask-image: url('$(res)/img/feather-customised/check.svg');
} }

1
src/components/structures/UserMenu.tsx
View File

@ -202,6 +202,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
return ( return (
<ContextMenu <ContextMenu
chevronFace="none" 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} left={elementRect.width + elementRect.left - 20}
top={elementRect.top + elementRect.height} top={elementRect.top + elementRect.height}
onFinished={this.onCloseMenu} onFinished={this.onCloseMenu}

7
src/components/views/rooms/RoomTile2.tsx
View File

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