Skip to content

Design the notebook menu in Figma #1196

Closed
Closed
@bfekadu21

Description

@bfekadu21

Existing

We have already created the Files menu in Figma (link). Now, lets create the notebook menu with the same functionality except notebooks do not need to be nested.

Requirements (What)

  • Create a section for the notebook menu in Drag and Drop design file
    Duplicate Files menu screens, change the blue chip to "Notebooks"
    Explore other MUI icons other than folder/file icon for a notebook
    Users should be able to delete, duplicate, rename notebook, add notebook
    Explore Jupyter notebook to see if there are any other features that could be added

Activity

added theissue type on May 21, 2025
sayalibhagat-Kanini

sayalibhagat-Kanini commented on May 22, 2025

@sayalibhagat-Kanini

@bfekadu21 I have designed the Notebook menu left panel. I have added a search bar and provided an option to create new notebook. Also I added a More button with actions, such as Rename, Duplicate and delete.

Image

bfekadu21

bfekadu21 commented on May 22, 2025

@bfekadu21
Author

@sayalibhagat-Kanini Provided feedback on Figma! If you have any notes from looking at Jupyter Notebook, feel free to add to the section in Figma.

sayalibhagat-Kanini

sayalibhagat-Kanini commented on May 26, 2025

@sayalibhagat-Kanini

I have completed the all design changes. Added a one more screen for Delete Functionality. Also Created the design for Jupyter Notebook.
Figma Link - https://www.figma.com/proto/Qj4tWPsniFOJ6qSLfxOaBT/Drag-And-Drop---Design?node-id=15923-164608&starting-point-node-id=15923%3A164608&show-proto-sidebar=1&t=rb7wehC9tuV1uiis-1

Image

Image

bfekadu21

bfekadu21 commented on May 29, 2025

@bfekadu21
Author

@sayalibhagat-Kanini Added a few comments in Figma that focus on refining the notebook cell

sayalibhagat-Kanini

sayalibhagat-Kanini commented on Jun 2, 2025

@sayalibhagat-Kanini

@bfekadu21 I have designed the screen for hovering over a cell. Once we hover over the cell this option will appear. I have updated the few icons to match the new designs. I also added few new features similar to Jupyter Notebook- Add Cell Above, Add Cell Below and Reset options to reset the particular cell. Previously the Generate AI option was under More but since it was the only one item there, I removed the More menu and added Generate AI directly to the list.
Also I added a some background color to the Cell, to show the selected Cell.

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

No labels
No labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @sayalibhagat-Kanini@ehynd@bfekadu21

      Issue actions

        Design the notebook menu in Figma · Issue #1196 · SEMOSS/semoss-ui