Initial work on the new chatroom modal

css/converse.css

@@ -4739,6 +4739,20 @@ body.reset {
     color: #A8ABA1; }
   #conversejs ::placeholder {
     color: #A8ABA1; }
+  #conversejs .form-control::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: #A8ABA1; }
+  #conversejs .form-control::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #A8ABA1; }
+  #conversejs .form-control:-ms-input-placeholder {
+    /* IE 10+ */
+    color: #A8ABA1; }
+  #conversejs .form-control:-moz-placeholder {
+    /* Firefox 18- */
+    color: #A8ABA1; }
+  #conversejs .form-control::placeholder {
+    color: #A8ABA1; }
   #conversejs ::selection {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {

css/inverse.css

@@ -4739,6 +4739,20 @@ body.reset {
     color: #A8ABA1; }
   #conversejs ::placeholder {
     color: #A8ABA1; }
+  #conversejs .form-control::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: #A8ABA1; }
+  #conversejs .form-control::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #A8ABA1; }
+  #conversejs .form-control:-ms-input-placeholder {
+    /* IE 10+ */
+    color: #A8ABA1; }
+  #conversejs .form-control:-moz-placeholder {
+    /* Firefox 18- */
+    color: #A8ABA1; }
+  #conversejs .form-control::placeholder {
+    color: #A8ABA1; }
   #conversejs ::selection {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {

docs/source/plugin_development.rst

@@ -385,15 +385,15 @@ generated by `generator-conversejs <https://github.com/jcbrand/generator-convers
         // The following line registers your plugin.
         converse.plugins.add("myplugin", {
 
-            /* Optional dependencies are other plugins which might be
+            /* Dependencies are other plugins which might be
              * overridden or relied upon, and therefore need to be loaded before
-               * this plugin. They are called "optional" because they might not be
+             * this plugin. They are "optional" because they might not be
              * available, in which case any overrides applicable to them will be
              * ignored.
              *
              * NB: These plugins need to have already been loaded via require.js.
              *
-               * It's possible to make optional dependencies non-optional.
+             * It's possible to make these dependencies "non-optional".
              * If the setting "strict_plugin_dependencies" is set to true,
              * an error will be raised if the plugin is not found.
              */

mockup/modals.html

@@ -143,7 +143,7 @@
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="chatroomsModalLabel">New Chatroom</h5>
+                <h5 class="modal-title" id="chatroomsModalLabel">Enter a new Chatroom</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -151,18 +151,11 @@
             <div class="modal-body">
                 <form class="pure-form pure-form-stacked converse-form add-chatroom">
                     <div class="form-group">
-                        <label for="chatroom">Room name</label>
-                        <input type="text" name="chatroom" class="form-control" placeholder="Room name">
-                    </div>
-                    <div class="form-group">
-                        <label for="server">Server</label>
-                        <input type="text" name="server" class="form-control" placeholder="Server">
-                    </div>
+                        <label for="chatroom">Room address</label>
+                        <input type="text" name="chatroom" class="form-control" placeholder="room@conference.example.org">
                         <input type="submit" class="btn btn-primary" name="join" value="Join">
-                </form>
                     </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                </form>
             </div>
         </div>
     </div>

sass/_core.scss

@@ -36,10 +36,26 @@ body.reset {
     :-moz-placeholder { /* Firefox 18- */
         color: $subdued-color;
     }
-
     ::placeholder {
         color: $subdued-color;
     }
+    .form-control {
+        &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+            color: $subdued-color;
+        }
+        &::-moz-placeholder { /* Firefox 19+ */
+            color: $subdued-color;
+        }
+        &:-ms-input-placeholder { /* IE 10+ */
+            color: $subdued-color;
+        }
+        &:-moz-placeholder { /* Firefox 18- */
+            color: $subdued-color;
+        }
+        &::placeholder {
+            color: $subdued-color;
+        }
+    }
 
     ::selection {
         background-color: $highlight-color;

src/templates/add_chatroom_modal.html

+<div class="modal fade" id="chatroomsModal" tabindex="-1" role="dialog" aria-labelledby="chatroomsModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title"
+                    id="chatroomsModalLabel">{{{o.heading_new_chatroom}}}</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form class="pure-form pure-form-stacked converse-form add-chatroom">
+                    <div class="form-group">
+                        <label for="chatroom">Room address</label>
+                        <input type="text" name="chatroom" class="form-control" placeholder="name@conference.example.org">
+                    </div>
+                    <input type="submit" class="btn btn-primary" name="join" value="Join">
+                </form>
+            </div>
+        </div>
+    </div>
+</div>