2022-09-27 07:22:19 +02:00
< script >
import { SvgIcon } from '../svg.js' ;
2023-05-30 18:53:15 +08:00
import { diffTreeStore } from '../modules/stores.js' ;
2022-09-27 07:22:19 +02:00
export default {
2022-12-23 17:03:11 +01:00
components : { SvgIcon } ,
2022-09-27 07:22:19 +02:00
props : {
item : {
type : Object ,
2024-03-22 15:06:53 +01:00
required : true ,
2022-09-27 07:22:19 +02:00
} ,
} ,
data : ( ) => ( {
2023-05-30 18:53:15 +08:00
store : diffTreeStore ( ) ,
2022-09-27 07:22:19 +02:00
collapsed : false ,
} ) ,
methods : {
getIconForDiffType ( pType ) {
const diffTypes = {
2023-08-19 03:55:56 +08:00
1 : { name : 'octicon-diff-added' , classes : [ 'text' , 'green' ] } ,
2 : { name : 'octicon-diff-modified' , classes : [ 'text' , 'yellow' ] } ,
3 : { name : 'octicon-diff-removed' , classes : [ 'text' , 'red' ] } ,
4 : { name : 'octicon-diff-renamed' , classes : [ 'text' , 'teal' ] } ,
5 : { name : 'octicon-diff-renamed' , classes : [ 'text' , 'green' ] } , // there is no octicon for copied, so renamed should be ok
2022-09-27 07:22:19 +02:00
} ;
return diffTypes [ pType ] ;
} ,
} ,
} ;
< / script >
2023-09-02 16:59:07 +02:00
< template >
<!-- title instead of tooltip above as the tooltip needs too much work with the current methods , i . e . not being loaded or staying open for "too long" -- >
< a
v - if = "item.isFile" class = "item-file"
: class = "{'selected': store.selectedItem === '#diff-' + item.file.NameHash, 'viewed': item.file.IsViewed}"
: title = "item.name" : href = "'#diff-' + item.file.NameHash"
>
<!-- file -- >
< SvgIcon name = "octicon-file" / >
2024-03-22 14:45:10 +01:00
< span class = "gt-ellipsis tw-flex-1" > { { item . name } } < / span >
2023-09-02 16:59:07 +02:00
< SvgIcon :name = "getIconForDiffType(item.file.Type).name" :class = "getIconForDiffType(item.file.Type).classes" / >
< / a >
< div v -else class = "item-directory" :title = "item.name" @ click.stop = " collapsed = ! collapsed " >
<!-- directory -- >
< SvgIcon : name = "collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" / >
< SvgIcon class = "text primary" name = "octicon-file-directory-fill" / >
< span class = "gt-ellipsis" > { { item . name } } < / span >
< / div >
2022-09-27 07:22:19 +02:00
2023-09-02 16:59:07 +02:00
< div v-if = "item.children?.length" v-show="!collapsed" class="sub-items" >
< DiffFileTreeItem v-for = "childItem in item.children" :key="childItem.name" :item = "childItem" / >
< / div >
< / template >
2022-09-27 07:22:19 +02:00
< style scoped >
2023-08-19 03:55:56 +08:00
a , a : hover {
text - decoration : none ;
color : var ( -- color - text ) ;
2022-09-27 07:22:19 +02:00
}
2023-08-19 03:55:56 +08:00
. sub - items {
2023-10-21 12:38:19 +02:00
display : flex ;
flex - direction : column ;
gap : 1 px ;
2023-10-25 18:00:53 +08:00
margin - left : 13 px ;
border - left : 1 px solid var ( -- color - secondary ) ;
2022-09-27 07:22:19 +02:00
}
2023-10-21 12:38:19 +02:00
. sub - items . item - file {
2023-10-25 18:00:53 +08:00
padding - left : 18 px ;
2022-09-27 07:22:19 +02:00
}
2023-08-19 03:55:56 +08:00
. item - file . selected {
2023-04-08 02:27:10 +08:00
color : var ( -- color - text ) ;
background : var ( -- color - active ) ;
border - radius : 4 px ;
}
2023-08-19 03:55:56 +08:00
. item - file . viewed {
color : var ( -- color - text - light - 3 ) ;
2022-09-27 07:22:19 +02:00
}
2023-08-19 03:55:56 +08:00
. item - file ,
. item - directory {
display : flex ;
align - items : center ;
gap : 0.25 em ;
2023-10-21 12:38:19 +02:00
padding : 3 px 6 px ;
2022-09-27 07:22:19 +02:00
}
2023-08-19 03:55:56 +08:00
. item - file : hover ,
. item - directory : hover {
2023-03-30 14:06:10 +02:00
color : var ( -- color - text ) ;
2023-08-19 03:55:56 +08:00
background : var ( -- color - hover ) ;
border - radius : 4 px ;
cursor : pointer ;
2023-06-25 02:46:30 +02:00
}
2022-09-27 07:22:19 +02:00
< / style >