Minor UI changes.

vasl_templates/server_settings.py

@@ -9,7 +9,7 @@ from PyQt5.QtGui import QIcon
 from vasl_templates.main import app_settings
 from vasl_templates.main_window import MainWindow
 from vasl_templates.webapp.config.constants import DATA_DIR
-from vasl_templates.webapp.file_server.vasl_mod import VaslMod
+from vasl_templates.webapp.file_server.vasl_mod import VaslMod, SUPPORTED_VASL_MOD_VERSIONS_DISPLAY
 from vasl_templates.webapp.files import install_vasl_mod
 
 # ---------------------------------------------------------------------
@@ -38,6 +38,9 @@ class ServerSettingsDialog( QDialog ):
 
         # load the current server settings
         self.vasl_mod.setText( app_settings.value( "ServerSettings/vasl-mod" ) )
+        self.vasl_mod.setToolTip(
+            "Supported versions: {}".format( SUPPORTED_VASL_MOD_VERSIONS_DISPLAY )
+        )
 
     def on_select_vasl_mod( self ):
         """Let the user select a VASL module."""

vasl_templates/ui/server_settings.ui

@@ -9,7 +9,7 @@
    <rect>
     <x>0</x>
     <y>0</y>
-    <width>400</width>
+    <width>500</width>
     <height>90</height>
    </rect>
   </property>

vasl_templates/webapp/file_server/vasl_mod.py

@@ -12,6 +12,7 @@ _logger = logging.getLogger( "vasl_mod" )
 from vasl_templates.webapp.file_server.utils import get_vo_gpids, get_effective_gpid
 
 SUPPORTED_VASL_MOD_VERSIONS = [ "6.3.3", "6.4.0", "6.4.1", "6.4.2", "6.4.3" ]
+SUPPORTED_VASL_MOD_VERSIONS_DISPLAY = "6.3.3, 6.4.0-6.4.3"
 
 # ---------------------------------------------------------------------
 

vasl_templates/webapp/static/css/main.css

@@ -6,7 +6,7 @@ body { font-family: Arial, Helvetica, sans-serif ; font-size: 16px ; }
 
 ul, ol { margin: 0.5em 0 0 1.25em ; }
 
-input[type="text"] { height: 20px ; border: 1px solid #c5c5c5 ; }
+input[type="text"] { height: 20px ; border: 1px solid #c5c5c5 ; padding: 0 2px ; }
 label { height: 1.25em ; margin-top: -3px ; }
 
 /* -------------------------------------------------------------------- */
@@ -37,7 +37,7 @@ button.edit-template { height: 30px ; padding: 4px 10px ; }
 button.edit-template img { height: 18px ; vertical-align: middle ; margin-right: 0.25em ; }
 
 .ui-dialog-titlebar { padding: 0.2em 0.5em 0.2em 0.5em !important ; }
-.ui-dialog-titlebar img.flag { height: 1em ; margin-right: 0.25em ; }
+.ui-dialog-titlebar img.flag { height: 0.9em ; margin-right: 0.25em ; }
 .ui-dialog-titlebar-close { margin-top: -10px !important ; }
 .ui-dialog-content p { margin-bottom: 0.5em ; }
 .ui-dialog-buttonpane button.ok { background: #ddd ; }

vasl_templates/webapp/static/css/user-settings-dialog.css

@@ -1,4 +1,6 @@
 .ui-dialog.user-settings .ui-dialog-titlebar { background: #80d0ff ; }
 .ui-dialog.user-settings .ui-dialog-buttonpane { border: none ; padding: 0 ; font-size: 75% ; }
 
-.ui-dialog.user-settings .note { font-size: 80% ; font-style: italic ; color: #666 ; }
+.ui-dialog.user-settings fieldset { border-radius: 0 ; }
+.ui-dialog.user-settings .run-as-server-note { margin-bottom: 0.5em ; font-size: 80% ; font-style: italic ; color: #666 ; }
+.ui-dialog.user-settings .run-as-server-note img { float: left ; margin-right: 0.25em ; }

vasl_templates/webapp/static/simple_notes.js

@@ -48,7 +48,7 @@ function _do_edit_simple_note( $sortable2, $entry, default_width )
             $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'>") ) ;
+                $btn_pane.prepend( $("<label for='width'>Width:</label>&nbsp;<input type='text' 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)

vasl_templates/webapp/static/user_settings.js

@@ -37,33 +37,20 @@ function user_settings()
         unload_droplist: function( $elem ) { return $elem.children(":selected").val() ; },
     } ;
 
-    function update_ui() {
-        // update the UI
-        var $dlg = $( ".ui-dialog.user-settings" ) ;
-        var is_server = $dlg.find( "input[name='include-vasl-images-in-snippets']" ).prop( "checked" ) ||
-                        $dlg.find( "input[name='include-flags-in-snippets']" ).prop( "checked" ) ;
-        $dlg.find( ".include-vasl-images-in-snippets-hint" ).css(
-            "color", is_server ? "#444" : "#aaa"
-        ) ;
-    }
-
     // show the "user settings" dialog
     $( "#user-settings" ).dialog( {
         title: "User settings",
         dialogClass: "user-settings",
         modal: true,
-        width: 450,
-        height: 200,
+        width: 400,
+        height: 270,
         resizable: false,
         create: function() {
             init_dialog( $(this), "OK", false ) ;
-            $(this).find( "input[name='include-vasl-images-in-snippets']" ).change( update_ui ) ;
-            $(this).find( "input[name='include-flags-in-snippets']" ).change( update_ui ) ;
         },
         open: function() {
             // load the current user settings
             load_settings( $(this) ) ;
-            update_ui() ;
         },
         buttons: {
             OK: function() {

vasl_templates/webapp/templates/user-settings-dialog.html

@@ -9,10 +9,13 @@
 
     <br><br>
 
-    <div>
+    <fieldset> <legend> Provide services to VASL </legend>
+        <div class="run-as-server-note">
+            <img src="{{url_for('static',filename='images/info.gif')}}">
+            If you enable any of these options, this program must be running before you load the scenario in VASL.
+        </div>
         <input type="checkbox" name="include-vasl-images-in-snippets">&nbsp;Include VASL images in snippets <br>
         <input type="checkbox" name="include-flags-in-snippets">&nbsp;Include flags in snippets
-        <div class="note include-vasl-images-in-snippets-hint" style="margin-left:20px;">This program must be running before you load the scenario in VASL.</div>
-    </div>
+    </fieldset>
 
 </div>