diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 2eba71095..b6d078269 100644 Binary files a/netbox/project-static/dist/netbox-dark.css and b/netbox/project-static/dist/netbox-dark.css differ diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css index 909235d61..45cad6d53 100644 Binary files a/netbox/project-static/dist/netbox-light.css and b/netbox/project-static/dist/netbox-light.css differ diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index c7e77236c..83a8adb7e 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index adeb983d5..0dc9f4517 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ diff --git a/netbox/project-static/src/global.d.ts b/netbox/project-static/src/global.d.ts index 59d68a405..6b4d5b5a1 100644 --- a/netbox/project-static/src/global.d.ts +++ b/netbox/project-static/src/global.d.ts @@ -33,6 +33,7 @@ type APIObjectBase = { display: string; name?: Nullable; url: string; + _depth?: number; [k: string]: JSONAble; }; diff --git a/netbox/project-static/src/select/api.ts b/netbox/project-static/src/select/api.ts index e3bdeda78..62db61363 100644 --- a/netbox/project-static/src/select/api.ts +++ b/netbox/project-static/src/select/api.ts @@ -57,12 +57,6 @@ class APISelect { */ public readonly placeholder: string; - /** - * This element's options come from the server pre-sorted and should not be sorted client-side. - * Determined by the existence of the `pre-sorted` attribute on the base `` element, or + * by existence of specific fields such as `_depth`. + */ + private preSorted: boolean = false; + /** * This instance's available options. */ @@ -161,7 +162,8 @@ class APISelect { this.updatePathValues(filter); } - this.queryParams.set('brief', true); + // TODO: Re-enable this. Disabled because `_depth` field is missing from brief responses. + // this.queryParams.set('brief', true); this.queryParams.set('limit', 0); this.updateQueryUrl(); @@ -314,7 +316,15 @@ class APISelect { const options = [PLACEHOLDER] as Option[]; for (const result of results) { - const text = result.display; + let text = result.display; + + if (typeof result._depth === 'number') { + // If the object has a `_depth` property, indent its display text. + if (!this.preSorted) { + this.preSorted = true; + } + text = `${'─'.repeat(result._depth)} ${text}`; + } const data = {} as Record; const value = result.id.toString(); let style, selected, disabled; diff --git a/netbox/project-static/styles/select.scss b/netbox/project-static/styles/select.scss index fe6072087..17bfe7484 100644 --- a/netbox/project-static/styles/select.scss +++ b/netbox/project-static/styles/select.scss @@ -21,7 +21,7 @@ $spacing-s: $input-padding-x; --nbx-select-option-hover-color: #{$white}; --nbx-select-placeholder-color: #{$gray-600}; --nbx-select-value-color: #{$white}; - & body[data-netbox-color-mode='dark'] { + &[data-netbox-color-mode='dark'] { // Dark Mode Variables. --nbx-select-content-bg: #{$gray-900}; --nbx-select-option-selected-bg: #{$gray-500}; @@ -100,23 +100,34 @@ $spacing-s: $input-padding-x; .ss-content { background-color: var(--nbx-select-content-bg); .ss-list { - .ss-option.ss-option-selected { - background-color: var(--nbx-select-option-selected-bg); - color: $body-color; - } - .ss-option:hover { - background-color: var(--nbx-select-option-hover-bg); - color: var(--nbx-select-option-hover-color); - } - .ss-option:last-child { - border-bottom-left-radius: $form-select-border-radius; - border-bottom-right-radius: $form-select-border-radius; - } - .ss-option.ss-disabled { - background-color: transparent; - } - .ss-option.ss-disabled:hover { - color: $form-select-disabled-color; + .ss-option { + &.ss-option-selected { + background-color: var(--nbx-select-option-selected-bg); + color: $body-color; + } + + &:hover { + background-color: var(--nbx-select-option-hover-bg); + color: var(--nbx-select-option-hover-color); + } + + &:last-child { + border-bottom-left-radius: $form-select-border-radius; + border-bottom-right-radius: $form-select-border-radius; + } + + &.ss-disabled { + background-color: transparent; + + &:hover { + color: $form-select-disabled-color; + } + } + + .depth { + // Lighten the dash prefix on nested options. + opacity: 0.3; + } } } border-bottom-left-radius: $form-select-border-radius; diff --git a/netbox/project-static/styles/theme-dark.scss b/netbox/project-static/styles/theme-dark.scss index fae66e1f1..376cac918 100644 --- a/netbox/project-static/styles/theme-dark.scss +++ b/netbox/project-static/styles/theme-dark.scss @@ -96,7 +96,7 @@ $input-group-addon-bg: $gray-700; $input-group-addon-border-color: $input-border-color; $form-select-color: $input-color; -$form-select-disabled-color: $gray-700; +$form-select-disabled-color: $gray-500; $form-select-bg: $input-bg; $form-select-disabled-bg: $input-disabled-bg; $form-select-indicator-color: $form-select-color; diff --git a/netbox/project-static/styles/theme-light.scss b/netbox/project-static/styles/theme-light.scss index cc0d511d0..fb6cf9649 100644 --- a/netbox/project-static/styles/theme-light.scss +++ b/netbox/project-static/styles/theme-light.scss @@ -6,7 +6,7 @@ $input-border-color: $gray-200; $theme-colors: map-merge($theme-colors, $theme-color-addons); -$light: $gray-100; +$light: $gray-200; $card-cap-color: $gray-800; @@ -26,5 +26,7 @@ $list-group-disabled-color: $gray-500; $table-flush-header-bg: $gray-100; +$form-select-disabled-color: $gray-600; + // Tabbed content $tab-content-bg: $gray-100;