New Icons in New UI

[bryankhor07]

I can't seem to find the icons in the new UI. My teammates and I are trying to add tooltips to these new icons but we can't find them. The list of icons is in here -> #2693

[jkppr]

Hi Bryan, can you elaborate on what you mean by "can't find them"?

If it helps, here is an example for an icon without tooltip:
https://github.com/google/timesketch/blob/master/timesketch/frontend-ng/src/components/Explore/EventList.vue#L83

And here is an example with a working tooltip:
https://github.com/google/timesketch/blob/master/timesketch/frontend-ng/src/components/Explore/EventDetail.vue#L92

Our default tooltip delay is at 500 at the moment. This can be changed depending on the location of the icon and it's context though.

[bryankhor07]

Hi jkppr, thanks for the clarification. I have another question. Do I need to add tooltips for the icons on the left panel?

[jkppr]

Not all icons need tooltips. For example the ones in the left panel already have a descriptive term next to it, so it is not necessary for the beginning.

Let's start with the icons that can be clicked (trigger an action) and have no descriptive text next to it.

Here is a good read about tooltips & UX: https://www.nngroup.com/articles/tooltip-guidelines/#:~:text=Don't%20use%20tooltips%20for,seem%20like%20an%20unusual%20request.

[bryankhor07]

Ok got it!

[bryankhor07]

@jkppr Would this be the action menu?

[jkppr]

yes I would call most of the 3 dot icons "action menus". You can find another one left to each event entry for example.

[bryankhor07]

Cool, thanks!

[bryankhor07]

@jkppr Can I use the title property for tooltip instead of wrapping the icon with "<v - tooltip>"? Sometimes, wrapping it with "<v - tooltip>" doesn't work. I find it easier to just use the title property.

[jkppr]

Sure, as long as the result is a proper tooltip information explaining the action that will happen when clicking the icon.

[jkppr]

I looked at your PR #2952 and the tooltips created by using the title seem to be the default ones provided by the browser. They have the downside that we cannot control the delay time and the look of the tooltip. Given these circumstances I would recommend to use the title only where v-tooltip is not possible at all.

[jkppr]

@bryankhor07 feel free to send some partial PR my way for review when you have added a tooltip to some icons already. This way we prevent that there will be one big PR in the end and can include feedback early.

[bryankhor07]

Alright sounds good. I do have another question. Where is the manage icon located in the left panel folder? I can't seem to find it.

[jkppr]

I think you are looking for this one: https://github.com/google/timesketch/blob/master/timesketch/frontend-ng/src/views/Sketch.vue#L66

[bryankhor07]

Thanks!!

[jkppr]

Topic closed in PR #2983