SOLVED IN 1.4: Element and Control Panel

Bricks Version: 1.4 beta
Browser: Chrome 100

This was originally a sub-task and now moved into own ticket.

The element control and scroll works totally weird.
Looses the focus of element (no longer marked if mouse moves away from element)
And clicking on elments on the right hand pane the screen moves up and down more random.

Loom Screenrecording:
https://www.loom.com/share/a2275a52500e4559bf68d432d66a7ff9

1 Like

Hi Joachim,
thank you very much for creating a separate thread :slight_smile:

Maybe it helps if you send temporary login credentials and a link to this thread to help@bricksbuilder.io, so we can test directly on your site.

Have a nice Sunday!
timmse

Hey @joachim.auster @timmse

The element losing its focus box has been since 1.3.2 (containers are fine, but elements do not show).

This was the response back in July last year via email:

  1. Element UI box

Sorry I mean the green focus border for elements. The orange, blue and (red/purple) border colours show when you select that container and remains in place, whist you are editing - However when you click on an element like heading, text, the green focus box comes up but disappears if you move to the editing panel. It does not stay active.

  • Noted. We confirm it and it will be fixed soon.

Thanx @Michael for clarification :pray: :+1:

I can also confirm this issue with regards to the scroll positioning using structure panel

That was definitely before my time @Michael, so unfortunately I can’t say anything about it. Since then - and especially with regard to 1.4 - a lot has changed, so we consider it a new problem and are doing everything we can to solve it :muscle:t2:

@joachim.auster I’ve tried to replicate the scroll-to issue on your testing site (same page, same elements), and it worked fine for me on macOS & the the latest Brave browser. Which OS & browser did you use in your screencast?

@Michael Any chance that the root containers you click on in your screencast have custom “CSS ID” set? As that’s a 1.4-beta bug, I just fixed locally :slight_smile:

The reason we ended up not highlighting active non-container elements (or only on mouse hover) is that the green highlight makes it impossible to see the element border or any inset box-shadows. It seems this behaviour works for most users. Especially since you also see the active element highlighted in the structure panel.

Hi @thomas No there is no CSS ID set. Happy to ping you a DM with an access link if you like?

Ah yes can see it being difficult to give some visual indicator without affecting border/shadows. One possibility which could be used for all highlight boxes is to deactivate the highlight when the Border/Box Shadow menu is extended as per image below. When it is not extended then the highlight box will show.

Hey Thomas,
I suspect, there could be a conflict with other tools on the PC that have access to browser interface. First thought was Loom, but I am not deep enough in development to really face it.
My experience with this issue was different on different PC.

That’d be great. Thank you. Also, which OS + browser (incl. version numbers) are you using?

I prefer from adding those setting-conditional global checks as they might be incomplete, hard to maintain, etc. But as we also show the highlight for containers, “why not for all non-container elements?”. That’s more what currently makes me consider always showing the green element highlight. We’ll do some internal tests first to see how that turns out.

Adding a setting to enable this behaviour would also be an option. Although I prefer not to add a global setting for this.

No worries, will send it across now with the details too.

Yes exactly, I was thinking it could be applied universally when that tab is extended as you would use borders / box shadows on containers too. It would make it easier to maintain too as it would be an ‘on/off’ to all focus highlight boxes rather than just to the elements.

It was just a suggestion and regardless I am 100% confident if you do decide (or not decide) to make an edit it will be the right choice :slight_smile:

@timmse @thomas

I have another question concerning the editor:
Could it be possible in the editor, that when I click on an element in the middle (canvas?) also the control panel on the right side slides to the related element?

Currently, only the other way round works (with some problems, as mentioned above)
Clicking on an element on the right side slides the relevant element to the middle of the screen.

Background:
It is currently with 1.3.7 really hard to find the corresponding element on the right side, because there is no slide to the middle of the screen and no color marking (only more white then gray).

I am not sure, if I use the right naming, when I explain my issues.
Maybe you have a place where I can learn the correct wording (how is the right panel named, how the middle, how the left panel)

Best regards,
Joachim

I made another video to explain all my issues in one place and also additional issues I did not report until now:

  • Clicking on container chooses a container inside the container and not the parent one
  • Copy and Paste does NOT paste below element, it paste on bottom of container instead

Sorry in advance for my “weird language” inside the vidoe :slight_smile:

1 Like

Hi @joachim.auster

Just to answer this below. There is no naming convention and you could easily use left, middle & right. Personally, I go with the Structure panel (right), Canvas (centre) and Control panel (left)
 Again not right but not wrong haha

Hey @Michael,

like your wording suggestion, makes sense to me, so I will try to keep it :slight_smile:

Control-Panel (left)
Canvas (center)
Structure Panel (right)

Gotcha :wink:

But nevertheless, there is now a lot of work for BricksTeam to solve these issues in the editor with editing, controlling, active state, copy/paste, scrolling to element etc.
But these things have a HUGE impact on the developer/webdesign experience as a BricksBuilder user.

In 1.3.7 copy/paste with mouse does NOT work at all. And I have no motivation to use the duplicator function all the time on the structure-panel and then move it to the right place on the same page. Not talking about the case, when I want to copy an element or container from one page to another page or from one website to another website/domain. Lets cross our fingers that it get solved soon, best with 1.4 final.

Best regards,
Joachim

@joachim.auster If you enable the “Structure Panel Auto-Sync” setting under “Bricks > Settings > Builder” in your WordPress dashboard the Structure panel should scroll the selected element into view.

In terms of the builder naming convention I agree 100% with Michael :slight_smile:

  • Control Panel (left)
  • Canvas (center)
  • Structure Panel (right)

The copy& paste of elements & element styles should work in 1.4-beta already. If not, please let us know in a new forum post. It’s best to always keep one post about the topic/issue it has been started for.

It’s technically not possible to provide this copy&paste feature between different domains. As we need to temporarily store the copied element or styles somewhere. Bricks does that via localStorage. Which for obvious security reasons is not possible cross-domain wide. That’s not a Bricks limitation, but a browser security precaution.

1 Like

That seems to be happening even when that setting is not on in 1.4 RC.

Hi Sridhar,
Welcome to the forum!

I am not able to reproduce the issue :thinking:

With the setting deactivated: If you click on an element in the structure panel, the canvas scrolls to the corresponding position (this is intentional). If you click on an element in the canvas, the structure panel does not scroll.

With activated setting: If you click on an element in the structure panel, the canvas scrolls to the corresponding position (this is intended). If you click on an element in the canvas, the structure panel scrolls.

If it’s still an issue for you, please provide a screencast showing and explaining the problem in detail :slight_smile:

Best regards,
timmse

When clicking on an element in the structure panel, the element slides to the top of the screen. It would be great if he stayed in the center.