Fixed the layout for the "edit simple note" dialog.

vasl_templates/webapp/static/css/main.css

@@ -98,21 +98,14 @@ button.edit-template img { height: 18px ; vertical-align: middle ; }
 .ui-dialog-titlebar-close { margin-top: -10px !important ; }
 
 .ui-dialog.edit-template .ui-dialog-buttonpane { border: none ; padding: 0 ; font-size: 75% ; }
-#edit-template { padding: 2px ; }
+#edit-template { overflow: hidden ; padding: 2px ; }
 .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 button { margin: 0 0 0 5px ; padding: 0.1em 0.2em ; }
 
-.ui-dialog.edit-ssr .ui-dialog-titlebar { display: none ; }
-.ui-dialog.edit-ssr .ui-dialog-buttonpane { border: none ; padding: 0 ; font-size: 75% ; }
-#edit-ssr { padding: 2px ; }
-.ui-dialog.edit-ssr textarea { resize: none ; width: calc(100% - 4px) ; height: calc(100% - 1.25em) ; }
-.ui-dialog.edit-ssr button { margin: 0 0 0 5px ; padding: 0.1em 0.2em ; }
-
-.ui-dialog.edit-simple_note .ui-dialog-titlebar { display: none ; }
 .ui-dialog.edit-simple_note .ui-dialog-buttonpane { border: none ; padding: 0 ; font-size: 75% ; }
-#edit-simple_note { padding: 2px ; }
-.ui-dialog.edit-simple_note textarea { resize: none ; width: calc(100% - 4px) ; height: calc(100% - 3em) ; }
+#edit-simple_note { overflow: hidden ; padding: 2px ; }
+.ui-dialog.edit-simple_note textarea { resize: none ; width: calc(100% - 4px) ; height: 100% ; }
 .ui-dialog.edit-simple_note button { margin: 0 0 0 5px ; padding: 0.1em 0.2em ; }
 
 #select-vo { overflow: hidden ; }

vasl_templates/webapp/static/simple_notes.js

@@ -29,37 +29,33 @@ function _do_edit_simple_note( $sortable2, $entry )
     var note_type0 = note_type.substring( 0, note_type.length-1 ) ; // plural -> singular :-/
 
     // let the user edit the note
-    var $caption, $width, $width_label ;
+    var $caption, $width ;
     $("#edit-simple_note").dialog( {
         dialogClass: "edit-simple_note",
+        title: ($entry ? "Edit " : "Add ") + SORTABLE_DISPLAY_NAMES[note_type][0],
         modal: true,
         minWidth: 400,
         minHeight: 150,
         open: function() {
+            // initialize
             $caption = $(this).children( "textarea" ) ;
-            $width = $(this).children( "input[name='width']" ) ;
-            $width_label = $(this).children( "label[for='width']" ) ;
-            if ( $entry ) {
-                var data = $entry.data( "sortable2-data" ) ;
-                $caption.val( data.caption ) ;
-                $width.val( data.width ) ;
-            }
-            else {
-                $caption.val( "" ) ;
-                $width.val( "" ) ;
-            }
-            if ( note_type === "ssr" ) {
-                // NOTE: Individual SSR's don't have a width, there is one setting for them all.
-                $width.hide() ;
-                $width_label.hide() ;
-                $caption.css( "height", "100%" ) ;
+            var $btn_pane = $(".ui-dialog-buttonpane") ;
+            $width = $btn_pane.children( "input[name='width']" ) ;
+            if ( $width.length === 0 ) {
+                // create the width controls
+                $btn_pane.prepend( $("<label for='width'>Width:</label>&nbsp;<input name='width' size='5'>") ) ;
+                $width = $btn_pane.children( "input[name='width']" ) ;
             }
+            // show/hide the width controls (nb: SSR's have a separate width setting that affects all of them)
+            var show = (note_type !== "ssr") ;
+            $btn_pane.children( "label[for='width']" ).css( "display", show?"inline":"none" ) ;
+            $width.css( "display", show?"inline":"none" ) ;
+            // load the dialog
+            var data = $entry ? $entry.data("sortable2-data") : null ;
+            $caption.val( data ? data.caption : "" ) ;
+            $width.val( data ? data.width : "" ) ;
             $(this).height( $(this).height() ) ; // fudge: force the textarea to resize
-        },
-        close: function() {
-            $width.show() ;
-            $width_label.show() ;
-            $caption.css( "height", "calc(100% - 3em)" ) ;
+            $width.keydown( function(evt) { auto_dismiss_dialog( evt, "OK" ) ; } ) ;
         },
         buttons: {
             OK: function() {

vasl_templates/webapp/static/snippets.js

@@ -428,7 +428,6 @@ function edit_template( template_id )
         minWidth: 400, minHeight: 200,
         open: function() {
             $(this).height( $(this).height() ) ; // fudge: force the textarea to resize
-            $("#edit-template").css( "overflow", "hidden" ) ;
             $("#edit-template textarea").change( on_template_change ) ;
         },
         close: function() {

vasl_templates/webapp/static/sortable.js

@@ -1,3 +1,11 @@
+SORTABLE_DISPLAY_NAMES = {
+    scenario_notes: [ "scenario note", "scenario notes", "a" ],
+    ssr: [ "SSR", "SSR's", "a" ],
+    ob_setups: [ "OB setup note", "OB setup notes", "an" ],
+    ob_notes: [ "OB setup note", "OB setup notes", "an" ],
+    vehicles: [ "vehicle", "vehicles", "a" ],
+    ordnance: [ "ordnance", "ordnance", "an" ],
+} ;
 
 // --------------------------------------------------------------------
 
@@ -7,16 +15,22 @@ $.fn.sortable2 = function( action, args )
     var actions = {
 
         "init": function( $sortable2 ) {
+            // get the display name
+            var id = $sortable2.prop( "id" ) ;
+            var pos = id.indexOf( "-sortable" ) ;
+            var display_name = SORTABLE_DISPLAY_NAMES[id.substring(0,pos)] ;
             // initialize the sortable2 and support elements
             $sortable2.data( "on_edit", args.edit ) ;
             var $add_btn = find_helper( $sortable2, "add" ) ;
             $add_btn.prepend( $( "<div><img src='" + gImagesBaseUrl + "/sortable-add.png' class='sortable-add'> Add</div>" ) )
                 .addClass( "ui-button" ) ;
             var $add = find_helper( $sortable2, "add" ) ;
-            $add.click( args.add ) ;
+            $add.prop( "title", "Add a new " + display_name[0] )
+                .click( args.add ) ;
             // handle dragging entries to the trash
             var $trash = find_helper( $sortable2, "trash" ) ;
-            $trash.prop( "src", gImagesBaseUrl + "/trash.png" ) ;
+            $trash.prop( "src", gImagesBaseUrl + "/trash.png" )
+                .prop( "title", "Drag " + display_name[2] + " " + display_name[0] + " here to delete it." ) ;
             $sortable2.sortable( { connectWith: $trash, cursor: "move" } ) ;
             $trash.sortable( {
                 receive: function( evt, ui ) {

vasl_templates/webapp/static/utils.js

@@ -82,16 +82,19 @@ $.fn.filterByText = function( $textbox )
 function enable_ctrl_enter( $dlg, btn_text )
 {
     // allow Ctrl-Enter to dismiss a dialog
-    var dismiss_dialog = function( evt ) {
-        if ( evt.keyCode == 13 && evt.ctrlKey ) {
-            // locate the OK button (nb: we assume the dialog was created with a class the same as its ID)
-            var id = $(this).parent().prop( "id" ) ;
-            $( ".ui-dialog" + "."+id + " button:contains('"+btn_text+"')" ).click() ;
-            evt.preventDefault() ;
-        }
-    } ;
-    $dlg.find("input[type='text']").keydown( dismiss_dialog ) ;
-    $dlg.find("textarea").keydown( dismiss_dialog ) ;
+    $dlg.find("textarea").keydown( function(evt) {
+        auto_dismiss_dialog( evt, btn_text ) ;
+    } ) ;
+}
+
+function auto_dismiss_dialog( evt, btn_text )
+{
+    // check if the user pressed Ctrl-Enter
+    if ( evt.keyCode == 13 && evt.ctrlKey ) {
+        // yup - locate the target button and click it
+        $( ".ui-dialog-buttonpane button:contains('"+btn_text+"')" ).click() ;
+        evt.preventDefault() ;
+    }
 }
 
 // --------------------------------------------------------------------

vasl_templates/webapp/static/vo.js

@@ -29,7 +29,7 @@ function add_vo( vo_type, player_id )
 
     // let the user select a vehicle/ordnance
     $("#select-vo").dialog( {
-        title: "Add " + vo_type,
+        title: "Add " + SORTABLE_DISPLAY_NAMES[vo_type][0],
         dialogClass: "select-vo",
         modal: true,
         minWidth: 200,

vasl_templates/webapp/templates/index.html

@@ -218,7 +218,6 @@
 
 <div id="edit-simple_note" style="display:none;">
     <textarea></textarea>
-    <label for="width">Width:</label> <input name="width" type="text" size="5">
 </div>
 
 <div id="select-vo" style="display:none;">

vasl_templates/webapp/tests/utils.py

@@ -185,7 +185,7 @@ def edit_simple_note( sortable, entry_no, caption, width ):
         elem.clear()
         elem.send_keys( caption )
     if width is not None:
-        elem = find_child( "#edit-simple_note input[type='text']" )
+        elem = find_child( ".ui-dialog-buttonpane input[name='width']" )
         elem.clear()
         elem.send_keys( width )
     click_dialog_button( "OK" )