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

Extend context menu alignment without chevrons 

For context menus without chevrons, this changes the menu components to still
set default styles that align the menu based on the edges used to specify the
menu's position. This is not intended to change the positioning of any existing
menus.
pull/21833/head
J. Ryan Stinnett 2019-06-10 16:07:23 +01:00
parent 41cbfe0d27
commit 3126880345
2 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
res/css/structures/_ContextualMenu.scss
View File

@ -39,7 +39,11 @@ limitations under the License.
z-index: 5001;
}
.mx_ContextualMenu.mx_ContextualMenu_right {
.mx_ContextualMenu_right {
right: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
right: 8px;
}
@ -66,7 +70,11 @@ limitations under the License.
right: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_left {
.mx_ContextualMenu_left {
left: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
left: 8px;
}
@ -93,7 +101,11 @@ limitations under the License.
left: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_top {
.mx_ContextualMenu_top {
top: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
top: 8px;
}
@ -120,7 +132,11 @@ limitations under the License.
top: 1px;
}
.mx_ContextualMenu.mx_ContextualMenu_bottom {
.mx_ContextualMenu_bottom {
bottom: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
bottom: 8px;
}

13
src/components/structures/ContextualMenu.js
View File

@ -183,11 +183,14 @@ export default class ContextualMenu extends React.Component {
const menuClasses = classNames({
'mx_ContextualMenu': true,
'mx_ContextualMenu_noChevron': chevronFace === 'none',
'mx_ContextualMenu_left': chevronFace === 'left',
'mx_ContextualMenu_right': chevronFace === 'right',
'mx_ContextualMenu_top': chevronFace === 'top',
'mx_ContextualMenu_bottom': chevronFace === 'bottom',
'mx_ContextualMenu_left': !hasChevron && position.left,
'mx_ContextualMenu_right': !hasChevron && position.right,
'mx_ContextualMenu_top': !hasChevron && position.top,
'mx_ContextualMenu_bottom': !hasChevron && position.bottom,
'mx_ContextualMenu_withChevron_left': chevronFace === 'left',
'mx_ContextualMenu_withChevron_right': chevronFace === 'right',
'mx_ContextualMenu_withChevron_top': chevronFace === 'top',
'mx_ContextualMenu_withChevron_bottom': chevronFace === 'bottom',
});
const menuStyle = {};