Select/Enter frontend URL under "pereferences"

[MAX-786]

Fixes #89

You can,

• Click on "Personal Tools" and go to "Preferences" to select your frontend URL from preset urls and hit save to load your frontend.
• OR you can check on "Enter Your Frontend's URL" to open input field and type in your frontend URL and hit save to load it, and if the URL is invalid it will popup the toast error message.
• Enter your new frontend url, hit save, then it will be saved in cookies and next time you can select it from options.

Current Design [Updated]:

• Now URL input is not taking up the screen and breadcrumbs are gone too.
• Still using the custom URL toggle. (Future fix maybe)

2024-07-05.10-25-01.online-video-cutter.com.mp4

[MAX-786]

@djay The other UI design i have for this is to move both fields into their own tab namely "Frontend" like in below screenshot or we can leave it as it is shown above.

Alternative design:

2024-07-02.22-41-26.mp4

[JeffersonBledsoe]

@MAX-786 I think I prefer the first design. I would change "Select Frontend URL" to "Frontend URL" and change the description to say something like "Changes the site to visit when in edit mode". I would also not have the toggle there and have the text input always visible with something like "Override URL" or "Custom URL" as the title and have the description mention that it overrides the selected URL if entered.

[MAX-786]

@JeffersonBledsoe sure, I will update the titles

I would also not have the toggle there and have the text input always visible with something like "Override URL" or "Custom URL" as the title and have the description mention that it overrides the selected URL if entered.

The purpose of toggle is that it shows you can either SELECT OR INPUT only (I also moved toggle at last so the ui won't move a lot) , we can also write this in description but having a toggle, IMHO i don't see any downside of it. It also saves us from having a scenario when user selected a url AND also typed in a url (valid/invalid) and then hit submit, then how we make a decision that which url should be picked.

[djay]

I think you are probably.right about the toggle making it more clear.
Space is not an problem at this point..
The only other way is a select widget that lets you pick or add which is more space efficient and only allows one url at a time.

[MAX-786]

The only other way is a select widget that lets you pick or add which is more space efficient and only allows one url at a time.

Yepp, and as for now we do not have such widget in volto. I'll look into if it's feasible and fits in our timeline to develop our own widget like this. Till then IG we can go with this approach.

[djay]

@MAX-786 there is that widget in volto. it's use all over the place like subject/tags

[MAX-786]

@djay Sorry but can you please share a link like in volto demo site, where this widget is used.. bcz i tried looking and couldn't find it 🥲

[djay]

Not sure if it can be made single select however

[MAX-786]

@djay @JeffersonBledsoe Checkout above updated comment for latest design

[djay]

@MAX-786 make a new comment with a new video otherwise it's confusing what comments refer to?

[MAX-786]

Current Design [Updated]:

• Now URL input is not taking up the screen and breadcrumbs are gone too.
• Still using the custom URL toggle. (Future fix maybe)

2024-07-05.10-25-01.mp4

[djay]

@MAX-786 not sure where the bit of gap at the top is coming from. But it's good enough.
Only thing thats missing is an an update to the readme to explain where to go to change or enter a new frontend

[MAX-786]

@djay I think having a separate section like "Managing multiple frontends" makes sense.
Updated the readme with instructions

[MAX-786]

@JeffersonBledsoe I am ready to merge this, if it looks good to you too?

[JeffersonBledsoe]

@MAX-786 You need to add the PersonalPreferences.original.jsx for the shadow and to document in the code what changed

[JeffersonBledsoe]

Looks fine to me now :)