Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
凌波微步_大先生
dashboard
提交
ef97ccaa
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,发现更多精彩内容 >>
提交
ef97ccaa
编写于
3月 17, 2016
作者:
M
Marcin Maciaszczyk
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #535 from maciaszczykm/card-space-limit
Limit number of labels visible by default
上级
d31587ab
9c706b1e
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
129 addition
and
3 deletion
+129
-3
src/app/frontend/common/components/labels/labels.html
src/app/frontend/common/components/labels/labels.html
+7
-3
src/app/frontend/common/components/labels/labels.scss
src/app/frontend/common/components/labels/labels.scss
+6
-0
src/app/frontend/common/components/labels/labels_controller.js
...pp/frontend/common/components/labels/labels_controller.js
+42
-0
src/test/frontend/common/components/labels/labels_controller_test.js
...ontend/common/components/labels/labels_controller_test.js
+74
-0
未找到文件。
src/app/frontend/common/components/labels/labels.html
浏览文件 @
ef97ccaa
...
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
...
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
limitations under the License.
-->
-->
<div
flex=
"95"
class=
"kd-labels"
ng-repeat=
"(key, value) in ::labelsCtrl.labels"
>
<div
flex=
"95"
class=
"kd-labels"
ng-repeat=
"(key, value) in ::labelsCtrl.labels"
<kd-middle-ellipsis
display-string=
"{{::key}}: {{::value}}"
>
ng-if=
"labelsCtrl.isVisible($index)"
>
</kd-middle-ellipsis>
<kd-middle-ellipsis
display-string=
"{{::key}}: {{::value}}"
></kd-middle-ellipsis>
</div>
<div
class=
"kd-labels kd-labels-switch"
ng-show=
"labelsCtrl.isMoreAvailable()"
ng-click=
"labelsCtrl.switchLabelsView()"
>
{{labelsCtrl.isShowingAll() ? "show less labels" : "show all labels"}}
</div>
</div>
src/app/frontend/common/components/labels/labels.scss
浏览文件 @
ef97ccaa
...
@@ -26,3 +26,9 @@ $label-margin: 0 $baseline-grid ($baseline-grid / 2) 0;
...
@@ -26,3 +26,9 @@ $label-margin: 0 $baseline-grid ($baseline-grid / 2) 0;
padding
:
(
$baseline-grid
/
4
)
$baseline-grid
;
padding
:
(
$baseline-grid
/
4
)
$baseline-grid
;
vertical-align
:
middle
;
vertical-align
:
middle
;
}
}
.kd-labels-switch
{
color
:
$primary
;
cursor
:
pointer
;
outline
:
none
;
}
src/app/frontend/common/components/labels/labels_controller.js
浏览文件 @
ef97ccaa
...
@@ -12,6 +12,12 @@
...
@@ -12,6 +12,12 @@
// See the License for the specific language governing permissions and
// See the License for the specific language governing permissions and
// limitations under the License.
// limitations under the License.
/**
* Number of labels, that are always visible.
* @type {number}
*/
const
alwaysVisibleLabelsNumber
=
8
;
/**
/**
* @final
* @final
*/
*/
...
@@ -23,5 +29,41 @@ export default class LabelsController {
...
@@ -23,5 +29,41 @@ export default class LabelsController {
constructor
()
{
constructor
()
{
/** @export {!Object<string, string>} Initialized from the scope. */
/** @export {!Object<string, string>} Initialized from the scope. */
this
.
labels
;
this
.
labels
;
/** @private {boolean} */
this
.
isShowingAllLabels_
=
false
;
}
}
/**
* Returns true if element at index position should be visible.
*
* @param index
* @return {boolean}
* @export
*/
isVisible
(
index
)
{
return
this
.
isShowingAllLabels_
||
index
<
alwaysVisibleLabelsNumber
;
}
/**
* Returns true if more labels than alwaysVisibleLabelsNumber is available.
*
* @return {boolean}
* @export
*/
isMoreAvailable
()
{
return
Object
.
keys
(
this
.
labels
).
length
>
alwaysVisibleLabelsNumber
;
}
/**
* Returns true if all labels are showed.
*
* @return {boolean}
* @export
*/
isShowingAll
()
{
return
this
.
isShowingAllLabels_
;
}
/**
* Switches labels view between two states, which are showing only alwaysVisibleLabelsNumber of
* labels and showing all labels.
*
* @export
*/
switchLabelsView
()
{
this
.
isShowingAllLabels_
=
!
this
.
isShowingAllLabels_
;
}
}
}
src/test/frontend/common/components/labels/labels_controller_test.js
0 → 100644
浏览文件 @
ef97ccaa
// Copyright 2015 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import
LabelsController
from
'
common/components/labels/labels_controller
'
;
import
componentsModule
from
'
common/components/components_module
'
;
describe
(
'
Labels controller
'
,
()
=>
{
/**
* @type {!LabelsController}
*/
let
ctrl
;
beforeEach
(()
=>
{
angular
.
mock
.
module
(
componentsModule
.
name
);
angular
.
mock
.
inject
((
$controller
)
=>
{
ctrl
=
$controller
(
LabelsController
);
});
});
it
(
'
should display correct number of labels
'
,
()
=>
{
// given
ctrl
.
labels
=
{
'
label-1
'
:
'
value-1
'
,
'
label-2
'
:
'
value-2
'
,
'
label-3
'
:
'
value-3
'
,
'
label-4
'
:
'
value-4
'
,
'
label-5
'
:
'
value-5
'
,
'
label-6
'
:
'
value-6
'
,
'
label-7
'
:
'
value-7
'
,
'
label-8
'
:
'
value-8
'
,
'
label-9
'
:
'
value-9
'
,
'
label-10
'
:
'
value-10
'
,
};
expect
(
ctrl
.
isMoreAvailable
()).
toBe
(
true
);
expect
(
ctrl
.
isShowingAll
()).
toBe
(
false
);
expect
(
ctrl
.
isVisible
(
0
)).
toBe
(
true
);
expect
(
ctrl
.
isVisible
(
7
)).
toBe
(
true
);
expect
(
ctrl
.
isVisible
(
8
)).
toBe
(
false
);
// when
ctrl
.
switchLabelsView
();
// then
expect
(
ctrl
.
isShowingAll
()).
toBe
(
true
);
expect
(
ctrl
.
isVisible
(
0
)).
toBe
(
true
);
expect
(
ctrl
.
isVisible
(
7
)).
toBe
(
true
);
expect
(
ctrl
.
isVisible
(
8
)).
toBe
(
true
);
});
it
(
'
should not display switch if there are less than 8 labels
'
,
()
=>
{
// given
ctrl
.
labels
=
{
'
label-1
'
:
'
value-1
'
,
'
label-2
'
:
'
value-2
'
,
'
label-3
'
:
'
value-3
'
,
'
label-4
'
:
'
value-4
'
,
'
label-5
'
:
'
value-5
'
,
'
label-6
'
:
'
value-6
'
,
};
// then
expect
(
ctrl
.
isMoreAvailable
()).
toBe
(
false
);
});
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录