Added a (non-functional) options dialog.

evennia/web/webclient/static/webclient/css/webclient.css

@@ -156,6 +156,26 @@ div {margin:0px;}
     padding: 0 .45em;
 }
 
+#optionsbutton {
+    width: 40px;
+    font-size: 20px;
+    color: #a6a6a6;
+    background-color: transparent;
+    border: 0px;
+}
+
+#optionsbutton:hover {
+    color: white;
+    cursor: pointer;
+}
+
+#toolbar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 1;
+}
+
 /* No javascript warning */
 #connecting {
     position: absolute;
@@ -163,6 +183,51 @@ div {margin:0px;}
     padding: .5em .9em
 }
 
+/* Dialog window */
+.dialog {
+    display: none;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -75%);
+    position: absolute;
+    z-index: 10;
+    background-color: #fefefe;
+    border: 1px solid #888;
+    width: 50%;
+    color: black;
+
+}
+
+.dialogcontent {
+    padding: 20px;
+}
+
+.dialogtitle {
+    border-bottom: 1px solid #888;
+    padding: 10px 20px;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: move;
+    font-weight: bold;
+    font-size: 16px;
+    background-color: #d9d9d9;
+}
+
+.dialogclose {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.dialogclose:hover, .dialogclose:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
 /* XTERM256 colors */
 
 .color-000 { color: #000000; }

evennia/web/webclient/static/webclient/js/webclient_gui.js

@@ -107,6 +107,23 @@ function doSendText() {
     }
 }
 
+// Opens the settings dialog
+function doOpenSettings() {
+    if (!Evennia.isConnected()) {
+        alert("You need to be connected.");
+        return;
+    }
+    
+    var optionsdialog = $("#optionsdialog");
+    optionsdialog.show();
+}
+
+// Closes the currently open dialog
+function doCloseDialog(event) {
+    var dialog = $(event.target).closest(".dialog");
+    dialog.hide();
+}
+
 // catch all keyboard input, handle special chars
 function onKeydown (event) {
     var code = event.which;
@@ -300,6 +317,31 @@ function onNewLine(text, originator) {
   }
 }
 
+// User clicked on a dialog to drag it
+function doStartDragDialog(event) {
+    var dialog = $(event.target).closest(".dialog");
+    dialog.css('cursor', 'move');
+    
+    var position = dialog.offset();
+    var diffx = event.pageX;
+    var diffy = event.pageY;
+    
+    var drag = function(event) {
+        var y = position.top + event.pageY - diffy;
+        var x = position.left + event.pageX - diffx;
+        dialog.offset({top: y, left: x});
+    };
+    
+    var undrag = function() {
+        $(document).unbind("mousemove", drag);
+        $(document).unbind("mouseup", undrag);
+        dialog.css('cursor', '');
+    }
+    
+    $(document).bind("mousemove", drag);
+    $(document).bind("mouseup", undrag);
+}
+
 //
 // Register Events
 //
@@ -332,7 +374,16 @@ $(document).ready(function() {
 
     // Pressing the send button
     $("#inputsend").bind("click", doSendText);
+    
+    // Pressing the settings button
+    $("#optionsbutton").bind("click", doOpenSettings);
 
+    // Pressing the close button on a dialog
+    $(".dialogclose").bind("click", doCloseDialog);
+    
+    // Makes dialogs draggable
+    $(".dialogtitle").bind("mousedown", doStartDragDialog);
+        
     // This is safe to call, it will always only
     // initialize once.
     Evennia.init();
@@ -361,6 +412,8 @@ $(document).ready(function() {
     },
     60000*3
     );
+    
+    
 });
 
 })();

evennia/web/webclient/templates/webclient/webclient.html

@@ -10,6 +10,9 @@
 {% block client %}
 
 <div id="wrapper">
+    <div id="toolbar">
+        <button id="optionsbutton" type="button">&#x2699;</button>
+    </div>
     <div id="messagewindow" role="log"></div>
     <div id="inputform">
         <div id="prompt"></div>
@@ -21,5 +24,18 @@
     <div id="inputsizer"></div>
 </div>
 
+<div id="optionsdialog" class="dialog">
+    <div class="dialogtitle">Options<span class="dialogclose">&times;</span></div>
+    <div class="dialogcontent">
+        <h3>Output display</h3>
+        <label><input type="checkbox" name="checkbox" value="value">Gag prompts from output</label><br />
+        <label><input type="checkbox" name="checkbox" value="value">Help in popup window</label><br />
+        <hr />
+        <h3>Notifications</h3>
+        <label><input type="checkbox" name="checkbox" value="value">Popup window</label><br />
+        <label><input type="checkbox" name="checkbox" value="value">Sound</label><br />
+        
+    </div>
+</div>
 {% endblock %}