Closes #14871: Complete work on UI cleanup (#15341)

* Fix left padding of login button in top menu

* Relocate "add" buttons for embedded object tables

* Remove unused data template block & getNetboxData() utility function

* Remove bottom margin from last <p> element in rendered Markdown inside a table cell

* Prevent TomSelect from initializing on <select> elements with a size

* Fix styling of dropdown menu button for circuit commit rate

* Change .color-block to display: inline-block

* Delete unused static asset

* Improve contrast between menu group headings & items

* Remove custom color for attr-table row headings

* Fix border color of copy-to-clipboard button

* Fix toast text color in dark mode

* Fix rack elevation label/image toggles

* Increase border radius for small buttons

* Fix object selector

netbox/project-static/src/objectSelector.ts

@@ -18,11 +18,12 @@ function handleSelection(link: HTMLAnchorElement): void {
   const value = link.getAttribute('data-value');
 
   //@ts-ignore
-  target.slim.setData([
+  target.tomselect.addOption({
-    {text: label, value: value}
+    id: value,
-  ]);
+    display: label,
-  const change = new Event('change');
+  });
-  target.dispatchEvent(change);
+  //@ts-ignore
+  target.tomselect.addItem(value);
 
 }
 

netbox/project-static/src/select/dynamic.ts

@@ -42,7 +42,7 @@ function renderItem(data: TomOption, escape: typeof escape_html) {
 
 // Initialize <select> elements which are populated via a REST API call
 export function initDynamicSelects(): void {
-  for (const select of getElements<HTMLSelectElement>('select.api-select')) {
+  for (const select of getElements<HTMLSelectElement>('select.api-select:not(.tomselected)')) {
     new DynamicTomSelect(select, {
       ...config,
       valueField: VALUE_FIELD,

netbox/project-static/src/select/static.ts

@@ -7,7 +7,7 @@ import { getElements } from '../util';
 // Initialize <select> elements with statically-defined options
 export function initStaticSelects(): void {
   for (const select of getElements<HTMLSelectElement>(
-    'select:not(.api-select):not(.color-select)',
+    'select:not(.tomselected):not(.no-ts):not([size]):not(.api-select):not(.color-select)',
   )) {
     new TomSelect(select, {
       ...config,
@@ -24,7 +24,7 @@ export function initColorSelects(): void {
     )}"></span> ${escape(item.text)}</div>`;
   }
 
-  for (const select of getElements<HTMLSelectElement>('select.color-select')) {
+  for (const select of getElements<HTMLSelectElement>('select.color-select:not(.tomselected)')) {
     new TomSelect(select, {
       ...config,
       maxOptions: undefined,

netbox/project-static/src/util.ts

@@ -244,29 +244,6 @@ export function getSelectedOptions<E extends HTMLElement>(
   return selected;
 }
 
-/**
- * Get data that can only be accessed via Django context, and is thus already rendered in the HTML
- * template.
- *
- * @see Templates requiring Django context data have a `{% block data %}` block.
- *
- * @param key Property name, which must exist on the HTML element. If not already prefixed with
- *            `data-`, `data-` will be prepended to the property.
- * @returns Value if it exists, `null` if not.
- */
-export function getNetboxData(key: string): string | null {
-  if (!key.startsWith('data-')) {
-    key = `data-${key}`;
-  }
-  for (const element of getElements('body > div#netbox-data > *')) {
-    const value = element.getAttribute(key);
-    if (isTruthy(value)) {
-      return value;
-    }
-  }
-  return null;
-}
-
 /**
  * Toggle visibility of an element.
  */

netbox/project-static/styles/custom/_markdown.scss

@@ -28,6 +28,13 @@
 
 }
 
+// Remove the bottom margin of <p> elements inside a table cell
+td > .rendered-markdown {
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
 // Markdown preview
 .markdown-widget {
   .preview {

netbox/project-static/styles/custom/_misc.scss

@@ -2,7 +2,7 @@
 
 // Color labels
 span.color-label {
-  display: block;
+  display: inline-block;
   width: 5rem;
   height: 1rem;
   padding: $badge-padding-y $badge-padding-x;

netbox/project-static/styles/overrides/_tabler.scss

@@ -9,6 +9,10 @@ pre {
   // Tabler sets display: flex
   display: inline-block;
 }
+.btn-sm {
+  // $border-radius-sm (2px) is too small
+  border-radius: $border-radius;
+}
 
 // Tabs
 .nav-tabs {

netbox/project-static/styles/transitional/_tables.scss

@@ -23,7 +23,6 @@ table.attr-table {
 
   // Restyle row header
   th {
-    color: $gray-700;
     font-weight: normal;
     width: min-content;
   }

netbox/templates/base/base.html

@@ -70,10 +70,5 @@
     {# User messages #}
     {% include 'inc/messages.html' %}
 
-    {# Data container #}
-    <div id="netbox-data" style="display: none!important; visibility: hidden!important">
-      {% block data %}{% endblock %}
-    </div>
-
   </body>
 </html>

netbox/templates/dcim/rack.html

@@ -163,7 +163,7 @@
 	  </div>
     <div class="col col-12 col-xl-7">
       <div class="text-end mb-4">
-        <select class="btn btn-outline-dark rack-view">
+        <select class="btn btn-outline-secondary no-ts rack-view">
           <option value="images-and-labels" selected="selected">{% trans "Images and Labels" %}</option>
           <option value="images-only">{% trans "Images only" %}</option>
           <option value="labels-only">{% trans "Labels only" %}</option>

netbox/templates/dcim/rack_elevation_list.html

@@ -11,13 +11,11 @@
       <a href="{% url 'dcim:rack_list' %}{% querystring request %}" class="btn btn-primary">
         <i class="mdi mdi-format-list-checkbox"></i> {% trans "View List" %}
       </a>
-      <div class="btn-group" role="group">
+      <select class="btn btn-outline-secondary no-ts rack-view">
-        <select class="btn btn-outline-secondary rack-view">
         <option value="images-and-labels" selected="selected">{% trans "Images and Labels" %}</option>
         <option value="images-only">{% trans "Images only" %}</option>
         <option value="labels-only">{% trans "Labels only" %}</option>
       </select>
-      </div>
       <div class="btn-group" role="group">
         <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='front' %}" class="btn btn-outline-secondary{% if rack_face == 'front' %} active{% endif %}">{% trans "Front" %}</a>
         <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='rear' %}" class="btn btn-outline-secondary{% if rack_face == 'rear' %} active{% endif %}">{% trans "Rear" %}</a>

netbox/templates/inc/toast.html

@@ -1,6 +1,6 @@
 {% load helpers %}
 
-<div class="toast shadow-sm" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
+<div class="toast toast-dark border-0 shadow-sm" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
   <div class="toast-header text-bg-{{ status }}">
     <i class="mdi mdi-{{ status|icon_from_status }} me-1"></i>
     {{ title }}

netbox/utilities/templates/form_helpers/render_field.html

@@ -36,7 +36,7 @@
     {% elif 'data-clipboard' in field.field.widget.attrs %}
       <div class="input-group">
         {{ field }}
-        <button type="button" title="{% trans "Copy to clipboard" %}" class="btn btn-outline-dark copy-content" data-clipboard-target="#{{ field.id_for_label }}">
+        <button type="button" title="{% trans "Copy to clipboard" %}" class="btn copy-content" data-clipboard-target="#{{ field.id_for_label }}">
           <i class="mdi mdi-content-copy"></i>
         </button>
       </div>

netbox/utilities/templates/navigation/menu.html

@@ -19,7 +19,7 @@
         <div class="dropdown-menu-columns">
           <div class="dropdown-menu-column pb-2">
             {% for group, items in groups %}
-              <div class="text-uppercase fw-bold fs-5 ps-3 pt-3 pb-1">
+              <div class="text-uppercase text-secondary fw-bold fs-5 ps-3 pt-3 pb-1">
                 {{ group.label }}
               </div>
               {% for item, buttons in items %}

netbox/utilities/templates/widgets/number_with_options.html

@@ -1,6 +1,8 @@
 <div class="input-group">
   {% include 'django/forms/widgets/number.html' %}
-  <button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown"></button>
+  <button type="button" class="btn" data-bs-toggle="dropdown">
+    <i class="mdi mdi-chevron-down"></i>
+  </button>
   <ul class="dropdown-menu dropdown-menu-end">
     {% for value, label in widget.options %}
       <li>