Skip to content

Pod UI improvements #55

@forrestbao

Description

@forrestbao

This is how the pod UI looks like now.
image

Suggested changes

  1. Move the top/tool bar of the pod to the top-right corner -- slightly extruding to the top, like Google CoLab's design (screenshot below). When a cell is not focused or hovered over, it should be hidden. When a cell is, display it. Just as in Google CoLab.

    image

  2. In the tool bar, for every icon, when hovered over, display the tooltop on top of it rather than to the right of it, which may block users from seeing or selecting the next icon.

  3. The red dot is ugly. Change it to a trash can icon.

  4. Align the output behavior the same as Jupyter. Do not distinguish stdout and Result: [0]:.

  5. Border for a pod:
    a. [ ] Round corner
    b. [ ] black line to gray line.
    c. [ ] Show shadow around the pod being edited. Currently we only shadow a pod being moved on the canvas.

  6. Number the pod's order in execution. Just like in Jupyter, e.g., In [21]: and Out [21]:.

  7. If a pod was executed without error last time, show a green checker, as in DeepNote.

Please take a look at the designs of Google Colab (this notebook by me) and Deepnote (this notebook by me).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions