Comments (7)
Another question that remains open is where containment breadcrumbs might go and how to get to Page settings.
The mockups show you can no longer get to the page settings from the side bar but it's not clear how you get to the page settings actually.
The settings in toolbar either
- toggles the settings on/off
- always goes to the page settings
if it's a toggle then that means you need a way to select the document itself to get to the document settings since there doesn't seem to be another way provided?
However this shows that you can still get to the page settings without unselecting the current block. It's also won't be obvious this is how you get to page setting. So there has to be another way to get to the page settings?
if the toolbar settings button always goes to the page settings, then you will need another way to show the settings for a block if you decide to close it. Maybe the settings button in the block context menu is meant to be the way to do that? or open page settings and then click around changing the selection?
Either way I think the design could add an additional way which is to turn the block type name in the settings into a dropdown of containers going all the way to the page level. Doesn't change the design much and does provide another way to select parents.
The gutenburg container breadcrumbs at the bottom of the page still has an advantage that it can tell you the containers you are looking at without clicking anything so it would be a nice addition later on
from volto.
@djay My interpretation of quanta toolbar is like this:
- At any single moment, exactly only one block toolbar shows up on screen
- This block toolbar is for the currently selected block or sub-block (if it's contained in another block)
- The block toolbar provides navigation to the container parent. It could also provide a limited set of controls for the parent block.
from volto.
@tiberiuichim great. so what I proposed is what you consider to be the quanta toolbar (except maybe the toolbar containing some controls on the parent block). And that's what you think we need in volto and it will replace the current container block UI and @davisagli top level only add button?
from volto.
I told you the other day in the Grid PR, we all want the same, we want to reach to the same point, but since we are all in different positions, we just can't realise of it.
I'd say that we meet and talk about the subject, so all of us are in the same page afterwards and draw a plan to reach there.
Should we? I'm available in Discord during the rest of the afternoon/early evening.
from volto.
@sneridagh my summary of the meeting is
- Elementor takes a different approach by using dnd to create new blocks and right click context menu for everything else. That means no on screen toolbar is needed. This is actually similar to mosaic except that elementor still has explicit container blocks. It does seem to have a small toolbar for the parent container, can't remember why.
- pretty much in agreement that quanta toolbar was intended to work in the way outlined where it always follows the selection and gutenburg way is most similar.
- discussed that text blocks shouldn't have the same boxed selection line that container or other blocks might need
- The problem is that the current architecture of selections makes it hard to achieve a quanta toolbar appearing next to the current block. All parent containers think they are selected and the individual block is responsible for rendering itself as selected rather than being a generic framework thing. What would be needed instead is for the framework to be adjusted so containers are responsible for rendering the toolbar and selection and they know if the block is directly selected or one if it's decedents is. Need to investigate if this can be achieved without breaking the block apis.
- but It would be possible to at least hide the container toolbar if whats selected is another container so at least they don't overlap.
- the idea of getting some kind of quanta toolbar lite into 17 was not considered and the whole thing is seen a big problem that needs to be solved at some future undermined point.
In terms of UI, I looked for the quanta toolbar mockups. They don't deal with containment so leave some questions open.
- the image there shows a add in the quanta toolbar #4206.
- but the figma mockups don't have this. they only have a global add at the bottom of the page and context menu insert before and after. They don't include what happens in a container or how to navigate container hierarchies.
- There is a blue selection which is a line for text blocks and a box for other blocks
I personally think that either an add button in the quanta toolbar or add at the edge of the current block is fine (probably the later) but not sure about the idea of "add" being always visible at the bottom of the page.
If you keep to the ideas of quanta you might get something like this?
![selectedcol_up_quanta2](https://user-images.githubusercontent.com/41700/249997050-bf4fa5e3-55b2-483c-b1b1-2b3b481c9c95.png)
however
- delete and add being too close together is not great. you might hit delete by mistake
- still don't like the delete icon being the same as the cancel icon. You might think it will just undo your changes not remove the whole block. It should be a trash can IMO. Also when put next to the add you can see they look similar.
- you also might run into issues with adding a column at the right of the page. similar to the problems with the current delete and drag buttons which can't be used on mobile
- I've taken out the parent container dotted lines as we agreed it doesn't add much but can experiment.
be interested to know @albertcasado thoughts.
CORRECTION: Looking at figma further the X is not meant to be delete. It's just used for images/videos to remove that image so you can replace it with another.
The quanta design doesn't provide a delete button. You would have to use the quanta toolbar context menu or the delete key. Which might be reasonable? I suspect the original design had the same idea for "add" to. No button, just context menu and "enter" key.
from volto.
@djay In Volto the sidebar tab automatically switches to content settings when you select a title or text block (it's configurable in each block config, the sidebar index). So the text block can show the page settings and any other block can show its own settings.
from volto.
@tiberiuichim text block has settings in the verison I use. But this was more a question about how its supposed to work in the quanta design which doesn't have tabs in the sidebar.
if the solution to how to access the page settings is knowing to click on a text block, I'm not sure thats a great solution :( you'd need another more obvious way.
from volto.
Related Issues (20)
- sitemap-index should try to do a minimal search
- settings.publicURL is required setting for any large public website HOT 2
- plones default robots.txt prevents google indexing if ?expand used HOT 1
- Can't customize an index.js
- Remove any mention of LTS
- RecurrenceWidget produces values that can't be successfully parsed back HOT 4
- Items from horizontal table of contents getting out of the viewport
- Preview Image does not use HTTPS HOT 6
- Add cs translations HOT 2
- Mouse-pasting text with embedded HTML anchor yields unrenderable page and disrupted browsing session HOT 2
- Volto 17.0.alpha14, cookiecutter-plone-starter: Error: Unable to find 'razzle-plugin-scss' or scss/razzle-plugin' HOT 4
- Relations-controlpanel wrongly complains about outdated plone.restapi HOT 2
- Wrong constant in volto-slate for tfoot HOT 3
- naked file and image urls no longer download the file (causing SEO problems)
- Add option to hide title block HOT 2
- Listing block network fetches strategy problems HOT 1
- Listing block stores block id in its data HOT 2
- Infinite loop of requests using Google translate HOT 2
- broken links and themes HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from volto.