Touch-interface friendly

[Carreau]

Prompted by @rgbkrk question and the fact that the celltoolbar are hiding some text.

More and more user have touch capable screens, or even purely touch interfaces.

I'd like to propose an (alternative) toolbar location:

May also or as an option on the left.

That's easy reach from thumb on tablets, and easy reach as well with index on laptop+touch screen.

That's almost doable with pure css (with an tiny modif to the dom structure):

.notebook {
    padding-right: 110px;

}
.cell-toolbar {
    position: fixed;
    bottom: 40px;
    right: 20px;
    width: 80px;
    opacity: 1;
    background: none;
}

.cell-toolbar > div {
    background: white;
    width: 82px;
    border: solid grey thin;
    margin-top: 10px;
    border-radius: 10px;
}

.cell-toolbar button {
    display: inline-block;
    width: 82px;
    height: 80px;
    padding: 0px 4px;
}

.cell-toolbar button span{
    font-size: 20pt;
}

[rgbkrk]

What contextual clue is there for which cell is active for the play button? I guess our shadow handles that now.

[Carreau]

What contextual clue is there for which cell is active for the play button? I guess our shadow handles that now.

Yes, and there are other visual clue that show which cell is focused. I don't think this is such a good interface for kbd/mouse, but I believe it's much better for touch interface. You might also want to provide extra controls (like execute select next, and thumb-scrolling or other actions for tablet-like. But I think the main goal is to have relatively large target, and use hand-reachable buttons. Delete could even be swipe right or left. Pin could also be a drag target at the top of the screen that is displayed only on drag. Just thoughts.