diff --git a/netbox/project-static/css/base.css b/netbox/project-static/css/base.css index ad1b02e3f..ad618b5d1 100644 --- a/netbox/project-static/css/base.css +++ b/netbox/project-static/css/base.css @@ -120,6 +120,117 @@ input[name="pk"] { margin-top: 0; } +/* Color Selections */ +.color-selection-aa1409 { + background-color: #aa1409; + color: #ffffff; +} +.color-selection-f44336 { + background-color: #f44336; + color: #ffffff; +} +.color-selection-e91e63 { + background-color: #e91e63; + color: #ffffff; +} +.color-selection-ffe4e1 { + background-color: #ffe4e1; + color: #000000; +} +.color-selection-ff66ff { + background-color: #ff66ff; + color: #ffffff; +} +.color-selection-9c27b0 { + background-color: #9c27b0; + color: #ffffff; +} +.color-selection-673ab7 { + background-color: #673ab7; + color: #ffffff; +} +.color-selection-3f51b5 { + background-color: #3f51b5; + color: #ffffff; +} +.color-selection-2196f3 { + background-color: #2196f3; + color: #ffffff; +} +.color-selection-03a9f4 { + background-color: #03a9f4; + color: #ffffff; +} +.color-selection-00bcd4 { + background-color: #00bcd4; + color: #ffffff; +} +.color-selection-009688 { + background-color: #009688; + color: #ffffff; +} +.color-selection-00ffff { + background-color: #00ffff; + color: #ffffff; +} +.color-selection-2f6a31 { + background-color: #2f6a31; + color: #ffffff; +} +.color-selection-4caf50 { + background-color: #4caf50; + color: #ffffff; +} +.color-selection-8bc34a { + background-color: #8bc34a; + color: #ffffff; +} +.color-selection-cddc39 { + background-color: #cddc39; + color: #000000; +} +.color-selection-ffeb3b { + background-color: #ffeb3b; + color: #000000; +} +.color-selection-ffc107 { + background-color: #ffc107; + color: #000000; +} +.color-selection-ff9800 { + background-color: #ff9800; + color: #ffffff; +} +.color-selection-ff5722 { + background-color: #ff5722; + color: #ffffff; +} +.color-selection-795548 { + background-color: #795548; + color: #ffffff; +} +.color-selection-c0c0c0 { + background-color: #c0c0c0; + color: #000000; +} +.color-selection-9e9e9e { + background-color: #9e9e9e; + color: #ffffff; +} +.color-selection-607d8b { + background-color: #607d8b; + color: #ffffff; +} +.color-selection-111111 { + background-color: #111111; + color: #ffffff; +} +.color-selection-ffffff { + background-color: #ffffff; + color: #000000; +} + + /* Tables */ th.pk, td.pk { padding-bottom: 6px; diff --git a/netbox/project-static/js/forms.js b/netbox/project-static/js/forms.js index 63ee70a07..73d149408 100644 --- a/netbox/project-static/js/forms.js +++ b/netbox/project-static/js/forms.js @@ -86,6 +86,22 @@ $(document).ready(function() { return rendered_url } + function colorPickerClassCopy(data, container) { + console.log("hello"); + if (data.element) { + $(container).addClass($(data.element).attr("class")); + } + return data.text; + } + + // Color Picker + $('.netbox-select2-color-picker').select2({ + allowClear: true, + placeholder: "---------", + templateResult: colorPickerClassCopy, + templateSelection: colorPickerClassCopy, + }) + // Static choice selection $('.netbox-select2-static').select2({ allowClear: true, diff --git a/netbox/utilities/forms.py b/netbox/utilities/forms.py index b66e859a3..e53617321 100644 --- a/netbox/utilities/forms.py +++ b/netbox/utilities/forms.py @@ -169,6 +169,7 @@ class ColorSelect(forms.Select): def __init__(self, *args, **kwargs): kwargs['choices'] = add_blank_choice(COLOR_CHOICES) super().__init__(*args, **kwargs) + self.attrs['class'] = 'netbox-select2-color-picker' class BulkEditNullBooleanSelect(forms.NullBooleanSelect): diff --git a/netbox/utilities/templates/widgets/colorselect_option.html b/netbox/utilities/templates/widgets/colorselect_option.html index 7d10b893f..a0e488f18 100644 --- a/netbox/utilities/templates/widgets/colorselect_option.html +++ b/netbox/utilities/templates/widgets/colorselect_option.html @@ -1 +1 @@ - +