search

backdrop / backdrop-issues

Issue tracker for Backdrop core.
144 stars 40 forks source link

Can we add a class to the admin tabs? #4207

Open laryn opened 4 years ago

laryn commented 4 years ago

Description of the need I was looking at styling the tabs slightly differently and realized they don't have any identifying classes (e.g. the "Edit" tab does not have an "edit" class) so are hard to pinpoint precisely with CSS.

Screen Shot 2020-09-23 at 4 27 03 PM

Recommended solution Add a view class to the View tab and an edit class to the Edit tab.

PR: https://github.com/backdrop/backdrop/pull/3320

jenlampton commented 4 years ago

I think this is a great idea, but I think it might be difficult.

The tabs are generated automatically based on MENU_LOCAL_PATHs, and the links are rendered through theme_menu_local_task(). The class would need to be added into $link['localized_options']['attributes']['class'] somehow...

Do we want to do this automatically so all tabs get unique classes? If so, what do we base the classes on? Maybe the system path?

I took a wild guess at a solution (not sure about these replacements...) but it seems to be working. On the back end we end up with some really ugly classes like admin-config-development-configuration-single.

stpaultim commented 2 years ago

I'm looking at feature requests with Pull Requests that are near completion and might be quick last minute additions to 1.22.0.

Here is a pretty simple PR that does something pretty useful, in my opinion. I'd don't recall ever trying to theme these tabs, but I do recall being frustrated at how they look. Providing better class options to themers might result in better styled tabs (also, it might not). It seems like this would need to happen in core, if it's to be useful to contrib themers.

I've tested the sandbox and it seems to be providing mostly useful classes.

image

BEFORE: image

AFTER: image

image

BEFORE image

AFTER" image

image

BEFORE: image

AFTER: image

@laryn - are you still interested in this?

ghost commented 2 years ago

I think classes should be applied to the <li> element instead. Then you can target either the <li> or the <a> element (li.view or li.view a) but the way it is currently there's no way to target just the <li> element.

laryn commented 2 years ago

I am still interested in this.

I hear you @BWPanda but that doesn't seem to be how it's done on admin menu items, which all have the class on the link element. I'm not sure if it makes sense to keep the approach consistent or not.

avpaderno commented 2 years ago

I like it. Don't CSS classes like node and view risk to be too generic, though? The second could be a CSS class used for a view. node-view seems better.