From 28827428e734b9d9e363eae03f40077898959c8f Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Tue, 26 Aug 2014 19:41:47 +0200
Subject: [PATCH] Add initial markup for inviting someone to a room. updates
 #215

---
 css/converse.css   | 12 ++++++++++++
 less/converse.less | 15 +++++++++++++++
 mockup/index.html  |  4 ++++
 3 files changed, 31 insertions(+)

diff --git a/css/converse.css b/css/converse.css
index 71b00da6e..5352c4d6c 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -571,6 +571,18 @@ span.spinner.hor_centered {
   border-bottom-right-radius: 4px;
   height: 100%;
 }
+#conversejs .chatroom div.participants label {
+  font-style: italic;
+}
+#conversejs .chatroom label {
+  margin-left: 2px;
+  font-size: 12px;
+}
+#conversejs .chatroom #invited-contact {
+  margin: 1px;
+  margin-top: 2px;
+  width: 92px;
+}
 #conversejs .participants ul.participant-list li {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/less/converse.less b/less/converse.less
index edabc5f3c..5821a7257 100644
--- a/less/converse.less
+++ b/less/converse.less
@@ -614,6 +614,21 @@ span.spinner.hor_centered {
     height: 100%;
 }
 
+#conversejs .chatroom div.participants label {
+    font-style: italic;
+}
+
+#conversejs .chatroom label {
+    margin-left:2px;
+    font-size: 12px;
+}
+
+#conversejs .chatroom #invited-contact {
+    margin: 1px;
+    margin-top: 2px;
+    width: 92px;
+}
+
 #conversejs .participants ul.participant-list li {
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/mockup/index.html b/mockup/index.html
index f21b99cb7..b1af519ab 100644
--- a/mockup/index.html
+++ b/mockup/index.html
@@ -401,6 +401,10 @@
                     </form>
                 </div>
                 <div class="participants">
+                    <form class="room-invite">
+                        <input id="invited-contact" placeholder="Invite someone" type="text"/>
+                    </form>
+                    <label>Participants:</label>
                     <ul class="participant-list">
                         <li class="participant" title="This user can send messages in this room">Obi-wan Kenobi, Jedi Master</li>
                         <li class="participant" title="This user can send messages in this room">jabber the hut</li>