Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
6cb575d6
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,发现更多精彩内容 >>
提交
6cb575d6
编写于
6月 06, 2017
作者:
E
Eric Eastwood
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add support for multiple tooltips in the same Vue component
Fix
https://gitlab.com/gitlab-org/gitlab-ce/issues/33223
上级
bf0b3d83
变更
30
隐藏空白更改
内联
并排
Showing
30 changed file
with
251 addition
and
123 deletion
+251
-123
app/assets/javascripts/environments/components/environment_actions.vue
...vascripts/environments/components/environment_actions.vue
+7
-4
app/assets/javascripts/environments/components/environment_external_url.vue
...ipts/environments/components/environment_external_url.vue
+8
-1
app/assets/javascripts/environments/components/environment_monitoring.vue
...cripts/environments/components/environment_monitoring.vue
+8
-1
app/assets/javascripts/environments/components/environment_stop.vue
.../javascripts/environments/components/environment_stop.vue
+7
-1
app/assets/javascripts/environments/components/environment_terminal_button.vue
...s/environments/components/environment_terminal_button.vue
+7
-1
app/assets/javascripts/issue_show/components/fields/project_move.vue
...javascripts/issue_show/components/fields/project_move.vue
+6
-6
app/assets/javascripts/pipelines/components/async_button.vue
app/assets/javascripts/pipelines/components/async_button.vue
+5
-6
app/assets/javascripts/pipelines/components/graph/action_component.vue
...vascripts/pipelines/components/graph/action_component.vue
+5
-6
app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
.../pipelines/components/graph/dropdown_action_component.vue
+5
-6
app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
...pts/pipelines/components/graph/dropdown_job_component.vue
+6
-6
app/assets/javascripts/pipelines/components/graph/job_component.vue
.../javascripts/pipelines/components/graph/job_component.vue
+6
-8
app/assets/javascripts/pipelines/components/pipeline_url.vue
app/assets/javascripts/pipelines/components/pipeline_url.vue
+8
-8
app/assets/javascripts/pipelines/components/pipelines_actions.vue
...ts/javascripts/pipelines/components/pipelines_actions.vue
+6
-4
app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
.../javascripts/pipelines/components/pipelines_artifacts.vue
+6
-6
app/assets/javascripts/pipelines/components/stage.vue
app/assets/javascripts/pipelines/components/stage.vue
+5
-5
app/assets/javascripts/pipelines/components/time_ago.vue
app/assets/javascripts/pipelines/components/time_ago.vue
+5
-3
app/assets/javascripts/vue_shared/components/header_ci_component.vue
...javascripts/vue_shared/components/header_ci_component.vue
+6
-6
app/assets/javascripts/vue_shared/components/markdown/header.vue
...ets/javascripts/vue_shared/components/markdown/header.vue
+6
-6
app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
...scripts/vue_shared/components/markdown/toolbar_button.vue
+5
-5
app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
...ts/javascripts/vue_shared/components/time_ago_tooltip.vue
+7
-5
app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
...s/vue_shared/components/user_avatar/user_avatar_image.vue
+5
-3
app/assets/javascripts/vue_shared/directives/tooltip.js
app/assets/javascripts/vue_shared/directives/tooltip.js
+13
-0
app/assets/javascripts/vue_shared/mixins/tooltip.js
app/assets/javascripts/vue_shared/mixins/tooltip.js
+0
-13
doc/development/fe_guide/style_guide_js.md
doc/development/fe_guide/style_guide_js.md
+8
-4
spec/javascripts/environments/environment_actions_spec.js
spec/javascripts/environments/environment_actions_spec.js
+8
-1
spec/javascripts/environments/environment_monitoring_spec.js
spec/javascripts/environments/environment_monitoring_spec.js
+14
-5
spec/javascripts/environments/environment_stop_spec.js
spec/javascripts/environments/environment_stop_spec.js
+8
-1
spec/javascripts/environments/environment_terminal_button_spec.js
...ascripts/environments/environment_terminal_button_spec.js
+8
-1
spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js
...avascripts/vue_shared/components/time_ago_tooltip_spec.js
+0
-1
spec/javascripts/vue_shared/directives/tooltip_spec.js
spec/javascripts/vue_shared/directives/tooltip_spec.js
+63
-0
未找到文件。
app/assets/javascripts/environments/components/environment_actions.vue
浏览文件 @
6cb575d6
...
...
@@ -2,6 +2,7 @@
import
playIconSvg
from
'
icons/_icon_play.svg
'
;
import
eventHub
from
'
../event_hub
'
;
import
loadingIcon
from
'
../../vue_shared/components/loading_icon.vue
'
;
import
tooltip
from
'
../../vue_shared/directives/tooltip
'
;
export
default
{
props
:
{
...
...
@@ -12,6 +13,10 @@ export default {
},
},
directives
:
{
tooltip
,
},
components
:
{
loadingIcon
,
},
...
...
@@ -33,8 +38,6 @@ export default {
onClickAction
(
endpoint
)
{
this
.
isLoading
=
true
;
$
(
this
.
$refs
.
tooltip
).
tooltip
(
'
destroy
'
);
eventHub
.
$emit
(
'
postAction
'
,
endpoint
);
},
...
...
@@ -53,11 +56,11 @@ export default {
class=
"btn-group"
role=
"group"
>
<button
v-tooltip
type=
"button"
class=
"dropdown btn btn-default dropdown-new js-dropdown-play-icon-container
has-tooltip
"
class=
"dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
data-container=
"body"
data-toggle=
"dropdown"
ref=
"tooltip"
:title=
"title"
:aria-label=
"title"
:disabled=
"isLoading"
>
...
...
app/assets/javascripts/environments/components/environment_external_url.vue
浏览文件 @
6cb575d6
<
script
>
import
tooltip
from
'
../../vue_shared/directives/tooltip
'
;
/**
* Renders the external url link in environments table.
*/
...
...
@@ -10,6 +12,10 @@ export default {
},
},
directives
:
{
tooltip
,
},
computed
:
{
title
()
{
return
'
Open
'
;
...
...
@@ -19,7 +25,8 @@ export default {
</
script
>
<
template
>
<a
class=
"btn external-url has-tooltip"
v-tooltip
class=
"btn external-url"
data-container=
"body"
target=
"_blank"
rel=
"noopener noreferrer nofollow"
...
...
app/assets/javascripts/environments/components/environment_monitoring.vue
浏览文件 @
6cb575d6
...
...
@@ -2,6 +2,8 @@
/**
* Renders the Monitoring (Metrics) link in environments table.
*/
import
tooltip
from
'
../../vue_shared/directives/tooltip
'
;
export
default
{
props
:
{
monitoringUrl
:
{
...
...
@@ -10,6 +12,10 @@ export default {
},
},
directives
:
{
tooltip
,
},
computed
:
{
title
()
{
return
'
Monitoring
'
;
...
...
@@ -19,7 +25,8 @@ export default {
</
script
>
<
template
>
<a
class=
"btn monitoring-url has-tooltip hidden-xs hidden-sm"
v-tooltip
class=
"btn monitoring-url hidden-xs hidden-sm"
data-container=
"body"
rel=
"noopener noreferrer nofollow"
:href=
"monitoringUrl"
...
...
app/assets/javascripts/environments/components/environment_stop.vue
浏览文件 @
6cb575d6
...
...
@@ -5,6 +5,7 @@
*/
import
eventHub
from
'
../event_hub
'
;
import
loadingIcon
from
'
../../vue_shared/components/loading_icon.vue
'
;
import
tooltip
from
'
../../vue_shared/directives/tooltip
'
;
export
default
{
props
:
{
...
...
@@ -14,6 +15,10 @@ export default {
},
},
directives
:
{
tooltip
,
},
data
()
{
return
{
isLoading
:
false
,
...
...
@@ -46,8 +51,9 @@ export default {
</
script
>
<
template
>
<button
v-tooltip
type=
"button"
class=
"btn stop-env-link h
as-tooltip h
idden-xs hidden-sm"
class=
"btn stop-env-link hidden-xs hidden-sm"
data-container=
"body"
@
click=
"onClick"
:disabled=
"isLoading"
...
...
app/assets/javascripts/environments/components/environment_terminal_button.vue
浏览文件 @
6cb575d6
...
...
@@ -4,6 +4,7 @@
* Used in environments table.
*/
import
terminalIconSvg
from
'
icons/_icon_terminal.svg
'
;
import
tooltip
from
'
../../vue_shared/directives/tooltip
'
;
export
default
{
props
:
{
...
...
@@ -14,6 +15,10 @@ export default {
},
},
directives
:
{
tooltip
,
},
data
()
{
return
{
terminalIconSvg
,
...
...
@@ -29,7 +34,8 @@ export default {
</
script
>
<
template
>
<a
class=
"btn terminal-button has-tooltip hidden-xs hidden-sm"
v-tooltip
class=
"btn terminal-button hidden-xs hidden-sm"
data-container=
"body"
:title=
"title"
:aria-label=
"title"
...
...
app/assets/javascripts/issue_show/components/fields/project_move.vue
浏览文件 @
6cb575d6
<
script
>
import
tooltip
Mixin
from
'
../../../vue_shared/mixin
s/tooltip
'
;
import
tooltip
from
'
../../../vue_shared/directive
s/tooltip
'
;
export
default
{
mixins
:
[
tooltip
Mixin
,
]
,
directives
:
{
tooltip
,
}
,
props
:
{
formState
:
{
type
:
Object
,
...
...
@@ -71,9 +71,9 @@
data-placeholder=
"Move to a different project"
/>
</div>
<span
v-tooltip
data-placement=
"auto top"
title=
"Moving an issue will copy the discussion to a different project and close it here. All participants will be notified of the new location."
ref=
"tooltip"
>
title=
"Moving an issue will copy the discussion to a different project and close it here. All participants will be notified of the new location."
>
<i
class=
"fa fa-question-circle"
aria-hidden=
"true"
>
...
...
app/assets/javascripts/pipelines/components/async_button.vue
浏览文件 @
6cb575d6
...
...
@@ -3,7 +3,7 @@
import
eventHub
from
'
../event_hub
'
;
import
loadingIcon
from
'
../../vue_shared/components/loading_icon.vue
'
;
import
tooltip
Mixin
from
'
../../vue_shared/mixin
s/tooltip
'
;
import
tooltip
from
'
../../vue_shared/directive
s/tooltip
'
;
export
default
{
props
:
{
...
...
@@ -28,12 +28,12 @@ export default {
required
:
false
,
},
},
directives
:
{
tooltip
,
},
components
:
{
loadingIcon
,
},
mixins
:
[
tooltipMixin
,
],
data
()
{
return
{
isLoading
:
false
,
...
...
@@ -58,7 +58,6 @@ export default {
makeRequest
()
{
this
.
isLoading
=
true
;
$
(
this
.
$refs
.
tooltip
).
tooltip
(
'
destroy
'
);
eventHub
.
$emit
(
'
postAction
'
,
this
.
endpoint
);
},
},
...
...
@@ -67,6 +66,7 @@ export default {
<
template
>
<button
v-tooltip
type=
"button"
@
click=
"onClick"
:class=
"buttonClass"
...
...
@@ -74,7 +74,6 @@ export default {
:aria-label=
"title"
data-container=
"body"
data-placement=
"top"
ref=
"tooltip"
:disabled=
"isLoading"
>
<i
:class=
"iconClass"
...
...
app/assets/javascripts/pipelines/components/graph/action_component.vue
浏览文件 @
6cb575d6
<
script
>
import
getActionIcon
from
'
../../../vue_shared/ci_action_icons
'
;
import
tooltip
Mixin
from
'
../../../vue_shared/mixin
s/tooltip
'
;
import
tooltip
from
'
../../../vue_shared/directive
s/tooltip
'
;
/**
* Renders either a cancel, retry or play icon pointing to the given path.
...
...
@@ -29,9 +29,9 @@
},
},
mixins
:
[
tooltip
Mixin
,
]
,
directives
:
{
tooltip
,
}
,
computed
:
{
actionIconSvg
()
{
...
...
@@ -46,12 +46,11 @@
</
script
>
<
template
>
<a
v-tooltip
:data-method=
"actionMethod"
:title=
"tooltipText"
:href=
"link"
ref=
"tooltip"
class=
"ci-action-icon-container"
data-toggle=
"tooltip"
data-container=
"body"
>
<i
...
...
app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
浏览文件 @
6cb575d6
<
script
>
import
getActionIcon
from
'
../../../vue_shared/ci_action_icons
'
;
import
tooltip
Mixin
from
'
../../../vue_shared/mixin
s/tooltip
'
;
import
tooltip
from
'
../../../vue_shared/directive
s/tooltip
'
;
/**
* Renders either a cancel, retry or play icon pointing to the given path.
...
...
@@ -29,9 +29,9 @@
},
},
mixins
:
[
tooltip
Mixin
,
]
,
directives
:
{
tooltip
,
}
,
computed
:
{
actionIconSvg
()
{
...
...
@@ -42,13 +42,12 @@
</
script
>
<
template
>
<a
v-tooltip
:data-method=
"actionMethod"
:title=
"tooltipText"
:href=
"link"
ref=
"tooltip"
rel=
"nofollow"
class=
"ci-action-icon-wrapper js-ci-status-icon"
data-toggle=
"tooltip"
data-container=
"body"
v-html=
"actionIconSvg"
aria-label=
"Job's action"
>
...
...
app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
浏览文件 @
6cb575d6
<
script
>
import
jobNameComponent
from
'
./job_name_component.vue
'
;
import
jobComponent
from
'
./job_component.vue
'
;
import
tooltip
Mixin
from
'
../../../vue_shared/mixin
s/tooltip
'
;
import
tooltip
from
'
../../../vue_shared/directive
s/tooltip
'
;
/**
* Renders the dropdown for the pipeline graph.
...
...
@@ -34,9 +34,9 @@
},
},
mixins
:
[
tooltip
Mixin
,
]
,
directives
:
{
tooltip
,
}
,
components
:
{
jobComponent
,
...
...
@@ -53,12 +53,12 @@
<
template
>
<div>
<button
v-tooltip
type=
"button"
data-toggle=
"dropdown"
data-container=
"body"
class=
"dropdown-menu-toggle build-content"
:title=
"tooltipText"
ref=
"tooltip"
>
:title=
"tooltipText"
>
<job-name-component
:name=
"job.name"
...
...
app/assets/javascripts/pipelines/components/graph/job_component.vue
浏览文件 @
6cb575d6
...
...
@@ -2,7 +2,7 @@
import
actionComponent
from
'
./action_component.vue
'
;
import
dropdownActionComponent
from
'
./dropdown_action_component.vue
'
;
import
jobNameComponent
from
'
./job_name_component.vue
'
;
import
tooltip
Mixin
from
'
../../../vue_shared/mixin
s/tooltip
'
;
import
tooltip
from
'
../../../vue_shared/directive
s/tooltip
'
;
/**
* Renders the badge for the pipeline graph and the job's dropdown.
...
...
@@ -54,9 +54,9 @@
jobNameComponent
,
},
mixins
:
[
tooltip
Mixin
,
]
,
directives
:
{
tooltip
,
}
,
computed
:
{
tooltipText
()
{
...
...
@@ -77,12 +77,11 @@
<
template
>
<div>
<a
v-tooltip
v-if=
"job.status.details_path"
:href=
"job.status.details_path"
:title=
"tooltipText"
:class=
"cssClassJobName"
ref=
"tooltip"
data-toggle=
"tooltip"
data-container=
"body"
>
<job-name-component
...
...
@@ -93,10 +92,9 @@
<div
v-else
v-tooltip
:title=
"tooltipText"
:class=
"cssClassJobName"
ref=
"tooltip"
data-toggle=
"tooltip"
data-container=
"body"
>
<job-name-component
...
...
app/assets/javascripts/pipelines/components/pipeline_url.vue
浏览文件 @
6cb575d6
<
script
>
import
userAvatarLink
from
'
../../vue_shared/components/user_avatar/user_avatar_link.vue
'
;
import
tooltip
Mixin
from
'
../../vue_shared/mixin
s/tooltip
'
;
import
tooltip
from
'
../../vue_shared/directive
s/tooltip
'
;
export
default
{
props
:
{
...
...
@@ -12,9 +12,9 @@ export default {
components
:
{
userAvatarLink
,
},
mixins
:
[
tooltip
Mixin
,
]
,
directives
:
{
tooltip
,
}
,
computed
:
{
user
()
{
return
this
.
pipeline
.
user
;
...
...
@@ -45,16 +45,16 @@ export default {
<div
class=
"label-container"
>
<span
v-if=
"pipeline.flags.latest"
v-tooltip
class=
"js-pipeline-url-latest label label-success"
title=
"Latest pipeline for this branch"
ref=
"tooltip"
>
title=
"Latest pipeline for this branch"
>
latest
</span>
<span
v-if=
"pipeline.flags.yaml_errors"
v-tooltip
class=
"js-pipeline-url-yaml label label-danger"
:title=
"pipeline.yaml_errors"
ref=
"tooltip"
>
:title=
"pipeline.yaml_errors"
>
yaml invalid
</span>
<span
...
...
app/assets/javascripts/pipelines/components/pipelines_actions.vue
浏览文件 @
6cb575d6
...
...
@@ -4,6 +4,7 @@
import
playIconSvg
from
'
icons/_icon_play.svg
'
;
import
eventHub
from
'
../event_hub
'
;
import
loadingIcon
from
'
../../vue_shared/components/loading_icon.vue
'
;
import
tooltip
from
'
../../vue_shared/directives/tooltip
'
;
export
default
{
props
:
{
...
...
@@ -12,6 +13,9 @@
required
:
true
,
},
},
directives
:
{
tooltip
,
},
components
:
{
loadingIcon
,
},
...
...
@@ -25,8 +29,6 @@
onClickAction
(
endpoint
)
{
this
.
isLoading
=
true
;
$
(
this
.
$refs
.
tooltip
).
tooltip
(
'
destroy
'
);
eventHub
.
$emit
(
'
postAction
'
,
endpoint
);
},
...
...
@@ -43,13 +45,13 @@
<
template
>
<div
class=
"btn-group"
>
<button
v-tooltip
type=
"button"
class=
"dropdown-new btn btn-default
has-tooltip
js-pipeline-dropdown-manual-actions"
class=
"dropdown-new btn btn-default js-pipeline-dropdown-manual-actions"
title=
"Manual job"
data-toggle=
"dropdown"
data-placement=
"top"
aria-label=
"Manual job"
ref=
"tooltip"
:disabled=
"isLoading"
>
<span
v-html=
"playIconSvg"
></span>
<i
...
...
app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
浏览文件 @
6cb575d6
<
script
>
import
tooltip
Mixin
from
'
../../vue_shared/mixin
s/tooltip
'
;
import
tooltip
from
'
../../vue_shared/directive
s/tooltip
'
;
export
default
{
props
:
{
...
...
@@ -8,9 +8,9 @@
required
:
true
,
},
},
mixins
:
[
tooltip
Mixin
,
]
,
directives
:
{
tooltip
,
}
,
};
</
script
>
<
template
>
...
...
@@ -18,12 +18,12 @@
class=
"btn-group"
role=
"group"
>
<button
v-tooltip
class=
"dropdown-toggle btn btn-default build-artifacts js-pipeline-dropdown-download"
title=
"Artifacts"
data-placement=
"top"
data-toggle=
"dropdown"
aria-label=
"Artifacts"
ref=
"tooltip"
>
aria-label=
"Artifacts"
>
<i
class=
"fa fa-download"
aria-hidden=
"true"
>
...
...
app/assets/javascripts/pipelines/components/stage.vue
浏览文件 @
6cb575d6
...
...
@@ -16,7 +16,7 @@
/* global Flash */
import
{
borderlessStatusIconEntityMap
}
from
'
../../vue_shared/ci_status_icons
'
;
import
loadingIcon
from
'
../../vue_shared/components/loading_icon.vue
'
;
import
tooltip
Mixin
from
'
../../vue_shared/mixin
s/tooltip
'
;
import
tooltip
from
'
../../vue_shared/directive
s/tooltip
'
;
export
default
{
props
:
{
...
...
@@ -32,9 +32,9 @@ export default {
},
},
mixins
:
[
tooltip
Mixin
,
]
,
directives
:
{
tooltip
,
}
,
data
()
{
return
{
...
...
@@ -132,7 +132,7 @@ export default {
<
template
>
<div
class=
"dropdown"
>
<button
ref=
"tooltip"
v-tooltip
:class=
"triggerButtonClass"
@
click=
"onClickStage"
class=
"mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
...
...
app/assets/javascripts/pipelines/components/time_ago.vue
浏览文件 @
6cb575d6
<
script
>
import
iconTimerSvg
from
'
icons/_icon_timer.svg
'
;
import
'
../../lib/utils/datetime_utility
'
;
import
tooltip
Mixin
from
'
../../vue_shared/mixin
s/tooltip
'
;
import
tooltip
from
'
../../vue_shared/directive
s/tooltip
'
;
import
timeagoMixin
from
'
../../vue_shared/mixins/timeago
'
;
export
default
{
...
...
@@ -16,9 +16,11 @@
},
},
mixins
:
[
tooltipMixin
,
timeagoMixin
,
],
directives
:
{
tooltip
,
},
data
()
{
return
{
iconTimerSvg
,
...
...
@@ -81,7 +83,7 @@
</i>
<time
ref=
"tooltip"
v-tooltip
data-placement=
"top"
data-container=
"body"
:title=
"tooltipTitle(finishedTime)"
>
...
...
app/assets/javascripts/vue_shared/components/header_ci_component.vue
浏览文件 @
6cb575d6
...
...
@@ -2,7 +2,7 @@
import
ciIconBadge
from
'
./ci_badge_link.vue
'
;
import
loadingIcon
from
'
./loading_icon.vue
'
;
import
timeagoTooltip
from
'
./time_ago_tooltip.vue
'
;
import
tooltip
Mixin
from
'
../mixin
s/tooltip
'
;
import
tooltip
from
'
../directive
s/tooltip
'
;
import
userAvatarImage
from
'
./user_avatar/user_avatar_image.vue
'
;
/**
...
...
@@ -47,9 +47,9 @@ export default {
},
},
mixins
:
[
tooltip
Mixin
,
]
,
directives
:
{
tooltip
,
}
,
components
:
{
ciIconBadge
,
...
...
@@ -90,10 +90,10 @@ export default {
<template
v-if=
"user"
>
<a
v-tooltip
:href=
"user.path"
:title=
"user.email"
class=
"js-user-link commit-committer-link"
ref=
"tooltip"
>
class=
"js-user-link commit-committer-link"
>
<user-avatar-image
:img-src=
"user.avatar_url"
...
...
app/assets/javascripts/vue_shared/components/markdown/header.vue
浏览文件 @
6cb575d6
<
script
>
import
tooltip
Mixin
from
'
../../mixin
s/tooltip
'
;
import
tooltip
from
'
../../directive
s/tooltip
'
;
import
toolbarButton
from
'
./toolbar_button.vue
'
;
export
default
{
mixins
:
[
tooltipMixin
,
],
props
:
{
previewMarkdown
:
{
type
:
Boolean
,
required
:
true
,
},
},
directives
:
{
tooltip
,
},
components
:
{
toolbarButton
,
},
...
...
@@ -94,13 +94,13 @@
</div>
<div
class=
"toolbar-group"
>
<button
v-tooltip
aria-label=
"Go full screen"
class=
"toolbar-btn js-zen-enter"
data-container=
"body"
tabindex=
"-1"
title=
"Go full screen"
type=
"button"
ref=
"tooltip"
>
type=
"button"
>
<i
aria-hidden=
"true"
class=
"fa fa-arrows-alt fa-fw"
>
...
...
app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
浏览文件 @
6cb575d6
<
script
>
import
tooltip
Mixin
from
'
../../mixin
s/tooltip
'
;
import
tooltip
from
'
../../directive
s/tooltip
'
;
export
default
{
mixins
:
[
tooltipMixin
,
],
props
:
{
buttonTitle
:
{
type
:
String
,
...
...
@@ -29,6 +26,9 @@
default
:
false
,
},
},
directives
:
{
tooltip
,
},
computed
:
{
iconClass
()
{
return
`fa-
${
this
.
icon
}
`
;
...
...
@@ -39,10 +39,10 @@
<
template
>
<button
v-tooltip
type=
"button"
class=
"toolbar-btn js-md hidden-xs"
tabindex=
"-1"
ref=
"tooltip"
data-container=
"body"
:data-md-tag=
"tag"
:data-md-block=
"tagBlock"
...
...
app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
浏览文件 @
6cb575d6
<
script
>
import
tooltip
Mixin
from
'
../mixin
s/tooltip
'
;
import
tooltip
from
'
../directive
s/tooltip
'
;
import
timeagoMixin
from
'
../mixins/timeago
'
;
import
'
../../lib/utils/datetime_utility
'
;
...
...
@@ -28,19 +28,21 @@ export default {
},
mixins
:
[
tooltipMixin
,
timeagoMixin
,
],
directives
:
{
tooltip
,
},
};
</
script
>
<
template
>
<time
v-tooltip
:class=
"cssClass"
class=
"js-vue-timeago"
:title=
"tooltipTitle(time)"
:data-placement=
"tooltipPlacement"
data-container=
"body"
ref=
"tooltip"
>
data-container=
"body"
>
{{
timeFormated
(
time
)
}}
</time>
</
template
>
app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
浏览文件 @
6cb575d6
...
...
@@ -16,11 +16,10 @@
*/
import
defaultAvatarUrl
from
'
images/no_avatar.png
'
;
import
TooltipMixin
from
'
../../mixin
s/tooltip
'
;
import
tooltip
from
'
../../directive
s/tooltip
'
;
export
default
{
name
:
'
UserAvatarImage
'
,
mixins
:
[
TooltipMixin
],
props
:
{
imgSrc
:
{
type
:
String
,
...
...
@@ -53,6 +52,9 @@ export default {
default
:
'
top
'
,
},
},
directives
:
{
tooltip
,
},
computed
:
{
tooltipContainer
()
{
return
this
.
tooltipText
?
'
body
'
:
null
;
...
...
@@ -72,6 +74,7 @@ export default {
<
template
>
<img
v-tooltip
class=
"avatar"
:class=
"[avatarSizeClass, cssClasses]"
:src=
"imageSource"
...
...
@@ -81,6 +84,5 @@ export default {
:data-container=
"tooltipContainer"
:data-placement=
"tooltipPlacement"
:title=
"tooltipText"
ref=
"tooltip"
/>
</
template
>
app/assets/javascripts/vue_shared/directives/tooltip.js
0 → 100644
浏览文件 @
6cb575d6
export
default
{
bind
(
el
)
{
$
(
el
).
tooltip
();
},
componentUpdated
(
el
)
{
$
(
el
).
tooltip
(
'
fixTitle
'
);
},
unbind
(
el
)
{
$
(
el
).
tooltip
(
'
destroy
'
);
},
};
app/assets/javascripts/vue_shared/mixins/tooltip.js
已删除
100644 → 0
浏览文件 @
bf0b3d83
export
default
{
mounted
()
{
$
(
this
.
$refs
.
tooltip
).
tooltip
();
},
updated
()
{
$
(
this
.
$refs
.
tooltip
).
tooltip
(
'
fixTitle
'
);
},
beforeDestroy
()
{
$
(
this
.
$refs
.
tooltip
).
tooltip
(
'
destroy
'
);
},
};
doc/development/fe_guide/style_guide_js.md
浏览文件 @
6cb575d6
...
...
@@ -463,20 +463,24 @@ A forEach will cause side effects, it will be mutating the array being iterated.
1.
`destroyed`
#### Vue and Boostrap
1.
Tooltips: Do not rely on
`has-tooltip`
class name for
v
ue components
1.
Tooltips: Do not rely on
`has-tooltip`
class name for
V
ue components
```
javascript
// bad
<span class="has-tooltip">
<span
class="has-tooltip"
title="Some tooltip text">
Text
</span>
// good
<span data-toggle="tooltip">
<span
v-tooltip
title="Some tooltip text">
Text
</span>
```
1.
Tooltips: When using a tooltip, include the tooltip
mixin
1.
Tooltips: When using a tooltip, include the tooltip
directive,
`./app/assets/javascripts/vue_shared/directives/tooltip.js`
1.
Don't change
`data-original-title`
.
```
javascript
...
...
spec/javascripts/environments/environment_actions_spec.js
浏览文件 @
6cb575d6
...
...
@@ -32,9 +32,16 @@ describe('Actions Component', () => {
}).
$mount
();
});
describe
(
'
computed
'
,
()
=>
{
it
(
'
title
'
,
()
=>
{
expect
(
component
.
title
).
toEqual
(
'
Deploy to...
'
);
});
});
it
(
'
should render a dropdown button with icon and title attribute
'
,
()
=>
{
expect
(
component
.
$el
.
querySelector
(
'
.fa-caret-down
'
)).
toBeDefined
();
expect
(
component
.
$el
.
querySelector
(
'
.dropdown-new
'
).
getAttribute
(
'
title
'
)).
toEqual
(
'
Deploy to...
'
);
expect
(
component
.
$el
.
querySelector
(
'
.dropdown-new
'
).
getAttribute
(
'
data-original-title
'
)).
toEqual
(
'
Deploy to...
'
);
expect
(
component
.
$el
.
querySelector
(
'
.dropdown-new
'
).
getAttribute
(
'
aria-label
'
)).
toEqual
(
'
Deploy to...
'
);
});
it
(
'
should render a dropdown with the provided list of actions
'
,
()
=>
{
...
...
spec/javascripts/environments/environment_monitoring_spec.js
浏览文件 @
6cb575d6
...
...
@@ -3,21 +3,30 @@ import monitoringComp from '~/environments/components/environment_monitoring.vue
describe
(
'
Monitoring Component
'
,
()
=>
{
let
MonitoringComponent
;
let
component
;
const
monitoringUrl
=
'
https://gitlab.com
'
;
beforeEach
(()
=>
{
MonitoringComponent
=
Vue
.
extend
(
monitoringComp
);
});
it
(
'
should render a link to environment monitoring page
'
,
()
=>
{
const
monitoringUrl
=
'
https://gitlab.com
'
;
const
component
=
new
MonitoringComponent
({
component
=
new
MonitoringComponent
({
propsData
:
{
monitoringUrl
,
},
}).
$mount
();
});
describe
(
'
computed
'
,
()
=>
{
it
(
'
title
'
,
()
=>
{
expect
(
component
.
title
).
toEqual
(
'
Monitoring
'
);
});
});
it
(
'
should render a link to environment monitoring page
'
,
()
=>
{
expect
(
component
.
$el
.
getAttribute
(
'
href
'
)).
toEqual
(
monitoringUrl
);
expect
(
component
.
$el
.
querySelector
(
'
.fa-area-chart
'
)).
toBeDefined
();
expect
(
component
.
$el
.
getAttribute
(
'
title
'
)).
toEqual
(
'
Monitoring
'
);
expect
(
component
.
$el
.
getAttribute
(
'
data-original-title
'
)).
toEqual
(
'
Monitoring
'
);
expect
(
component
.
$el
.
getAttribute
(
'
aria-label
'
)).
toEqual
(
'
Monitoring
'
);
});
});
spec/javascripts/environments/environment_stop_spec.js
浏览文件 @
6cb575d6
...
...
@@ -17,8 +17,15 @@ describe('Stop Component', () => {
}).
$mount
();
});
describe
(
'
computed
'
,
()
=>
{
it
(
'
title
'
,
()
=>
{
expect
(
component
.
title
).
toEqual
(
'
Stop
'
);
});
});
it
(
'
should render a button to stop the environment
'
,
()
=>
{
expect
(
component
.
$el
.
tagName
).
toEqual
(
'
BUTTON
'
);
expect
(
component
.
$el
.
getAttribute
(
'
title
'
)).
toEqual
(
'
Stop
'
);
expect
(
component
.
$el
.
getAttribute
(
'
data-original-title
'
)).
toEqual
(
'
Stop
'
);
expect
(
component
.
$el
.
getAttribute
(
'
aria-label
'
)).
toEqual
(
'
Stop
'
);
});
});
spec/javascripts/environments/environment_terminal_button_spec.js
浏览文件 @
6cb575d6
...
...
@@ -16,9 +16,16 @@ describe('Stop Component', () => {
}).
$mount
();
});
describe
(
'
computed
'
,
()
=>
{
it
(
'
title
'
,
()
=>
{
expect
(
component
.
title
).
toEqual
(
'
Terminal
'
);
});
});
it
(
'
should render a link to open a web terminal with the provided path
'
,
()
=>
{
expect
(
component
.
$el
.
tagName
).
toEqual
(
'
A
'
);
expect
(
component
.
$el
.
getAttribute
(
'
title
'
)).
toEqual
(
'
Terminal
'
);
expect
(
component
.
$el
.
getAttribute
(
'
data-original-title
'
)).
toEqual
(
'
Terminal
'
);
expect
(
component
.
$el
.
getAttribute
(
'
aria-label
'
)).
toEqual
(
'
Terminal
'
);
expect
(
component
.
$el
.
getAttribute
(
'
href
'
)).
toEqual
(
terminalPath
);
});
});
spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js
浏览文件 @
6cb575d6
...
...
@@ -22,7 +22,6 @@ describe('Time ago with tooltip component', () => {
}).
$mount
();
expect
(
vm
.
$el
.
tagName
).
toEqual
(
'
TIME
'
);
expect
(
vm
.
$el
.
classList
.
contains
(
'
js-vue-timeago
'
)).
toEqual
(
true
);
expect
(
vm
.
$el
.
getAttribute
(
'
data-original-title
'
),
).
toEqual
(
gl
.
utils
.
formatDate
(
'
2017-05-08T14:57:39.781Z
'
));
...
...
spec/javascripts/vue_shared/directives/tooltip_spec.js
0 → 100644
浏览文件 @
6cb575d6
import
Vue
from
'
vue
'
;
import
tooltip
from
'
~/vue_shared/directives/tooltip
'
;
describe
(
'
Tooltip directive
'
,
()
=>
{
let
vm
;
afterEach
(()
=>
{
if
(
vm
)
{
vm
.
$destroy
();
}
});
describe
(
'
with a single tooltip
'
,
()
=>
{
beforeEach
(()
=>
{
const
SomeComponent
=
Vue
.
extend
({
directives
:
{
tooltip
,
},
template
:
`
<div
v-tooltip
title="foo">
</div>
`
,
});
vm
=
new
SomeComponent
().
$mount
();
});
it
(
'
should have tooltip plugin applied
'
,
()
=>
{
expect
(
$
(
vm
.
$el
).
data
(
'
bs.tooltip
'
)).
toBeDefined
();
});
});
describe
(
'
with multiple tooltips
'
,
()
=>
{
beforeEach
(()
=>
{
const
SomeComponent
=
Vue
.
extend
({
directives
:
{
tooltip
,
},
template
:
`
<div>
<div
v-tooltip
class="js-look-for-tooltip"
title="foo">
</div>
<div
v-tooltip
title="bar">
</div>
</div>
`
,
});
vm
=
new
SomeComponent
().
$mount
();
});
it
(
'
should have tooltip plugin applied to all instances
'
,
()
=>
{
expect
(
$
(
vm
.
$el
).
find
(
'
.js-look-for-tooltip
'
).
data
(
'
bs.tooltip
'
)).
toBeDefined
();
});
});
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录