Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
a96745d4
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
a96745d4
编写于
4月 19, 2018
作者:
F
Filipa Lacerda
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Runs prettier on some vue shared components
上级
0517e1d8
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
257 addition
and
266 deletion
+257
-266
app/assets/javascripts/vue_shared/components/commit.vue
app/assets/javascripts/vue_shared/components/commit.vue
+103
-112
app/assets/javascripts/vue_shared/components/expand_button.vue
...ssets/javascripts/vue_shared/components/expand_button.vue
+27
-27
app/assets/javascripts/vue_shared/components/header_ci_component.vue
...javascripts/vue_shared/components/header_ci_component.vue
+66
-66
app/assets/javascripts/vue_shared/components/icon.vue
app/assets/javascripts/vue_shared/components/icon.vue
+59
-59
spec/javascripts/vue_shared/components/expand_button_spec.js
spec/javascripts/vue_shared/components/expand_button_spec.js
+2
-2
未找到文件。
app/assets/javascripts/vue_shared/components/commit.vue
浏览文件 @
a96745d4
<
script
>
import
commitIconSvg
from
'
icons/_icon_commit.svg
'
;
import
userAvatarLink
from
'
./user_avatar/user_avatar_link.vue
'
;
import
tooltip
from
'
../directives/tooltip
'
;
import
icon
from
'
../../vue_shared/components/icon.vue
'
;
import
UserAvatarLink
from
'
./user_avatar/user_avatar_link.vue
'
;
import
tooltip
from
'
../directives/tooltip
'
;
import
Icon
from
'
../../vue_shared/components/icon.vue
'
;
export
default
{
directives
:
{
tooltip
,
export
default
{
directives
:
{
tooltip
,
},
components
:
{
UserAvatarLink
,
Icon
,
},
props
:
{
/**
* Indicates the existance of a tag.
* Used to render the correct icon, if true will render `fa-tag` icon,
* if false will render a svg sprite fork icon
*/
tag
:
{
type
:
Boolean
,
required
:
false
,
default
:
false
,
},
components
:
{
userAvatarLink
,
icon
,
/**
* If provided is used to render the branch name and url.
* Should contain the following properties:
* name
* ref_url
*/
commitRef
:
{
type
:
Object
,
required
:
false
,
default
:
()
=>
({}),
},
/**
* Used to link to the commit sha.
*/
commitUrl
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
props
:
{
/**
* Indicates the existance of a tag.
* Used to render the correct icon, if true will render `fa-tag` icon,
* if false will render a svg sprite fork icon
*/
tag
:
{
type
:
Boolean
,
required
:
false
,
default
:
false
,
},
/**
* If provided is used to render the branch name and url.
* Should contain the following properties:
* name
* ref_url
*/
commitRef
:
{
type
:
Object
,
required
:
false
,
default
:
()
=>
({}),
},
/**
* Used to link to the commit sha.
*/
commitUrl
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
/**
* Used to show the commit short sha that links to the commit url.
*/
shortSha
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
/**
* If provided shows the commit tile.
*/
title
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
/**
* If provided renders information about the author of the commit.
* When provided should include:
* `avatar_url` to render the avatar icon
* `web_url` to link to user profile
* `username` to render alt and title tags
*/
author
:
{
type
:
Object
,
required
:
false
,
default
:
()
=>
({}),
},
showBranch
:
{
type
:
Boolean
,
required
:
false
,
default
:
true
,
},
/**
* Used to show the commit short sha that links to the commit url.
*/
shortSha
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
/**
* If provided shows the commit tile.
*/
title
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
/**
* If provided renders information about the author of the commit.
* When provided should include:
* `avatar_url` to render the avatar icon
* `web_url` to link to user profile
* `username` to render alt and title tags
*/
author
:
{
type
:
Object
,
required
:
false
,
default
:
()
=>
({}),
},
showBranch
:
{
type
:
Boolean
,
required
:
false
,
default
:
true
,
},
computed
:
{
/**
* Used to verify if all the properties needed to render the commit
* ref section were provided.
*
* @returns {Boolean}
*/
hasCommitRef
()
{
return
this
.
commitRef
&&
this
.
commitRef
.
name
&&
this
.
commitRef
.
ref_url
;
},
/**
* Used to verify if all the properties needed to render the commit
* author section were provided.
*
* @returns {Boolean}
*/
hasAuthor
()
{
return
this
.
author
&&
this
.
author
.
avatar_url
&&
this
.
author
.
path
&&
this
.
author
.
username
;
},
/**
* If information about the author is provided will return a string
* to be rendered as the alt attribute of the img tag.
*
* @returns {String}
*/
userImageAltDescription
()
{
return
this
.
author
&&
this
.
author
.
username
?
`
${
this
.
author
.
username
}
's avatar`
:
null
;
},
},
computed
:
{
/**
* Used to verify if all the properties needed to render the commit
* ref section were provided.
*
* @returns {Boolean}
*/
hasCommitRef
()
{
return
this
.
commitRef
&&
this
.
commitRef
.
name
&&
this
.
commitRef
.
ref_url
;
},
created
()
{
this
.
commitIconSvg
=
commitIconSvg
;
/**
* Used to verify if all the properties needed to render the commit
* author section were provided.
*
* @returns {Boolean}
*/
hasAuthor
()
{
return
this
.
author
&&
this
.
author
.
avatar_url
&&
this
.
author
.
path
&&
this
.
author
.
username
;
},
};
/**
* If information about the author is provided will return a string
* to be rendered as the alt attribute of the img tag.
*
* @returns {String}
*/
userImageAltDescription
()
{
return
this
.
author
&&
this
.
author
.
username
?
`
${
this
.
author
.
username
}
's avatar`
:
null
;
},
},
};
</
script
>
<
template
>
<div
class=
"branch-commit"
>
...
...
@@ -141,11 +133,10 @@
{{
commitRef
.
name
}}
</a>
</
template
>
<
div
v-html=
"commitIconSvg
"
<
icon
name=
"commit
"
class=
"commit-icon js-commit-icon"
>
</div>
/>
<a
class=
"commit-sha"
...
...
app/assets/javascripts/vue_shared/components/expand_button.vue
浏览文件 @
a96745d4
<
script
>
import
{
__
}
from
'
~/locale
'
;
/**
* Port of detail_behavior expand button.
*
* @example
* <expand-button>
* <template slot="expanded">
* Text goes here.
* </template>
* </expand-button>
*/
export
default
{
name
:
'
ExpandButton
'
,
data
()
{
return
{
isCollapsed
:
true
,
};
import
{
__
}
from
'
~/locale
'
;
/**
* Port of detail_behavior expand button.
*
* @example
* <expand-button>
* <template slot="expanded">
* Text goes here.
* </template>
* </expand-button>
*/
export
default
{
name
:
'
ExpandButton
'
,
data
()
{
return
{
isCollapsed
:
true
,
};
},
computed
:
{
ariaLabel
()
{
return
__
(
'
Click to expand text
'
);
},
computed
:
{
ariaLabel
()
{
return
__
(
'
Click to expand text
'
);
},
},
methods
:
{
onClick
()
{
this
.
isCollapsed
=
!
this
.
isCollapsed
;
},
methods
:
{
onClick
()
{
this
.
isCollapsed
=
!
this
.
isCollapsed
;
},
},
};
},
};
</
script
>
<
template
>
<span>
...
...
app/assets/javascripts/vue_shared/components/header_ci_component.vue
浏览文件 @
a96745d4
<
script
>
import
c
iIconBadge
from
'
./ci_badge_link.vue
'
;
import
l
oadingIcon
from
'
./loading_icon.vue
'
;
import
t
imeagoTooltip
from
'
./time_ago_tooltip.vue
'
;
import
tooltip
from
'
../directives/tooltip
'
;
import
u
serAvatarImage
from
'
./user_avatar/user_avatar_image.vue
'
;
import
C
iIconBadge
from
'
./ci_badge_link.vue
'
;
import
L
oadingIcon
from
'
./loading_icon.vue
'
;
import
T
imeagoTooltip
from
'
./time_ago_tooltip.vue
'
;
import
tooltip
from
'
../directives/tooltip
'
;
import
U
serAvatarImage
from
'
./user_avatar/user_avatar_image.vue
'
;
/**
* Renders header component for job and pipeline page based on UI mockups
*
* Used in:
* - job show page
* - pipeline show page
*/
export
default
{
components
:
{
ciIconBadge
,
loadingIcon
,
timeagoTooltip
,
userAvatarImage
,
/**
* Renders header component for job and pipeline page based on UI mockups
*
* Used in:
* - job show page
* - pipeline show page
*/
export
default
{
components
:
{
CiIconBadge
,
LoadingIcon
,
TimeagoTooltip
,
UserAvatarImage
,
},
directives
:
{
tooltip
,
},
props
:
{
status
:
{
type
:
Object
,
required
:
true
,
},
directives
:
{
tooltip
,
itemName
:
{
type
:
String
,
required
:
true
,
},
props
:
{
status
:
{
type
:
Object
,
required
:
true
,
},
itemName
:
{
type
:
String
,
required
:
true
,
},
itemId
:
{
type
:
Number
,
required
:
true
,
},
time
:
{
type
:
String
,
required
:
true
,
},
user
:
{
type
:
Object
,
required
:
false
,
default
:
()
=>
({}),
},
actions
:
{
type
:
Array
,
required
:
false
,
default
:
()
=>
[],
},
hasSidebarButton
:
{
type
:
Boolean
,
required
:
false
,
default
:
false
,
},
shouldRenderTriggeredLabel
:
{
type
:
Boolean
,
required
:
false
,
default
:
true
,
},
itemId
:
{
type
:
Number
,
required
:
true
,
},
time
:
{
type
:
String
,
required
:
true
,
},
user
:
{
type
:
Object
,
required
:
false
,
default
:
()
=>
({}),
},
actions
:
{
type
:
Array
,
required
:
false
,
default
:
()
=>
[],
},
hasSidebarButton
:
{
type
:
Boolean
,
required
:
false
,
default
:
false
,
},
shouldRenderTriggeredLabel
:
{
type
:
Boolean
,
required
:
false
,
default
:
true
,
},
},
computed
:
{
userAvatarAltText
()
{
return
`
${
this
.
user
.
name
}
's avatar`
;
},
computed
:
{
userAvatarAltText
()
{
return
`
${
this
.
user
.
name
}
's avatar`
;
},
},
methods
:
{
onClickAction
(
action
)
{
this
.
$emit
(
'
actionClicked
'
,
action
);
},
methods
:
{
onClickAction
(
action
)
{
this
.
$emit
(
'
actionClicked
'
,
action
);
},
};
},
};
</
script
>
<
template
>
...
...
app/assets/javascripts/vue_shared/components/icon.vue
浏览文件 @
a96745d4
<
script
>
/* This is a re-usable vue component for rendering a svg sprite
icon
/* This is a re-usable vue component for rendering a svg sprite
icon
Sample configuration:
Sample configuration:
<icon
name="retry"
:size="32"
css-classes="top"
/>
<icon
name="retry"
:size="32"
css-classes="top"
/>
*/
// only allow classes in images.scss e.g. s12
const
validSizes
=
[
8
,
12
,
16
,
18
,
24
,
32
,
48
,
72
];
*/
// only allow classes in images.scss e.g. s12
const
validSizes
=
[
8
,
12
,
16
,
18
,
24
,
32
,
48
,
72
];
export
default
{
props
:
{
name
:
{
type
:
String
,
required
:
true
,
},
export
default
{
props
:
{
name
:
{
type
:
String
,
required
:
true
,
},
size
:
{
type
:
Number
,
required
:
false
,
default
:
16
,
validator
(
value
)
{
return
validSizes
.
includes
(
value
);
},
size
:
{
type
:
Number
,
required
:
false
,
default
:
16
,
validator
(
value
)
{
return
validSizes
.
includes
(
value
);
},
},
cssClasses
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
cssClasses
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
width
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
width
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
height
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
height
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
y
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
y
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
x
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
x
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
},
computed
:
{
spriteHref
()
{
return
`
${
gon
.
sprite_icons
}
#
${
this
.
name
}
`
;
},
iconSizeClass
()
{
return
this
.
size
?
`s
${
this
.
size
}
`
:
''
;
},
computed
:
{
spriteHref
()
{
return
`
${
gon
.
sprite_icons
}
#
${
this
.
name
}
`
;
},
iconSizeClass
()
{
return
this
.
size
?
`s
${
this
.
size
}
`
:
''
;
},
};
},
};
</
script
>
<
template
>
...
...
@@ -79,7 +78,8 @@
:width=
"width"
:height=
"height"
:x=
"x"
:y=
"y"
>
:y=
"y"
>
<use
v-bind=
"
{ 'xlink:href':spriteHref }" />
</svg>
</
template
>
spec/javascripts/vue_shared/components/expand_button_spec.js
浏览文件 @
a96745d4
...
...
@@ -3,10 +3,10 @@ import expandButton from '~/vue_shared/components/expand_button.vue';
import
mountComponent
from
'
spec/helpers/vue_mount_component_helper
'
;
describe
(
'
expand button
'
,
()
=>
{
const
Component
=
Vue
.
extend
(
expandButton
);
let
vm
;
beforeEach
(()
=>
{
const
Component
=
Vue
.
extend
(
expandButton
);
vm
=
mountComponent
(
Component
,
{
slots
:
{
expanded
:
'
<p>Expanded!</p>
'
,
...
...
@@ -22,7 +22,7 @@ describe('expand button', () => {
expect
(
vm
.
$el
.
textContent
.
trim
()).
toEqual
(
'
...
'
);
});
it
(
'
hides expander on click
'
,
(
done
)
=>
{
it
(
'
hides expander on click
'
,
done
=>
{
vm
.
$el
.
querySelector
(
'
button
'
).
click
();
vm
.
$nextTick
(()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
button
'
).
getAttribute
(
'
style
'
)).
toEqual
(
'
display: none;
'
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录