11<template >
22 <div >
3- <div class =" activity-wrapper" >
3+ <v-hover v-slot = " { hover } " class =" activity-wrapper" >
44 <div
5- @click =" selectActivity(id)"
6- @mouseover =" isHovered = true"
7- @mouseout =" isHovered = false"
5+ @mousedown =" selectActivity(id)"
86 :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 }"
149 class =" activity" >
1510 <v-btn
1611 v-if =" hasSubtypes"
17- @click .stop =" toggle()"
12+ @mousedown .stop =" toggle()"
1813 icon
1914 class =" my-auto" >
2015 <v-icon size =" 30" color =" primary darken-3" >mdi-{{ icon }}</v-icon >
2116 </v-btn >
2217 <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" >
2519 <options-toolbar
2620 :activity =" { id, uid, repositoryId, parentId, type, position, data }"
2721 class =" options-toolbar my-auto" />
4438 class =" options-menu" />
4539 </div >
4640 </div >
47- </div >
41+ </v-hover >
4842 <div v-if =" !isCollapsed({ uid }) && hasChildren" >
4943 <draggable
5044 @update =" data => reorder(data, children)"
6357</template >
6458
6559<script >
66- import { mapGetters , mapMutations , mapState } from ' vuex' ;
60+ import { mapGetters , mapMutations } from ' vuex' ;
6761import Draggable from ' vuedraggable' ;
6862import filter from ' lodash/filter' ;
69- import find from ' lodash/find' ;
70- import { isEditable } from ' shared/activities' ;
7163import OptionsMenu from ' ../common/ActivityOptions/Menu' ;
7264import OptionsToolbar from ' ../common/ActivityOptions/Toolbar' ;
7365import reorderMixin from ' ./reorderMixin' ;
@@ -90,15 +82,10 @@ export default {
9082 data: { type: Object , required: true },
9183 activities: { type: Array , default : () => ([]) }
9284 },
93- data : () => ({ isHovered: false }),
9485 computed: {
9586 ... 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 ),
10088 isSelected : vm => vm .selectedActivity && (vm .selectedActivity .uid === vm .uid ),
101- isHighlighted : vm => vm .isHovered || vm .isSelected ,
10289 isExpanded : vm => ! vm .isCollapsed ({ uid: vm .uid }),
10390 hasSubtypes : vm => !! size (vm .config .subLevels ),
10491 hasChildren : vm => (vm .children .length > 0 ) && vm .hasSubtypes ,
@@ -148,7 +135,7 @@ $background-color: #eceff1;
148135 line-height : 2.5rem ;
149136 }
150137
151- & .highlighted {
138+ & .selected , & . highlighted {
152139 opacity : 1 ;
153140 background-color : darken ($background-color , 7 );
154141
0 commit comments