Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xxadev
vscode
提交
f290a312
V
vscode
项目概览
xxadev
/
vscode
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vscode
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f290a312
编写于
7月 31, 2020
作者:
S
SteVen Batten
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
polish menu layouting
fixes #103078 fixes #100851
上级
262ab802
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
49 addition
and
19 deletion
+49
-19
src/vs/base/browser/ui/menu/menu.ts
src/vs/base/browser/ui/menu/menu.ts
+49
-19
未找到文件。
src/vs/base/browser/ui/menu/menu.ts
浏览文件 @
f290a312
...
...
@@ -8,7 +8,7 @@ import * as strings from 'vs/base/common/strings';
import
{
IActionRunner
,
IAction
,
SubmenuAction
,
Separator
,
IActionViewItemProvider
}
from
'
vs/base/common/actions
'
;
import
{
ActionBar
,
ActionsOrientation
}
from
'
vs/base/browser/ui/actionbar/actionbar
'
;
import
{
ResolvedKeybinding
,
KeyCode
}
from
'
vs/base/common/keyCodes
'
;
import
{
addClass
,
EventType
,
EventHelper
,
EventLike
,
removeTabIndexAndUpdateFocus
,
isAncestor
,
hasClass
,
addDisposableListener
,
removeClass
,
append
,
$
,
addClasses
,
removeClasses
,
clearNode
,
createStyleSheet
,
isInShadowDOM
,
getActiveElement
}
from
'
vs/base/browser/dom
'
;
import
{
addClass
,
EventType
,
EventHelper
,
EventLike
,
removeTabIndexAndUpdateFocus
,
isAncestor
,
hasClass
,
addDisposableListener
,
removeClass
,
append
,
$
,
addClasses
,
removeClasses
,
clearNode
,
createStyleSheet
,
isInShadowDOM
,
getActiveElement
,
Dimension
,
IDomNodePagePosition
}
from
'
vs/base/browser/dom
'
;
import
{
StandardKeyboardEvent
}
from
'
vs/base/browser/keyboardEvent
'
;
import
{
RunOnceScheduler
}
from
'
vs/base/common/async
'
;
import
{
DisposableStore
}
from
'
vs/base/common/lifecycle
'
;
...
...
@@ -16,7 +16,7 @@ import { Color } from 'vs/base/common/color';
import
{
DomScrollableElement
}
from
'
vs/base/browser/ui/scrollbar/scrollableElement
'
;
import
{
ScrollbarVisibility
,
ScrollEvent
}
from
'
vs/base/common/scrollable
'
;
import
{
Event
}
from
'
vs/base/common/event
'
;
import
{
AnchorAlignment
}
from
'
vs/base/browser/ui/contextview/contextview
'
;
import
{
AnchorAlignment
,
layout
,
LayoutAnchorPosition
}
from
'
vs/base/browser/ui/contextview/contextview
'
;
import
{
isLinux
,
isMacintosh
}
from
'
vs/base/common/platform
'
;
import
{
Codicon
,
registerIcon
,
stripCodicons
}
from
'
vs/base/common/codicons
'
;
import
{
BaseActionViewItem
,
ActionViewItem
,
IActionViewItemOptions
}
from
'
vs/base/browser/ui/actionbar/actionViewItems
'
;
...
...
@@ -769,6 +769,33 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
}
}
private
calculateSubmenuMenuLayout
(
windowDimensions
:
Dimension
,
submenu
:
Dimension
,
entry
:
IDomNodePagePosition
,
expandDirection
:
Direction
):
{
top
:
number
,
left
:
number
}
{
const
ret
=
{
top
:
0
,
left
:
0
};
// Start with horizontal
ret
.
left
=
layout
(
windowDimensions
.
width
,
submenu
.
width
,
{
position
:
this
.
expandDirection
===
Direction
.
Right
?
LayoutAnchorPosition
.
Before
:
LayoutAnchorPosition
.
After
,
offset
:
entry
.
left
,
size
:
entry
.
width
});
// We don't have enough room to layout the menu fully, so we are overlapping the menu
if
(
ret
.
left
>=
entry
.
left
&&
ret
.
left
<
entry
.
left
+
entry
.
width
)
{
if
(
entry
.
left
+
10
+
submenu
.
width
<=
windowDimensions
.
width
)
{
ret
.
left
=
entry
.
left
+
10
;
}
entry
.
top
+=
10
;
entry
.
height
=
0
;
}
// Now that we have a horizontal position, try layout vertically
ret
.
top
=
layout
(
windowDimensions
.
height
,
submenu
.
height
,
{
position
:
LayoutAnchorPosition
.
Before
,
offset
:
entry
.
top
,
size
:
0
});
// We didn't have enough room below, but we did above, so we shift down to align the menu
if
(
ret
.
top
+
submenu
.
height
===
entry
.
top
&&
ret
.
top
+
entry
.
height
+
submenu
.
height
<=
windowDimensions
.
height
)
{
ret
.
top
+=
entry
.
height
;
}
return
ret
;
}
private
createSubmenu
(
selectFirstItem
=
true
):
void
{
if
(
!
this
.
element
)
{
return
;
...
...
@@ -776,14 +803,14 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
if
(
!
this
.
parentData
.
submenu
)
{
this
.
updateAriaExpanded
(
'
true
'
);
this
.
submenuContainer
=
append
(
this
.
element
,
$
(
'
div.monaco-submenu
'
)
);
this
.
submenuContainer
=
document
.
createElement
(
'
div.monaco-submenu
'
);
addClasses
(
this
.
submenuContainer
,
'
menubar-menu-items-holder
'
,
'
context-view
'
);
// Set the top value of the menu container before construction
// This allows the menu constructor to calculate the proper max height
const
computedStyles
=
getComputedStyle
(
this
.
parentData
.
parent
.
domNode
);
const
paddingTop
=
parseFloat
(
computedStyles
.
paddingTop
||
'
0
'
)
||
0
;
this
.
submenuContainer
.
style
.
top
=
`
${
this
.
element
.
offsetTop
-
this
.
parentData
.
parent
.
scrollOffset
-
paddingTop
}
px`
;
//
this.submenuContainer.style.top = `${this.element.offsetTop - this.parentData.parent.scrollOffset - paddingTop}px`;
this
.
submenuContainer
.
style
.
zIndex
=
'
1
'
;
this
.
parentData
.
submenu
=
new
Menu
(
this
.
submenuContainer
,
this
.
submenuActions
,
this
.
submenuOptions
);
...
...
@@ -791,22 +818,25 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
this
.
parentData
.
submenu
.
style
(
this
.
menuStyle
);
}
const
boundingRect
=
this
.
element
.
getBoundingClientRect
();
const
childBoundingRect
=
this
.
submenuContainer
.
getBoundingClientRect
();
this
.
element
.
appendChild
(
this
.
submenuContainer
);
if
(
this
.
expandDirection
===
Direction
.
Right
)
{
if
(
window
.
innerWidth
<=
boundingRect
.
right
+
childBoundingRect
.
width
)
{
this
.
submenuContainer
.
style
.
left
=
'
10px
'
;
this
.
submenuContainer
.
style
.
top
=
`
${
this
.
element
.
offsetTop
-
this
.
parentData
.
parent
.
scrollOffset
+
boundingRect
.
height
}
px`
;
}
else
{
this
.
submenuContainer
.
style
.
left
=
`
${
this
.
element
.
offsetWidth
}
px`
;
this
.
submenuContainer
.
style
.
top
=
`
${
this
.
element
.
offsetTop
-
this
.
parentData
.
parent
.
scrollOffset
-
paddingTop
}
px`
;
}
}
else
if
(
this
.
expandDirection
===
Direction
.
Left
)
{
this
.
submenuContainer
.
style
.
right
=
`
${
this
.
element
.
offsetWidth
}
px`
;
this
.
submenuContainer
.
style
.
left
=
'
auto
'
;
this
.
submenuContainer
.
style
.
top
=
`
${
this
.
element
.
offsetTop
-
this
.
parentData
.
parent
.
scrollOffset
-
paddingTop
}
px`
;
}
// layout submenu
const
entryBox
=
this
.
element
.
getBoundingClientRect
();
const
entryBoxUpdated
=
{
top
:
entryBox
.
top
-
paddingTop
,
left
:
entryBox
.
left
,
height
:
entryBox
.
height
+
2
*
paddingTop
,
width
:
entryBox
.
width
};
const
viewBox
=
this
.
submenuContainer
.
getBoundingClientRect
();
this
.
submenuContainer
.
style
.
position
=
'
fixed
'
;
const
{
top
,
left
}
=
this
.
calculateSubmenuMenuLayout
({
height
:
window
.
innerHeight
,
width
:
window
.
innerWidth
},
viewBox
,
entryBoxUpdated
,
this
.
expandDirection
);
this
.
submenuContainer
.
style
.
left
=
`
${
left
}
px`
;
this
.
submenuContainer
.
style
.
top
=
`
${
top
}
px`
;
this
.
submenuDisposables
.
add
(
addDisposableListener
(
this
.
submenuContainer
,
EventType
.
KEY_UP
,
e
=>
{
let
event
=
new
StandardKeyboardEvent
(
e
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录