Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xxadev
vscode
提交
de1fbc1c
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,发现更多精彩内容 >>
提交
de1fbc1c
编写于
5月 23, 2018
作者:
R
Rob Lourens
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Settings editor - keyboard access, theming
上级
00c76eeb
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
77 addition
and
25 deletion
+77
-25
src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
...bench/parts/preferences/browser/media/settingsEditor2.css
+16
-1
src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
...vs/workbench/parts/preferences/browser/settingsEditor2.ts
+33
-4
src/vs/workbench/parts/preferences/browser/settingsTree.ts
src/vs/workbench/parts/preferences/browser/settingsTree.ts
+28
-20
未找到文件。
src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
浏览文件 @
de1fbc1c
...
...
@@ -114,6 +114,20 @@
min-height
:
75px
;
}
.settings-editor
>
.settings-body
>
.settings-tree-container
.monaco-tree-row
.content
::before
{
content
:
' '
;
display
:
inline-block
;
position
:
absolute
;
width
:
10px
;
left
:
-14px
;
top
:
2px
;
bottom
:
10px
;
}
.settings-editor
>
.settings-body
>
.settings-tree-container
.monaco-tree
.monaco-tree-row
{
background-color
:
initial
!important
;
}
.settings-editor
>
.settings-body
>
.settings-tree-container
.setting-item.odd
:not
(
.focused
)
:not
(
.selected
)
:not
(
:hover
),
.settings-editor
>
.settings-body
>
.settings-tree-container
.monaco-tree
:not
(
:focus
)
.setting-item.focused.odd
:not
(
.selected
)
:not
(
:hover
),
.settings-editor
>
.settings-body
>
.settings-tree-container
.monaco-tree
:not
(
.focused
)
.setting-item.focused.odd
:not
(
.selected
)
:not
(
:hover
)
{
...
...
@@ -169,6 +183,7 @@
.settings-editor
>
.settings-body
>
.settings-tree-container
.setting-measure-container.monaco-tree-row
{
padding-left
:
15px
;
opacity
:
0
;
}
.settings-editor
>
.settings-body
>
.settings-tree-container
.setting-item.is-expanded
.setting-item-description
,
...
...
@@ -229,7 +244,7 @@
.settings-editor
>
.settings-body
>
.settings-tree-container
.setting-item
.expand-indicator
{
visibility
:
hidden
;
position
:
absolute
;
bottom
:
-
1
px
;
bottom
:
-
2
px
;
width
:
calc
(
100%
-
190px
);
text-align
:
center
;
opacity
:
.5
;
...
...
src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
浏览文件 @
de1fbc1c
...
...
@@ -19,8 +19,8 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import
{
WorkbenchTree
}
from
'
vs/platform/list/browser/listService
'
;
import
{
ILogService
}
from
'
vs/platform/log/common/log
'
;
import
{
ITelemetryService
}
from
'
vs/platform/telemetry/common/telemetry
'
;
import
{
attachButtonStyler
}
from
'
vs/platform/theme/common/styler
'
;
import
{
I
ThemeService
}
from
'
vs/platform/theme/common/themeService
'
;
import
{
attachButtonStyler
,
attachStyler
}
from
'
vs/platform/theme/common/styler
'
;
import
{
I
CssStyleCollector
,
ITheme
,
IThemeService
,
registerThemingParticipant
}
from
'
vs/platform/theme/common/themeService
'
;
import
{
BaseEditor
}
from
'
vs/workbench/browser/parts/editor/baseEditor
'
;
import
{
EditorOptions
}
from
'
vs/workbench/common/editor
'
;
import
{
SearchWidget
,
SettingsTarget
,
SettingsTargetsWidget
}
from
'
vs/workbench/parts/preferences/browser/preferencesWidgets
'
;
...
...
@@ -202,10 +202,38 @@ export class SettingsEditor2 extends BaseEditor {
ariaLabel
:
localize
(
'
treeAriaLabel
'
,
"
Settings
"
),
showLoading
:
false
,
indentPixels
:
0
,
twistiePixels
:
15
twistiePixels
:
15
,
});
this
.
_register
(
registerThemingParticipant
((
theme
:
ITheme
,
collector
:
ICssStyleCollector
)
=>
{
const
activeListBackground
=
theme
.
getColor
(
'
list.activeSelectionBackground
'
);
if
(
activeListBackground
)
{
collector
.
addRule
(
`.settings-editor > .settings-body > .settings-tree-container .monaco-tree.focused .monaco-tree-row.focused .content::before { background-color:
${
activeListBackground
}
; }`
);
}
const
inactiveListBackground
=
theme
.
getColor
(
'
list.inactiveSelectionBackground
'
);
if
(
inactiveListBackground
)
{
collector
.
addRule
(
`.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused .content::before { background-color:
${
inactiveListBackground
}
; }`
);
}
}));
attachStyler
(
this
.
themeService
,
{
listActiveSelectionBackground
:
null
,
listActiveSelectionForeground
:
null
,
listFocusAndSelectionBackground
:
null
,
listFocusAndSelectionForeground
:
null
,
listFocusBackground
:
null
,
listFocusForeground
:
null
,
listHoverForeground
:
null
,
listHoverBackground
:
null
,
listInactiveSelectionBackground
:
null
,
listInactiveSelectionForeground
:
null
},
colors
=>
{
this
.
settingsTree
.
style
(
colors
);
});
this
.
settingsTree
.
onDidChangeFocus
(
e
=>
{
this
.
settingsTree
.
setSelection
([
e
.
focus
]);
if
(
this
.
selectedElement
)
{
this
.
settingsTree
.
refresh
(
this
.
selectedElement
);
}
...
...
@@ -239,7 +267,8 @@ export class SettingsEditor2 extends BaseEditor {
// ConfigurationService displays the error if this fails.
// Force a render afterwards because onDidConfigurationUpdate doesn't fire if the update doesn't result in an effective setting value change
this
.
configurationService
.
updateValue
(
key
,
value
,
<
ConfigurationTarget
>
this
.
settingsTargetsWidget
.
settingsTarget
)
.
then
(()
=>
this
.
settingsTree
.
refresh
());
.
then
(()
=>
this
.
refreshTree
())
.
then
(()
=>
this
.
settingsTree
.
domFocus
());
const
reportModifiedProps
=
{
key
,
...
...
src/vs/workbench/parts/preferences/browser/settingsTree.ts
浏览文件 @
de1fbc1c
...
...
@@ -6,6 +6,7 @@
import
*
as
DOM
from
'
vs/base/browser/dom
'
;
import
{
Button
}
from
'
vs/base/browser/ui/button/button
'
;
import
{
InputBox
}
from
'
vs/base/browser/ui/inputbox/inputBox
'
;
import
{
renderOcticons
}
from
'
vs/base/browser/ui/octiconLabel/octiconLabel
'
;
import
{
SelectBox
}
from
'
vs/base/browser/ui/selectBox/selectBox
'
;
import
{
Color
}
from
'
vs/base/common/color
'
;
import
{
Emitter
,
Event
}
from
'
vs/base/common/event
'
;
...
...
@@ -23,7 +24,7 @@ import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant }
import
{
SettingsTarget
}
from
'
vs/workbench/parts/preferences/browser/preferencesWidgets
'
;
import
{
ISearchResult
,
ISetting
,
ISettingsGroup
}
from
'
vs/workbench/services/preferences/common/preferences
'
;
import
{
DefaultSettingsEditorModel
}
from
'
vs/workbench/services/preferences/common/preferencesModels
'
;
import
{
renderOcticons
}
from
'
vs/base/browser/ui/octiconLabel/octiconLabel
'
;
import
{
IMouseEvent
}
from
'
vs/base/browser/mouseEvent
'
;
const
$
=
DOM
.
$
;
...
...
@@ -187,6 +188,10 @@ export class SettingsDataSource implements IDataSource {
}
getParent
(
tree
:
ITree
,
element
:
TreeElement
):
TPromise
<
any
,
any
>
{
if
(
!
element
)
{
return
null
;
}
if
(
!
(
element
instanceof
DefaultSettingsEditorModel
))
{
return
TPromise
.
wrap
(
element
.
parent
);
}
...
...
@@ -392,6 +397,9 @@ export class SettingsRenderer implements IRenderer {
overridesElement
};
// Prevent clicks from being handled by list
toDispose
.
push
(
DOM
.
addDisposableListener
(
valueElement
,
'
mousedown
'
,
(
e
:
IMouseEvent
)
=>
e
.
stopPropagation
()));
return
template
;
}
...
...
@@ -411,13 +419,13 @@ export class SettingsRenderer implements IRenderer {
}
private
elementIsSelected
(
tree
:
ITree
,
element
:
TreeElement
):
boolean
{
const
selection
=
tree
.
get
Focus
();
const
selectedElement
:
TreeElement
=
selection
;
const
selection
=
tree
.
get
Selection
();
const
selectedElement
:
TreeElement
=
selection
&&
selection
[
0
]
;
return
selectedElement
&&
selectedElement
.
id
===
element
.
id
;
}
private
renderSettingElement
(
tree
:
ITree
,
element
:
ISettingElement
,
template
:
ISettingItemTemplate
,
measuring
?:
boolean
):
void
{
const
isSelected
=
this
.
elementIsSelected
(
tree
,
element
);
const
isSelected
=
!!
this
.
elementIsSelected
(
tree
,
element
);
const
setting
=
element
.
setting
;
template
.
context
=
element
;
...
...
@@ -448,12 +456,12 @@ export class SettingsRenderer implements IRenderer {
}
}
this
.
renderValue
(
element
,
template
);
this
.
renderValue
(
element
,
isSelected
,
template
);
const
resetButton
=
new
Button
(
template
.
valueElement
);
resetButton
.
element
.
title
=
localize
(
'
resetButtonTitle
'
,
"
Reset
"
);
resetButton
.
element
.
classList
.
add
(
'
setting-reset-button
'
);
// resetButton.element.tabIndex = element.isFocused ? 0 : -1; // TODO
resetButton
.
element
.
tabIndex
=
isSelected
?
0
:
-
1
;
attachButtonStyler
(
resetButton
,
this
.
themeService
,
{
buttonBackground
:
Color
.
transparent
.
toString
(),
...
...
@@ -475,62 +483,62 @@ export class SettingsRenderer implements IRenderer {
template
.
overridesElement
.
textContent
=
overridesElementText
;
}
private
renderValue
(
element
:
ISettingElement
,
template
:
ISettingItemTemplate
):
void
{
private
renderValue
(
element
:
ISettingElement
,
isSelected
:
boolean
,
template
:
ISettingItemTemplate
):
void
{
const
onChange
=
value
=>
this
.
_onDidChangeSetting
.
fire
({
key
:
element
.
setting
.
key
,
value
});
template
.
valueElement
.
innerHTML
=
''
;
if
(
element
.
valueType
===
'
string
'
&&
element
.
enum
)
{
this
.
renderEnum
(
element
,
template
,
onChange
);
this
.
renderEnum
(
element
,
isSelected
,
template
,
onChange
);
}
else
if
(
element
.
valueType
===
'
boolean
'
)
{
this
.
renderBool
(
element
,
template
,
onChange
);
this
.
renderBool
(
element
,
isSelected
,
template
,
onChange
);
}
else
if
(
element
.
valueType
===
'
string
'
)
{
this
.
renderText
(
element
,
template
,
onChange
);
this
.
renderText
(
element
,
isSelected
,
template
,
onChange
);
}
else
if
(
element
.
valueType
===
'
number
'
)
{
this
.
renderText
(
element
,
template
,
value
=>
onChange
(
parseInt
(
value
)));
this
.
renderText
(
element
,
isSelected
,
template
,
value
=>
onChange
(
parseInt
(
value
)));
}
else
{
this
.
renderEditInSettingsJson
(
element
,
template
);
this
.
renderEditInSettingsJson
(
element
,
isSelected
,
template
);
}
}
private
renderBool
(
element
:
ISettingElement
,
template
:
ISettingItemTemplate
,
onChange
:
(
value
:
boolean
)
=>
void
):
void
{
private
renderBool
(
element
:
ISettingElement
,
isSelected
:
boolean
,
template
:
ISettingItemTemplate
,
onChange
:
(
value
:
boolean
)
=>
void
):
void
{
const
checkboxElement
=
<
HTMLInputElement
>
DOM
.
append
(
template
.
valueElement
,
$
(
'
input.setting-value-checkbox.setting-value-input
'
));
checkboxElement
.
type
=
'
checkbox
'
;
checkboxElement
.
checked
=
element
.
value
;
// checkboxElement.tabIndex = element.isFocused ? 0 : -1; // TODO
checkboxElement
.
tabIndex
=
isSelected
?
0
:
-
1
;
template
.
toDispose
.
push
(
DOM
.
addDisposableListener
(
checkboxElement
,
'
change
'
,
e
=>
onChange
(
checkboxElement
.
checked
)));
}
private
renderEnum
(
element
:
ISettingElement
,
template
:
ISettingItemTemplate
,
onChange
:
(
value
:
string
)
=>
void
):
void
{
private
renderEnum
(
element
:
ISettingElement
,
isSelected
:
boolean
,
template
:
ISettingItemTemplate
,
onChange
:
(
value
:
string
)
=>
void
):
void
{
const
idx
=
element
.
enum
.
indexOf
(
element
.
value
);
const
selectBox
=
new
SelectBox
(
element
.
enum
,
idx
,
this
.
contextViewService
);
template
.
toDispose
.
push
(
selectBox
);
template
.
toDispose
.
push
(
attachSelectBoxStyler
(
selectBox
,
this
.
themeService
));
selectBox
.
render
(
template
.
valueElement
);
if
(
template
.
valueElement
.
firstElementChild
)
{
// template.valueElement.firstElementChild.setAttribute('tabindex', element.isFocus
ed ? '0' : '-1');
template
.
valueElement
.
firstElementChild
.
setAttribute
(
'
tabindex
'
,
isSelect
ed
?
'
0
'
:
'
-1
'
);
}
template
.
toDispose
.
push
(
selectBox
.
onDidSelect
(
e
=>
onChange
(
element
.
enum
[
e
.
index
])));
}
private
renderText
(
element
:
ISettingElement
,
template
:
ISettingItemTemplate
,
onChange
:
(
value
:
string
)
=>
void
):
void
{
private
renderText
(
element
:
ISettingElement
,
isSelected
:
boolean
,
template
:
ISettingItemTemplate
,
onChange
:
(
value
:
string
)
=>
void
):
void
{
const
inputBox
=
new
InputBox
(
template
.
valueElement
,
this
.
contextViewService
);
template
.
toDispose
.
push
(
attachInputBoxStyler
(
inputBox
,
this
.
themeService
));
template
.
toDispose
.
push
(
inputBox
);
inputBox
.
value
=
element
.
value
;
// inputBox.inputElement.tabIndex = element.isFocus
ed ? 0 : -1;
inputBox
.
inputElement
.
tabIndex
=
isSelect
ed
?
0
:
-
1
;
template
.
toDispose
.
push
(
inputBox
.
onDidChange
(
e
=>
onChange
(
e
)));
}
private
renderEditInSettingsJson
(
element
:
ISettingElement
,
template
:
ISettingItemTemplate
):
void
{
private
renderEditInSettingsJson
(
element
:
ISettingElement
,
isSelected
:
boolean
,
template
:
ISettingItemTemplate
):
void
{
const
openSettingsButton
=
new
Button
(
template
.
valueElement
,
{
title
:
true
,
buttonBackground
:
null
,
buttonHoverBackground
:
null
});
openSettingsButton
.
onDidClick
(()
=>
this
.
_onDidOpenSettings
.
fire
());
openSettingsButton
.
label
=
localize
(
'
editInSettingsJson
'
,
"
Edit in settings.json
"
);
openSettingsButton
.
element
.
classList
.
add
(
'
edit-in-settings-button
'
);
// openSettingsButton.element.tabIndex = element.isFocus
ed ? 0 : -1;
openSettingsButton
.
element
.
tabIndex
=
isSelect
ed
?
0
:
-
1
;
template
.
toDispose
.
push
(
openSettingsButton
);
template
.
toDispose
.
push
(
attachButtonStyler
(
openSettingsButton
,
this
.
themeService
,
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录