Skip to content

Commit

Permalink
Add title to PR file tree items (#22918)
Browse files Browse the repository at this point in the history
Previously, a file/directory name was simply cut when it was too long.
Now, we display the browser-native tooltip (`title`) instead, so you can
still see it when hovering over it.
In this case, we don't use the normal `tippy` tooltips for three
reasons:
1. Vue components are not included in the global tooltip initialization
2. Vue components would need to initialize their tooltips themselves
whenever their content is changed
3. The tooltips are shown too long under the default configuration (the
tooltip one element above is still shown when hovering on the element
below)

Fixes #22915

## Appearance


![image](https://user-images.githubusercontent.com/51889757/219049642-43668a38-0e86-42bf-a1d0-3742c4dc7fd9.png)

## Room for future improvement

We could think about displaying the whole file path in the title, not
just its name.
This is not done at the moment:

![image](https://user-images.githubusercontent.com/51889757/219050689-1e6e3d57-f2bf-48be-8553-415e744a6e10.png)

---------

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
  • Loading branch information
delvh and techknowlogick authored Feb 16, 2023
1 parent 3f318a4 commit 3361bbf
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion web_src/js/components/DiffFileTreeItem.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<div v-show="show">
<div v-show="show" class="tooltip" :title="item.name">
<!--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"-->
<div class="item" :class="item.isFile ? 'filewrapper gt-p-1' : ''">
<!-- Files -->
<SvgIcon
Expand Down

0 comments on commit 3361bbf

Please sign in to comment.