Resize/Reword headings and open/close for the options cog

evennia/web/webclient/static/webclient/js/plugins/clienthelp.js

@@ -9,10 +9,10 @@ let clienthelp_plugin = (function () {
     //
     var onOptionsUI = function (parentdiv) {
         var help_text = $( [
-            "<h3>Welcome to Evennia.</h3>",
-            "<div>This client supports a bunch of features, including<div>",
-            "<div>drag-and-drop window placement, multiple input windows, and per-window message routing.</div>",
-            "<div>To get the full details, go to: <a href='http://evennia.com'>Evennia.com</a></div><br>",
+            "<div style='font-weight: bold;'>",
+                "<a href='http://evennia.com'>Evennia</a>",
+                " Webclient Settings:",
+            "</div>"
         ].join(""));
         parentdiv.append(help_text);
     }

evennia/web/webclient/static/webclient/js/plugins/font.js

@@ -37,7 +37,7 @@ let font_plugin = (function () {
         }
 
         fontselect.val('DejaVu Sans Mono'); // default value
-        sizeselect.val('9'); // default value
+        sizeselect.val('0.9'); // default scaling factor
 
         // font-family change callback
         fontselect.on('change', function () {
@@ -50,7 +50,7 @@ let font_plugin = (function () {
         });
 
         // add the font selection dialog control to our parentdiv
-        parentdiv.append('<h3>Font Selection:</h3>');
+        parentdiv.append('<div style="font-weight: bold">Font Selection:</div>');
         parentdiv.append(fontselect);
         parentdiv.append(sizeselect);
     }

evennia/web/webclient/static/webclient/js/plugins/iframe.js

@@ -40,10 +40,10 @@ let iframe = (function () {
     // Public
 
     var onOptionsUI = function (parentdiv) {
-        var iframebutton = $('<input type="button" value="open new iframe" />');
+        var iframebutton = $('<input type="button" value="Open Game Website" />');
 	iframebutton.on('click', onOpenIframe);
 
-        parentdiv.append( '<h3>Browser iFrame:</h3>' );
+        parentdiv.append( '<div style="font-weight: bold">Restricted Browser-in-Browser:</div>' );
         parentdiv.append( iframebutton );
     }
 

evennia/web/webclient/static/webclient/js/plugins/message_routing.js

@@ -63,7 +63,7 @@ let spawns = (function () {
 	    onNewRegexRow(div, regex, spawnmap[regex] );
 	}
 
-	parentdiv.append('<h3>Message Routing:</h3>');
+	parentdiv.append('<div style="font-weight: bold">Message Routing:</div>');
 	parentdiv.append(div);
     }
 

evennia/web/webclient/static/webclient/js/plugins/options2.js

@@ -4,6 +4,8 @@
  */
 let options2 = (function () {
 
+    var options_container = null ;
+
     var onGagPrompt = function () { console.log('gagprompt') }
     var onNotifyPopup = function () { console.log('notifypopup') }
     var onNotifySound = function () { console.log('notifysound') }
@@ -30,6 +32,7 @@ let options2 = (function () {
 
         myLayout.registerComponent( "options", function (container, componentState) {
             var plugins = window.plugins;
+            options_container = container.getElement();
 
             // build the buttons
             var div = $("<div class='accordion' style='overflow-y:scroll; height:inherit;'>");
@@ -46,13 +49,13 @@ let options2 = (function () {
                 }
             }
 
-            div.appendTo( container.getElement() );
+            div.appendTo( options_container );
         });
     }
 
 
     // handler for the "Options" button
-    var onOpenOptions = function () {
+    var onOpenCloseOptions = function () {
         var optionsComponent = {
             title: "Options",
             type: "component",
@@ -63,8 +66,27 @@ let options2 = (function () {
 
         // Create a new GoldenLayout tab filled with the optionsComponent above
         var myLayout = window.plugins["goldenlayout"].getGL();
-        var main = myLayout.root.getItemsByType("stack")[0].getActiveContentItem();
-        main.parent.addChild( optionsComponent ); 
+        if( ! options_container ) {
+            // open new optionsComponent
+            var main = myLayout.root.getItemsByType("stack")[0].getActiveContentItem();
+
+            myLayout.on( 'tabCreated', function( tab ) {
+                if( tab.contentItem.componentName == "options" ) {
+                    tab
+                    .closeElement
+                    .off('click')
+                    .click( function () {
+                        options_container = null;
+                        tab.contentItem.remove();
+                    });
+                    options_container = tab.contentItem;
+                }
+            });
+            main.parent.addChild( optionsComponent );
+        } else {
+            options_container.remove();
+            options_container = null;
+        }
     }
 
     // Public
@@ -88,7 +110,7 @@ let options2 = (function () {
         if( window.plugins["goldenlayout"] ) {
             createOptionsComponent();
 
-            $("#optionsbutton").bind("click", onOpenOptions);
+            $("#optionsbutton").bind("click", onOpenCloseOptions);
         }
         console.log('Options2 Loaded');
     }