PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix RoomTile2 Context Menu to match Figma

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-06-29 23:02:10 +01:00
parent bb9ae7b55b
commit adf186f568
2 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
res/css/views/rooms/_RoomTile2.scss
View file

@ -118,8 +118,7 @@ limitations under the License.
}
.mx_RoomTile2_menuButton::before {
top: 8px;
left: -1px; // this is off-center to align it with the badges
left: 1px; // this is off-center to align it with the badges
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
}
@ -133,9 +132,10 @@ limitations under the License.
}
.mx_RoomTile2_menuButton {
width: 18px;
height: 32px;
width: 16px;
height: 16px;
visibility: visible;
margin: auto 0;
}
}
}

24
src/components/views/rooms/RoomTile2.tsx
View file

@ -64,8 +64,14 @@ interface IState {
generalMenuDisplayed: boolean;
}
export const contextMenuBelow = (elementRect) => {
const left = elementRect.left + window.pageXOffset - 6;
let top = elementRect.bottom + window.pageYOffset + 21;
const chevronFace = "none";
return {left, top, chevronFace};
};
export default class RoomTile2 extends React.Component<IProps, IState> {
private roomTileRef: React.RefObject<HTMLDivElement> = createRef();
private generalMenuButtonRef: React.RefObject<HTMLButtonElement> = createRef();
// TODO: a11y: https://github.com/vector-im/riot-web/issues/14180
@ -159,18 +165,10 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
let contextMenu = null;
if (this.state.generalMenuDisplayed) {
// The context menu appears within the list, so use the room tile as a reference point
const elementRect = this.roomTileRef.current.getBoundingClientRect();
const elementRect = this.generalMenuButtonRef.current.getBoundingClientRect();
contextMenu = (
<ContextMenu
chevronFace="none"
left={elementRect.left}
top={elementRect.top + elementRect.height + 8}
onFinished={this.onCloseGeneralMenu}
>
<div
className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile2_contextMenu"
style={{width: elementRect.width}}
>
<ContextMenu {...contextMenuBelow(elementRect)} onFinished={this.onCloseGeneralMenu}>
<div className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile2_contextMenu">
<div className="mx_IconizedContextMenu_optionList">
<ul>
<li>
@ -280,7 +278,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
const avatarSize = 32;
return (
<React.Fragment>
<RovingTabIndexWrapper inputRef={this.roomTileRef}>
<RovingTabIndexWrapper>
{({onFocus, isActive, ref}) =>
<AccessibleButton
onFocus={onFocus}