I have tested this item ✅ successfully on 8bf13fb

This change makes it much cleaner and resolves the issue with icons that do or dont have Add buttons

I have tested this item ✅ successfully on e5cce41

I have tested this item ✅ successfully on e5cce41

@bembelimen Could you repeat your test? There have been some changes since you have tested. We would have 2 good tests then.

@chmst Looks really much better.

@infograf768 Should there something be done for rtl regarding position of the "+" buttons?

I am NOT a designer so ymmv

1. Alignment
   Because only some have an add then the icons are not aligned
   

2. Colour
   To me the new greyish colour looks like they are disabled. Maybe thats because blue is the colour used for almost everything else
   

3. Accessibility
   You don't need sr-only text if you have a title - they both get announced.
   (There is another a11y issue but its not related to the code here)

@brianteeman thank you for your opinion.

Not sure about the title.
The title is ugly - but there was a discussion if it is necessary or not for icons without text. And I remember a dicussion about tilte / sr-only. Not sure if the is announced by all screenreaders.
If it is a choice, I would remove the ugly title.
What would you suggest @brianteeman?

I am not a designer either.
You know the original Design and meanwhile we are far away from that, I just try to make things more usable.
The button could have a dark background. But then is white on hover which looks strange. I tried the color "success" - but looks wrong.
The background now is the same as in the proposal of angie radtke and as it was before.

I am open to all improvements. Sometimes, when it is more a matter of taste as here with the background, I don't want to change it. There will be always different opinions, and we better wait what people say in daily use.

You need the title - otherwise sighted users have no clue what the + is for

@richard67

@infograf768 Should there something be done for rtl regarding position of the "+" buttons?

Yes. We get this:

for rtl we should modify line 286->293 of /administrator/templates/atum/scss/template-rtl.scss

.quickicon-linkadd {
  a {
   padding-right: 2.4rem;
   .fa {
     right: 0;
   }
 }
}

to

.quickicon-linkadd {
  a {
   padding-right: 0;
   .fa {
     right: 0;
   }
 }
}

Then we will get:

Note: There are so many aspects that need to be done to correct RTL that it will require some stabilisation of this template before working on it. But that one can already be corrected in this PR.

@chmst Could you check and if possible inplement @infograf768 's suggested changes for RTL? See his comment above: #25865 (comment).

Now rtl looks ok:

the removal of the sr-only works for a11y - good spot

the language strings for the title are a bit odd because of the capitalisation. but the more i looked at i didn't see a solution until I realised that the word "new" is not needed in the string. When you ADD something it is always NEW so that word is superflous and can be removed. You can not ADD an old category ;)

A follow up here as I had posted this part in #25937 in reference to the placement of the + (add) function as suggested in this thread.

It's an interesting idea, but as Brian mentioned, there will be people who won't know what the standalone + symbol is for. Good idea for the side placement of just the icon, but I think it's better where it is on the bottom. I would also go as far as adding the word "Add" to the add link boxes. Example: Add Article, Add Category (not Add Article Category), etc.

NOTE: I reversed the background colours also for better contrast and not the greyed out bg (kept that as a hover bg) which is in ref to a couple of other suggestions I made in #25937 but its slightly different from this thread topic.

OOps - should be remore "new"

Maybe it will be more convenient?

@AlekVolsk
What does it give when there are updates?
Here is what we have now:

yes for term i prefer Add module because its an action word better to understand then new module
more consitent (not a big change but..)

@infograf768
This will give a more compact look, now all this takes up a lot of screen space, if you have a 2K + monitor - it does not mean that everyone has such a monitor, think about a user of budget laptops with a resolution of 1300 * 1024

You can change the button style and add a badge with the number of updates on a smaller button, it does not interfere

I have tested this item ✅ successfully on c7fc61a

I have tested this iten NOT sucessfully; It's not look so likely than in the preview.
I tested with Firefox; Screeb 1920 x 1080;

Thank you for testing.
This is a change in scss, therefore you will need to start npm run build:css

@chmst Please fix conflicting files.

@Quy it seems that I must do this new, the scss does no longer match, meanwhile.
It will be better to close this and make a new branch.

Hopefully all conflicts are solved now and the new wrapper around an item group is added. For testing this, please don't forget to run npm

I have tested this item ✅ successfully on df68c25

I have tested this item ✅ successfully on bba7091

RTC

Thanks guys for persisting on this one!

Let's make the icons dark blue so they don't look disabled?

I'm lookong forward for more PRs :)
We also could give every icon an own class, so users can style different. I'd like to have the configuration button in an extra colour.

I'm playing with v12 alpha and in reference to AlekVolsk compact version, I decided to try this but with a slight change. I did 3 screenshots, big in size for better detail. But the large blocks that the layout has now, I think are just a bit too big (and blocky). The size also pushed the rest of the content down, requiring more scrolling. Compact is a great solution. However, it gets lost in the mix of other boxed content elements, so I added colour. The idea is to separate them visually. I also wanted to mention that being the grey background does look like disabled buttons; I'd keep the grey as a hover background colour.

@icc365
Drop this bad job, any edits here are accepted only from "their". Instead of looking at the best examples of available admin areas, they prefer to sculpt their bikes here. After this patch has been merged, you can safely and openly declare that there will be no normal admin panel in any form in Joomla. Purely for myself and my clients, I will write my own template, after the release of RC.

@icc365 You are free to make any PR you like.In my opinion, the intention was d make big buttons, so the user finds them without glasses.

@AlekVolsk no need to be aggresive against "them". You to are free (since about 3 years) to make an own template and can make any PR you like. If it is good and meets all requirements, everyone willl be happy to see it merged.

@icc365 @AlekVolsk
I am asking again what your proposals would look like when we have Extension Updates and Joomla Updates...
#25865 (comment)

@infograf768 as well as yours: a corresponding badge will be added next to the button title

I didn’t offer something cardinal, just a more compact size of the buttons, no more, because the options you offer "for the blind" are unreasonable

@AlekVolsk As far as I understand your proposal there is some information which is visible only by the color. And that's not good UX. Information never should be put into color only.

If you want the buttons to be visible to people with limited abilities, then you have big problems with the UX: the button headers are small and the icons are non-associative.

But in general, you initially make a mistake. focusing on everyone at once: the template for people with disabilities is always imposed separately from the main one, and the main one displays a large disconnect button with a large contrasting associative icon to enable the mode for people with disabilities.

Anyway: This PR here is merged, and I like the result.

Unfortunately, the vast majority do not like it, as the whole J4 admin panel does not like at all, it has become even more horrible

Yes, I always was a non-conformist, and I am happy about it.

Most importantly: the result obtained has nothing to do with the originally proposed option: https://magazine.joomla.org/issues/issue-nov-2017/item/3289-episode-iv-a-new-user-interface-for-the-joomla-backend