Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xxadev
vscode
提交
408ede05
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,发现更多精彩内容 >>
提交
408ede05
编写于
5月 08, 2017
作者:
B
Benjamin Pasero
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
theming - keybindings button and widget
上级
a7c753cf
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
60 addition
and
39 deletion
+60
-39
src/vs/platform/theme/common/styler.ts
src/vs/platform/theme/common/styler.ts
+29
-19
src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts
.../workbench/parts/preferences/browser/keybindingWidgets.ts
+17
-3
src/vs/workbench/parts/preferences/browser/media/keybindings.css
...workbench/parts/preferences/browser/media/keybindings.css
+0
-12
src/vs/workbench/parts/preferences/browser/media/preferences.css
...workbench/parts/preferences/browser/media/preferences.css
+0
-2
src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts
...workbench/parts/preferences/browser/preferencesWidgets.ts
+14
-3
未找到文件。
src/vs/platform/theme/common/styler.ts
浏览文件 @
408ede05
...
...
@@ -10,11 +10,13 @@ import { inputBackground, inputForeground, ColorIdentifier, selectForeground, se
import
{
IDisposable
}
from
'
vs/base/common/lifecycle
'
;
import
{
SIDE_BAR_SECTION_HEADER_BACKGROUND
}
from
'
vs/workbench/common/theme
'
;
export
type
styleFn
=
(
colors
:
{
[
name
:
string
]:
ColorIdentifier
})
=>
void
;
export
interface
IThemable
{
style
(
colors
:
{
[
name
:
string
]:
ColorIdentifier
}):
void
;
style
:
styleFn
;
}
export
function
attachStyler
(
themeService
:
IThemeService
,
widget
:
IThemable
,
optionsMapping
:
{
[
optionsKey
:
string
]:
ColorIdentifier
|
ColorFunction
}
):
IDisposable
{
function
doAttachStyler
(
themeService
:
IThemeService
,
optionsMapping
:
{
[
optionsKey
:
string
]:
ColorIdentifier
|
ColorFunction
},
widgetOrCallback
:
IThemable
|
styleFn
):
IDisposable
{
function
applyStyles
(
theme
:
ITheme
):
void
{
const
styles
=
Object
.
create
(
null
);
for
(
let
key
in
optionsMapping
)
{
...
...
@@ -26,7 +28,11 @@ export function attachStyler(themeService: IThemeService, widget: IThemable, opt
}
}
widget
.
style
(
styles
);
if
(
typeof
widgetOrCallback
===
'
function
'
)
{
widgetOrCallback
(
styles
);
}
else
{
widgetOrCallback
.
style
(
styles
);
}
}
applyStyles
(
themeService
.
getTheme
());
...
...
@@ -35,9 +41,9 @@ export function attachStyler(themeService: IThemeService, widget: IThemable, opt
}
export
function
attachCheckboxStyler
(
widget
:
IThemable
,
themeService
:
IThemeService
,
style
?:
{
inputActiveOptionBorderColor
?:
ColorIdentifier
}):
IDisposable
{
return
attachStyler
(
themeService
,
widget
,
{
return
doAttachStyler
(
themeService
,
{
inputActiveOptionBorder
:
(
style
&&
style
.
inputActiveOptionBorderColor
)
||
inputActiveOptionBorder
});
}
,
widget
);
}
export
function
attachInputBoxStyler
(
widget
:
IThemable
,
themeService
:
IThemeService
,
style
?:
...
...
@@ -52,7 +58,7 @@ export function attachInputBoxStyler(widget: IThemable, themeService: IThemeServ
inputValidationErrorBorder
?:
ColorIdentifier
,
inputValidationErrorBackground
?:
ColorIdentifier
}):
IDisposable
{
return
attachStyler
(
themeService
,
widget
,
{
return
doAttachStyler
(
themeService
,
{
inputBackground
:
(
style
&&
style
.
inputBackground
)
||
inputBackground
,
inputForeground
:
(
style
&&
style
.
inputForeground
)
||
inputForeground
,
inputBorder
:
(
style
&&
style
.
inputBorder
)
||
inputBorder
,
...
...
@@ -62,15 +68,15 @@ export function attachInputBoxStyler(widget: IThemable, themeService: IThemeServ
inputValidationWarningBackground
:
(
style
&&
style
.
inputValidationWarningBackground
)
||
inputValidationWarningBackground
,
inputValidationErrorBorder
:
(
style
&&
style
.
inputValidationErrorBorder
)
||
inputValidationErrorBorder
,
inputValidationErrorBackground
:
(
style
&&
style
.
inputValidationErrorBackground
)
||
inputValidationErrorBackground
});
}
,
widget
);
}
export
function
attachSelectBoxStyler
(
widget
:
IThemable
,
themeService
:
IThemeService
,
style
?:
{
selectBackground
?:
ColorIdentifier
,
selectForeground
?:
ColorIdentifier
,
selectBorder
?:
ColorIdentifier
}):
IDisposable
{
return
attachStyler
(
themeService
,
widget
,
{
return
doAttachStyler
(
themeService
,
{
selectBackground
:
(
style
&&
style
.
selectBackground
)
||
selectBackground
,
selectForeground
:
(
style
&&
style
.
selectForeground
)
||
selectForeground
,
selectBorder
:
(
style
&&
style
.
selectBorder
)
||
selectBorder
});
}
,
widget
);
}
export
function
attachFindInputBoxStyler
(
widget
:
IThemable
,
themeService
:
IThemeService
,
style
?:
...
...
@@ -86,7 +92,7 @@ export function attachFindInputBoxStyler(widget: IThemable, themeService: ITheme
inputValidationErrorBorder
?:
ColorIdentifier
,
inputValidationErrorBackground
?:
ColorIdentifier
}):
IDisposable
{
return
attachStyler
(
themeService
,
widget
,
{
return
doAttachStyler
(
themeService
,
{
inputBackground
:
(
style
&&
style
.
inputBackground
)
||
inputBackground
,
inputForeground
:
(
style
&&
style
.
inputForeground
)
||
inputForeground
,
inputBorder
:
(
style
&&
style
.
inputBorder
)
||
inputBorder
,
...
...
@@ -97,7 +103,7 @@ export function attachFindInputBoxStyler(widget: IThemable, themeService: ITheme
inputValidationWarningBackground
:
(
style
&&
style
.
inputValidationWarningBackground
)
||
inputValidationWarningBackground
,
inputValidationErrorBorder
:
(
style
&&
style
.
inputValidationErrorBorder
)
||
inputValidationErrorBorder
,
inputValidationErrorBackground
:
(
style
&&
style
.
inputValidationErrorBackground
)
||
inputValidationErrorBackground
});
}
,
widget
);
}
export
function
attachQuickOpenStyler
(
widget
:
IThemable
,
themeService
:
IThemeService
,
style
?:
{
...
...
@@ -129,7 +135,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
listSelectionOutline
?:
ColorIdentifier
,
listHoverOutline
?:
ColorIdentifier
}):
IDisposable
{
return
attachStyler
(
themeService
,
widget
,
{
return
doAttachStyler
(
themeService
,
{
foreground
:
(
style
&&
style
.
foreground
)
||
foreground
,
background
:
(
style
&&
style
.
background
)
||
editorBackground
,
borderColor
:
style
&&
style
.
borderColor
||
contrastBorder
,
...
...
@@ -157,7 +163,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
listFocusOutline
:
(
style
&&
style
.
listFocusOutline
)
||
activeContrastBorder
,
listSelectionOutline
:
(
style
&&
style
.
listSelectionOutline
)
||
activeContrastBorder
,
listHoverOutline
:
(
style
&&
style
.
listHoverOutline
)
||
activeContrastBorder
});
}
,
widget
);
}
export
function
attachListStyler
(
widget
:
IThemable
,
themeService
:
IThemeService
,
style
?:
{
...
...
@@ -176,7 +182,7 @@ export function attachListStyler(widget: IThemable, themeService: IThemeService,
listSelectionOutline
?:
ColorIdentifier
,
listHoverOutline
?:
ColorIdentifier
,
}):
IDisposable
{
return
attachStyler
(
themeService
,
widget
,
{
return
doAttachStyler
(
themeService
,
{
listFocusBackground
:
(
style
&&
style
.
listFocusBackground
)
||
listFocusBackground
,
listActiveSelectionBackground
:
(
style
&&
style
.
listActiveSelectionBackground
)
||
lighten
(
listActiveSelectionBackground
,
0.1
),
listActiveSelectionForeground
:
(
style
&&
style
.
listActiveSelectionForeground
)
||
listActiveSelectionForeground
,
...
...
@@ -191,20 +197,24 @@ export function attachListStyler(widget: IThemable, themeService: IThemeService,
listSelectionOutline
:
(
style
&&
style
.
listSelectionOutline
)
||
activeContrastBorder
,
listHoverOutline
:
(
style
&&
style
.
listHoverOutline
)
||
activeContrastBorder
,
listInactiveFocusOutline
:
style
&&
style
.
listInactiveFocusOutline
// not defined by default, only opt-in
});
}
,
widget
);
}
export
function
attachHeaderViewStyler
(
widget
:
IThemable
,
themeService
:
IThemeService
,
options
?:
{
noContrastBorder
?:
boolean
}):
IDisposable
{
return
attachStyler
(
themeService
,
widget
,
{
return
doAttachStyler
(
themeService
,
{
headerBackground
:
SIDE_BAR_SECTION_HEADER_BACKGROUND
,
headerHighContrastBorder
:
(
options
&&
options
.
noContrastBorder
)
?
null
:
contrastBorder
});
}
,
widget
);
}
export
function
attachButtonStyler
(
widget
:
IThemable
,
themeService
:
IThemeService
,
style
?:
{
buttonForeground
?:
ColorIdentifier
,
buttonBackground
?:
ColorIdentifier
,
buttonHoverBackground
?:
ColorIdentifier
}):
IDisposable
{
return
attachStyler
(
themeService
,
widget
,
{
return
doAttachStyler
(
themeService
,
{
buttonForeground
:
(
style
&&
style
.
buttonForeground
)
||
buttonForeground
,
buttonBackground
:
(
style
&&
style
.
buttonBackground
)
||
buttonBackground
,
buttonHoverBackground
:
(
style
&&
style
.
buttonHoverBackground
)
||
buttonHoverBackground
});
},
widget
);
}
export
function
attachStylerCallback
(
themeService
:
IThemeService
,
colors
:
{
[
name
:
string
]:
ColorIdentifier
},
callback
:
styleFn
):
IDisposable
{
return
doAttachStyler
(
themeService
,
colors
,
callback
);
}
\ No newline at end of file
src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts
浏览文件 @
408ede05
...
...
@@ -21,8 +21,9 @@ import { Dimension } from 'vs/base/browser/builder';
import
{
IContextViewService
}
from
'
vs/platform/contextview/browser/contextView
'
;
import
{
IInstantiationService
}
from
'
vs/platform/instantiation/common/instantiation
'
;
import
{
ICodeEditor
,
IOverlayWidget
,
IOverlayWidgetPosition
}
from
'
vs/editor/browser/editorBrowser
'
;
import
{
attachInputBoxStyler
}
from
'
vs/platform/theme/common/styler
'
;
import
{
attachInputBoxStyler
,
attachStylerCallback
}
from
'
vs/platform/theme/common/styler
'
;
import
{
IThemeService
}
from
'
vs/platform/theme/common/themeService
'
;
import
{
editorWidgetBackground
,
widgetShadow
}
from
"
vs/platform/theme/common/colorRegistry
"
;
class
KeybindingInputWidget
extends
Widget
{
...
...
@@ -128,8 +129,11 @@ export class DefineKeybindingWidget extends Widget {
private
_onHide
=
this
.
_register
(
new
Emitter
<
void
>
());
constructor
(
parent
:
HTMLElement
,
@
IKeybindingService
private
keybindingService
:
IKeybindingService
,
@
IInstantiationService
private
instantiationService
:
IInstantiationService
constructor
(
parent
:
HTMLElement
,
@
IKeybindingService
private
keybindingService
:
IKeybindingService
,
@
IInstantiationService
private
instantiationService
:
IInstantiationService
,
@
IThemeService
private
themeService
:
IThemeService
)
{
super
();
this
.
create
();
...
...
@@ -186,6 +190,16 @@ export class DefineKeybindingWidget extends Widget {
this
.
_domNode
.
setHeight
(
DefineKeybindingWidget
.
HEIGHT
);
dom
.
append
(
this
.
_domNode
.
domNode
,
dom
.
$
(
'
.message
'
,
null
,
nls
.
localize
(
'
defineKeybinding.initial
'
,
"
Press desired key combination and ENTER. ESCAPE to cancel.
"
)));
this
.
_register
(
attachStylerCallback
(
this
.
themeService
,
{
editorWidgetBackground
,
widgetShadow
},
colors
=>
{
this
.
_domNode
.
domNode
.
style
.
backgroundColor
=
colors
.
editorWidgetBackground
;
if
(
colors
.
widgetShadow
)
{
this
.
_domNode
.
domNode
.
style
.
boxShadow
=
`0 2px 8px
${
colors
.
widgetShadow
}
`
;
}
else
{
this
.
_domNode
.
domNode
.
style
.
boxShadow
=
null
;
}
}));
this
.
_keybindingInputWidget
=
this
.
_register
(
this
.
instantiationService
.
createInstance
(
KeybindingInputWidget
,
this
.
_domNode
.
domNode
,
{}));
this
.
_register
(
this
.
_keybindingInputWidget
.
onKeybinding
(
keybinding
=>
this
.
printKeybinding
(
keybinding
)));
this
.
_register
(
this
.
_keybindingInputWidget
.
onEnter
(()
=>
this
.
hide
()));
...
...
src/vs/workbench/parts/preferences/browser/media/keybindings.css
浏览文件 @
408ede05
...
...
@@ -34,18 +34,6 @@
margin
:
0px
4px
;
}
/* Theming */
.defineKeybindingWidget
{
background-color
:
#EFEFF2
;
box-shadow
:
0
2px
8px
#A8A8A8
;
}
.hc-black
.defineKeybindingWidget
,
.vs-dark
.defineKeybindingWidget
{
background-color
:
#2D2D30
;
box-shadow
:
0
2px
8px
#000
;
}
/* Editor decorations */
.monaco-editor
.inlineKeybindingInfo
:before
{
margin
:
0.2em
0.1em
0
0.1em
;
...
...
src/vs/workbench/parts/preferences/browser/media/preferences.css
浏览文件 @
408ede05
...
...
@@ -238,8 +238,6 @@
}
.monaco-editor
.floating-click-widget
{
background
:
#007ACC
;
color
:
white
;
padding
:
10px
;
border-radius
:
5px
;
cursor
:
pointer
;
...
...
src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts
浏览文件 @
408ede05
...
...
@@ -23,10 +23,11 @@ import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace
import
{
ConfigurationTarget
}
from
'
vs/workbench/services/configuration/common/configurationEditing
'
;
import
{
ActionsOrientation
,
ActionBar
}
from
'
vs/base/browser/ui/actionbar/actionbar
'
;
import
{
Action
}
from
'
vs/base/common/actions
'
;
import
{
attachInputBoxStyler
}
from
'
vs/platform/theme/common/styler
'
;
import
{
attachInputBoxStyler
,
attachStylerCallback
}
from
'
vs/platform/theme/common/styler
'
;
import
{
IThemeService
}
from
'
vs/platform/theme/common/themeService
'
;
import
{
Position
}
from
'
vs/editor/common/core/position
'
;
import
{
ICursorPositionChangedEvent
}
from
'
vs/editor/common/controller/cursorEvents
'
;
import
{
buttonBackground
,
buttonForeground
}
from
"
vs/platform/theme/common/colorRegistry
"
;
export
class
SettingsGroupTitleWidget
extends
Widget
implements
IViewZone
{
...
...
@@ -360,10 +361,15 @@ export class FloatingClickWidget extends Widget implements IOverlayWidget {
private
_onClick
:
Emitter
<
void
>
=
this
.
_register
(
new
Emitter
<
void
>
());
public
onClick
:
Event
<
void
>
=
this
.
_onClick
.
event
;
constructor
(
private
editor
:
ICodeEditor
,
private
label
:
string
,
private
keyBindingAction
:
string
,
@
IKeybindingService
keybindingService
:
IKeybindingService
constructor
(
private
editor
:
ICodeEditor
,
private
label
:
string
,
private
keyBindingAction
:
string
,
@
IKeybindingService
keybindingService
:
IKeybindingService
,
@
IThemeService
private
themeService
:
IThemeService
)
{
super
();
if
(
keyBindingAction
)
{
let
keybinding
=
keybindingService
.
lookupKeybinding
(
keyBindingAction
);
if
(
keybinding
)
{
...
...
@@ -374,6 +380,11 @@ export class FloatingClickWidget extends Widget implements IOverlayWidget {
public
render
()
{
this
.
_domNode
=
DOM
.
$
(
'
.floating-click-widget
'
);
this
.
_register
(
attachStylerCallback
(
this
.
themeService
,
{
buttonBackground
,
buttonForeground
},
colors
=>
{
this
.
_domNode
.
style
.
backgroundColor
=
colors
.
buttonBackground
;
this
.
_domNode
.
style
.
color
=
colors
.
buttonForeground
;
}));
DOM
.
append
(
this
.
_domNode
,
DOM
.
$
(
''
)).
textContent
=
this
.
label
;
this
.
onclick
(
this
.
_domNode
,
e
=>
this
.
_onClick
.
fire
());
this
.
editor
.
addOverlayWidget
(
this
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录