infrastructure/web-assets
1
4
Fork 3
Code Issues 3 Pull Requests 1 Projects Releases 41 Wiki Activity

UI: Add nav pills component #94703

Merged
Márton Lente merged 4 commits from component-nav-pills into v2 2024-09-26 12:16:56 +02:00
Conversation 0 Commits 4 Files Changed 9 +152 -1
Márton Lente commented 2024-09-20 16:51:42 +02:00
Owner
Copy Link

This pull request adds the nav-pills component to Web Assets, that can be flexibly used as horizontal, vertical or sidebar navigation. The spacings are synchronized with the existing, similar dropdown component, but can be easily changed by utility classes if needed.

The navigation pills have a horizontal layout by default, that can be simply changed to vertical layout with the addition of the flex-column class – using the same convention as it works in Bootstrap. I'd personally suggest to not introduce extra new component classes like nav-drawer or similar, as this simple starting point can be easily used for multiple use cases with very little additional placement- or project specificity.

This PR is a proposal for the issue #94701, but with possibly less specificity than outlined.

Screenshots

Horizontal:

ui-nav-pills-component-horizontal.png

Vertical:

ui-nav-pills-component-vertical.png

This pull request adds the `nav-pills` component to Web Assets, that can be flexibly used as horizontal, vertical or sidebar navigation. The spacings are synchronized with the existing, similar `dropdown` component, but can be easily changed by utility classes if needed. The navigation pills have a horizontal layout by default, that can be simply changed to vertical layout with the addition of the `flex-column` class – using the same convention as it works in Bootstrap. I'd personally suggest to not introduce extra new component classes like `nav-drawer` or similar, as this simple starting point can be easily used for multiple use cases with very little additional placement- or project specificity. This PR is a proposal for the issue https://projects.blender.org/infrastructure/web-assets/issues/94701, but with possibly less specificity than outlined. ## Screenshots **Horizontal:** ![ui-nav-pills-component-horizontal.png](/attachments/18a07d16-75b6-4ab3-989e-ca315657ed8a) **Vertical:** ![ui-nav-pills-component-vertical.png](/attachments/d15a9e85-940c-4e53-874a-39308fe0bfa1)
ui-nav-pills-component-horizontal.png
43 KiB
ui-nav-pills-component-vertical.png
124 KiB
Márton Lente added 4 commits 2024-09-20 16:51:43 +02:00 
Add flexible nav-pills component base, that can be used in both a horizontal
and a vertical layout, the latter qualifying as a sidebar navigation drawer.
Part of #94701
Add an extensive list of nav pills items placeholders to help unifying icons
usage and items ordering accross projects.
Part of #94701
Add icon "asterisk" to fontutti.
Part of #94701
Part of #94701
Márton Lente requested review from Pablo Vazquez 2024-09-20 16:52:42 +02:00
Pablo Vazquez approved these changes 2024-09-24 12:43:44 +02:00
Pablo Vazquez left a comment
Owner
Copy Link

Nice! Clean and effective 👌

Thanks!

Nice! Clean and effective 👌 Thanks!
❤️ 1
Márton Lente merged commit 08054cfd5f into v2 2024-09-26 12:16:56 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Pablo Vazquez
Labels
Clear labels   
legacy project
Infrastructure: Blender Web Assets

  
legacy project
Infrastructure: Websites

  
Priority
High

  
Priority
Low

  
Priority
Normal

  
Status
Archived

  
Status
Resolved

  
Type
Design

  
Type
Report

  
Type
To Do

No Label
legacy project
Infrastructure: Blender Web Assets
legacy project
Infrastructure: Websites
Priority
High
Priority
Low
Priority
Normal
Status
Archived
Status
Resolved
Type
Design
Type
Report
Type
To Do
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: infrastructure/web-assets#94703
No description provided.
Delete Branch "component-nav-pills"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?