biigle / core

:large_blue_circle: Application core of BIIGLE
https://biigle.de
GNU General Public License v3.0
12 stars 16 forks source link

Favourite label key icon #797

Closed mzur closed 1 week ago

mzur commented 3 months ago

Show a key icon similar to 1, 2, 3 etc. next to the name of a favourite label of the label trees component. This could look similar to BIIGLE.party (bottom right of each label):

image

mzur commented 1 month ago

The favorite label tree is a Vue component that is created here. The component itself is this one. in order to show the icons, the component needs a new property (e.g. showFavouriteShortcuts). This can be set to true here and it should be passed on to the label tree label component, which then also needs this property. Here you can finally display the shortcut key with icon next to the favorite label star.

As a small exercise, this does not provide you with the position/number of the label that should be displayed. Maybe you can figure this out (take a look at the v-for of the label tree labels) :wink:

To develop this feature, you should switch to the master branch and then create a new development branch from there. For the changes to become visible in the UI you need to run npm run watch in the background. This will continuously compile the updated JavaScript files.

mzur commented 1 month ago

This is how it could look like in the end (with suitable colors and numbers): Screenshot from 2024-05-24 14-25-49

If the keyboard icon, number and star is too much, we could also try to squeeze the number into the star. But we still need the click action on the star to remove the favourite again.