Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
凌波微步_大先生
dashboard
提交
50abf419
D
dashboard
项目概览
凌波微步_大先生
/
dashboard
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
dashboard
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
50abf419
编写于
5月 21, 2020
作者:
S
Sebastian Florek
提交者:
GitHub
5月 21, 2020
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Fix card expand animation (#5161)
上级
3076efe5
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
17 addition
and
16 deletion
+17
-16
src/app/frontend/common/animations/animations.ts
src/app/frontend/common/animations/animations.ts
+7
-13
src/app/frontend/common/components/card/component.ts
src/app/frontend/common/components/card/component.ts
+6
-0
src/app/frontend/common/components/card/style.scss
src/app/frontend/common/components/card/style.scss
+2
-2
src/app/frontend/common/components/card/template.html
src/app/frontend/common/components/card/template.html
+2
-1
未找到文件。
src/app/frontend/common/animations/animations.ts
浏览文件 @
50abf419
...
...
@@ -18,36 +18,30 @@ const DEFAULT_TRANSITION_TIME = '500ms ease-in-out';
export
class
Animations
{
static
easeOut
=
trigger
(
'
easeOut
'
,
[
transition
(
'
* => void
'
,
[
transition
(
`
${
AUTO_STYLE
}
=> void`
,
[
style
({
opacity
:
1
}),
animate
(
DEFAULT_TRANSITION_TIME
,
style
({
opacity
:
0
})),
]),
]);
static
easeInOut
=
trigger
(
'
easeInOut
'
,
[
transition
(
'
void => *
'
,
[
transition
(
`void =>
${
AUTO_STYLE
}
`
,
[
style
({
opacity
:
0
}),
animate
(
DEFAULT_TRANSITION_TIME
,
style
({
opacity
:
1
})),
]),
transition
(
'
* => void
'
,
[
animate
(
DEFAULT_TRANSITION_TIME
,
style
({
opacity
:
0
}))]),
transition
(
`
${
AUTO_STYLE
}
=> void`
,
[
animate
(
DEFAULT_TRANSITION_TIME
,
style
({
opacity
:
0
}))]),
]);
static
expandInOut
=
trigger
(
'
expandInOut
'
,
[
state
(
'
true
'
,
style
({
height
:
'
0
'
,
display
:
'
none
'
})),
state
(
'
false
'
,
style
({
height
:
AUTO_STYLE
,
display
:
AUTO_STYLE
,
}),
),
state
(
'
true
'
,
style
({
height
:
'
0
'
,
opacity
:
'
0
'
})),
state
(
'
false
'
,
style
({
height
:
AUTO_STYLE
,
opacity
:
'
1
'
})),
transition
(
'
false => true
'
,
[
style
({
overflow
:
'
hidden
'
}),
animate
(
'
500ms ease-in
'
,
style
({
height
:
'
0
'
})),
]),
transition
(
'
true => false
'
,
[
style
({
overflow
:
'
hidden
'
}),
animate
(
'
500ms ease-out
'
,
style
({
height
:
AUTO_STYLE
})),
style
({
overflow
:
'
hidden
'
,
opacity
:
'
1
'
}),
animate
(
'
500ms ease-out
'
,
style
({
height
:
AUTO_STYLE
,
display
:
AUTO_STYLE
})),
]),
]);
}
src/app/frontend/common/components/card/component.ts
浏览文件 @
50abf419
...
...
@@ -42,6 +42,12 @@ export class CardComponent {
}
}
onCardHeaderClick
():
void
{
if
(
this
.
expandable
&&
!
this
.
expanded
)
{
this
.
expanded
=
true
;
}
}
getTitleClasses
():
{[
clsName
:
string
]:
boolean
}
{
const
ngCls
=
{}
as
{[
clsName
:
string
]:
boolean
};
if
(
!
this
.
expanded
)
{
...
...
src/app/frontend/common/components/card/style.scss
浏览文件 @
50abf419
...
...
@@ -37,7 +37,7 @@
.kd-card-actions
{
display
:
block
;
padding
:
$baseline-grid
(
2
*
$baseline-grid
);
padding
:
0
(
2
*
$baseline-grid
);
}
.kd-card-toggle
{
...
...
@@ -57,7 +57,7 @@
font-size
:
$title-font-size-base
;
font-weight
:
$regular-font-weight
;
margin-right
:
$baseline-grid
;
padding
:
$baseline-grid
0
$baseline-grid
(
2
*
$baseline-grid
);
padding
:
(
2
*
$baseline-grid
)
0
(
2
*
$baseline-grid
)
(
2
*
$baseline-grid
);
}
.kd-card-description
{
...
...
src/app/frontend/common/components/card/template.html
浏览文件 @
50abf419
...
...
@@ -17,6 +17,7 @@ limitations under the License.
<mat-card
[ngClass]=
"{'kd-minimized-card': !expanded && !graphMode, 'kd-graph': graphMode}"
>
<mat-card-title
*ngIf=
"withTitle"
[ngClass]=
"getTitleClasses()"
(click)=
"onCardHeaderClick(); $event.stopPropagation()"
fxLayoutAlign=
" center"
>
<div
class=
"kd-card-title"
fxFlex=
"100%"
>
...
...
@@ -36,7 +37,7 @@ limitations under the License.
</div>
<button
class=
"kd-card-toggle"
mat-icon-button
(click)=
"expand()"
(click)=
"expand()
; $event.stopPropagation()
"
*ngIf=
"expandable"
>
<mat-icon
class=
"kd-muted"
[matTooltip]=
"expanded ? 'Minimize card' : 'Expand card'"
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录