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

Extend context menu alignment without chevrons

Browse source 
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.
This commit is contained in:
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 = {};