diff --git a/netbox/dcim/elevations.py b/netbox/dcim/elevations.py index 93c44f087..a9c5f37aa 100644 --- a/netbox/dcim/elevations.py +++ b/netbox/dcim/elevations.py @@ -89,10 +89,9 @@ class RackElevationSVG: ) link.set_desc(self._get_device_description(device)) link.add(drawing.rect(start, end, style='fill: #{}'.format(color), class_='slot')) - hex_color = '#{}'.format(foreground_color(color)) - link.add(drawing.text(str(name), insert=text, fill=hex_color)) # Embed front device type image if one exists + text_color = '#{}'.format(foreground_color(color)) if self.include_images and device.device_type.front_image: image = drawing.image( href=device.device_type.front_image.url, @@ -103,11 +102,14 @@ class RackElevationSVG: image.fit(scale='slice') link.add(image) + link.add(drawing.text(str(name), insert=text, stroke='#{}'.format(color), + stroke_width='0.2em', stroke_linejoin='round', class_='device-label')) + link.add(drawing.text(str(name), insert=text, fill=text_color, class_='device-label')) + def _draw_device_rear(self, drawing, device, start, end, text): rect = drawing.rect(start, end, class_="slot blocked") rect.set_desc(self._get_device_description(device)) drawing.add(rect) - drawing.add(drawing.text(str(device), insert=text)) # Embed rear device type image if one exists if self.include_images and device.device_type.rear_image: @@ -120,6 +122,10 @@ class RackElevationSVG: image.fit(scale='slice') drawing.add(image) + drawing.add(drawing.text(str(device), insert=text, stroke='white', + stroke_width='0.2em', stroke_linejoin='round', class_='device-label')) + drawing.add(drawing.text(str(device), insert=text, class_='device-label')) + @staticmethod def _draw_empty(drawing, rack, start, end, text, id_, face_id, class_, reservation): link = drawing.add( diff --git a/netbox/project-static/js/rack_elevations.js b/netbox/project-static/js/rack_elevations.js index ef21eefd7..3704f5de6 100644 --- a/netbox/project-static/js/rack_elevations.js +++ b/netbox/project-static/js/rack_elevations.js @@ -11,3 +11,16 @@ $('button.toggle-images').click(function() { $(this).children('span').toggleClass('mdi-checkbox-marked-circle-outline mdi-checkbox-blank-circle-outline'); return false; }); +// Toggle the display of device labels within an SVG rack elevation +$('button.toggle-labels').click(function() { + var selected = $(this).attr('selected'); + var rack_elevation = $(".rack_elevation"); + if (selected) { + $('.device-label', rack_elevation.contents()).addClass('hidden'); + } else { + $('.device-label', rack_elevation.contents()).removeClass('hidden'); + } + $(this).attr('selected', !selected); + $(this).children('span').toggleClass('mdi-checkbox-marked-circle-outline mdi-checkbox-blank-circle-outline'); + return false; +}); diff --git a/netbox/templates/dcim/rack.html b/netbox/templates/dcim/rack.html index 94f0ea24c..3dae407f1 100644 --- a/netbox/templates/dcim/rack.html +++ b/netbox/templates/dcim/rack.html @@ -40,6 +40,9 @@ + {{ block.super }} {% endblock %} diff --git a/netbox/templates/dcim/rack_elevation_list.html b/netbox/templates/dcim/rack_elevation_list.html index a42610e35..b1bc2ce98 100644 --- a/netbox/templates/dcim/rack_elevation_list.html +++ b/netbox/templates/dcim/rack_elevation_list.html @@ -7,6 +7,9 @@ +