Added colored labels for device and rack roles

This commit is contained in:
Jeremy Stretch 2016-08-10 13:35:55 -04:00
parent b2f03dfb16
commit a89fb734a0
3 changed files with 44 additions and 25 deletions

View File

@ -1,7 +1,7 @@
import django_tables2 as tables import django_tables2 as tables
from django_tables2.utils import Accessor from django_tables2.utils import Accessor
from utilities.tables import BaseTable, ToggleColumn from utilities.tables import BaseTable, ColorColumn, ToggleColumn
from .models import ( from .models import (
ConsolePort, ConsolePortTemplate, ConsoleServerPortTemplate, Device, DeviceBayTemplate, DeviceRole, DeviceType, ConsolePort, ConsolePortTemplate, ConsoleServerPortTemplate, Device, DeviceBayTemplate, DeviceRole, DeviceType,
@ -108,7 +108,7 @@ class RackRoleTable(BaseTable):
pk = ToggleColumn() pk = ToggleColumn()
name = tables.LinkColumn(verbose_name='Name') name = tables.LinkColumn(verbose_name='Name')
rack_count = tables.Column(verbose_name='Racks') rack_count = tables.Column(verbose_name='Racks')
color = tables.Column(verbose_name='Color') color = ColorColumn(verbose_name='Color')
slug = tables.Column(verbose_name='Slug') slug = tables.Column(verbose_name='Slug')
actions = tables.TemplateColumn(template_code=RACKROLE_ACTIONS, attrs={'td': {'class': 'text-right'}}, actions = tables.TemplateColumn(template_code=RACKROLE_ACTIONS, attrs={'td': {'class': 'text-right'}},
verbose_name='') verbose_name='')
@ -258,14 +258,14 @@ class DeviceRoleTable(BaseTable):
pk = ToggleColumn() pk = ToggleColumn()
name = tables.LinkColumn(verbose_name='Name') name = tables.LinkColumn(verbose_name='Name')
device_count = tables.Column(verbose_name='Devices') device_count = tables.Column(verbose_name='Devices')
color = ColorColumn(verbose_name='Color')
slug = tables.Column(verbose_name='Slug') slug = tables.Column(verbose_name='Slug')
color = tables.Column(verbose_name='Color')
actions = tables.TemplateColumn(template_code=DEVICEROLE_ACTIONS, attrs={'td': {'class': 'text-right'}}, actions = tables.TemplateColumn(template_code=DEVICEROLE_ACTIONS, attrs={'td': {'class': 'text-right'}},
verbose_name='') verbose_name='')
class Meta(BaseTable.Meta): class Meta(BaseTable.Meta):
model = DeviceRole model = DeviceRole
fields = ('pk', 'name', 'device_count', 'slug', 'color', 'actions') fields = ('pk', 'name', 'device_count', 'color', 'slug', 'actions')
# #

View File

@ -294,27 +294,39 @@ ul.rack_near_face li.empty:hover a {
display: block; display: block;
} }
/* Rack elevation colors (from http://flatuicolors.com) */ /* Colors (from http://flatuicolors.com) */
.teal { background-color: #1abc9c; border-bottom: 1px solid #16a085; } .teal { background-color: #1abc9c; }
.teal:hover { background-color: #16a085; } .green { background-color: #2ecc71; }
.green { background-color: #2ecc71; border-bottom: 1px solid #27ae60; } .blue { background-color: #3498db; }
.green:hover { background-color: #27ae60; } .purple { background-color: #9b59b6; }
.blue { background-color: #3498db; border-bottom: 1px solid #2980b9; } .yellow { background-color: #f1c40f; }
.blue:hover { background-color: #2980b9; } .orange { background-color: #e67e22; }
.purple { background-color: #9b59b6; border-bottom: 1px solid #8e44ad; } .red { background-color: #e74c3c; }
.purple:hover { background-color: #8e44ad; } .light_gray { background-color: #dce2e3; }
.yellow { background-color: #f1c40f; border-bottom: 1px solid #f39c12; } .medium_gray { background-color: #95a5a6; }
.yellow:hover { background-color: #f39c12; } .dark_gray { background-color: #34495e; }
.orange { background-color: #e67e22; border-bottom: 1px solid #d35400; }
.orange:hover { background-color: #d35400; } /* Rack elevation coloring */
.red { background-color: #e74c3c; border-bottom: 1px solid #c0392b; } ul.rack .teal { border-bottom: 1px solid #16a085; }
.red:hover { background-color: #c0392b; } ul.rack .teal:hover { background-color: #16a085; }
.light_gray { background-color: #dce2e3; border-bottom: 1px solid #bdc3c7; } ul.rack .green { border-bottom: 1px solid #27ae60; }
.light_gray:hover { background-color: #bdc3c7; } ul.rack .green:hover { background-color: #27ae60; }
.medium_gray { background-color: #95a5a6; border-bottom: 1px solid #7f8c8d; } ul.rack .blue { border-bottom: 1px solid #2980b9; }
.medium_gray:hover { background-color: #7f8c8d; } ul.rack .blue:hover { background-color: #2980b9; }
.dark_gray { background-color: #34495e; border-bottom: 1px solid #2c3e50; } ul.rack .purple { border-bottom: 1px solid #8e44ad; }
.dark_gray:hover { background-color: #2c3e50; } ul.rack .purple:hover { background-color: #8e44ad; }
ul.rack .yellow { border-bottom: 1px solid #f39c12; }
ul.rack .yellow:hover { background-color: #f39c12; }
ul.rack .orange { border-bottom: 1px solid #d35400; }
ul.rack .orange:hover { background-color: #d35400; }
ul.rack .red { border-bottom: 1px solid #c0392b; }
ul.rack .red:hover { background-color: #c0392b; }
ul.rack .light_gray { border-bottom: 1px solid #bdc3c7; }
ul.rack .light_gray:hover { background-color: #bdc3c7; }
ul.rack .medium_gray { border-bottom: 1px solid #7f8c8d; }
ul.rack .medium_gray:hover { background-color: #7f8c8d; }
ul.rack .dark_gray { border-bottom: 1px solid #2c3e50; }
ul.rack .dark_gray:hover { background-color: #2c3e50; }
/* Misc */ /* Misc */
.banner-bottom { .banner-bottom {

View File

@ -28,3 +28,10 @@ class ToggleColumn(tables.CheckBoxColumn):
@property @property
def header(self): def header(self):
return mark_safe('<input type="checkbox" name="_all" title="Select all" />') return mark_safe('<input type="checkbox" name="_all" title="Select all" />')
class ColorColumn(tables.Column):
def render(self, record):
html = '<label class="label {}">{}</label>'.format(record.color, record.get_color_display())
return mark_safe(html)