v4.0 UI cleanup

[jeremystretch]

Proposed Changes

This issue serves to track miscellaneous cleanup work following the UI refresh in #12128 for NetBox v4.0. It will be kept open for a while as we continue to uncover and address minor UI issues. (Note that this issue is not a suitable place for proposing any new functionality or otherwise substantial UI changes.)

Please add any new items in a comment below (including a screenshot where helpful), and it will be added here.

• [x] Restyle login form
• [x] Fix styling of nav pills
• [x] Markdown form fields should use monospaced font
• [x] Fix header wrapping w/large number of buttons (e.g. aggregate prefixes view)
• [x] Fix styling of paginator for CustomFieldChoicesSet choices
• [x] Fix preview tab styling for comments fields
• [x] Fix empty text for related changes under ObjectChange view
• [x] Add padding between dark mode toggle and login button in top menu
• [x] Audit for unused templates
• [x] Reduce vertical space between a checkbox field and its help text
• [x] Remove ghost shadow from hidden "clear" button on quick search
• [x] Active nav pill has no background color in dark mode
• [x] Fix placement of hide/show dropdown button under device interfaces view
• [ ] ~Allow object list tables to expand horizontally beyond the default page width where beneficial~ See #15339
• [x] Fix spacing of "highlight in rack" button under device view
• [x] Fix styling of custom field group names under object view
• [x] Make add/import buttons on nav menu items a bit wider for easier clicking
• [x] Relocate "add" buttons for embedded object tables
• [x] Fix margin around the "map it" button for site addresses
• [x] Remove netbox-data block from the base template & and the obsolete getNetboxData() function
• [x] Remove bottom margin from last <p> element in rendered Markdown inside a table cell
• [x] Apply a corner radius to small (.btn-sm) buttons
• [ ] ~Eliminate "flash" on load when dark mode has been set via toggle button (vs. user preference)~ See #15340
• [x] Fix field selection widgets in table configuration dialog
• [x] Tweak color of nav menu group headings to better differentiate from menu items
• [x] Fix border color of circuit commit rate dropdown button
• [x] Change span.color-label display to inline-block
• [x] The border of the "copy-to-clipboard" button is too dark
• [x] The labels/images dropdown at top right of rack view renders oddly
• [x] Row headings for attribute tables have too little contrast in dark mode
• [x] Fix toast text color in dark mode
• [x] Fix object selector functionality

Justification

We're tracking this work under a shared issue as they're mostly small, iterative changes that alone aren't very significant (e.g. tweaking HTML templates or applying a missing CSS class).

[ITJamie]

When deleting a bookmark the dialog is written as if its about to delete the actual object not a bookmark to the object https://github.com/netbox-community/netbox/issues/13842

[jeremystretch]

@ITJamie the scope of this issue is limited to UI changes resulting from work done under #12128. Anything else needs to be tracked under a separate issue.

[jeremystretch]

It appears that dcim/inventoryitem_bulk_delete.html is no longer in use; there may be other obsolete templates as well. We should do a quick audit.

[jeremystretch]

Reduce vertical space between a checkbox field and its help text.

[jeremystretch]

Remove ghost shadow from hidden "clear" button on quick search (barely visible to right of search field)

[jeremystretch]

Hide/show dropdown button on new line under device interfaces view

[cybarox]

Tables in tableviews using not the full width

Sites: Prefixes: Circuits:

The margin of the little red cross for unset the sorting setting is also overlapped by the column title.

[cybarox]

On Device View: The button "highlight device" has no margin to the right. Custom Field Topics are not styled.

[jeremystretch]

Tables in tableviews using not the full width

We're currently using a maximum width for all page content (this was done to bolster readability for object detail views) but I suppose we could use a full-width view for object lists. We should however give some thought to limiting the width of tables with few columns: Viewing e.g. the platforms list on a very wide viewport is a bit taxing for the user.

[cybarox]

Tables in tableviews using not the full width

We're currently using a maximum width for all page content (this was done to bolster readability for object detail views) but I suppose we could use a full-width view for object lists. We should however give some thought to limiting the width of tables with few columns: Viewing e.g. the platforms list on a very wide viewport is a bit taxing for the user.

Avoiding superfluous space in tables is certainly good, my concern would be that if different tables have different widths as a result (e.g. if the user adds custom-field columns) , the overall impression of the UI could quickly become restless or appear inconsistent.

Perhaps the max-width variant can be used for tables whose columns are narrow enough to display them in this way. All content that requires a larger width could then be displayed as a full-width table.

Another possibility would be to let the user decide for himself and add a toggle option to the configure table menu.

[jeremystretch]

On many pages, we include an "add" button beneath embedded object tables. For instance:

We can save a considerable amount of space by relocating this button to the card header, opposite its title, and reducing its size.

[jeremystretch]

Fix margin around the "map it" button for site addresses.

[jeremystretch]

Rendered Markdown content inside a table cell (e.g. in script output) has extra white space, due to the bottom margin applied to <p> elements. It's probably safe to negate this margin for the last <p> element inside a table cell.

[arthanson]

minor esthetic - the copy and action dropdown buttons on the right-side are not rounded and look out of place, the old ones were rounded and blended in better:

[peteeckel]

Another aesthetic issue: When switching views in dark mode, the new stuff on the right side is often initially loaded in bright mode and then immediately switches to dark mode. This results in an unpleasant "flashing" while navigating.

Tested with Safari, Chromium and Firefox. With Chromium and Firefox the effect is more pronounced, but with Safari it's visible as well.

https://github.com/netbox-community/netbox/assets/6815386/4767a155-1090-457c-b77c-acaf0075a57b

Update: This only happens when the current light/dark mode setting is different from the one in the user's preferences, i.e. if the mode has been set via the "light bulb" button in the upper right corner. If the current setting is the same as the one in the preferences it's OK.

If the preferences are set to "dark mode" and the current mode is set to "light", the effect is reversed, i.e. dark flashing.

[peteeckel]

Another aesthetic issue ... is there any reason why dark modes sports a somewhat bluish and pale color schema? The NetBox windows stand out from all my windows in dark mode, most of which are more or less black.

[peteeckel]

Some peculiarity after the switch to tom-select (at least I noticed it after pulling yesterday's commits, current SHA d63e1da):

In long pull-down menus (forms.multipleChoiceField in this case) only the first 50 entries are displayed, without an indication that the list is truncated. Entering some characters will, however, make it possible to select the later ones as well.

It would be good if there were an indicator of the truncation (ideally with an option to load and display the remainder of the items), or if that behaviour could be made optional.

[peteeckel]

The "Table Configuration" form is broken:

Neither the list of available columns nor the list of selected columns is visible (wrong widget, probably). As a consequence, re-ordering columns is not possible.

[peteeckel]

Another observation regarding the color scheme: In the old UI, the section headers had a darker colour than the actual menu items. This differentiation has gone in the new UI, which makes it difficult to differentiate between headers and menu items.

Adding to the fact is that the buttons are only displayed on mouseover, taking away a second optical differentiation.

This is also responsible for my somewhat erratic menu navigation in the screen recording above :-)

[jeremystretch]

In long pull-down menus [...] only the first 50 entries are displayed, without an indication that the list is truncated. Entering some characters will, however, make it possible to select the later ones as well.

50 was the default limit but it was raised to 100; dropdowns should always be populating with up to 100 options currently.

I was initially going to port over the pagination functionality from the original APISelect widget, but it didn't seem to be worthwhile IMO. You figure people are generally going to stop scrolling and start typing by the time they've skimmed through a hundred options. I'm open to arguments to retain the functionality though.

[jeremystretch]

is there any reason why dark modes sports a somewhat bluish and pale color schema?

This is just the default dark mode color scheme provided by Tabler. I honestly didn't even notice the blue tint until you pointed it out (I struggle with differentiating between blue and black). Happy to entertain changes to the color scheme, but this probably something best tackled in a separate issue as 1) color is highly subjective and 2) we'll need to consider the entire palette for consistency.

[peteeckel]

50 was the default limit but it was raised to 100; dropdowns should always be populating with up to 100 options currently.

That gets me confused as well, I found

const MAX_OPTIONS = 100;

in netbox/project-static/src/select/dynamic.ts. But I can still only see the first 50 elements.

>>> from netbox_dns.models import RecordTypeChoices
>>> RecordTypeChoices.values()[0:50]
['A', 'A6', 'AAAA', 'AFSDB', 'AMTRELAY', 'APL', 'AVC', 'CAA', 'CDNSKEY', 'CDS', 'CERT', 'CNAME', 'CSYNC', 'DHCID', 'DLV', 'DNAME', 'DNSKEY', 'DS', 'EUI48', 'EUI64', 'GPOS', 'HINFO', 'HIP', 'HTTPS', 'IPSECKEY', 'ISDN', 'KEY', 'KX', 'L32', 'L64', 'LOC', 'LP', 'MB', 'MD', 'MF', 'MG', 'MINFO', 'MR', 'MX', 'NAPTR', 'NID', 'NINFO', 'NS', 'NSAP', 'NSAP_PTR', 'NSEC', 'NSEC3', 'NSEC3PARAM', 'NULL', 'NXT']

[jeremystretch]

On the circuit edit form, the border of the dropdown button next to the commit rate field is too dark.

[peteeckel]

You figure people are generally going to stop scrolling and start typing by the time they've skimmed through a hundred options. I'm open to arguments to retain the functionality though.

But in any case it would help to indicate somehow that the list isn't complete, or I'm sure people will find the record types end with 'NXT' and complain that e.g. 'SPF' is missing ...

[jeremystretch]

@peteeckel sorry, it just clicked with me earlier that you're looking at a static dropdown rather than one being populated via the API; I only increased MAX_ITEMS for the later. We should probably remove the limit for static dropdowns.

Edit: This has been fixed in the feature branch as part of #14917.

[jeremystretch]

When viewing the dashboard, the full page width is consumed, however the search bar (top left) and user menu (top right) are constrained to the container width.

[peteeckel]

Another issue with the color scheme, and again with dark mode:

I didn't notice it that much when using dark mode at night, but by day the contrast between the row headers and the background in detail view is much too low - almost unreadably. Light mode is fine.

[jeremystretch]

The border of the "copy-to-clipboard" button is too dark

[kkthxbye-code]

The below commit incorrectly assumes that it is always okay to clear child select fields when the parent changes. This is not the case for the cable form where multiple interfaces from different devices can be selected in the same a/b-side interface select field.

https://github.com/netbox-community/netbox/pull/15080/commits/674f794c69196fd86ae9f32e36a1100b38021672

The form element:

Here the interface field would be cleared if the device was changed.

[kkthxbye-code]

The object selector doesn't work and looks wrong:

[kkthxbye-code]

Toast notifications look wrong in dark mode, text blends in:

[peteeckel]

The below commit incorrectly assumes that it is always okay to clear child select fields when the parent changes.

Agreed - but it's a functionality sorely missed in NetBox < 4, so probably the best would be to have it selectable as an option.

[peteeckel]

Another tom-select glitch: When you enter search text in a DynamicModelMultipleChoiceField to narrow down the selection and then click on one of the resulting items, the search text is still present in the box:

The same does not happen with DynamicModelField.

Update: This might be intended, it's just irritating - the first few times I tried to backspace until the text goes away, often inadvertently removing the last object, then I found that the text disappears on saving.

[jeremystretch]

@peteeckel sorry I think I deleted your latest comment by mistake.

[jeremystretch]

Just a reminder: This thread is for cosmetic issues stemming from the migration to Tabler. Any functional issues with tom-select or other components are out of scope for this thread, and will need to be addressed separately.

[jeremystretch]

Closing this as all the minor items have been addressed, and the others have been spun off into separate issues. For any suspected UI issues moving forward, please submit a new bug report.