Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xxadev
vscode
提交
888bd537
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,发现更多精彩内容 >>
提交
888bd537
编写于
7月 11, 2018
作者:
R
Rob Lourens
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Fix #53908 - make settings tree themeable, add default colors
上级
b60c434a
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
68 addition
and
20 deletion
+68
-20
extensions/theme-defaults/themes/dark_defaults.json
extensions/theme-defaults/themes/dark_defaults.json
+3
-1
extensions/theme-defaults/themes/light_defaults.json
extensions/theme-defaults/themes/light_defaults.json
+3
-1
extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json
...ons/theme-kimbie-dark/themes/kimbie-dark-color-theme.json
+1
-0
extensions/theme-monokai/themes/monokai-color-theme.json
extensions/theme-monokai/themes/monokai-color-theme.json
+2
-0
src/vs/workbench/parts/preferences/browser/settingsTree.ts
src/vs/workbench/parts/preferences/browser/settingsTree.ts
+59
-18
未找到文件。
extensions/theme-defaults/themes/dark_defaults.json
浏览文件 @
888bd537
...
...
@@ -10,6 +10,8 @@
"editor.selectionHighlightBackground"
:
"#ADD6FF26"
,
"list.dropBackground"
:
"#383B3D"
,
"activityBarBadge.background"
:
"#007ACC"
,
"sideBarTitle.foreground"
:
"#BBBBBB"
"sideBarTitle.foreground"
:
"#BBBBBB"
,
"settings.textInputBackground"
:
"#292929"
,
"settings.numberInputBackground"
:
"#292929"
}
}
\ No newline at end of file
extensions/theme-defaults/themes/light_defaults.json
浏览文件 @
888bd537
...
...
@@ -12,6 +12,8 @@
"activityBarBadge.background"
:
"#007ACC"
,
"sideBarTitle.foreground"
:
"#6F6F6F"
,
"list.hoverBackground"
:
"#E8E8E8"
,
"input.placeholderForeground"
:
"#ADADAD"
"input.placeholderForeground"
:
"#ADADAD"
,
"settings.textInputBorder"
:
"#CECECE"
,
"settings.numberInputBorder"
:
"#CECECE"
}
}
\ No newline at end of file
extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json
浏览文件 @
888bd537
...
...
@@ -3,6 +3,7 @@
"type"
:
"dark"
,
"colors"
:
{
"input.background"
:
"#51412c"
,
"dropdown.background"
:
"#51412c"
,
"editor.background"
:
"#221a0f"
,
"editor.foreground"
:
"#d3af86"
,
"focusBorder"
:
"#a57a4c"
,
...
...
extensions/theme-monokai/themes/monokai-color-theme.json
浏览文件 @
888bd537
...
...
@@ -11,6 +11,8 @@
"list.activeSelectionBackground"
:
"#75715E"
,
"list.focusBackground"
:
"#414339"
,
"dropdown.listBackground"
:
"#1e1f1c"
,
"settings.textInputBackground"
:
"#32342d"
,
"settings.numberInputBackground"
:
"#32342d"
,
"list.inactiveSelectionBackground"
:
"#414339"
,
"list.hoverBackground"
:
"#3e3d32"
,
"list.dropBackground"
:
"#414339"
,
...
...
src/vs/workbench/parts/preferences/browser/settingsTree.ts
浏览文件 @
888bd537
...
...
@@ -27,7 +27,7 @@ import { ConfigurationTarget, IConfigurationService } from 'vs/platform/configur
import
{
IContextViewService
}
from
'
vs/platform/contextview/browser/contextView
'
;
import
{
WorkbenchTree
,
WorkbenchTreeController
}
from
'
vs/platform/list/browser/listService
'
;
import
{
IOpenerService
}
from
'
vs/platform/opener/common/opener
'
;
import
{
registerColor
,
selectBackground
,
selectBorder
,
textLinkForeground
}
from
'
vs/platform/theme/common/colorRegistry
'
;
import
{
inputBackground
,
inputBorder
,
inputForeground
,
registerColor
,
selectBackground
,
selectBorder
,
selectForeground
,
textLinkForeground
}
from
'
vs/platform/theme/common/colorRegistry
'
;
import
{
attachButtonStyler
,
attachInputBoxStyler
,
attachSelectBoxStyler
}
from
'
vs/platform/theme/common/styler
'
;
import
{
ICssStyleCollector
,
ITheme
,
IThemeService
,
registerThemingParticipant
}
from
'
vs/platform/theme/common/themeService
'
;
import
{
SettingsTarget
}
from
'
vs/workbench/parts/preferences/browser/preferencesWidgets
'
;
...
...
@@ -42,23 +42,40 @@ export const modifiedItemForeground = registerColor('settings.modifiedItemForegr
hc
:
'
#73C991
'
},
localize
(
'
modifiedItemForeground
'
,
"
(For settings editor preview) The foreground color for a modified setting.
"
));
// Enum control colors
export
const
settingsSelectBackground
=
registerColor
(
'
settings.dropdownBackground
'
,
{
dark
:
selectBackground
,
light
:
selectBackground
,
hc
:
selectBackground
},
localize
(
'
settingsDropdownBackground
'
,
"
Settings editor dropdown background.
"
));
export
const
settingsSelectForeground
=
registerColor
(
'
settings.dropdownForeground
'
,
{
dark
:
selectForeground
,
light
:
selectForeground
,
hc
:
selectForeground
},
localize
(
'
settingsDropdownForeground
'
,
"
Settings editor dropdown foreground.
"
));
export
const
settingsSelectBorder
=
registerColor
(
'
settings.dropdownBorder
'
,
{
dark
:
selectBorder
,
light
:
selectBorder
,
hc
:
selectBorder
},
localize
(
'
settingsDropdownBorder
'
,
"
Settings editor dropdown border.
"
));
// Bool control colors
export
const
settingsCheckboxBackground
=
registerColor
(
'
settings.checkboxBackground
'
,
{
dark
:
selectBackground
,
light
:
selectBackground
,
hc
:
selectBackground
},
localize
(
'
settingsCheckboxBackground
'
,
"
Settings editor checkbox background.
"
));
export
const
settingsCheckboxForeground
=
registerColor
(
'
settings.checkboxForeground
'
,
{
dark
:
selectForeground
,
light
:
selectForeground
,
hc
:
selectForeground
},
localize
(
'
settingsCheckboxForeground
'
,
"
Settings editor checkbox foreground.
"
));
export
const
settingsCheckboxBorder
=
registerColor
(
'
settings.checkboxBorder
'
,
{
dark
:
selectBorder
,
light
:
selectBorder
,
hc
:
selectBorder
},
localize
(
'
settingsCheckboxBorder
'
,
"
Settings editor checkbox border.
"
));
// Text control colors
export
const
settingsTextInputBackground
=
registerColor
(
'
settings.textInputBackground
'
,
{
dark
:
inputBackground
,
light
:
inputBackground
,
hc
:
inputBackground
},
localize
(
'
textInputBoxBackground
'
,
"
Settings editor text input box background.
"
));
export
const
settingsTextInputForeground
=
registerColor
(
'
settings.textInputForeground
'
,
{
dark
:
inputForeground
,
light
:
inputForeground
,
hc
:
inputForeground
},
localize
(
'
textInputBoxForeground
'
,
"
Settings editor text input box foreground.
"
));
export
const
settingsTextInputBorder
=
registerColor
(
'
settings.textInputBorder
'
,
{
dark
:
inputBorder
,
light
:
inputBorder
,
hc
:
inputBorder
},
localize
(
'
textInputBoxBorder
'
,
"
Settings editor text input box border.
"
));
// Number control colors
export
const
settingsNumberInputBackground
=
registerColor
(
'
settings.numberInputBackground
'
,
{
dark
:
inputBackground
,
light
:
inputBackground
,
hc
:
inputBackground
},
localize
(
'
numberInputBoxBackground
'
,
"
Settings editor number input box background.
"
));
export
const
settingsNumberInputForeground
=
registerColor
(
'
settings.numberInputForeground
'
,
{
dark
:
inputForeground
,
light
:
inputForeground
,
hc
:
inputForeground
},
localize
(
'
numberInputBoxForeground
'
,
"
Settings editor number input box foreground.
"
));
export
const
settingsNumberInputBorder
=
registerColor
(
'
settings.numberInputBorder
'
,
{
dark
:
inputBorder
,
light
:
inputBorder
,
hc
:
inputBorder
},
localize
(
'
numberInputBoxBorder
'
,
"
Settings editor number input box border.
"
));
registerThemingParticipant
((
theme
:
ITheme
,
collector
:
ICssStyleCollector
)
=>
{
const
modifiedItemForegroundColor
=
theme
.
getColor
(
modifiedItemForeground
);
if
(
modifiedItemForegroundColor
)
{
collector
.
addRule
(
`.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-is-configured-label { color:
${
modifiedItemForegroundColor
}
; }`
);
}
// TODO@roblou Hacks! Make checkbox background themeable
const
selectBackgroundColor
=
theme
.
getColor
(
selectBackground
);
if
(
selectBackgroundColor
)
{
collector
.
addRule
(
`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { background-color:
${
selectBackgroundColor
}
!important; }`
);
const
checkboxBackgroundColor
=
theme
.
getColor
(
settingsCheckboxBackground
);
if
(
checkboxBackgroundColor
)
{
collector
.
addRule
(
`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { background-color:
${
checkboxBackgroundColor
}
!important; }`
);
}
// TODO@roblou Hacks! Use proper inputbox theming instead of !important
const
selectBorderColor
=
theme
.
getColor
(
selectBorder
);
if
(
selectBorderColor
)
{
collector
.
addRule
(
`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { border-color:
${
selectBorderColor
}
!important; }`
);
collector
.
addRule
(
`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-control > .monaco-inputbox { border: solid 1px
${
selectBorderColor
}
!important; }`
);
const
checkboxBorderColor
=
theme
.
getColor
(
settingsCheckboxBorder
);
if
(
checkboxBorderColor
)
{
collector
.
addRule
(
`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { border-color:
${
checkboxBorderColor
}
!important; }`
);
}
const
link
=
theme
.
getColor
(
textLinkForeground
);
...
...
@@ -749,17 +766,12 @@ export class SettingsRenderer implements IRenderer {
valueControlElement
.
setAttribute
(
'
class
'
,
'
setting-item-control
'
);
if
(
element
.
enum
&&
(
element
.
valueType
===
'
string
'
||
!
element
.
valueType
))
{
valueControlElement
.
classList
.
add
(
'
setting-type-enum
'
);
this
.
renderEnum
(
element
,
isSelected
,
template
,
valueControlElement
,
onChange
);
}
else
if
(
element
.
valueType
===
'
string
'
)
{
valueControlElement
.
classList
.
add
(
'
setting-type-string
'
);
this
.
renderText
(
element
,
isSelected
,
template
,
valueControlElement
,
onChange
);
}
else
if
(
element
.
valueType
===
'
number
'
||
element
.
valueType
===
'
integer
'
)
{
valueControlElement
.
classList
.
add
(
'
setting-type-number
'
);
const
parseFn
=
element
.
valueType
===
'
integer
'
?
parseInt
:
parseFloat
;
this
.
renderText
(
element
,
isSelected
,
template
,
valueControlElement
,
value
=>
onChange
(
parseFn
(
value
)));
this
.
renderNumber
(
element
,
isSelected
,
template
,
valueControlElement
,
onChange
);
}
else
{
valueControlElement
.
classList
.
add
(
'
setting-type-complex
'
);
this
.
renderEditInSettingsJson
(
element
,
isSelected
,
template
,
valueControlElement
);
}
}
...
...
@@ -773,10 +785,15 @@ export class SettingsRenderer implements IRenderer {
}
private
renderEnum
(
dataElement
:
SettingsTreeSettingElement
,
isSelected
:
boolean
,
template
:
ISettingItemTemplate
,
element
:
HTMLElement
,
onChange
:
(
value
:
string
)
=>
void
):
void
{
element
.
classList
.
add
(
'
setting-type-enum
'
);
const
idx
=
dataElement
.
enum
.
indexOf
(
dataElement
.
value
);
const
displayOptions
=
dataElement
.
enum
.
map
(
escapeInvisibleChars
);
const
selectBox
=
new
SelectBox
(
displayOptions
,
idx
,
this
.
contextViewService
);
template
.
toDispose
.
push
(
attachSelectBoxStyler
(
selectBox
,
this
.
themeService
));
template
.
toDispose
.
push
(
attachSelectBoxStyler
(
selectBox
,
this
.
themeService
,
{
selectBackground
:
settingsSelectBackground
,
selectForeground
:
settingsSelectForeground
,
selectBorder
:
settingsSelectBorder
}));
selectBox
.
render
(
element
);
if
(
element
.
firstElementChild
)
{
element
.
firstElementChild
.
setAttribute
(
'
tabindex
'
,
isSelected
?
'
0
'
:
'
-1
'
);
...
...
@@ -787,8 +804,13 @@ export class SettingsRenderer implements IRenderer {
}
private
renderText
(
dataElement
:
SettingsTreeSettingElement
,
isSelected
:
boolean
,
template
:
ISettingItemTemplate
,
element
:
HTMLElement
,
onChange
:
(
value
:
string
)
=>
void
):
void
{
element
.
classList
.
add
(
'
setting-type-string
'
);
const
inputBox
=
new
InputBox
(
element
,
this
.
contextViewService
);
template
.
toDispose
.
push
(
attachInputBoxStyler
(
inputBox
,
this
.
themeService
));
template
.
toDispose
.
push
(
attachInputBoxStyler
(
inputBox
,
this
.
themeService
,
{
inputBackground
:
settingsTextInputBackground
,
inputForeground
:
settingsTextInputForeground
,
inputBorder
:
settingsTextInputBorder
}));
template
.
toDispose
.
push
(
inputBox
);
inputBox
.
value
=
dataElement
.
value
;
inputBox
.
inputElement
.
tabIndex
=
isSelected
?
0
:
-
1
;
...
...
@@ -797,7 +819,26 @@ export class SettingsRenderer implements IRenderer {
inputBox
.
onDidChange
(
e
=>
onChange
(
e
)));
}
private
renderNumber
(
dataElement
:
SettingsTreeSettingElement
,
isSelected
:
boolean
,
template
:
ISettingItemTemplate
,
element
:
HTMLElement
,
onChange
:
(
value
:
number
)
=>
void
):
void
{
element
.
classList
.
add
(
'
setting-type-number
'
);
const
parseFn
=
dataElement
.
valueType
===
'
integer
'
?
parseInt
:
parseFloat
;
const
inputBox
=
new
InputBox
(
element
,
this
.
contextViewService
);
template
.
toDispose
.
push
(
attachInputBoxStyler
(
inputBox
,
this
.
themeService
,
{
inputBackground
:
settingsNumberInputBackground
,
inputForeground
:
settingsNumberInputForeground
,
inputBorder
:
settingsNumberInputBorder
}));
template
.
toDispose
.
push
(
inputBox
);
inputBox
.
value
=
dataElement
.
value
;
inputBox
.
inputElement
.
tabIndex
=
isSelected
?
0
:
-
1
;
template
.
toDispose
.
push
(
inputBox
.
onDidChange
(
value
=>
onChange
(
parseFn
(
value
))));
}
private
renderEditInSettingsJson
(
dataElement
:
SettingsTreeSettingElement
,
isSelected
:
boolean
,
template
:
ISettingItemTemplate
,
element
:
HTMLElement
):
void
{
element
.
classList
.
add
(
'
setting-type-complex
'
);
const
openSettingsButton
=
new
Button
(
element
,
{
title
:
true
,
buttonBackground
:
null
,
buttonHoverBackground
:
null
});
openSettingsButton
.
onDidClick
(()
=>
this
.
_onDidOpenSettings
.
fire
());
openSettingsButton
.
label
=
localize
(
'
editInSettingsJson
'
,
"
Edit in settings.json
"
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录