Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert the NetBox UI to use Tabler #12128

Closed
jeremystretch opened this issue Mar 31, 2023 · 6 comments
Closed

Convert the NetBox UI to use Tabler #12128

jeremystretch opened this issue Mar 31, 2023 · 6 comments
Assignees
@jeremystretch
Labels
status: accepted This issue has been accepted for implementation topic: UI/UX User interface or user experience related work type: feature Introduction of new functionality to the application
Milestone
v4.0

Comments

@jeremystretch
Copy link
Member

NetBox version

v3.4.7

Feature type

New functionality

Proposed functionality

Rewrite the NetBox UI to use the Tabler UI kit. Like the current UI, Tabler is built using the Bootstrap CSS framework, but offers many additional features and components natively.

This will be a huge task, and further exploration is needed to better estimate the amount of work required. This FR will be updated with additional details concerning the proposed implementation as research progresses.

Use case

Tabler will allow us to achieve more consistent UI styling application-wide, while obviating the need for much of our custom code. Some of its benefits are listed below:

  • Application-focused design
  • Native dark mode
  • Robust layouts & navigation components
  • Broader selection of UI components

Database changes

None

External dependencies

This will introduce the Tabler library as a new dependency.
@jeremystretch jeremystretch added type: feature Introduction of new functionality to the application status: under review Further discussion is needed to determine this issue's scope and/or implementation labels Mar 31, 2023
@arthanson arthanson self-assigned this Mar 31, 2023
@jeremystretch jeremystretch added status: accepted This issue has been accepted for implementation and removed status: under review Further discussion is needed to determine this issue's scope and/or implementation labels Apr 4, 2023
@jeremystretch jeremystretch added this to the v4.0 milestone Apr 4, 2023
@bluikko
Copy link
Contributor

bluikko commented Apr 5, 2023

I hope that this would not:

  • increase amount of padding/whitespace horizontally or vertically;
  • limit the amount of data that fits tables horizontally.

Already there are some suboptimal behaviors in this sense, as witnessed by some issues that were opened around 3.0 (but never addressed).

This was referenced Apr 10, 2023
Closed
Closed
Closed
@jeremystretch jeremystretch mentioned this issue May 2, 2023
Closed
@jeremystretch jeremystretch mentioned this issue May 30, 2023
Closed
@jeremystretch jeremystretch mentioned this issue Sep 18, 2023
Closed
This was referenced Oct 3, 2023
Closed
Closed
Closed
@jeremystretch jeremystretch mentioned this issue Nov 29, 2023
Closed
@jeremystretch jeremystretch mentioned this issue Dec 14, 2023
Closed
This was referenced Dec 27, 2023
Closed
Open
@jeremystretch jeremystretch self-assigned this Dec 29, 2023
@jeremystretch jeremystretch added the topic: UI/UX User interface or user experience related work label Jan 3, 2024
This was referenced Jan 10, 2024
Closed
Closed
Closed
This was referenced Jan 17, 2024
Merged
Merged
@jeremystretch
Copy link
Member Author

Some quick looks at the refreshed UI with Tabler in place. We'll continue to track incremental improvements & bug fixes separately, but the bulk of the UI migration work has been completed.

netbox_tabler1
netbox_tabler2
netbox_tabler3

jeremystretch added a commit that referenced this issue Jan 17, 2024
@jeremystretch
Closes #12128: Refresh the web UI to employ the Tabler CSS framework (#…
073c2dc 
…14833)

* Remove dark mode styling

* Condense & rename light mode stylesheet

* Upgrade to Bootstrap 5.3.2

* Swap out Bootstrap for Tabler; remove custom styling

* Update base page layout for Tabler

* Update login page

* Bump node to v18

* Update button styles

* Update object list view

* Tweak navbar size

* Clean up dashboard widgets

* Ditch separate stylesheet for print media

* Remove simplebar

* Remove obsolete sidebar styling

* Clean up object view template

* Clean up object edit template

* Standardize primary button sizing

* Clean up object list styling

* Add buttons for add & import to navigation menu

* Fix global search bar

* Fix slim-select form widget styling

* Fix toast styling

* Set base fonts

* Clean up paginator styling

* Clean up navigation menu group headings

* Clean up footer links

* Clean up card styles

* Move SVG styles to a designated directory

* Restructure SCSS files

* Remove obsolete/redundant dependencies

* Fix icon spacing

* Update background color classes

* Tweak banner & footer styling and spacing

* Fix badge background colors in table content

* Bump @types/bootstrap to 5.2.10

* Clean up form layouts

* Fix object selector button style

* Fix icon padding inside small buttons

* Fix icon & badge spacing inside buttons and tabs

* Hide paginator for empty pages

* Fix hover color for list items (Tabler bug #1694)

* Fix width of checkbox column in empty tables

* Clean up bulk edit template

* Fix border color of reslug button

* Package & serve Google fonts locally

* Fix tab styling

* Reduce vetical space at top of dashboard

* Remove obsolete content-wrapper template block

* Fix icon spacing in dropdown menu items

* Fix color label sizing

* Separate bulk delete form & object list into tabs

* Fix styling of filter group headings

* Fix styling for object changelog & journal views

* Standardize ordering & styling of action buttons

* Fix designation of active menu item

* Automatically expand menu section containing the active link

* Clean up nav menu styling

* Remove button colors; hide buttons except on hover/active

* Highlight menu group containing the active item

* Update & standardize alert styling

* Refactor base templates to ensure consistent display of header content

* Tweak styling for links inside badges

* Clean up top menu

* Fix JSON/YAML toggles for config context data

* Fix object template header

* Constrain tabs to container-xl; tweak header margins

* Fix object identifier styling

* Fix positioning of card header buttons

* Remove padding from HTMX tables inside cards

* Ensure consistent use of row headings in attribute tables

* Remove padding surrounding tables inside cards

* Remove obsolete CSS classes

* Misc cleanup of old styling

* Refactor 'controls' template block; ditch old classes

* Fix login button sizing

* Limit object edit form width

* Append asterisk to required form field labels

* Remove obsolete styling

* Remove obsolete styling

* Fix position of progress bar outside label

* Fix alignment of delete button in report/script lists

* Fix <pre> styling

* Clean up page headers

* Replace SVG icons with Material Design icons

* Restore dark mode togle functionality

* Fix top navbar background color under dark mode

* Rebuild static assets
jeremystretch added a commit that referenced this issue Jan 17, 2024
@jeremystretch
Update template for #12128
d89e922
jeremystretch added a commit that referenced this issue Jan 17, 2024
@jeremystretch
Update templates for #12128
56002b1
jeremystretch added a commit that referenced this issue Jan 19, 2024
@arthanson @jeremystretch
14728 Move installed plugins list from admin UI to NetBox UI (#14768)
ef5e10d 
* 14728 move plugins view from admin

* 14728 move plugins view from admin

* 14728 remove plugins view from admin

* Update template for #12128

* 14728 review fixes

* 14728 review fixes

* 14728 review fixes

* 14728 review fixes

* 14728 configure table

* Clean up table columns

* Fix app config lookup for plugins referenced by dotted path

* Move template; fix table display

* Fix user table configuration

* Remove nonfunctional quick search

* Limit PluginListView to staff users

---------

Co-authored-by: Jeremy Stretch <[email protected]>
@jeremystretch jeremystretch mentioned this issue Jan 19, 2024
Closed
32 tasks
@jeffgdotorg jeffgdotorg mentioned this issue Jan 24, 2024
Closed
@tbotnz
Copy link

tbotnz commented Jan 25, 2024 •
edited
Loading

Ui looking awesome @jeremystretch. Dont suppose youd consider having forms as htmx partials, (food for tought) this would allow forms to be nested in modals etc

@jeremystretch
Copy link
Member Author

We already do this in some places. There's a separate FR (#14736) open to explore implementing HTMX in other areas of the UI more generally.

jeremystretch added a commit that referenced this issue Feb 1, 2024
@arthanson @jeremystretch
14729 Move background tasks list from admin UI to Primary UI (#14825)
93b77cb 
* 14729 rq table

* 14729 rq table

* 14729 rq table

* 14729 rq table

* 14729 jobs table

* 14729 jobs detail

* 14729 formatting fixup

* 14729 formatting fixup

* 14729 format datetime in tables

* 14729 display job id

* Update templates for #12128

* 14729 review fixes

* 14729 review fixes

* 14729 review fixes

* 14729 review fixes

* 14729 merge feature

* 14729 add modal

* 14729 review changes

* 14729 url fixup

* 14729 no queue param on task

* 14729 queue pages

* 14729 job status handling

* 14729 worker list

* 14729 exec detail and common view

* 14729 worker detail

* 14729 background task delete

* 14729 background task delete

* 14729 background task requeue

* 14729 background task enqueue stop

* 14729 review changes

* 14729 remove rq from admin

* 14729 add tests

* 14729 add tests

* Clean up HTML templates

* Clean up tables

* Clean up views

* Fix tests

* Clean up tests

* Move navigation menu entry for background tasks

* Remove custom deletion form

---------

Co-authored-by: Jeremy Stretch <[email protected]>
@jeremystretch jeremystretch mentioned this issue Feb 23, 2024
Closed
@skutter-de
Copy link

I think the sub-headings in the sidebar should be highlighted more, I can barely make them out in the screenshots above.,

@jeremystretch
Copy link
Member Author

jeremystretch commented Apr 8, 2024 •
edited
Loading

@Gaming4LifeDE this issue has been closed. Please submit a new issue with any feedback on the new UI.

@netbox-community netbox-community locked and limited conversation to collaborators Apr 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@jeremystretch jeremystretch

Labels
status: accepted This issue has been accepted for implementation topic: UI/UX User interface or user experience related work type: feature Introduction of new functionality to the application
Projects
None yet
Milestone
v4.0
Development

No branches or pull requests
5 participants
@arthanson @jeremystretch @bluikko @tbotnz @skutter-de