1
1
<template >
2
2
<div >
3
- <div class =" activity-wrapper" >
3
+ <v-hover v-slot = " { hover } " class =" activity-wrapper" >
4
4
<div
5
- @click =" selectActivity(id)"
6
- @mouseover =" isHovered = true"
7
- @mouseout =" isHovered = false"
5
+ @mousedown =" selectActivity(id)"
8
6
:id =" `activity_${uid}`"
9
- :style =" { 'border-left-color': color }"
10
- :class =" {
11
- selected: isSelected,
12
- highlighted: isHovered || isSelected
13
- }"
7
+ :style =" { 'border-left-color': config.color }"
8
+ :class =" { selected: isSelected, highlighted: hover }"
14
9
class =" activity" >
15
10
<v-btn
16
11
v-if =" hasSubtypes"
17
- @click .stop =" toggle()"
12
+ @mousedown .stop =" toggle()"
18
13
icon
19
14
class =" my-auto" >
20
15
<v-icon size =" 30" color =" primary darken-3" >mdi-{{ icon }}</v-icon >
21
16
</v-btn >
22
17
<div class =" activity-name h5 my-auto text-truncate" >{{ data.name }}</div >
23
- <v-spacer />
24
- <div v-show =" isHighlighted" class =" actions my-auto" >
18
+ <div v-if =" isSelected || hover" class =" actions my-auto" >
25
19
<options-toolbar
26
20
:activity =" { id, uid, repositoryId, parentId, type, position, data }"
27
21
class =" options-toolbar my-auto" />
44
38
class =" options-menu" />
45
39
</div >
46
40
</div >
47
- </div >
41
+ </v-hover >
48
42
<div v-if =" !isCollapsed({ uid }) && hasChildren" >
49
43
<draggable
50
44
@update =" data => reorder(data, children)"
63
57
</template >
64
58
65
59
<script >
66
- import { mapGetters , mapMutations , mapState } from ' vuex' ;
60
+ import { mapGetters , mapMutations } from ' vuex' ;
67
61
import Draggable from ' vuedraggable' ;
68
62
import filter from ' lodash/filter' ;
69
- import find from ' lodash/find' ;
70
- import { isEditable } from ' shared/activities' ;
71
63
import OptionsMenu from ' ../common/ActivityOptions/Menu' ;
72
64
import OptionsToolbar from ' ../common/ActivityOptions/Toolbar' ;
73
65
import reorderMixin from ' ./reorderMixin' ;
@@ -90,15 +82,10 @@ export default {
90
82
data: { type: Object , required: true },
91
83
activities: { type: Array , default : () => ([]) }
92
84
},
93
- data : () => ({ isHovered: false }),
94
85
computed: {
95
86
... mapGetters (' repository' , [' structure' , ' isCollapsed' ]),
96
- ... mapState (' repository' , { outlineState: ' outline' }),
97
- config : vm => find (vm .structure , { type: vm .type }),
98
- color : vm => vm .config .color ,
99
- isEditable : vm => isEditable (vm .type ),
87
+ config : vm => vm .structure .find (it => it .type === vm .type ),
100
88
isSelected : vm => vm .selectedActivity && (vm .selectedActivity .uid === vm .uid ),
101
- isHighlighted : vm => vm .isHovered || vm .isSelected ,
102
89
isExpanded : vm => ! vm .isCollapsed ({ uid: vm .uid }),
103
90
hasSubtypes : vm => !! size (vm .config .subLevels ),
104
91
hasChildren : vm => (vm .children .length > 0 ) && vm .hasSubtypes ,
@@ -148,7 +135,7 @@ $background-color: #eceff1;
148
135
line-height : 2.5rem ;
149
136
}
150
137
151
- & .highlighted {
138
+ & .selected , & . highlighted {
152
139
opacity : 1 ;
153
140
background-color : darken ($background-color , 7 );
154
141
0 commit comments