Update the drag and drop styling

[natdink]

Description

Large task

We need to start updating the drag and drop styling to match the new designs.

Using inspiration from flexlayout, we are going with a more "rounded" approach.

Need to:

Existing

Is there any relevant code or ui feature that the developer should know about when resolving this issue.

Requirements

What are more specific requirements that needs to take to consider this issue resolved.

• Update the main horizontal navigation menu on the drag and drop to match the Figma
• Update the left tabs to be a standalone menu with icons Figma
• Update all of the workspace panels to display the "tab" as a rounded chip and place inside the panel itself. See Figma. The page chips have the "deleteable" property. We would need to allow the user to open the page again from the Layers/Page panel.
• Style the "Add button" on the app page and notebook panel according to the design as well as the multi-page setup. Notice that if the pages exceeds the div space to show an icon button with number of hidden pages that will open a menu so user can open the hidden pages into the workspace (this was reference straight from flexlayout) Figma
• By default, when a user clicks on a component in the app workspace, the block settings menu should open. A user can collapse the Block Settings by clicking on the Block Settings chip

If you have questions, work with @sayalibhagat-Kanini (or @Pooja-1801 while she's out) or myself.

[JaganSomannaKanini]

I have started with Update the main horizontal navigation menu on the drag and drop, it is about 50% completed.

[JaganSomannaKanini]

I have updated the due date as the CSS changes go beyond inline tweaks — I’m updating global class styles that impact layout across multiple components.

[JaganSomannaKanini]

I have mostly completed the main horizontal navigation menu, small CSS is remaining. I will start working on the left tabs to be a standalone menu with icons.

[JaganSomannaKanini]

Started working on the Update the left tabs to be a standalone menu with icons, about 30% completed.

[JaganSomannaKanini]

I am working on the Update the left tabs to be a standalone menu with icons and Update all of the workspace panels to display the "tab" as a rounded chip and place inside the panel itself.

[JaganSomannaKanini]

Completed the main horizontal navigation menu on the drag and drop.

Continuing the work on Update the left tabs to be a standalone menu with icons and Update all of the workspace panels to display the "tab" as a rounded chip and place inside the panel itself.

[JaganSomannaKanini]

"Update all of the workspace panels to display the "tab" as a rounded chip and place inside the panel itself. The page chips have the "deleteable" property. We would need to allow the user to open the page again from the Layers/Page panel." Working on this and completed it 50%.

[JaganSomannaKanini]

I have completed the UI for Blocks, Notebook and Layers panel. Working up on the Variable and Files.

Horizontal nav bar:

[JaganSomannaKanini]

I have completed the UI for Blocks, Notebook, Layers and Files panel and also the Horizontal nav bar. The Variables panel is kept on hold because the Figma is not available. I will be starting with the "Style the "Add button" on the app page and notebook panel according to the design as well as the multi-page setup. Notice that if the pages exceeds the div space to show an icon button with number of hidden pages that will open a menu so user can open the hidden pages into the workspace (this was reference straight from flexlayout)"

[JaganSomannaKanini]

Continuing the implementation of the Add button on the app page and notebook panel according to the design as the multi-page setup.

[JaganSomannaKanini]

I have added the Add button on the app page and notebook panel according to the design as the multi-page setup. The design for the pages and notebook buttons is also completed, few small designs work like adding the pages list inside the page is remaining. Also working on the functionality for the expand and collapsing the workspace.

[JaganSomannaKanini]

I have completed the design for the page rendering by adding "Add button" also made changes in the block setting page.
Working on the expand and collapsing the workspace.

[JaganSomannaKanini]

I have completed the following:

• Update the main horizontal navigation menu on the drag and drop to match the Figma.

• Update the left tabs to be a standalone menu with icons.

• Update all of the workspace panels to display the "tab" as a rounded chip and place inside the panel itself. The page chips have the "deleteable" property. We would need to allow the user to open the page again from the Layers/Page panel.

• Style the "Add button" on the app page and notebook panel according to the design as well as the multi-page setup. Notice that if the pages exceed the div space to show an icon button with number of hidden pages that will open a menu so user can open the hidden pages into the workspace (this was reference straight from flexlayout).

• In the figma I see that the add button in the multi-page setup is placed before the dropdown which shows the hidden pages, heads up on that I able to place the button after the dropdown, it could be a limitation with component(based on FlexLayout).

• Since the FlexLayout uses common CSS class there are chances that the CSS changes made for one design might have affected some other design. Due to which I am moving the timeline to 11/06 (Wednesday). I will double check everything and clean the code and get it by 11th.