Add initial markup for inviting someone to a room. updates #215

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;

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;

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>