1
1
<script >
2
- import { GlDisclosureDropdown } from ' @gitlab/ui' ;
3
-
4
- import RunnerDeleteButton from ' ./runner_delete_button.vue' ;
2
+ import { GlDisclosureDropdown , GlTooltipDirective } from ' @gitlab/ui' ;
3
+ import { __ } from ' ~/locale' ;
5
4
import RunnerEditButton from ' ./runner_edit_button.vue' ;
6
5
import RunnerPauseButton from ' ./runner_pause_button.vue' ;
7
-
8
6
import RunnerEditDisclosureDropdownItem from ' ./runner_edit_disclosure_dropdown_item.vue' ;
9
7
import RunnerPauseDisclosureDropdownItem from ' ./runner_pause_disclosure_dropdown_item.vue' ;
10
8
import RunnerDeleteDisclosureDropdownItem from ' ./runner_delete_disclosure_dropdown_item.vue' ;
@@ -13,15 +11,15 @@ export default {
13
11
name: ' RunnerHeaderActions' ,
14
12
components: {
15
13
GlDisclosureDropdown,
16
-
17
- RunnerDeleteButton,
18
14
RunnerEditButton,
19
15
RunnerPauseButton,
20
-
21
16
RunnerEditDisclosureDropdownItem,
22
17
RunnerPauseDisclosureDropdownItem,
23
18
RunnerDeleteDisclosureDropdownItem,
24
19
},
20
+ directives: {
21
+ GlTooltip: GlTooltipDirective,
22
+ },
25
23
props: {
26
24
runner: {
27
25
type: Object ,
@@ -33,42 +31,61 @@ export default {
33
31
default: null ,
34
32
},
35
33
},
34
+ data () {
35
+ return {
36
+ isDropdownVisible: false ,
37
+ };
38
+ },
36
39
computed: {
37
40
canUpdate () {
38
41
return this .runner .userPermissions ? .updateRunner ;
39
42
},
40
43
canDelete () {
41
44
return this .runner .userPermissions ? .deleteRunner ;
42
45
},
46
+ moreActionsTooltip () {
47
+ return ! this .isDropdownVisible ? __ (' More actions' ) : ' ' ;
48
+ },
43
49
},
44
50
methods: {
45
51
onDeleted (event ) {
46
52
this .$emit (' deleted' , event );
47
53
},
54
+ showDropdown () {
55
+ this .isDropdownVisible = true ;
56
+ },
57
+ hideDropdown () {
58
+ this .isDropdownVisible = false ;
59
+ },
48
60
},
49
61
};
50
62
< / script>
51
63
52
64
< template>
53
65
< div v- if = " canUpdate || canDelete" >
54
- <!-- sm and up screens -->
55
- < div class = " gl-hidden gl-gap-3 sm:gl-flex" >
56
- < runner- edit- button v- if = " canUpdate" : href= " editPath" / >
57
- < runner- pause- button v- if = " canUpdate" : runner= " runner" / >
58
- < runner- delete - button v- if = " canDelete" : runner= " runner" @deleted= " onDeleted" / >
59
- < / div>
60
-
61
- <!-- xs screens -->
62
- < div class = " sm:gl-hidden" >
66
+ < div class = " gl-flex gl-gap-3" >
67
+ < runner- edit- button v- if = " canUpdate" : href= " editPath" class = " gl-hidden sm:gl-inline-flex" / >
68
+ < runner- pause- button v- if = " canUpdate" : runner= " runner" class = " gl-hidden sm:gl-inline-flex" / >
63
69
< gl- disclosure- dropdown
70
+ v- gl- tooltip= " moreActionsTooltip"
64
71
icon= " ellipsis_v"
65
72
: toggle- text= " s__('Runner|Runner actions')"
66
73
text- sr- only
67
74
category= " tertiary"
68
75
no- caret
76
+ @shown= " showDropdown"
77
+ @hidden= " hideDropdown"
69
78
>
70
- < runner- edit- disclosure- dropdown- item v- if = " canUpdate" : href= " editPath" / >
71
- < runner- pause- disclosure- dropdown- item v- if = " canUpdate" : runner= " runner" / >
79
+ < runner- edit- disclosure- dropdown- item
80
+ v- if = " canUpdate"
81
+ : href= " editPath"
82
+ class = " sm:gl-hidden"
83
+ / >
84
+ < runner- pause- disclosure- dropdown- item
85
+ v- if = " canUpdate"
86
+ : runner= " runner"
87
+ class = " sm:gl-hidden"
88
+ / >
72
89
< runner- delete - disclosure- dropdown- item
73
90
v- if = " canDelete"
74
91
: runner= " runner"
0 commit comments