Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
凌波微步_大先生
dashboard
提交
a68e63f7
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,发现更多精彩内容 >>
提交
a68e63f7
编写于
12月 28, 2015
作者:
P
Piotr Bryk
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #195 from bryk/extract-card-column-layout
Column layout for replica set list view
上级
f08d8235
7f65f2a3
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
294 addition
and
10 deletion
+294
-10
build/style.js
build/style.js
+1
-0
src/app/frontend/replicasetlist/replicasetcard.html
src/app/frontend/replicasetlist/replicasetcard.html
+2
-2
src/app/frontend/replicasetlist/replicasetcard.scss
src/app/frontend/replicasetlist/replicasetcard.scss
+1
-1
src/app/frontend/replicasetlist/replicasetcard_directive.js
src/app/frontend/replicasetlist/replicasetcard_directive.js
+3
-2
src/app/frontend/replicasetlist/replicasetlist.html
src/app/frontend/replicasetlist/replicasetlist.html
+4
-5
src/app/frontend/replicasetlist/replicasetlist_module.js
src/app/frontend/replicasetlist/replicasetlist_module.js
+2
-0
src/app/frontend/replicasetlist/replicasetlistcontainer.html
src/app/frontend/replicasetlist/replicasetlistcontainer.html
+17
-0
src/app/frontend/replicasetlist/replicasetlistcontainer.js
src/app/frontend/replicasetlist/replicasetlistcontainer.js
+132
-0
src/app/frontend/replicasetlist/replicasetlistcontainer.scss
src/app/frontend/replicasetlist/replicasetlistcontainer.scss
+21
-0
src/app/frontend/replicasetlist/replicasetlistcontainer_directive.js
...ntend/replicasetlist/replicasetlistcontainer_directive.js
+46
-0
src/test/frontend/replicasetlist/replicasetlistcontainer_test.js
...t/frontend/replicasetlist/replicasetlistcontainer_test.js
+65
-0
未找到文件。
build/style.js
浏览文件 @
a68e63f7
...
...
@@ -38,6 +38,7 @@ gulp.task('styles', function() {
return
gulp
.
src
(
path
.
join
(
conf
.
paths
.
frontendSrc
,
'
**/*.scss
'
))
.
pipe
(
gulpSourcemaps
.
init
())
.
pipe
(
gulpSass
(
sassOptions
))
.
pipe
(
gulpAutoprefixer
())
.
pipe
(
gulpSourcemaps
.
write
(
"
.
"
))
.
pipe
(
gulp
.
dest
(
conf
.
paths
.
serve
))
// If BrowserSync is running, inform it that styles have changed.
...
...
src/app/frontend/replicasetlist/replicasetcard.html
浏览文件 @
a68e63f7
...
...
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<md-card>
<md-card-content
class=
"kd-replicaset-card"
>
<md-card
class=
"kd-replicaset-card"
>
<md-card-content>
<div
layout=
"row"
layout-align=
"space-between center"
>
<div
flex
layout=
"column"
>
<a
ng-href=
"{{::ctrl.getReplicaSetDetailHref()}}"
flex
>
...
...
src/app/frontend/replicasetlist/replicasetcard.scss
浏览文件 @
a68e63f7
...
...
@@ -15,7 +15,7 @@
@import
'../../assets/styles/color_variables'
;
.kd-replicaset-card
{
width
:
400px
;
width
:
400px
;
}
// This override button style to make it look like a link.
...
...
src/app/frontend/replicasetlist/replicasetcard_directive.js
浏览文件 @
a68e63f7
...
...
@@ -15,10 +15,11 @@
import
ReplicaSetCardController
from
'
./replicasetcard_controller
'
;
/**
* Returns directive definition object for logs menu.
* Returns directive definition object for replica set card directive.
*
* @return {!angular.Directive}
*/
export
default
function
logsMenu
Directive
()
{
export
default
function
replicaSetCard
Directive
()
{
return
{
scope
:
{},
bindToController
:
{
...
...
src/app/frontend/replicasetlist/replicasetlist.html
浏览文件 @
a68e63f7
...
...
@@ -18,8 +18,7 @@ limitations under the License.
<md-icon
class=
"material-icons"
>
add
</md-icon>
</md-button>
<div
layout=
"row"
layout-wrap
layout-margin
layout-align=
"center center"
>
<div
ng-repeat=
"replicaSet in ::ctrl.replicaSets"
>
<kd-replica-set-card
replica-set=
"::replicaSet"
></kd-replica-set-card>
</div>
</div>
<kd-replica-set-list-container>
<kd-replica-set-card
ng-repeat=
"replicaSet in ::ctrl.replicaSets"
replica-set=
"::replicaSet"
>
</kd-replica-set-card>
</kd-replica-set-list-container>
src/app/frontend/replicasetlist/replicasetlist_module.js
浏览文件 @
a68e63f7
...
...
@@ -17,6 +17,7 @@ import logsMenuDirective from './logsmenu_directive';
import
middleEllipsisFilter
from
'
common/filters/middleellipsis_filter
'
;
import
replicaSetCardDirective
from
'
./replicasetcard_directive
'
;
import
replicaSetDetailModule
from
'
replicasetdetail/replicasetdetail_module
'
;
import
replicaSetListContainer
from
'
./replicasetlistcontainer_directive
'
;
/**
* Angular module for the Replica Set list view.
...
...
@@ -34,4 +35,5 @@ export default angular.module(
.
config
(
stateConfig
)
.
filter
(
'
middleEllipsis
'
,
middleEllipsisFilter
)
.
directive
(
'
logsMenu
'
,
logsMenuDirective
)
.
directive
(
'
kdReplicaSetListContainer
'
,
replicaSetListContainer
)
.
directive
(
'
kdReplicaSetCard
'
,
replicaSetCardDirective
);
src/app/frontend/replicasetlist/replicasetlistcontainer.html
0 → 100644
浏览文件 @
a68e63f7
<!--
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.
-->
<div
class=
"kd-replica-set-list-container"
ng-transclude
></div>
src/app/frontend/replicasetlist/replicasetlistcontainer.js
0 → 100644
浏览文件 @
a68e63f7
// 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.
/**
* Computes optimal height of the given container that will fit all its child elements into N
* column layout. N is based on current media query from the $mdMedia service.
*
* @param {!Element} container Container element that has child elements to be arranged in columns.
* It should be a flexbox container with columns wrapped.
* @param {function(string):boolean} mdMedia Angular Material $mdMedia service
* @return {number}
*/
export
default
function
computeContainerHeight
(
container
,
mdMedia
)
{
/** @type {!Array<number>} */
let
childHeights
=
Array
.
prototype
.
map
.
call
(
container
.
children
,
(
child
)
=>
child
.
offsetHeight
);
let
columnCount
=
computeColumnCount
(
mdMedia
);
return
binarySearchOptimalHeight
(
childHeights
,
columnCount
);
}
/**
* Returns optimal number of columns for current window size.
*
* @param {function(string):boolean} mdMedia Angular Material $mdMedia service
* @return {number}
*/
function
computeColumnCount
(
mdMedia
)
{
if
(
mdMedia
(
'
gt-md
'
))
{
return
3
;
}
else
if
(
mdMedia
(
'
md
'
))
{
return
2
;
}
else
{
return
1
;
}
}
/**
* Does binary search to find minimal integer I such that with height I elements fit into numColumns
* and with height I - 1 they do not.
*
* @param {!Array<number>} heights
* @param {number} numColumns
* @return {number}
*/
export
function
binarySearchOptimalHeight
(
heights
,
numColumns
)
{
let
sum
=
Math
.
ceil
(
heights
.
reduce
((
a
,
b
)
=>
a
+
b
,
0
));
let
height
=
0
;
let
left
=
0
;
let
right
=
sum
;
for
(;;)
{
height
=
Math
.
floor
((
left
+
right
)
/
2
);
let
[
leftChunks
,
rightChunks
]
=
getActualColumnCount
(
heights
,
height
-
1
,
height
);
if
((
leftChunks
>
numColumns
&&
rightChunks
<=
numColumns
)
||
(
left
===
right
))
{
break
;
}
else
if
(
leftChunks
>
numColumns
)
{
left
=
height
+
1
;
}
else
{
right
=
height
;
}
}
return
height
;
}
/**
* Returns actual column count for the given array of element heights and two actual heights.
* Two values are returned, first for leftHeight and the other for rightHeight. Infinity is
* returned if for any height (left of right) there is an item that does not fit it.
*
* @param {!Array<number>} heights
* @param {number} leftHeight
* @param {number} rightHeight
* @return {!Array<number>}
*/
function
getActualColumnCount
(
heights
,
leftHeight
,
rightHeight
)
{
let
sizeLeftChunks
=
0
;
let
currentLeftHeight
=
0
;
let
doesNotFitLeftHeight
=
false
;
let
doesNotFitRightHeight
=
false
;
let
sizeRightChunks
=
0
;
let
currentRightHeight
=
0
;
for
(
let
item
of
heights
)
{
if
(
item
>
leftHeight
)
{
doesNotFitLeftHeight
=
true
;
}
if
(
item
>
rightHeight
)
{
doesNotFitRightHeight
=
true
;
}
if
(
currentLeftHeight
+
item
>
leftHeight
)
{
currentLeftHeight
=
item
;
sizeLeftChunks
+=
1
;
}
else
{
currentLeftHeight
+=
item
;
}
if
(
currentRightHeight
+
item
>
rightHeight
)
{
currentRightHeight
=
item
;
sizeRightChunks
+=
1
;
}
else
{
currentRightHeight
+=
item
;
}
}
if
(
currentLeftHeight
!==
0
)
{
sizeLeftChunks
+=
1
;
}
if
(
currentRightHeight
!==
0
)
{
sizeRightChunks
+=
1
;
}
if
(
doesNotFitLeftHeight
)
{
sizeLeftChunks
=
Number
.
POSITIVE_INFINITY
;
}
if
(
doesNotFitRightHeight
)
{
sizeRightChunks
=
Number
.
POSITIVE_INFINITY
;
}
return
[
sizeLeftChunks
,
sizeRightChunks
];
}
src/app/frontend/replicasetlist/replicasetlistcontainer.scss
0 → 100644
浏览文件 @
a68e63f7
// 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.
.kd-replica-set-list-container
{
align-content
:
center
;
align-items
:
center
;
display
:
flex
;
flex-flow
:
column
wrap
;
justify-content
:
top
;
}
src/app/frontend/replicasetlist/replicasetlistcontainer_directive.js
0 → 100644
浏览文件 @
a68e63f7
// 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
computeContainerHeight
from
'
./replicasetlistcontainer
'
;
/**
* Returns directive definition object for the replica set list directive.
*
* @param {function(string):boolean} $mdMedia Angular Material $mdMedia service
* @return {!angular.Directive}
* @ngInject
*/
export
default
function
replicaSetListContainerDirective
(
$mdMedia
)
{
return
{
scope
:
{},
transclude
:
true
,
/**
* @param {!angular.Scope} scope
* @param {!angular.JQLite} jQliteElem
*/
link
:
function
(
scope
,
jQliteElem
)
{
/** @type {!Element} */
let
element
=
jQliteElem
[
0
];
let
container
=
element
.
querySelector
(
'
.kd-replica-set-list-container
'
);
if
(
!
container
)
{
throw
new
Error
(
'
Required child element .kd-replica-set-list-container not found
'
);
}
let
nonNullContainer
=
container
;
scope
.
$watch
(()
=>
computeContainerHeight
(
nonNullContainer
,
$mdMedia
),
(
newHeight
)
=>
{
container
.
style
.
height
=
`
${
newHeight
}
px`
;
});
},
templateUrl
:
'
replicasetlist/replicasetlistcontainer.html
'
,
};
}
src/test/frontend/replicasetlist/replicasetlistcontainer_test.js
0 → 100644
浏览文件 @
a68e63f7
// 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
{
binarySearchOptimalHeight
}
from
'
replicasetlist/replicasetlistcontainer
'
;
describe
(
'
Replica set list container
'
,
()
=>
{
it
(
'
should compute optimal height
'
,
()
=>
{
let
testData
=
[
// The format is: [heights array, num columns, expected result].
[[],
0
,
0
],
[[],
1
,
0
],
[[],
2321
,
0
],
[[
1
],
0
,
1
],
[[
1
],
1
,
1
],
[[
1
],
2321
,
1
],
[[
2321
],
1
,
2321
],
[[
2321
],
2321
,
2321
],
[[
1
,
1
],
1
,
2
],
[[
1
,
1
],
2
,
1
],
[[
1
,
2
,
5
,
8
,
1
,
3
,
6
,
2
,
3
],
1
,
31
],
[[
1
,
2
,
5
,
8
,
1
,
3
,
6
,
2
,
3
],
2
,
16
],
[[
1
,
2
,
5
,
8
,
1
,
3
,
6
,
2
,
3
],
3
,
12
],
[[
1
,
2
,
5
,
8
,
1
,
3
,
6
,
2
,
3
],
4
,
9
],
[[
1
,
2
,
5
,
8
,
1
,
3
,
6
,
2
,
3
],
5
,
8
],
[[
1
,
2
,
5
,
8
,
1
,
3
,
6
,
2
,
3
],
10
,
8
],
[[
1
,
2
,
5
,
8
,
1
,
3
,
6
,
2
,
3
],
2321
,
8
],
// Below test data is based on real examples.
[[
237
,
237
,
197
,
197
,
197
,
197
,
197
,
251
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
8
,
474
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
197
,
251
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
7
,
612
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
197
,
251
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
6
,
654
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
197
,
251
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
5
,
788
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
197
,
251
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
4
,
891
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
197
,
251
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
3
,
1262
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
197
,
251
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
2
,
1742
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
197
,
251
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
1
,
3452
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
197
,
251
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
0
,
3452
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
10000
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
10
,
10000
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
10000
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
5
,
10000
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
10000
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
3
,
10000
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
10000
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
2
,
11262
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
10000
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
1
,
13004
],
[[
237
,
237
,
197
,
197
,
197
,
197
,
10000
,
204
,
237
,
246
,
204
,
197
,
211
,
232
,
211
],
0
,
13004
],
];
for
(
let
[
heights
,
numColumns
,
expected
]
of
testData
)
{
let
actual
=
binarySearchOptimalHeight
(
heights
,
numColumns
);
expect
(
actual
).
toBe
(
expected
,
`Expected height to be
${
expected
}
but was
${
actual
}
. `
+
`Required number of columns:
${
numColumns
}
, heights: [
${
heights
}
]`
);
}
});
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录