Server: Disable hover effect on app menu (NC v15)

[euh2]

I suggest to add an option to disable the new hover effect on the app menu. I strongly prefer non-invasive effects on websites. This hover effect somehow reminds me of the animated gifs of the '90.

[kesselb]

See https://github.com/nextcloud/server/pull/12153 for more information about this change. Options like "disable new hover effect on app menu" are less popular because they are bad from an ux perspective. I could suggest that you overwrite this effect with a custom theme. @jancborchardt @skjnldsv close this issue?

[jancborchardt]

Thanks @danielkesselberg! :+1: Agree with your take – closing.

[patrice-geo]

Having text below the icons in the navigation bar is very nice. But ideally, admins / users would have to choose if they want either: No text the first 7 (like before), text when hover, text always visible.

[jancborchardt]

But ideally, admins / users would have to choose if they want either:

No, because then we have to test and maintain all 3 settings. This will use an extraordinary amount of our limited resources for a small detail we can simply do one way.

Recommended reading: Choosing our preferences

[Karamelmar]

i would strongly suggest, that the icons in the app menu do not move (up - or anywhere) when you hover over the menu, this is very distracting! Especially that all icons move, even those i did not hover over...

I read the above statement regarding the limited time and resources so i got your point... but perhaps in that chase it would be a solution just not to implement the new menu?

if i got you right your suggestion is that people should manually create a theme to avoid that?
doesn't that contradict the theming options in the settings menu?
i would believe that an option to use this new feature or not would fit perfectly in there, since it is clearly something like the header logo or the color... a lot of people have a different opinion/taste about.

Actually i think most people get familiar with the icons of there apps pretty quick and if you think about the ui on Android and Apple Smartphones, most people are used to only have an icon without any description.

[jancborchardt]

but perhaps in that chase it would be a solution just not to implement the new menu?

No. We had the issue that people don’t know which apps are which. We used to show only the name of the currently hovered app. This didn’t really solve the issue properly.

Actually i think most people get familiar with the icons of there apps pretty quick

This simply isn’t true. Lots of people don’t spend so much time in Nextcloud and we had lots of reports of people having issues with this.

i would believe that an option to use this new feature or not would fit perfectly in there, since it is clearly something like the header logo or the color... a lot of people have a different opinion/taste about.

No, again, any setting creates something we need to test. Header logo and color are simply variables and not differing features – also theming is very widely used.

and if you think about the ui on Android and Apple Smartphones, most people are used to only have an icon without any description.

If you look on the home screen on iOS or Android, or the app drawer on Android → all of the app icons have their name below it, always.

[euh2]

Actually i think most people get familiar with the icons of there apps pretty quick

This simply isn’t true. Lots of people don’t spend so much time in Nextcloud and we had lots of reports of people having issues with this.

Do you have any reference to those issues? I could not find issues related to this at releveant places. And my take on this is that we don't underestimate people and their ability to get used to it. The established convention seems to be showing tooltips (they can be fancy-styled as well).

If you look on the home screen on iOS or Android, or the app drawer on Android → all of the app icons have their name below it, always.

Yes, that is mostly true. But those icons and text don't move around when I look at them.

[robertmarquardt]

I used Custom CSS and JSLoader to adapt the app menu to my preferences.

/* Disable subtitles and jumping icons */
#appmenu li span {
  display: none;
}

#appmenu li:hover a + span,
#appmenu li a:focus + span, #appmenu li:hover span, #appmenu li:focus span,
#appmenu li a:focus span {
  display: none;
}

#appmenu:hover li svg,
#appmenu:hover li .icon-more,
#appmenu:hover li .icon-more-white,
#appmenu:hover li .icon-loading-small,
#appmenu:hover li .icon-loading-small-dark {
  transform: none;
}

#appmenu li a:focus svg,
#appmenu li a:focus .icon-more,
#appmenu li a:focus .icon-more-white,
#appmenu li a:focus .icon-loading-small,
#appmenu li a:focus .icon-loading-small-dark {
  transform: none;
}

/* Disable triangle below icons */
#appmenu li a.active::before, #appmenu li:hover a::before, #appmenu li:hover a.active::before, #appmenu li a:focus::before {
 display: none;
}

// Add title tags to the app menu entries
var children = document.getElementById("appmenu").children;
for (var i = 0; i < children.length; i++) 
{
document.getElementById("appmenu").children[i].title=document.getElementById("appmenu").children[i].textContent;
}

[euh2]

Really cool, @robertmarquardt! I adapted your suggestion a bit:

Custom js:

(function(){
    var container = document.querySelector("#appmenu");
    var tooltipList = container.querySelectorAll('a[aria-label]');
    for(var i = 0; i < tooltipList.length; i++){
        var tooltipContainer = document.createElement('span');
        var att = document.createAttribute("class");       
        att.value = "triangle--span";       
        tooltipContainer.setAttributeNode(att); 
        tooltipList[i].parentNode.insertBefore(tooltipContainer, tooltipList[i].nextSibling);
    }   
})();

And the css:
```css
/* Disable subtitles and jumping icons */

appmenu li span {

display: none;
}

appmenu:hover li span,

appmenu li:hover a + span,

appmenu li a:focus + span, #appmenu li:hover span, #appmenu li:focus span,

appmenu li a:focus span {

display: none;
}

appmenu:hover li svg,

appmenu:hover li .icon-more,

appmenu:hover li .icon-more-white,

appmenu:hover li .icon-loading-small,

appmenu:hover li .icon-loading-small-dark {

transform: none;
}

appmenu li a:focus svg,

appmenu li a:focus .icon-more,

appmenu li a:focus .icon-more-white,

appmenu li a:focus .icon-loading-small,

appmenu li a:focus .icon-loading-small-dark {

transform: none;
}

/* Disable triangle below icons */

appmenu li a.active::before, #appmenu li:hover a::before, #appmenu li:hover a.active::before, #appmenu li a:focus::before {

display: none;
}

/* Enable tooltips */

appmenu:hover li:hover span,

appmenu:hover li:focus span {

opacity: 1;
z-index: 5;
display: inline-block;
margin-bottom: -25px;
border-radius: 2px;
background-color: black;
color: #fff8eb;
font-size: 1.3em;
line-height: 1.6em;

}

appmenu:hover li .active + span {

opacity: 1;
background-color: #bcbcbc1a;

}

appmenu li a.active {

opacity: 1;
background-color: #bcbcbc1a;
border-bottom: 2px black;
border-radius: 50%;

}

appmenu:hover li:hover span.triangle--span,

appmenu:hover li:focus span.triangle--span {

width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
z-index: 4;
bottom: 0;
margin-bottom: -3px;
content: '';
display: block;
position: absolute;
padding: 0;
background: none;

}

[clcain]

I like the look of @euh2's suggestion. It avoids the main issue that I have with the current implementation, which is that I always try to click the bottom of the icon but then the icon moves up and my click does nothing.