OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix RoomTile2 Context Menu to match Figma 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
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 { .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'); mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
} }
@ -133,9 +132,10 @@ limitations under the License.
} }
.mx_RoomTile2_menuButton { .mx_RoomTile2_menuButton {
width: 18px; width: 16px;
height: 32px; height: 16px;
visibility: visible; visibility: visible;
margin: auto 0;
} }
} }
} }

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

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