Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xxadev
vscode
提交
e18c452e
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,发现更多精彩内容 >>
提交
e18c452e
编写于
2月 16, 2018
作者:
B
Benjamin Pasero
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
notifications - introduce notifications center container
上级
f67097d4
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
80 addition
and
69 deletion
+80
-69
src/vs/workbench/browser/parts/notifications/media/notificationsActions.css
...rowser/parts/notifications/media/notificationsActions.css
+12
-12
src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css
...browser/parts/notifications/media/notificationsCenter.css
+23
-0
src/vs/workbench/browser/parts/notifications/media/notificationsList.css
...h/browser/parts/notifications/media/notificationsList.css
+18
-37
src/vs/workbench/browser/parts/notifications/notificationsCenter.ts
...kbench/browser/parts/notifications/notificationsCenter.ts
+20
-8
src/vs/workbench/browser/parts/notifications/notificationsList.ts
...orkbench/browser/parts/notifications/notificationsList.ts
+7
-12
未找到文件。
src/vs/workbench/browser/parts/notifications/media/notificationsActions.css
浏览文件 @
e18c452e
...
...
@@ -3,38 +3,38 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.vs
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.clear-notification-action
{
.vs
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.clear-notification-action
{
background-image
:
url('close.svg')
;
}
.vs-dark
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.clear-notification-action
,
.hc-black
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.clear-notification-action
{
.vs-dark
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.clear-notification-action
,
.hc-black
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.clear-notification-action
{
background-image
:
url('close-inverse.svg')
;
}
.vs
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.expand-notification-action
{
.vs
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.expand-notification-action
{
background-image
:
url('down.svg')
;
}
.vs-dark
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.expand-notification-action
,
.hc-black
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.expand-notification-action
{
.vs-dark
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.expand-notification-action
,
.hc-black
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.expand-notification-action
{
background-image
:
url('down-inverse.svg')
;
}
.vs
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.collapse-notification-action
{
.vs
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.collapse-notification-action
{
background-image
:
url('up.svg')
;
}
.vs-dark
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.collapse-notification-action
,
.hc-black
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.collapse-notification-action
{
.vs-dark
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.collapse-notification-action
,
.hc-black
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.collapse-notification-action
{
background-image
:
url('up-inverse.svg')
;
}
.vs
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.configure-notification-action
{
.vs
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.configure-notification-action
{
background-image
:
url('configure.svg')
;
}
.vs-dark
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.configure-notification-action
,
.hc-black
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.configure-notification-action
{
.vs-dark
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.configure-notification-action
,
.hc-black
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.configure-notification-action
{
background-image
:
url('configure-inverse.svg')
;
}
\ No newline at end of file
src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css
0 → 100644
浏览文件 @
e18c452e
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-workbench
>
.notifications-center
{
position
:
absolute
;
width
:
600px
;
z-index
:
1000
;
right
:
8px
;
bottom
:
30px
;
/* above status bar */
display
:
none
;
overflow
:
hidden
;
}
.monaco-workbench.nostatusbar
>
.notifications-center
{
right
:
12px
;
bottom
:
12px
;
}
.monaco-workbench
>
.notifications-center.visible
{
display
:
block
;
}
\ No newline at end of file
src/vs/workbench/browser/parts/notifications/media/notificationsList.css
浏览文件 @
e18c452e
...
...
@@ -3,28 +3,9 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-workbench
>
.notifications-list-container
{
position
:
absolute
;
width
:
600px
;
z-index
:
1000
;
right
:
8px
;
bottom
:
30px
;
/* above status bar */
display
:
none
;
overflow
:
hidden
;
}
.monaco-workbench.nostatusbar
>
.notifications-list-container
{
right
:
12px
;
bottom
:
12px
;
}
.monaco-workbench
>
.notifications-list-container.visible
{
display
:
block
;
}
/** Notification: Container */
.monaco-workbench
>
.notifications-list-container
.notification-list-item
{
.monaco-workbench
.notifications-list-container
.notification-list-item
{
display
:
flex
;
flex-direction
:
column
;
flex-direction
:
column-reverse
;
/* the details row appears first in order for better keyboard access to notification buttons */
...
...
@@ -35,14 +16,14 @@
/** Notification: Main Row */
.monaco-workbench
>
.notifications-list-container
.notification-list-item
>
.notification-list-item-main-row
{
.monaco-workbench
.notifications-list-container
.notification-list-item
>
.notification-list-item-main-row
{
display
:
flex
;
flex-grow
:
1
;
}
/** Notification: Icon */
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-icon
{
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-icon
{
flex
:
0
0
16px
;
height
:
22px
;
margin-right
:
4px
;
...
...
@@ -51,44 +32,44 @@
background-repeat
:
no-repeat
;
}
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-icon.icon-info
{
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-icon.icon-info
{
background-image
:
url('info.svg')
;
}
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-icon.icon-warning
{
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-icon.icon-warning
{
background-image
:
url('warning.svg')
;
}
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-icon.icon-error
{
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-icon.icon-error
{
background-image
:
url('error.svg')
;
}
/** Notification: Message */
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-message
{
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-message
{
line-height
:
22px
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
flex
:
1
;
/* let the message always grow */
}
.monaco-workbench
>
.notifications-list-container
.notification-list-item.expanded
.notification-list-item-message
{
.monaco-workbench
.notifications-list-container
.notification-list-item.expanded
.notification-list-item-message
{
white-space
:
normal
;
}
/** Notification: Toolbar Container */
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
{
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
{
display
:
none
;
}
.monaco-workbench
>
.notifications-list-container
.notification-list-item
:hover
.notification-list-item-toolbar-container
,
.monaco-workbench
>
.notifications-list-container
.monaco-list-row.focused
.notification-list-item
.notification-list-item-toolbar-container
,
.monaco-workbench
>
.notifications-list-container
.notification-list-item.expanded
.notification-list-item-toolbar-container
{
.monaco-workbench
.notifications-list-container
.notification-list-item
:hover
.notification-list-item-toolbar-container
,
.monaco-workbench
.notifications-list-container
.monaco-list-row.focused
.notification-list-item
.notification-list-item-toolbar-container
,
.monaco-workbench
.notifications-list-container
.notification-list-item.expanded
.notification-list-item-toolbar-container
{
display
:
block
;
}
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.action-label
{
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-toolbar-container
.action-label
{
flex
:
0
0
16px
;
display
:
block
;
width
:
16px
;
...
...
@@ -101,20 +82,20 @@
/** Notification: Details Row */
.monaco-workbench
>
.notifications-list-container
.notification-list-item
>
.notification-list-item-details-row
{
.monaco-workbench
.notifications-list-container
.notification-list-item
>
.notification-list-item-details-row
{
display
:
none
;
align-items
:
center
;
padding
:
0
5px
;
overflow
:
hidden
;
/* details row should never overflow */
}
.monaco-workbench
>
.notifications-list-container
.notification-list-item.expanded
>
.notification-list-item-details-row
{
.monaco-workbench
.notifications-list-container
.notification-list-item.expanded
>
.notification-list-item-details-row
{
display
:
flex
;
}
/** Notification: Source */
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-source
{
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-source
{
opacity
:
0.7
;
flex
:
1
;
font-size
:
12px
;
...
...
@@ -123,12 +104,12 @@
/** Notification: Actions */
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-actions-container
.monaco-button
{
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-actions-container
.monaco-button
{
max-width
:
fit-content
;
padding
:
5px
10px
;
font-size
:
12px
;
}
.monaco-workbench
>
.notifications-list-container
.notification-list-item
.notification-list-item-actions-container
.monaco-button
:not
(
:first-of-type
)
{
.monaco-workbench
.notifications-list-container
.notification-list-item
.notification-list-item-actions-container
.monaco-button
:not
(
:first-of-type
)
{
margin-left
:
10px
;
}
\ No newline at end of file
src/vs/workbench/browser/parts/notifications/notificationsCenter.ts
浏览文件 @
e18c452e
...
...
@@ -5,6 +5,7 @@
'
use strict
'
;
import
'
vs/css!./media/notificationsCenter
'
;
import
{
Themable
}
from
'
vs/workbench/common/theme
'
;
import
{
IThemeService
}
from
'
vs/platform/theme/common/themeService
'
;
import
{
INotificationsModel
,
INotificationChangeEvent
,
NotificationChangeType
}
from
'
vs/workbench/common/notifications
'
;
...
...
@@ -15,11 +16,13 @@ import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/c
import
{
NotificationsCenterVisibleContext
}
from
'
vs/workbench/browser/parts/notifications/notificationCommands
'
;
import
{
NotificationsList
}
from
'
vs/workbench/browser/parts/notifications/notificationsList
'
;
import
{
IInstantiationService
}
from
'
vs/platform/instantiation/common/instantiation
'
;
import
{
addClass
,
removeClass
}
from
'
vs/base/browser/dom
'
;
export
class
NotificationsCenter
extends
Themable
{
private
static
MAX_DIMENSIONS
=
new
Dimension
(
600
,
600
);
private
notificationsCenterContainer
:
HTMLElement
;
private
notificationsList
:
NotificationsList
;
private
_isVisible
:
boolean
;
private
workbenchDimensions
:
Dimension
;
...
...
@@ -59,16 +62,22 @@ export class NotificationsCenter extends Themable {
public
show
():
void
{
// Lazily create if showing for the first time
if
(
!
this
.
notificationsList
)
{
this
.
notificationsList
=
this
.
instantiationService
.
createInstance
(
NotificationsList
,
this
.
container
);
if
(
!
this
.
notificationsCenterContainer
)
{
this
.
notificationsCenterContainer
=
document
.
createElement
(
'
div
'
);
addClass
(
this
.
notificationsCenterContainer
,
'
notifications-center
'
);
this
.
notificationsList
=
this
.
instantiationService
.
createInstance
(
NotificationsList
,
this
.
notificationsCenterContainer
);
this
.
container
.
appendChild
(
this
.
notificationsCenterContainer
);
}
// Make visible
this
.
_isVisible
=
true
;
addClass
(
this
.
notificationsCenterContainer
,
'
visible
'
);
this
.
notificationsList
.
show
();
// Layout
this
.
layoutLis
t
();
this
.
doLayou
t
();
// Show all notifications that are present now
this
.
notificationsList
.
updateNotificationsList
(
0
,
0
,
this
.
model
.
notifications
);
...
...
@@ -105,12 +114,13 @@ export class NotificationsCenter extends Themable {
}
public
hide
():
void
{
if
(
!
this
.
_isVisible
||
!
this
.
notifications
List
)
{
if
(
!
this
.
_isVisible
||
!
this
.
notifications
CenterContainer
)
{
return
;
// already hidden
}
// Hide
this
.
_isVisible
=
false
;
removeClass
(
this
.
notificationsCenterContainer
,
'
visible
'
);
this
.
notificationsList
.
hide
();
// Context Key
...
...
@@ -123,12 +133,12 @@ export class NotificationsCenter extends Themable {
public
layout
(
dimension
:
Dimension
):
void
{
this
.
workbenchDimensions
=
dimension
;
if
(
this
.
_isVisible
&&
this
.
notifications
List
)
{
this
.
layoutLis
t
();
if
(
this
.
_isVisible
&&
this
.
notifications
CenterContainer
)
{
this
.
doLayou
t
();
}
}
private
layoutLis
t
():
void
{
private
doLayou
t
():
void
{
let
width
=
NotificationsCenter
.
MAX_DIMENSIONS
.
width
;
let
maxHeight
=
NotificationsCenter
.
MAX_DIMENSIONS
.
height
;
...
...
@@ -159,7 +169,9 @@ export class NotificationsCenter extends Themable {
}
}
this
.
notificationsList
.
layout
(
new
Dimension
(
width
,
maxHeight
));
this
.
notificationsCenterContainer
.
style
.
width
=
`
${
width
}
px`
;
this
.
notificationsList
.
layout
(
maxHeight
);
}
public
clearAll
():
void
{
...
...
src/vs/workbench/browser/parts/notifications/notificationsList.ts
浏览文件 @
e18c452e
...
...
@@ -6,7 +6,7 @@
'
use strict
'
;
import
'
vs/css!./media/notificationsList
'
;
import
{
addClass
,
removeClass
,
isAncestor
}
from
'
vs/base/browser/dom
'
;
import
{
addClass
,
isAncestor
}
from
'
vs/base/browser/dom
'
;
import
{
WorkbenchList
}
from
'
vs/platform/list/browser/listService
'
;
import
{
IInstantiationService
}
from
'
vs/platform/instantiation/common/instantiation
'
;
import
{
IListOptions
}
from
'
vs/base/browser/ui/list/listWidget
'
;
...
...
@@ -17,14 +17,13 @@ import { contrastBorder, widgetShadow } from 'vs/platform/theme/common/colorRegi
import
{
INotificationViewItem
}
from
'
vs/workbench/common/notifications
'
;
import
{
NotificationsListDelegate
,
NotificationRenderer
}
from
'
vs/workbench/browser/parts/notifications/notificationsViewer
'
;
import
{
NotificationActionRunner
}
from
'
vs/workbench/browser/parts/notifications/notificationsActions
'
;
import
{
Dimension
}
from
'
vs/base/browser/builder
'
;
import
{
NotificationFocusedContext
}
from
'
vs/workbench/browser/parts/notifications/notificationCommands
'
;
export
class
NotificationsList
extends
Themable
{
private
listContainer
:
HTMLElement
;
private
list
:
WorkbenchList
<
INotificationViewItem
>
;
private
viewModel
:
INotificationViewItem
[];
private
dimensions
:
Dimension
;
private
maxHeight
:
number
;
private
isVisible
:
boolean
;
constructor
(
...
...
@@ -51,7 +50,6 @@ export class NotificationsList extends Themable {
// Make visible
this
.
isVisible
=
true
;
addClass
(
this
.
listContainer
,
'
visible
'
);
// Focus
this
.
list
.
domFocus
();
...
...
@@ -148,7 +146,6 @@ export class NotificationsList extends Themable {
// Hide
this
.
isVisible
=
false
;
removeClass
(
this
.
listContainer
,
'
visible
'
);
// Clear list
this
.
list
.
splice
(
0
,
this
.
viewModel
.
length
);
...
...
@@ -173,17 +170,15 @@ export class NotificationsList extends Themable {
}
}
public
layout
(
dimension
:
Dimension
):
void
{
this
.
dimensions
=
dimension
;
public
layout
(
maxHeight
:
number
):
void
{
this
.
maxHeight
=
maxHeight
;
this
.
layoutList
();
}
private
layoutList
():
void
{
if
(
this
.
list
)
{
this
.
listContainer
.
style
.
width
=
`
${
this
.
dimensions
.
width
}
px`
;
this
.
list
.
getHTMLElement
().
style
.
maxHeight
=
`
${
this
.
dimensions
.
height
}
px`
;
this
.
list
.
getHTMLElement
().
style
.
maxHeight
=
`
${
this
.
maxHeight
}
px`
;
this
.
list
.
layout
();
}
}
...
...
@@ -198,11 +193,11 @@ export class NotificationsList extends Themable {
registerThemingParticipant
((
theme
:
ITheme
,
collector
:
ICssStyleCollector
)
=>
{
const
linkColor
=
theme
.
getColor
(
NOTIFICATIONS_LINKS
);
if
(
linkColor
)
{
collector
.
addRule
(
`.monaco-workbench
>
.notifications-list-container .notification-list-item .notification-list-item-message a { color:
${
linkColor
}
; }`
);
collector
.
addRule
(
`.monaco-workbench .notifications-list-container .notification-list-item .notification-list-item-message a { color:
${
linkColor
}
; }`
);
}
const
notificationBorderColor
=
theme
.
getColor
(
NOTIFICATIONS_BORDER
);
if
(
notificationBorderColor
)
{
collector
.
addRule
(
`.monaco-workbench
>
.notifications-list-container .notification-list-item { border-bottom: 1px solid
${
notificationBorderColor
}
; }`
);
collector
.
addRule
(
`.monaco-workbench .notifications-list-container .notification-list-item { border-bottom: 1px solid
${
notificationBorderColor
}
; }`
);
}
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录