summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKevin Chabowski <kevin@kch42.de>2014-05-30 22:07:02 +0200
committerKevin Chabowski <kevin@kch42.de>2014-05-30 22:07:02 +0200
commit7a2601f657e04e90e63fe917bfa0726f7bf0eb8c (patch)
tree7bd26f246cc6e35bf68f332b3d991c4559b25b24
parent6fec6ea09435644ac3f55f4219024ab4e4d3fb67 (diff)
downloadsimplechat-7a2601f657e04e90e63fe917bfa0726f7bf0eb8c.tar.gz
simplechat-7a2601f657e04e90e63fe917bfa0726f7bf0eb8c.tar.bz2
simplechat-7a2601f657e04e90e63fe917bfa0726f7bf0eb8c.zip
Cooler frontend design!
-rw-r--r--static/chat.css194
-rw-r--r--static/chat.js101
-rw-r--r--tpls/chat.html14
3 files changed, 233 insertions, 76 deletions
diff --git a/static/chat.css b/static/chat.css
index ed56fca..3a834b9 100644
--- a/static/chat.css
+++ b/static/chat.css
@@ -2,11 +2,137 @@
font-family: sans-serif;
}
+body {
+ background: hsl(200, 90%, 85%);
+}
+
+#mainwrap {
+ position: fixed;
+ left: 2mm;
+ top: 2mm;
+ right: 2mm;
+ bottom: 2mm;
+}
+
+h1, #chatlogwrap, #buddiescontainer {
+ background: white;
+}
+
+#dialogoverlay {
+ position: fixed;
+ background: rgba(0,0,0,0.4);
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1000;
+}
+
+#dialoginner {
+ background: white;
+ margin: 10% auto 0;
+ width: 90%;
+ max-width: 120mm;
+ padding: 4mm 0 4mm;
+ border-radius: 4mm;
+}
+
+#dialoginner > div {
+ padding: 0 4mm 0;
+}
+
+#dialoginner .buttons {
+ margin: 1ex 0 0;
+ text-align: center;
+}
+
+#dialoginner button {
+ padding: 1ex 2ex 1ex;
+ background: #ddd;
+ border: none;
+ border-radius: 2mm;
+}
+
+#dialoginner button:hover {
+ cursor: pointer;
+ background: #eee;
+}
+#dialoginner input {
+ width: calc(100% - 2px);
+ border: 1px solid #aaa;
+}
+
+#dialoginner h2 {
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ border-bottom: 1px dotted hsl(200, 90%, 85%);
+ font-size: 16pt;
+ font-weight: normal;
+}
+
+#chatinput {
+ padding: 0;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+#chatinput input {
+ position: relative;
+ background: white;
+ border: none;
+ border-top-left-radius: 4mm;
+ border-bottom-left-radius: 4mm;
+ padding: 0 0 0 4mm;
+ height: 3em;
+ width: calc(100% - 4mm - 10ex);
+}
+#chatinput button {
+ position: relative;
+ background: white;
+ border-top-right-radius: 4mm;
+ border-bottom-right-radius: 4mm;
+ border: none;
+ border-left: 1px dotted hsl(200, 90%, 85%);
+ height: 3em;
+ text-align: center;
+ width: 10ex;
+}
+#chatinput button:hover {
+ background: #eee;
+ cursor: pointer;
+}
+
+::-webkit-input-placeholder { font-style: italic; }
+::-moz-placeholder { font-style: italic; }
+:-ms-input-placeholder { font-style: italic; }
+input:-moz-placeholder { font-style: italic; }
+
+#chatlogwrap {
+ position: absolute;
+ top: 13mm;
+ left: 0;
+ bottom: calc(3em + 1mm);
+ right: 40mm;
+ margin: 0;
+ border-radius: 4mm;
+}
+
#chatlog {
+ position: absolute;
+ margin: 0;
+ padding: 0;
display: table;
list-style: none;
- margin: 0;
- padding: 0
+ display: block;
+ top: 4mm;
+ left: 4mm;
+ right: 4mm;
+ bottom: 4mm;
+ overflow-y: auto;
+ overflow-x: hidden;
}
#chatlog li {
@@ -17,13 +143,13 @@
#chatlog li .nick {
display: table-cell;
- padding-right: 1ex;
+ padding-right: 0.5ex;
font-weight: bold;
- text-align: right;
}
#chatlog li .msg {
display: table-cell;
+ padding-left: 1ex;
}
#chatlog li.leave, #chatlog li.join, #chatlog li.leave .nick, #chatlog li.join .nick {
@@ -32,66 +158,40 @@
}
h1 {
+ border-radius: 4mm;
text-align: center;
- font-weight: bold;
+ margin: 0 0 1mm;
+ padding: 2mm 4mm 2mm;
+ font-weight: normal;
font-size: 18pt;
- margin: 0;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- border-bottom: 1px solid #28f;
height: 8mm;
- background: white;
}
#buddiescontainer {
- position: fixed;
- top: 0;
+ position: absolute;
+ top: 13mm;
+ bottom: calc(3em + 1mm);
right: 0;
- width: 35mm;
- margin: 10mm 0 12mm 0;
+ width: 39mm;
+ border-radius: 4mm;
+ padding: 4mm 0 4mm;
}
#buddiescontainer h2 {
- font-weight: bold;
+ font-weight: normal;
font-size: 12pt;
+ padding: 0 4mm 0;
+ margin: 0 0 2mm;
+ text-align: center;
+ border-bottom: 1px dotted hsl(200, 90%, 85%);
}
#buddies {
+ list-style: none;
margin: 0;
- padding: 0;
+ padding: 0 4mm 0;
}
#buddies li {
margin: 0;
padding: 0;
}
-
-#chatlog {
- margin: 10mm 40mm 12mm 0;
-}
-
-#chatinput {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- height: 10mm;
- border-top: 1px solid #28f;
-}
-
-#chatinput input {
- position: absolute;
- top: 0px;
- left: 0px;
- height: 8mm;
- width: calc(100% - 25mm);
-}
-
-#chatinput button {
- position: absolute;
- top: 0;
- right: 0;
- width: 20mm;
- bottom: 0;
-} \ No newline at end of file
diff --git a/static/chat.js b/static/chat.js
index 47cf6d3..65266bf 100644
--- a/static/chat.js
+++ b/static/chat.js
@@ -1,3 +1,55 @@
+function initGui(roomname) {
+ $("#nojs").remove();
+
+ var dialogoverlay = $("<div/>").prop("id", "dialogoverlay")
+ .append($("<div/>").prop("id", "dialoginner")
+ .append($("<h2/>"))
+ .append($("<div/>")
+ .append($("<p/>"))
+ .append($("<input/>"))
+ .append($("<div/>").addClass("buttons")))).hide();
+ var h1 = $("<h1/>").text("Chatroom ").append($("<span/>").css("font-style", "italic").text(roomname));
+ var chatlog = $("<div/>").prop("id", "chatlogwrap").append($("<ul/>").prop("id", "chatlog"));
+ var buddiescontainer = $("<section/>").prop("id", "buddiescontainer")
+ .append($("<h2/>").text("Buddies online"))
+ .append($("<ul/>").prop("id", "buddies"));
+ var chatinput = $("<section/>").prop("id", "chatinput")
+ .append($("<input/>").prop("name", "chattext").prop("id", "chattext").prop("type", "text").prop("placeholder", "Type to chat..."))
+ .append($("<button/>").prop("id", "sendbtn").text("Send"));
+ $("body").append(dialogoverlay);
+ $("#mainwrap")
+ .append(h1)
+ .append(chatlog)
+ .append(buddiescontainer)
+ .append(chatinput);
+}
+
+function mydialog(title, text, input, buttons) {
+ $("#dialoginner h2").text(title);
+ $("#dialoginner p").text(text);
+ var callcallback;
+ if(input === null) {
+ $("#dialoginner input").hide();
+ callcallback = function(cb) {cb();};
+ } else {
+ $("#dialoginner input").prop("placeholder", input).show();
+ callcallback = function(cb) {cb($("#dialoginner input").val());};
+ }
+
+ $("#dialoginner .buttons > *").remove();
+ var btncontainer = $("#dialoginner .buttons");
+
+ for(var i in buttons) {
+ var button = buttons[i];
+ btncontainer.append($("<button/>").text(button.text).click(function() {
+ $("#dialogoverlay").hide();
+ callcallback(button.callback);
+ }));
+ }
+
+ $("#dialogoverlay").show();
+}
+
function randomColor() {
var h = Math.floor(Math.random() * 360);
var s = Math.floor((Math.random() * 0.5 + 0.5)*100);
@@ -6,9 +58,17 @@ function randomColor() {
}
function askTryAgain(reason, ws_url) {
- if(confirm("Could not join chat (Reason: "+ reason +"). Try again?")) {
- window.setTimeout(RunChat, 1, ws_url); // We use a timeout, so we don't accidentally fill up the call stack.
- }
+ mydialog(
+ "Could not join",
+ "Could not Join chat (Reason: "+reason+")",
+ null,
+ [{
+ "text": "Try again",
+ "callback": (function() {
+ pickUsername(ws_url);
+ })
+ }]
+ );
}
var buddyColors = {};
@@ -57,14 +117,14 @@ function chatlogWriter(event) {
var elemText = $("<span/>").addClass("msg").text(msgtext);
var logentry = $("<li/>").addClass(data.type).append(elemNick).append(elemText);
$("#chatlog").append(logentry);
- window.scrollTo(0, logentry.offset().top);
+ logentry.get()[0].scrollIntoView();
}
function initChatSender(ws) {
var send = function() {
var ct = $("#chattext")
- ws.send(ct.prop("value"));
- ct.prop("value","");
+ ws.send(ct.val());
+ ct.val("");
ct.focus();
};
@@ -83,13 +143,14 @@ function Join(ws_url, nick) {
ws.onmessage = function(event) {
var data = JSON.parse(event.data);
if(data.ok) {
+ $("#chatinput").show();
ws.onmessage = chatlogWriter;
- for(i in data.buddies) {
+ for(var i in data.buddies) {
addBuddy(data.buddies[i]);
}
initChatSender(ws);
ws.onclose = function(_) {
- alert("Connection lost. Try refreshing the page.");
+ mydialog("Connection lost", "Connection to server lost. Try refreshing the page", null, []);
};
} else {
ws.close();
@@ -99,13 +160,19 @@ function Join(ws_url, nick) {
};
}
-function RunChat(ws_url) {
- var nick = "";
- while(nick == "") {
- nick = prompt("Choose a nickname");
- if(nick === null) {
- return;
- }
- }
- Join(ws_url, nick);
+function RunChat(ws_url, roomname) {
+ initGui(roomname);
+ pickUsername(ws_url);
+}
+
+function pickUsername(ws_url) {
+ mydialog(
+ "Pick a username",
+ "Pick a username to join the chat",
+ "username",
+ [{
+ "text": "OK",
+ "callback": (function(nick) {Join(ws_url, nick);})
+ }]
+ );
}
diff --git a/tpls/chat.html b/tpls/chat.html
index db34aaa..b4217f1 100644
--- a/tpls/chat.html
+++ b/tpls/chat.html
@@ -4,20 +4,10 @@
<title>{{.Roomname}}</title>
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/chat.js"></script>
- <script type="text/javascript">$("document").ready(function(){RunChat("{{.Websock}}");});</script>
+ <script type="text/javascript">$("document").ready(function(){RunChat("{{.Websock}}", "{{.Roomname}}");});</script>
<link rel="stylesheet" type="text/css" href="/static/chat.css" />
</head>
<body>
-
- <h1>{{.Roomname}}</h1>
- <div id="buddiescontainer">
- <h2>Users online</h2>
- <ul id="buddies"></ul>
- </div>
- <ul id="chatlog"></ul>
- <div id="chatinput">
- <input type="text" name="chattext" id="chattext"/>
- <button id="sendbtn">Chat</button>
- </div>
+ <div id="mainwrap"><section id="nojs">simplechat needs javascript to work. If you can see this message, you probably have javascript disabled. Please activate it for this site.</section></div>
</body>
</html>