diff --git a/evennia/web/webclient/static/webclient/css/webclient.css b/evennia/web/webclient/static/webclient/css/webclient.css index bb7ffcd26a..da47c527a2 100644 --- a/evennia/web/webclient/static/webclient/css/webclient.css +++ b/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; } diff --git a/evennia/web/webclient/static/webclient/js/webclient_gui.js b/evennia/web/webclient/static/webclient/js/webclient_gui.js index 1e706840c9..2d20582da6 100644 --- a/evennia/web/webclient/static/webclient/js/webclient_gui.js +++ b/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 ); + + }); })(); diff --git a/evennia/web/webclient/templates/webclient/webclient.html b/evennia/web/webclient/templates/webclient/webclient.html index 404a80f802..3f94e7c872 100644 --- a/evennia/web/webclient/templates/webclient/webclient.html +++ b/evennia/web/webclient/templates/webclient/webclient.html @@ -10,6 +10,9 @@ {% block client %}