From 0b80d85c6c62ed8ad5459388f6ec4c4ee23f7c57 Mon Sep 17 00:00:00 2001 From: checktheroads Date: Sat, 24 Jul 2021 18:11:01 -0700 Subject: [PATCH] #6797: Fix API select styles --- netbox/project-static/dist/netbox-dark.css | Bin 712001 -> 712089 bytes netbox/project-static/dist/netbox-light.css | Bin 442432 -> 442587 bytes netbox/project-static/dist/netbox.js | Bin 309453 -> 309554 bytes netbox/project-static/dist/netbox.js.map | Bin 1106197 -> 1106717 bytes netbox/project-static/src/global.d.ts | 1 + netbox/project-static/src/select/api.ts | 26 +++++++--- netbox/project-static/styles/select.scss | 47 +++++++++++------- netbox/project-static/styles/theme-dark.scss | 2 +- netbox/project-static/styles/theme-light.scss | 4 +- 9 files changed, 52 insertions(+), 28 deletions(-) diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 2eba7109500dc17fd958be67ef76c2e2f041506b..b6d078269ce9535faa20e10628edf293c3273cf2 100644 GIT binary patch delta 254 zcmX@OOMB*S?F~u?rZ+INvQ3Zs$0Rhp!H=1J`nj2GDw6}=@iZ46XfHg#2*gZ4%nZaV zK+FonY}*SDu;2VJJ@p-j>h$9`IRvK1Zs5?_zF{K=GaJY>t?2iC99G-&4sd7)Opo}-Br(0AkC|oq>m{5j(-$1);GdpwfrEehmkS)n znW54!=YY)Pm>z$XgMB;iRgP2a(>074p_b^~;gA+o&`U`zD9NbKFGx(zEUC28o4!z= cNfqJ>paP!h4JSC*+U4(Z05Ruu`MX?70A5{U>Hq)$ delta 182 zcmbQaTl?TH?F~u?rgH={OH6O@V`iUzZYG<`O z_QC_~H$O~I%;8enp1zU8oo)JwnQU6qws1&KU%rEbciRpQO%65_OH%_=^X>WvIFbaQ z#`iI^Y+rkUgOdf#I-pLD?TlABF0#W6;+a10CI|a;gF76o(_>C?@U++79u#c FWB|x>MdSbg diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css index 909235d61f9a26200b58491a11547f65dffeb61b..45cad6d5360619c06bf2e46c080a574647b097c2 100644 GIT binary patch delta 213 zcmX@mAbq=0dc%qQ=@CDec&E!tFbhp~ILqGrAiw=VJ|hq_0WtIT2l*_!A5TBHpG|iA z-e6X9*6Hy-m^h{{4r7&`zA}=Pce_d?Yd#yBS+cpQdCK&H2v)1@m*ZI{@k|%zWs#X~ zU&zY3y)B0|m1(+=1hYKI{O!#7to^Lh9ZFcGMXWON%TkM~lk;=(i>#EPW^62G)f7_D zOGzy#$*9gRNKDQwskG8Fo(>e3ntmXam2LWhG*-6l^GaA(GP0#wrY5JRwfmN_Zuc!? H`|Jq-h{H_4 delta 148 zcmccJD1D$odc%qQ>91l~g(f#7u{FQTZ-1B12*gZ4%)I?wKFjXMj0)2eE7%mb9}8wR zXJt!C1;Obbqga);t46Yxv%y3vBUr7r--&0P#KQ_!Gksw>v&i=L9M)W>=|)>wgeM1_ pW!)~7&)UyAy*`7LeY;61>pDiZG>bILw8ZuoWvts@l(BvG1OT&bIpY8T diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index c7e77236cedc910b6645f33e03a93f1d2b3021f2..83a8adb7e418f0983df5fcd4dc00547bc5114107 100644 GIT binary patch delta 182 zcmX^6QE1aAp@tU57N!>FEi5}yrk_t?Su%Y`3XAym;#8JWp5YS0916%90X5^WP~iVG6+ z6q0iii;HcQz@{kKsZ=Y)lp2{D7%1r#r52xMAjtBuPw@`5e;zzzg6?*^x diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index adeb983d555bb6de481339ff3d4309531e32825d..0dc9f4517f7f207ca827d9a300b0bc6457c44da8 100644 GIT binary patch delta 712 zcmYLFO=uHA6eh84l4-OHTC1L(rCP0HQiOumHZZ$gO9&*=#0e?PjyxnLyG~ z>|vn?y~><=Q9KEPrLZDYY*CRQDu@U1B=jbD_vUU=_3%CBy_xUl&BJ|V>z%UUhTO1w z#O-i9-7YucM%~yB+T8Q*@1t;3JlI3tD2A$&vjAWS3JsujgK=u<6sjd)Hr0)ip+m`_ zW|0A_>1EIuMvsf>p-@*OaTri~9X%y(_r>F>YT+)`Ih6hM+J8^msoK=x z4Ge}=q!tH*GbkF&Hnj$DTIYv;qW%^2i|?suOkDkd`o!u+tXq6`!ySvkBN&JL7_&7C zbW>w&JlEg)o?L%wU~Mp0yD~C7JeY8(O*MYO-=t>p!+aOl$C3dr1p{k=(0cxQdq046 z@#9Ujce8nbe02MW`#9?3nAbe$d9izL`9={h60(R@LK-qw$TiiLF(sLapb*Stl2OFY zBk5L8){=2WCS*m%X_9fg_+#l?D4eN#p(hgQx|hb2gk%GqES@2%DPuxN8czj%>t=?K z1w2nwE(gO5ULeYB`!pW}NE6jJXwhrFOHIae0YCdsblIOS%Q!<+TMZPa+Om^Gnf7Vk e(o-oNL1tNAReaS-+1uWhcqBC94Zf6qo&N(Z#`1dr delta 263 zcmbPx%z5e|=Y|%>7N!>F7M2#)7Pc1l7LFFqEnMvfr?;Hs+B4nq5SQ%q{!?7q+uILv zF>!3)e~QbKb-IEc2kZ2i7q|qsH(cOaE5eeTpI1Cx|0$Q$^v6dygxkBGaRD(m5c2>r zFA(!>?|R0+W3N%BTZ&Gkqhq9wtD|G3la8~axod%wPO77~3y5&kDRy%7b=Jvsa&#I6DE1_RYPTW(*zOu&&% z$XCbR(a|4dgFjHtIYq~Hd(2va5O%JLbf+q39bd=F^zFO02$Zlh=4{vBBk)cQ0LL+1 AsQ>@~ 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;