Giter Site home page Giter Site logo

Comments (7)

djay avatar djay commented on July 3, 2024 1

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?

image

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?

image

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.

tiberiuichim avatar tiberiuichim commented on July 3, 2024

@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.

djay avatar djay commented on July 3, 2024

@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.

sneridagh avatar sneridagh commented on July 3, 2024

@djay @tiberiuichim

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.

djay avatar djay commented on July 3, 2024

@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.
    • image
  • 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.
    • Screen Shot 2023-06-30 at 10 56 33 am
    • Screen Shot 2023-06-30 at 10 57 16 am
  • 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

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.

image

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.

tiberiuichim avatar tiberiuichim commented on July 3, 2024

@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.

djay avatar djay commented on July 3, 2024

@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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.