Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Boxiang Sun
gitlab-ce
Commits
6fffddab
Commit
6fffddab
authored
7 years ago
by
Clement Ho
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'winh-pipeline-graph-dropdowns' into 'master'
Make pipeline dropdowns consistent See merge request !13530
parents
6c21e6f9
0c8736a8
No related merge requests found
Changes
10
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
123 additions
and
132 deletions
+123
-132
app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
...pts/pipelines/components/graph/dropdown_job_component.vue
+1
-1
app/assets/javascripts/pipelines/components/graph/job_component.vue
.../javascripts/pipelines/components/graph/job_component.vue
+1
-1
app/assets/javascripts/pipelines/components/graph/job_name_component.vue
...scripts/pipelines/components/graph/job_name_component.vue
+1
-1
app/assets/stylesheets/framework/common.scss
app/assets/stylesheets/framework/common.scss
+1
-0
app/assets/stylesheets/framework/dropdowns.scss
app/assets/stylesheets/framework/dropdowns.scss
+2
-1
app/assets/stylesheets/framework/variables.scss
app/assets/stylesheets/framework/variables.scss
+4
-3
app/assets/stylesheets/pages/merge_requests.scss
app/assets/stylesheets/pages/merge_requests.scss
+0
-11
app/assets/stylesheets/pages/pipelines.scss
app/assets/stylesheets/pages/pipelines.scss
+108
-109
app/views/ci/status/_dropdown_graph_badge.html.haml
app/views/ci/status/_dropdown_graph_badge.html.haml
+3
-3
spec/features/merge_requests/mini_pipeline_graph_spec.rb
spec/features/merge_requests/mini_pipeline_graph_spec.rb
+2
-2
No files found.
app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
View file @
6fffddab
...
...
@@ -72,7 +72,7 @@
};
</
script
>
<
template
>
<div>
<div
class=
"ci-job-dropdown-container"
>
<button
v-tooltip
type=
"button"
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/pipelines/components/graph/job_component.vue
View file @
6fffddab
...
...
@@ -75,7 +75,7 @@
};
</
script
>
<
template
>
<div>
<div
class=
"ci-job-component"
>
<a
v-tooltip
v-if=
"job.status.details_path"
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/pipelines/components/graph/job_name_component.vue
View file @
6fffddab
...
...
@@ -26,7 +26,7 @@
};
</
script
>
<
template
>
<span>
<span
class=
"ci-job-name-component"
>
<ci-icon
:status=
"status"
/>
...
...
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/framework/common.scss
View file @
6fffddab
...
...
@@ -16,6 +16,7 @@
.prepend-left-default
{
margin-left
:
$gl-padding
;
}
.prepend-left-20
{
margin-left
:
20px
;
}
.append-right-5
{
margin-right
:
5px
;
}
.append-right-8
{
margin-right
:
8px
;
}
.append-right-10
{
margin-right
:
10px
;
}
.append-right-default
{
margin-right
:
$gl-padding
;
}
.append-right-20
{
margin-right
:
20px
;
}
...
...
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/framework/dropdowns.scss
View file @
6fffddab
...
...
@@ -749,7 +749,8 @@
}
a
,
button
{
button
,
.menu-item
{
border-radius
:
0
;
padding
:
8px
16px
;
...
...
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/framework/variables.scss
View file @
6fffddab
...
...
@@ -591,9 +591,10 @@ $ui-dev-kit-example-border: #ddd;
/*
Pipeline Graph
*/
$stage-hover-bg
:
#eaf3fc
;
$stage-hover-border
:
#d1e7fc
;
$action-icon-color
:
#d6d6d6
;
$stage-hover-bg
:
$gray-darker
;
$ci-action-icon-size
:
22px
;
$pipeline-dropdown-line-height
:
20px
;
$pipeline-dropdown-status-icon-size
:
18px
;
/*
Pipeline Schedules
...
...
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/pages/merge_requests.scss
View file @
6fffddab
...
...
@@ -174,17 +174,6 @@
vertical-align
:
top
;
}
.mini-pipeline-graph-dropdown-menu
.mini-pipeline-graph-dropdown-item
{
display
:
flex
;
align-items
:
center
;
.ci-status-text
,
.ci-status-icon
{
top
:
0
;
margin-right
:
10px
;
}
}
.normal
{
line-height
:
28px
;
}
...
...
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/pages/pipelines.scss
View file @
6fffddab
...
...
@@ -40,7 +40,7 @@
.btn.btn-retry
:hover
,
.btn.btn-retry
:focus
{
border-color
:
$
gray-darkest
;
border-color
:
$
dropdown-toggle-active-border-color
;
background-color
:
$white-normal
;
}
...
...
@@ -206,8 +206,8 @@
.stage-cell
{
.mini-pipeline-graph-dropdown-toggle
svg
{
height
:
22px
;
width
:
22px
;
height
:
$ci-action-icon-size
;
width
:
$ci-action-icon-size
;
position
:
absolute
;
top
:
-1px
;
left
:
-1px
;
...
...
@@ -219,7 +219,7 @@
display
:
inline-block
;
position
:
relative
;
vertical-align
:
middle
;
height
:
22px
;
height
:
$ci-action-icon-size
;
margin
:
3px
0
;
+
.stage-container
{
...
...
@@ -308,7 +308,7 @@
a
{
text-decoration
:
none
;
color
:
$gl-text-color
-secondary
;
color
:
$gl-text-color
;
}
svg
{
...
...
@@ -432,7 +432,11 @@
width
:
186px
;
margin-bottom
:
10px
;
white-space
:
normal
;
color
:
$gl-text-color-secondary
;
// ensure .build-content has hover style when action-icon is hovered
.ci-job-dropdown-container
:hover
.build-content
{
@extend
.build-content
:hover
;
}
// Action Icons in big pipeline-graph nodes
.ci-action-icon-container
.ci-action-icon-wrapper
{
...
...
@@ -445,11 +449,11 @@
&
:hover
{
background-color
:
$stage-hover-bg
;
border
:
1px
solid
$
stage-hover-bg
;
border
:
1px
solid
$
dropdown-toggle-active-border-color
;
}
svg
{
fill
:
$
border-color
;
fill
:
$
gl-text-color-secondary
;
position
:
relative
;
left
:
-1px
;
top
:
-1px
;
...
...
@@ -475,19 +479,10 @@
background-color
:
transparent
;
border
:
none
;
padding
:
0
;
color
:
$gl-text-color-secondary
;
&
:focus
{
outline
:
none
;
}
&
:hover
{
color
:
$gl-text-color
;
.dropdown-counter-badge
{
color
:
$gl-text-color
;
}
}
}
.build-content
{
...
...
@@ -502,8 +497,7 @@
a
.build-content
:hover
,
button
.build-content
:hover
{
background-color
:
$stage-hover-bg
;
border
:
1px
solid
$stage-hover-border
;
color
:
$gl-text-color
;
border
:
1px
solid
$dropdown-toggle-active-border-color
;
}
...
...
@@ -564,7 +558,6 @@
// Triggers the dropdown in the big pipeline graph
.dropdown-counter-badge
{
color
:
$border-color
;
font-weight
:
100
;
font-size
:
15px
;
position
:
absolute
;
...
...
@@ -606,8 +599,8 @@ button.mini-pipeline-graph-dropdown-toggle {
background-color
:
$white-light
;
border-width
:
1px
;
border-style
:
solid
;
width
:
22px
;
height
:
22px
;
width
:
$ci-action-icon-size
;
height
:
$ci-action-icon-size
;
margin
:
0
;
padding
:
0
;
transition
:
all
0
.2s
linear
;
...
...
@@ -669,105 +662,119 @@ button.mini-pipeline-graph-dropdown-toggle {
}
}
@include
new-style-dropdown
(
'.big-pipeline-graph-dropdown-menu'
);
@include
new-style-dropdown
(
'.mini-pipeline-graph-dropdown-menu'
);
// dropdown content for big and mini pipeline
.big-pipeline-graph-dropdown-menu
,
.mini-pipeline-graph-dropdown-menu
{
width
:
195px
;
max-width
:
195px
;
li
{
padding
:
2px
3px
;
}
.scrollable-menu
{
padding
:
0
;
max-height
:
245px
;
overflow
:
auto
;
}
// Action icon on the right
a
.ci-action-icon-wrapper
{
color
:
$action-icon-color
;
border
:
1px
solid
$action-icon-color
;
border-radius
:
20px
;
width
:
22px
;
height
:
22px
;
padding
:
2px
0
0
5px
;
cursor
:
pointer
;
float
:
right
;
margin
:
-26px
9px
0
0
;
font-size
:
12px
;
background-color
:
$white-light
;
li
{
position
:
relative
;
&
:hover
,
&
:
focus
{
background-color
:
$stage-hover-bg
;
border
:
1px
solid
transparent
;
// ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
&
:
hover
>
.mini-pipeline-graph-dropdown-item
,
&
:hover
>
.ci-job-component
>
.mini-pipeline-graph-dropdown-item
{
@extend
.mini-pipeline-graph-dropdown-item
:hover
;
}
svg
{
width
:
22px
;
height
:
22px
;
left
:
-6px
;
position
:
relative
;
top
:
-3px
;
fill
:
$action-icon-color
;
}
// Action icon on the right
a
.ci-action-icon-wrapper
{
border-radius
:
50%
;
border
:
1px
solid
$border-color
;
width
:
$ci-action-icon-size
;
height
:
$ci-action-icon-size
;
padding
:
2px
0
0
5px
;
font-size
:
12px
;
background-color
:
$white-light
;
position
:
absolute
;
top
:
50%
;
right
:
$gl-padding
;
margin-top
:
-
#{
$ci-action-icon-size
/
2
}
;
&
:hover
svg
,
&
:focus
svg
{
fill
:
$gl-text-color
;
}
}
&
:hover
,
&
:focus
{
background-color
:
$stage-hover-bg
;
border
:
1px
solid
$dropdown-toggle-active-border-color
;
}
// link to the build
.mini-pipeline-graph-dropdown-item
{
padding
:
3px
7px
4px
;
clear
:
both
;
font-weight
:
$gl-font-weight-normal
;
line-height
:
1
.428571429
;
white-space
:
nowrap
;
margin
:
0
5px
;
border-radius
:
3px
;
svg
{
fill
:
$gl-text-color-secondary
;
width
:
$ci-action-icon-size
;
height
:
$ci-action-icon-size
;
left
:
-6px
;
position
:
relative
;
top
:
-3px
;
}
// build name
.ci-build-text
,
.ci-status-text
{
font-weight
:
200
;
overflow
:
hidden
;
&
:hover
svg
,
&
:focus
svg
{
fill
:
$gl-text-color
;
}
}
// link to the build
.mini-pipeline-graph-dropdown-item
{
padding
:
3px
7px
4px
;
align-items
:
center
;
clear
:
both
;
display
:
flex
;
font-weight
:
normal
;
line-height
:
$line-height-base
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
max-width
:
70%
;
color
:
$gl-text-color-secondary
;
margin-left
:
2px
;
display
:
inline-block
;
top
:
1px
;
vertical-align
:
text-bottom
;
position
:
relative
;
border-radius
:
3px
;
@media
(
max-width
:
$screen-xs-max
)
{
max-width
:
60%
;
.ci-job-name-component
{
align-items
:
center
;
display
:
flex
;
flex
:
1
;
}
}
// status icon on the left
.ci-status-icon
{
top
:
3px
;
position
:
relative
;
// build name
.ci-build-text
,
.ci-status-text
{
font-weight
:
200
;
overflow
:
hidden
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
max-width
:
70%
;
margin-left
:
2px
;
display
:
inline-block
;
>
svg
{
overflow
:
visible
;
width
:
18px
;
height
:
18px
;
@media
(
max-width
:
$screen-xs-max
)
{
max-width
:
60%
;
}
}
}
&
:hover
,
&
:focus
{
outline
:
none
;
text-decoration
:
none
;
color
:
$gl-text-color
;
background-color
:
$stage-hover-bg
;
.ci-status-icon
{
@extend
.append-right-8
;
position
:
relative
;
>
svg
{
width
:
$pipeline-dropdown-status-icon-size
;
height
:
$pipeline-dropdown-status-icon-size
;
margin
:
3px
0
;
position
:
relative
;
overflow
:
visible
;
display
:
block
;
}
}
&
:hover
,
&
:focus
{
outline
:
none
;
text-decoration
:
none
;
background-color
:
$stage-hover-bg
;
}
}
}
}
...
...
@@ -776,16 +783,9 @@ button.mini-pipeline-graph-dropdown-toggle {
.big-pipeline-graph-dropdown-menu
{
width
:
195px
;
min-width
:
195px
;
left
:
auto
;
right
:
-195px
;
top
:
-4px
;
left
:
100%
;
top
:
-10px
;
box-shadow
:
0
1px
5px
$black-transparent
;
.mini-pipeline-graph-dropdown-item
{
.ci-status-icon
{
top
:
-1px
;
}
}
}
/**
...
...
@@ -806,15 +806,14 @@ button.mini-pipeline-graph-dropdown-toggle {
}
&
:
:
before
{
left
:
-
5
px
;
margin-top
:
-6
px
;
left
:
-
6
px
;
margin-top
:
3
px
;
border-width
:
7px
5px
7px
0
;
border-right-color
:
$border-color
;
}
&
:
:
after
{
left
:
-4px
;
margin-top
:
-9px
;
left
:
-5px
;
border-width
:
10px
7px
10px
0
;
border-right-color
:
$white-light
;
}
...
...
This diff is collapsed.
Click to expand it.
app/views/ci/status/_dropdown_graph_badge.html.haml
View file @
6fffddab
...
...
@@ -6,14 +6,14 @@
-
tooltip
=
"
#{
subject
.
name
}
-
#{
status
.
label
}
"
-
if
status
.
has_details?
=
link_to
status
.
details_path
,
class:
'mini-pipeline-graph-dropdown-item'
,
data:
{
toggle:
'tooltip'
,
title:
tooltip
}
do
=
link_to
status
.
details_path
,
class:
'mini-pipeline-graph-dropdown-item'
,
data:
{
toggle:
'tooltip'
,
title:
tooltip
,
container:
'body'
}
do
%span
{
class:
klass
}=
custom_icon
(
status
.
icon
)
%span
.ci-build-text
=
subject
.
name
-
else
.m
ini-pipeline-graph-dropdown-item
{
data:
{
toggle:
'tooltip'
,
title:
tooltip
}
}
.m
enu-item.mini-pipeline-graph-dropdown-item
{
data:
{
toggle:
'tooltip'
,
title:
tooltip
,
container:
'body'
}
}
%span
{
class:
klass
}=
custom_icon
(
status
.
icon
)
%span
.ci-build-text
=
subject
.
name
-
if
status
.
has_action?
=
link_to
status
.
action_path
,
class:
'ci-action-icon-wrapper js-ci-action-icon'
,
method:
status
.
action_method
,
data:
{
toggle:
'tooltip'
,
title:
status
.
action_title
}
do
=
link_to
status
.
action_path
,
class:
'ci-action-icon-wrapper js-ci-action-icon'
,
method:
status
.
action_method
,
data:
{
toggle:
'tooltip'
,
title:
status
.
action_title
,
container:
'body'
}
do
=
custom_icon
(
status
.
action_icon
)
This diff is collapsed.
Click to expand it.
spec/features/merge_requests/mini_pipeline_graph_spec.rb
View file @
6fffddab
...
...
@@ -70,7 +70,7 @@ feature 'Mini Pipeline Graph', :js do
it
'should show tooltip when hovered'
do
toggle
.
hover
expect
(
toggle
.
find
(
:xpath
,
'..'
)
).
to
have_selector
(
'.tooltip'
)
expect
(
page
).
to
have_selector
(
'.tooltip'
)
end
end
...
...
@@ -117,7 +117,7 @@ feature 'Mini Pipeline Graph', :js do
it
'should show tooltip when hovered'
do
build_item
.
hover
expect
(
build_item
.
find
(
:xpath
,
'..'
)
).
to
have_selector
(
'.tooltip'
)
expect
(
page
).
to
have_selector
(
'.tooltip'
)
end
end
end
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment