Beta 6: Feature Request

[urchindesign]

Currently I use the CSS class you add .has-element-css on every build to show me which elements has element CSS. I use the script @Misho posted at some point.

If there is a custom class like has-element-css for custom attributes and conditionals that would be awesome.

Currently the conditionals / custom attributes are hidden away and it is not easy find them or know which elements we’ve set them on. As the builder gets more complex and we can do more things it becomes difficult to find what we’ve done.

This would at least allow us to create our own CSS to show us where theses things have been applied.

[alexander]

Hey @urchindesign,

You’re referring to the outline pane items right? I think that’s where we added the class. I could look into adding some others as well. I think having one for looper consumer/providers might be nice too.

Curious on your thoughts (and yours @Misho) of adding it to the Breadcrumbs as well.

[urchindesign]

Breadcrumbs would also be nice for anything that’s hidden away.

[alexander]

Thanks! I’ll see what I can do there.

[Misho]

Forgot to follow up here: having them in the breadcrumbs as well is a great idea. Breadcrumbs are visible even if Outline tab is hidden, and/or element structure is not fully expanded.

[devinelston]

+1 yes please

[alexander]

Ok, so here’s what I’m going with for now. These classes (

has-conditions
has-looper-provider
has-looper-consumer
has-custom-atts
has-element-css
has-hide-bp
has-dynamic-content

Those classes will be added to tco-crumb (Breadcrumbs) and tco-layer (Outline).

[Maratopia_Digital]

This is brilliant, thanks for adding this in @alexander!

[alexander]

You’re welcome!

[Maratopia_Digital]

Hey @alexander,

I’ve just recently been playing with these classes on the UI style and I think I might have come across a minor bug.

So I have a Looper Provider on .is-lvl-3 and a Looper Consumer on is-lvl-4. But currently, the .has-looper-consumer and .has-looper-provider are all being applied to the parent level. Here are some screenshots which might explain better than my explanation here.

Looper Provider on is-lvl-3

Looper Consumer on is-lvl-4

Chrome Inspect on Looper Provider - is-lvl-3

Chrome Inspect on Looper Consumer - .is-lvl-4

Hopefully, this makes sense!

[alexander]

Got it! Fixed for the next patch.

[Misho]

Hi @alexander!

Is it too late for a custom class if the element has Effects?

[alexander]

No problem! I’ve added has-scroll-effects, has-interaction-effects, and is-effects-provider (Link child interactions is enabled)

[Misho]

@alexander, thanks for all the great classes. This will help a lot.

I am trying to think of a way to highlight all options simultaneously. Very often more than one is applied. For example, an element could have both Custom CSS and Interaction effects.

Unfortunately, there are ten various indicators, and things like this won’t work:

.tco-crumb.has-element-css::after {}
.tco-crumb.has-interaction-effects::after {}
...

If both are in use, only the last one will be shown. It is possible to have one more applied with the ::before pseudo elements but there are so many others.

I was hoping to place a line of small indicators above the Breadcrumb’s text, but that is not possible. I could perhaps do something for each of the classes, like border bottom for one, border top for the other, etc. That’s messy though. There is also a <span> element inside, so I have used it to solve Looper Consumer and the Provider with its own ::before and ::after.

Do you have any idea what could we do to display all indicators, even if many are applied simultaneously?

Thanks!

[urchindesign]

Did you figure something out yet?

I had been thinking about using an image sprite with positioning but I’m not sure about all the possible variations… another option would be to use JS to append a div or something.

but i haven’t though about it much… we seem to be too busy at the moment.

[alexander]

So we’ve discussed some rewrites to the Outline panel for performance, and we’ll probably revisit some interactions as well and potentially visual feedback. Similar to what you’re looking to do here I think it’s something we’ll implement an official solution for at some point - perhaps with the theme options reboot.

Meanwhile, I’d probably approach it with CSS variables and do something like this. You could replace 1 and 2 with copy/pasted unicode values if you wanted to use icons.

.has-element-css {
  --icon-has-element-css: '1';
}

.has-interaction-effects {
  --icon-has-interaction-effects: '2';
}

.tco-crumb span:before {
  margin-right: 2px;
  content: var(--icon-has-element-css) var(--icon-has-interaction-effects);
}

[urchindesign]

Thanks for this… seems I learn something new every day… haven’t really worked with variables like that before.

[Misho]

Nice!

Wouldn’t this CSS place all variable conditions to the exact same place? Maybe I am seeing something totally wrongly.

[alexander]

You can put CSS variables anywhere and if they don’t exist nothing will output. The .tco-crumb span:before would try to render all the different symbols in a row, but won’t have anything to output if none of the variables are declared. It works because you only define those variables on the items that should be displaying them and it stays blank everywhere else.

[striata]

@Misho @urchindesign @devinelston Have you smart people put something together yet to show these indicators in the builders?