Fix to add a little explanatory text to colors in the web config interface

share/tools/web_config/index.html

@@ -124,6 +124,8 @@ body {
 	/* Make our border overlap the detail, even if we're unselected (so it doesn't jump when selected) */
 	position: relative;
 	left: 1px;
+	border-bottom-style: solid;
+	border-bottom-width: 0px;
 }
 
 .selected_master_elem {
@@ -143,9 +145,32 @@ body {
 .master_element_text {
     text-decoration: none;
     padding-bottom: 1px;
-    border-bottom: 1px solid white;
+    border-bottom-style: inherit;
+    border-bottom-color: inherit;
+    border-bottom-width: 1px;
 }
 
+.master_element_description {
+    text-decoration: none;
+    padding-top: 15px;
+    font-size: 10pt;
+    border-bottom-style: inherit;
+    border-bottom-color: inherit;
+    border-bottom-width: 1px;
+	display: none;
+}
+
+.selected_master_elem > .master_element_description {
+	display: inline;
+}
+
+/* We have a newline between the label and description; hide it initially, but show it when it's selected */
+.master_element > br { display: none; }
+.selected_master_elem > br { display: inherit; }
+
+/* Set this class to suppress the border bottom on master_element_texts with visible descriptions */
+.master_element_no_border { border-bottom-width: 0 }
+
 #colorpicker_term256 {
 	border: solid #444 1px;
 }
@@ -416,10 +441,12 @@ function switch_tab(new_tab) {
 		/* Keep track of whether this is the first element */
 		var first = true
 		run_get_request('/colors/', function(key_and_values){
+			/* Result is name, description, value */
 			var key = key_and_values[0]
-			var style = new Style(key_and_values[1])
+			var description = key_and_values[1]
+			var style = new Style(key_and_values[2])
 			style_map[key] = style
-			elem = create_master_element(key, style.color, '', select_color_master_element)
+			elem = create_master_element(key, description, style.color, '', select_color_master_element)
 			if (first) {
 				/* It's the first element, so select it, so something gets selected */
 				select_color_master_element(elem)
@@ -432,7 +459,7 @@ function switch_tab(new_tab) {
 		/* Keep track of whether this is the first element */
 		var first = true
 		run_get_request('/functions/', function(contents){
-			elem = create_master_element(contents, 'AAAAAA', '11pt', select_function_master_element)
+			elem = create_master_element(contents, false/* description */, 'AAAAAA', '11pt', select_function_master_element)
 			if (first) {
 				/* It's the first element, so select it, so something gets selected */
 				select_function_master_element(elem)
@@ -493,6 +520,7 @@ function reflect_style() {
 	/* Unselect everything */	
 	$('.colorpicker_cell_selected').removeClass('colorpicker_cell_selected')
 	$('.modifier_cell_selected').removeClass('modifier_cell_selected')
+	$('.master_element_no_border').removeClass('master_element_no_border')
 	
 	/* Now update the color picker with the current style (if we have one) */
 	style = current_style()
@@ -519,7 +547,16 @@ function reflect_style() {
 		
 		/* In the master list, ensure the color is visible against the dark background. If we're deselecting, use COLOR_NORMAL */
 		master_color = style.color ? master_color_for_color(style.color) : COLOR_NORMAL
-		$('.selected_master_elem').children('.master_element_text').css({'color': master_color, 'border-bottom-color': master_color})
+		//$('.selected_master_elem').children('.master_element_text').css({'color': master_color, 'border-bottom-color': master_color})
+		
+		var selected_elem = $('.selected_master_elem');
+		var desc_elems = selected_elem.children('.master_element_description')
+		selected_elem.css({'color': master_color})
+		selected_elem.children().css({'border-bottom-color': master_color})
+		if (desc_elems.length) {
+			/* We have a description element, so hide the bottom border of the master element */
+			selected_elem.children('.master_element_text').addClass('master_element_no_border')
+		}
 	}
 }
 
@@ -908,33 +945,51 @@ var show_labels = 0
 var COLOR_NORMAL = 'CCC'
 
 /* Adds a new element to master */
-function create_master_element(contents, color, font_size, click_handler) {
+function create_master_element(contents, description_or_false, color, font_size, click_handler) {
 	/* In the master list, ensure the color is visible against the dark background */
 	var master_color = color ? master_color_for_color(color) : COLOR_NORMAL
-	var style_str = 'color: #' + master_color + '; border-bottom: 1px solid #' + master_color + ' ;'
+	var master_style = 'color: #' + master_color
+	var master_children_style =  'border-bottom-color: #' + master_color
+	var text_style = ''
 	
 	if (font_size.length > 0) {
-		style_str += 'font-size: ' + font_size + ';'
+		text_style += 'font-size: ' + font_size + ';'
 	}
 	
 	if (contents.length >= 20) {
-		style_str += 'letter-spacing:-2px;'
+		text_style += 'letter-spacing:-2px;'
 	}
 	
     elem = $('<div/>', {
       class: 'master_element',
       id: 'master_' + contents,
+      style: master_style,
       click: function(){
       	click_handler(this)
       }
     }).append(
         $("<span/>", {
         class: 'master_element_text',
-        style: style_str,
+        style: text_style,
         text: contents,
         })
     )
     
+    /* Append description if we have one */
+    if (description_or_false) {
+    	/* Newline between label and description */
+    	elem.append($('<br/>'))
+    	elem.append(
+    		$('<span/>', {
+				class: 'master_element_description',
+				text: description_or_false
+			})
+    	)
+    }
+    
+    /* Update border color of the master element's children */
+    elem.children().css(master_children_style)
+    
     elem.appendTo('#master')
     return elem
 }