Added color to dialog titlebars.

vasl_templates/webapp/static/css/main.css

@@ -111,6 +111,7 @@ button.edit-template img { height: 18px ; vertical-align: middle ; margin-right:
 .ui-dialog-titlebar-close { margin-top: -10px !important ; }
 
 #edit-template { overflow: hidden ; padding: 2px ; }
+.ui-dialog.edit-template .ui-dialog-titlebar { background: #f8d868 ; }
 .ui-dialog.edit-template textarea { resize: none ; width: calc(100% - 4px) ; height: 100% ; }
 .ui-dialog.edit-template textarea { font-family: "Courier New" ; font-size: 80% ; }
 .ui-dialog.edit-template .ui-dialog-buttonpane { border: none ; padding: 0 ; font-size: 75% ; }

vasl_templates/webapp/static/main.js

@@ -456,8 +456,7 @@ function on_tab_activate( evt, ui )
 
     // set the tab being activated
     function set_colors_for_player( tab_id, player_no ) {
-        var player_nat = $( "select[name='PLAYER_" + player_no + "']" ).val() ;
-        var colors = gTemplatePack.nationalities[ player_nat ].ob_colors ;
+        var colors = get_player_colors( player_no ) ;
         set_colors( tab_id, "#"+colors[0], "#"+colors[1] ) ;
     }
     tab_id = ui.newPanel.prop( "id" ) ;

vasl_templates/webapp/static/simple_notes.js

@@ -50,6 +50,14 @@ function _do_edit_simple_note( $sortable2, $entry, default_width )
             var show = (note_type !== "ssr") ;
             $btn_pane.children( "label[for='width']" ).css( "display", show?"inline":"none" ) ;
             $width.css( "display", show?"inline":"none" ) ;
+            // set the titlebar color
+            var colors = get_player_colors_for_element( $sortable2 ) ;
+            if ( ! colors )
+                colors = [ "d0d0d0", "ca0a0a0" ] ;
+            $(".ui-dialog-titlebar").css( {
+                background: "#"+colors[0],
+                border: "1px solid #"+colors[1]
+            } ) ;
             // load the dialog
             var data = $entry ? $entry.data("sortable2-data") : null ;
             $caption.val( data ? data.caption : "" ) ;

vasl_templates/webapp/static/snippets.js

@@ -43,14 +43,17 @@ function generate_snippet( $btn, extra_params )
     // set player-specific parameters
     var nationalities = gTemplatePack.nationalities ;
     var curr_tab = $("#tabs .ui-tabs-active a").attr( "href" ) ;
+    var colors ;
     if ( curr_tab === "#tabs-ob1" ) {
         params.PLAYER_NAME = nationalities[params.PLAYER_1].display_name ;
-        params.OB_COLOR = nationalities[params.PLAYER_1].ob_colors[0] ;
-        params.OB_COLOR_2 = nationalities[params.PLAYER_1].ob_colors[1] ;
+        colors = get_player_colors( 1 ) ;
+        params.OB_COLOR = colors[0] ;
+        params.OB_COLOR_2 = colors[1] ;
     } else if ( curr_tab === "#tabs-ob2" ) {
         params.PLAYER_NAME = nationalities[params.PLAYER_2].display_name ;
-        params.OB_COLOR = nationalities[params.PLAYER_2].ob_colors[0] ;
-        params.OB_COLOR_2 = nationalities[params.PLAYER_2].ob_colors[1] ;
+        colors = get_player_colors( 2 ) ;
+        params.OB_COLOR = colors[0] ;
+        params.OB_COLOR_2 = colors[1] ;
     }
 
     // set player-specific parameters

vasl_templates/webapp/static/sortable.js

@@ -98,19 +98,14 @@ $.fn.sortable2 = function( action, args )
 
         // style the entry
         // NOTE: Colors aren't going to work when we're using the test template pack!
-        function add_colors( player_no ) {
-            var player_nat = $( "select[name='PLAYER_" + player_no + "']" ).val() ;
-            var colors = gTemplatePack.nationalities[ player_nat ].ob_colors ;
+        var colors = get_player_colors_for_element( $sortable2 ) ;
+        if ( colors ) {
             $entry.css( {
                 "background": "#"+colors[0],
                 "border-bottom": "1px solid #"+colors[1],
                 "border-right": "1px solid #"+colors[1],
             } ) ;
         }
-        if ( $.contains( $("#tabs-ob1")[0], $sortable2[0] ) )
-            add_colors( 1 ) ;
-        else if ( $.contains( $("#tabs-ob2")[0], $sortable2[0] ) )
-            add_colors( 2 ) ;
     }
 
     function delete_entry( $sortable2, $entry )

vasl_templates/webapp/static/utils.js

@@ -1,4 +1,21 @@
 
+function get_player_colors( player_no )
+{
+    // get the colors for the specified player
+    var player_nat = $( "select[name='PLAYER_" + player_no + "']" ).val() ;
+    return gTemplatePack.nationalities[ player_nat ].ob_colors ;
+}
+
+function get_player_colors_for_element( $elem )
+{
+    // get the player colors (if any) for the specified element
+    if ( $.contains( $("#tabs-ob1")[0], $elem[0] ) )
+        return get_player_colors( 1 ) ;
+    else if ( $.contains( $("#tabs-ob2")[0], $elem[0] ) )
+        return get_player_colors( 2 ) ;
+    return null ;
+}
+
 // --------------------------------------------------------------------
 
 function copyToClipboard( val )

vasl_templates/webapp/static/vo.js

@@ -36,9 +36,16 @@ function add_vo( vo_type, player_no )
         minWidth: 300,
         minHeight: 300,
         open: function() {
+            // initialize
             $("#select-vo input[type='text']").val( "" ) ;
             $(this).height( $(this).height() ) ; // fudge: force the select to resize
             $("#select-vo select").filterByText( $("#select-vo input[type='text']") ) ;
+            // set the titlebar color
+            var colors = get_player_colors_for_element( $sortable2 ) ;
+            $(".ui-dialog-titlebar").css( {
+                background: "#"+colors[0],
+                border: "1px solid #"+colors[1],
+            } ) ;
         },
         buttons: {
             OK: function() {