From 7067c06961f5b4995c373739dc53f61c1c48ef6c Mon Sep 17 00:00:00 2001 From: Tony Garnock-Jones Date: Wed, 7 Dec 2016 19:19:32 +1300 Subject: [PATCH] Conversations --- examples/webchat/htdocs/speechbubble-l.png | Bin 0 -> 417 bytes examples/webchat/htdocs/speechbubble-l.svg | 85 ++++++ examples/webchat/htdocs/speechbubble-r.png | Bin 0 -> 500 bytes examples/webchat/htdocs/speechbubble-r.svg | 85 ++++++ examples/webchat/htdocs/style.css | 96 ++++++ .../templates/conversation-index-entry.html | 4 +- .../webchat/htdocs/templates/nav-account.html | 2 +- .../htdocs/templates/page-conversations.html | 151 +++++++++- .../htdocs/templates/page-new-chat.html | 2 +- .../templates/post-entry-text-plain.html | 6 + examples/webchat/htdocs/webchat.syndicate.js | 274 +++++++++++++++--- examples/webchat/server/conversation.rkt | 45 ++- examples/webchat/server/pages.rkt | 2 +- examples/webchat/server/protocol.rkt | 1 + 14 files changed, 692 insertions(+), 61 deletions(-) create mode 100644 examples/webchat/htdocs/speechbubble-l.png create mode 100644 examples/webchat/htdocs/speechbubble-l.svg create mode 100644 examples/webchat/htdocs/speechbubble-r.png create mode 100644 examples/webchat/htdocs/speechbubble-r.svg create mode 100644 examples/webchat/htdocs/templates/post-entry-text-plain.html diff --git a/examples/webchat/htdocs/speechbubble-l.png b/examples/webchat/htdocs/speechbubble-l.png new file mode 100644 index 0000000000000000000000000000000000000000..54e30d5428cb3d491505f4503fe5853d1460897e GIT binary patch literal 417 zcmeAS@N?(olHy`uVBq!ia0vp^0zfRn!3HE-lJ=GZDVAa<&kznEsNqQI0P;BtJR*yM z>aT+^qm#z$3ZS55iEBhjaDG}zd16s2LwR|*US?i)adKios$PCk`s{Z$QVa}?a-J@Z zAr`%Br)>0VaS(B3mvvU;6y#A9ZocoZ)IRBl!sGOa%*ST4U)V} zkHqY|I}%+RzkbPoxA*g@c-w5&(}tj`wNrj&-2Qg&v&|EWb2Xt}FOz32+q6nccj=X6HQ6`QmrU8E*rITH z(=*MiwS}Rf`ks?`7#6fAS_I84VPFt^{zo#o#*@QwS>`{@j5kH=;)7zZ`$tY&xoh3l zpjY9$?F+Y^Ui;kpUvbOi=@myj(`{M|#kdr=1)aL>>MFH)eNp7J)2nQ%QfmGA7#lRs z7YB;8zWe=eH+%8N+W)=9b*+Z?L|hk2CV&3d%xPX8dp&nQ!@pbr;7jp literal 0 HcmV?d00001 diff --git a/examples/webchat/htdocs/speechbubble-l.svg b/examples/webchat/htdocs/speechbubble-l.svg new file mode 100644 index 0000000..0366e92 --- /dev/null +++ b/examples/webchat/htdocs/speechbubble-l.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/examples/webchat/htdocs/speechbubble-r.png b/examples/webchat/htdocs/speechbubble-r.png new file mode 100644 index 0000000000000000000000000000000000000000..4284b99e2df7180508b423e85a13f8689f6263ac GIT binary patch literal 500 zcmV+6{4%7-u}K7cX40Fiqz!BPw)DpMxCOvi=6lv|J&fvlifYUU_W`$vV0mcIeg(9z!h;*FK zr{6bj;4TDV2U4jL@H{%0Oh#|*cK_Db25y0071q5HbQn zMhqe8(KIL3a=C1-wXj6zI1t4QBoYeeIP_#y$etT4YE{U-0Kc{BIIB}^cxx3k$Ct&f6wmq#XN^b6qYXR<$B#NnO zvAF-Ts&5Iv7zJG)f?<49gru8NDSzd)mNYKm`Pz1~%uP3_RvkV`+?X37NX%W#(f0000 + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/examples/webchat/htdocs/style.css b/examples/webchat/htdocs/style.css index f018ba5..f74c8b6 100644 --- a/examples/webchat/htdocs/style.css +++ b/examples/webchat/htdocs/style.css @@ -8,6 +8,29 @@ img.avatar { /* --------------------------------------------------------------------------- */ +.main-container { + display: flex; + height: 100vh; + flex-direction: column; +} + +#main-div { + flex: 1; + overflow: auto; +} + +.column-container { + display: flex; + flex-direction: column; +} + +.column-fill { + flex: 1; + overflow: auto; +} + +/* --------------------------------------------------------------------------- */ + .alert-count { background: red; color: white; @@ -73,3 +96,76 @@ img.avatar { position: relative; top: 0.5rem; } + +.blurb-box { +} + +.float-right { float: right; } + +.main-container footer { + padding-top: 1rem; + text-align: right; +} + +/* --------------------------------------------------------------------------- */ + +.conversation-control-panel { + font-size: 2rem; +} + +.post-backdrop { + overflow-y: scroll; +} + +.post { + margin: 20px; +} + +.post .post-body { + background: white; + border: solid #d3d3d3 1px; + border-radius: 1.5rem; + padding: 1rem; + margin: 0 0px; +} + +.post p { + margin-bottom: 0; +} + +.post.from-me .post-body { + background: #e8e8ff; + margin-left: 4rem; + margin-right: -1px; +} + +.post.to-me .post-body { + margin-left: -1px; + margin-right: 4rem; +} + +.post.from-me:after { + content: url('/speechbubble-r.png'); + position: relative; + /* left: 100%; */ + right: -100%; + top: -40px; + height: 0px; + width: 0px; + display: block; +} + +.post.to-me:after { + content: url('/speechbubble-l.png'); + position: relative; + left: -16px; + top: -40px; + height: 0px; + width: 0px; + display: block; +} + +.post-body > img { + max-width: 100%; + max-height: 100%; +} \ No newline at end of file diff --git a/examples/webchat/htdocs/templates/conversation-index-entry.html b/examples/webchat/htdocs/templates/conversation-index-entry.html index 3fde15f..6c91039 100644 --- a/examples/webchat/htdocs/templates/conversation-index-entry.html +++ b/examples/webchat/htdocs/templates/conversation-index-entry.html @@ -1,8 +1,8 @@
-
{{title}}
+
{{title}}{{^title}}Untitled{{/title}}
{{#members}} - {{.}} + {{/members}}
diff --git a/examples/webchat/htdocs/templates/nav-account.html b/examples/webchat/htdocs/templates/nav-account.html index dacdfa3..f00f729 100644 --- a/examples/webchat/htdocs/templates/nav-account.html +++ b/examples/webchat/htdocs/templates/nav-account.html @@ -3,7 +3,7 @@ {{questionCount}} {{email}} -