Render sortable entries and tabs using nationality colors.

vasl_templates/webapp/static/css/main.css

@@ -16,9 +16,20 @@ body { height: 100% ; }
 #tabs {
     display: none ;
     position: absolute ; top: 5px ; bottom: 5px ; left: 5px ; right: 5px ;
+    border: none ;
 }
 
+#tabs .ui-tabs-nav { background: white ; border: none ; }
+#tabs .ui-tabs-nav a { color: #888 ; }
+#tabs .ui-tabs-nav a:hover { color: #444 ; }
+#tabs .ui-tabs-tab.ui-state-active a { color: #444 ; }
 #tabs .ui-tabs-nav li img { position: relative ; top: 2px ; height: 1em ; }
+#tabs .ui-tabs-panel { background: #f6f6f6 ; }
+fieldset { background: #ffffff ; }
+
+/* nb: these are managed in the code but we define them here for the initial load */
+#tabs .ui-tabs-tab.ui-state-active { background: #ddd ; border-color: #ccc ; }
+#tabs .ui-tabs-panel { border: 1px solid #ccc ; }
 
 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 

vasl_templates/webapp/static/css/sortable.css

@@ -5,7 +5,7 @@ img.sortable-add { vertical-align: middle ; height: 15px ; margin-right: 0.25em
 .sortable { list-style-type: none ; margin: 0 ; padding: 0 ; }
 .sortable li {
     margin-bottom: 2px ; padding: 5px ;
-    border: 1px dotted #333 ; background: #eee ;
+    background: #f0f0f0 ; border-bottom: 1px solid #c0c0c0 ; border-right: 1px solid #c0c0c0 ;
 }
 .sortable li.highlighted { background: #48c8ff ; }
 .sortable li:hover { cursor: pointer ; }

vasl_templates/webapp/static/main.js

@@ -69,9 +69,10 @@ $(document).ready( function () {
     // initialize the tabs
     $("#tabs").tabs( {
         heightStyle: "fill",
+        activate: on_tab_activate,
     } ).show() ;
     var navHeight = $("#tabs .ui-tabs-nav").height() ;
-    $("input[name='SCENARIO_NAME']").focus().focus() ;
+    $("#tabs .ui-tabs-nav a").click( function() { $(this).blur() ; } ) ;
 
     // initialize the scenario date picker
     $("input[name='SCENARIO_DATE']").datepicker( {
@@ -306,6 +307,7 @@ $(document).ready( function () {
 
     // flag that we've finished initialization
     update_page_load_status( "main" ) ;
+    $("input[name='SCENARIO_NAME']").focus().focus() ;
 } ) ;
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -422,11 +424,10 @@ function on_player_change( $select )
 function update_ob_tab_header( player_no )
 {
     // update the OB tab header for the specified player
-    var $sel = $( "select[name='PLAYER_" + player_no + "']" ) ;
-    var player_nat = $sel.find( "option:selected" ).val() ;
+    var player_nat = $( "select[name='PLAYER_" + player_no + "']" ).val() ;
     var display_name = gTemplatePack.nationalities[ player_nat ].display_name ;
     var image_url = gImagesBaseUrl + "/flags/" + player_nat + ".png" ;
-    var $elem = $("#tabs .ui-tabs-nav a[href='#tabs-ob" + player_no + "']") ;
+    var $elem = $( "#tabs .ui-tabs-nav a[href='#tabs-ob" + player_no + "']" ) ;
     $elem.html(
         "<img src='" + image_url + "'>&nbsp;" +
         "<span>" + escapeHTML(display_name) + " OB</span>"
@@ -434,3 +435,36 @@ function update_ob_tab_header( player_no )
 
     return player_nat ;
 }
+
+// --------------------------------------------------------------------
+
+function on_tab_activate( evt, ui )
+{
+    function set_colors( tab_id, bgd, border ) {
+        var $elem = $("#tabs .ui-tabs-tab[aria-controls='" + tab_id + "']" ) ;
+        $elem.css( {
+            background: bgd,
+            border: "1px solid "+border,
+            "border-bottom": "none",
+        } ) ;
+        $("#"+tab_id).css( "border", "1px solid "+border ) ;
+    }
+
+    // style the tab being de-activated
+    var tab_id = ui.oldPanel.prop( "id" ) ;
+    set_colors( tab_id, "#f6f6f6", "#c5c5c5" ) ;
+
+    // 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 ;
+        set_colors( tab_id, "#"+colors[0], "#"+colors[1] ) ;
+    }
+    tab_id = ui.newPanel.prop( "id" ) ;
+    if ( tab_id === "tabs-ob1" )
+        set_colors_for_player( tab_id, 1 ) ;
+    else if ( tab_id === "tabs-ob2" )
+        set_colors_for_player( tab_id, 2 ) ;
+    else
+        set_colors( tab_id, "#ddd", "#ccc" ) ;
+}

vasl_templates/webapp/static/snippets.js

@@ -578,6 +578,7 @@ function do_load_scenario( params )
     }
 
     // update the UI
+    $("#tabs").tabs( "option", "active", 0 ) ;
     on_scenario_date_change() ;
 }
 
@@ -646,7 +647,6 @@ function on_new_scenario( verbose )
     }
 
     // provide some feedback to the user
-    $("#tabs").tabs( "option", "active", 0 ) ;
     if ( verbose )
         showInfoMsg( "The scenario was reset." ) ;
 }

vasl_templates/webapp/static/sortable.js

@@ -95,6 +95,22 @@ $.fn.sortable2 = function( action, args )
             if ( evt.ctrlKey )
                 delete_entry( $sortable2, $(this) ) ;
         } ) ;
+
+        // 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 ;
+            $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

@@ -255,3 +255,23 @@ function isIE()
         return true ;
     return false ;
 }
+
+// --------------------------------------------------------------------
+
+( function( scope ) {
+    // create a new stylesheet to hold our CSS rules
+    var style = document.createElement( "style" ) ;
+    document.head.appendChild( style ) ;
+    var stylesheet = style.sheet ;
+    scope.dynamic_css = function( sel, prop, val ) {
+        // add the rule
+        try {
+            stylesheet.insertRule(
+                sel + " {" + prop + ":" + val + "}",
+                stylesheet.cssRules.length
+            ) ;
+        } catch( ex ) {
+            console.log( "Couldn't add CSS style:", sel, prop, val ) ;
+        }
+    } ;
+} ) ( window ) ;

vasl_templates/webapp/static/vo.js

@@ -60,7 +60,7 @@ function do_add_vo( vo_type, player_no, entry )
     var $sortable2 = $( "#" + vo_type + "-sortable_" + player_no ) ;
     $sortable2.sortable2( "add", {
         content: $( "<div>" + entry.name + "</div>" ),
-        data: { caption: entry.name, vo_entry: entry }
+        data: { caption: entry.name, vo_entry: entry },
     } ) ;
 }
 

vasl_templates/webapp/templates/index.html

@@ -34,7 +34,6 @@
     <li> <a href="#tabs-scenario">Scenario</a>
     <li> <a href="#tabs-ob1">Player 1 OB</a>
     <li> <a href="#tabs-ob2">Player 2 OB</a>
-    <li> <a href="#tabs-other">Other</a>
 </ul>
 
 <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
@@ -200,15 +199,6 @@
 <div id="tabs-ob2"> <!-- nb: this will be created dynamically from the OB1 tab -->
 </div>
 
-<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
-
-<div id="tabs-other">
-    <div id="panel-other">
-        <fieldset>
-        </fieldset>
-    </div>
-</div>
-
 </div>
 
 <!-- ----------------------------------------------------------------- -->