Skip to content

Conversation

@aglinxinyuan
Copy link
Contributor

@aglinxinyuan aglinxinyuan commented Dec 2, 2023

This is the first PR of the resizeable Workspace: Refactor Navigation Component.
In this PR:

  1. Rename Navigation to Menu.
  2. We relax the grid layout system to a normal flow layout
  3. Clean up the CSS and HTML.
  4. Make the buttons regular size.
  5. Make the layout more compact.
  6. Move the workflow timer to the right of the run button.
  7. Move the Undo and Redo buttons to the Utilities button group.
  8. Make the Utilities button group collapsible when the screen size is small.
  9. Set the min-width of the workspace to 630px;

video2952153579

Expanded Utilities buttons(Window is large enough):
Screenshot 2023-12-02 at 3 01 05 AM

Collapsed Utilities buttons(Window is small enough):
Screenshot 2023-12-02 at 2 56 46 AM

Hovered Utilities buttons:
Screenshot 2023-12-02 at 2 55 01 AM

@aglinxinyuan aglinxinyuan added the refactor Refactor the code label Dec 2, 2023
@aglinxinyuan aglinxinyuan self-assigned this Dec 2, 2023
@aglinxinyuan aglinxinyuan changed the title Resizeable Workspace 1: Refactor Navigation Component Resizeable Workspace[1/5]: Refactor Navigation Component Dec 2, 2023
@aglinxinyuan aglinxinyuan changed the title Resizeable Workspace[1/5]: Refactor Navigation Component [1/5]Resizeable Workspace: Refactor Navigation Component Dec 2, 2023
@aglinxinyuan aglinxinyuan added this to the Resizeable Workspace milestone Dec 2, 2023
@aglinxinyuan aglinxinyuan changed the title [1/5]Resizeable Workspace: Refactor Navigation Component Resizeable Workspace: Refactor Navigation Component Dec 2, 2023
@aglinxinyuan aglinxinyuan changed the title Resizeable Workspace: Refactor Navigation Component Refactor Navigation Component Dec 2, 2023
@aglinxinyuan aglinxinyuan changed the title Refactor Navigation Component Refactor Navigation(Menu) Dec 3, 2023
@aglinxinyuan aglinxinyuan changed the title Refactor Navigation(Menu) Refactor Navigation(Menu) Component Dec 3, 2023
Copy link
Contributor

@Yicong-Huang Yicong-Huang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Please make sure to rename not only the code, but also the comments, files, packages, etc.

@aglinxinyuan aglinxinyuan merged commit 80be0d8 into master Dec 4, 2023
@aglinxinyuan aglinxinyuan deleted the xinyuan-refactor-nav branch December 4, 2023 09:03
kunwp1 pushed a commit that referenced this pull request Dec 5, 2023
This is the first PR of the resizeable Workspace: Refactor Navigation
Component.
In this PR:
1. Rename Navigation to Menu.
2. We relax the grid layout system to a normal flow layout
3. Clean up the CSS and HTML.
4. Make the buttons regular size.
5. Make the layout more compact.
6. Move the workflow timer to the right of the run button.
7. Move the Undo and Redo buttons to the Utilities button group.
8. Make the Utilities button group collapsible when the screen size is
small.
9. Set the min-width of the workspace to 630px;


![video2952153579](https://github.com/Texera/texera/assets/11544314/657405a1-a8ce-4667-a190-117614cb2e53)

**Expanded Utilities buttons(Window is large enough):**
<img width="1077" alt="Screenshot 2023-12-02 at 3 01 05 AM"
src="https://github.com/Texera/texera/assets/11544314/85dd7993-4954-4b4c-bff7-4da51c5cb084">

**Collapsed Utilities buttons(Window is small enough):**
<img width="765" alt="Screenshot 2023-12-02 at 2 56 46 AM"
src="https://github.com/Texera/texera/assets/11544314/ad4ba3dd-870b-477d-a030-ccdb6ecee8f6">

**Hovered Utilities buttons:**
<img width="766" alt="Screenshot 2023-12-02 at 2 55 01 AM"
src="https://github.com/Texera/texera/assets/11544314/d29c00aa-0c73-46b6-8c3a-7dc273e14776">
@aglinxinyuan aglinxinyuan linked an issue Dec 5, 2023 that may be closed by this pull request
Xiao-zhen-Liu pushed a commit that referenced this pull request Jan 16, 2024
This is the first PR of the resizeable Workspace: Refactor Navigation
Component.
In this PR:
1. Rename Navigation to Menu.
2. We relax the grid layout system to a normal flow layout
3. Clean up the CSS and HTML.
4. Make the buttons regular size.
5. Make the layout more compact.
6. Move the workflow timer to the right of the run button.
7. Move the Undo and Redo buttons to the Utilities button group.
8. Make the Utilities button group collapsible when the screen size is
small.
9. Set the min-width of the workspace to 630px;


![video2952153579](https://github.com/Texera/texera/assets/11544314/657405a1-a8ce-4667-a190-117614cb2e53)

**Expanded Utilities buttons(Window is large enough):**
<img width="1077" alt="Screenshot 2023-12-02 at 3 01 05 AM"
src="https://github.com/Texera/texera/assets/11544314/85dd7993-4954-4b4c-bff7-4da51c5cb084">

**Collapsed Utilities buttons(Window is small enough):**
<img width="765" alt="Screenshot 2023-12-02 at 2 56 46 AM"
src="https://github.com/Texera/texera/assets/11544314/ad4ba3dd-870b-477d-a030-ccdb6ecee8f6">

**Hovered Utilities buttons:**
<img width="766" alt="Screenshot 2023-12-02 at 2 55 01 AM"
src="https://github.com/Texera/texera/assets/11544314/d29c00aa-0c73-46b6-8c3a-7dc273e14776">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor Refactor the code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Refactor Navigation Component

2 participants