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

This commit is contained in:
Brenden Tuck 2020-01-19 00:01:11 -05:00
parent 04e89bba37
commit 6c49ebfc4d
5 changed files with 36 additions and 14 deletions

View file

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

View file

@ -37,7 +37,7 @@ let font_plugin = (function () {
} }
fontselect.val('DejaVu Sans Mono'); // default value fontselect.val('DejaVu Sans Mono'); // default value
sizeselect.val('9'); // default value sizeselect.val('0.9'); // default scaling factor
// font-family change callback // font-family change callback
fontselect.on('change', function () { fontselect.on('change', function () {
@ -50,7 +50,7 @@ let font_plugin = (function () {
}); });
// add the font selection dialog control to our parentdiv // 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(fontselect);
parentdiv.append(sizeselect); parentdiv.append(sizeselect);
} }

View file

@ -40,10 +40,10 @@ let iframe = (function () {
// Public // Public
var onOptionsUI = function (parentdiv) { 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); 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 ); parentdiv.append( iframebutton );
} }

View file

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

View file

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