Initial work on the new chatroom modal

This commit is contained in:
JC Brand 2018-02-21 16:59:16 +01:00
parent b5812e257d
commit d9709af7cf
6 changed files with 83 additions and 24 deletions

View File

@ -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 {

View File

@ -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 {

View File

@ -385,18 +385,18 @@ 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
* overridden or relied upon, and therefore need to be loaded before
* this plugin. They are called "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.
* If the setting "strict_plugin_dependencies" is set to true,
* an error will be raised if the plugin is not found.
*/
/* Dependencies are other plugins which might be
* overridden or relied upon, and therefore need to be loaded before
* 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 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.
*/
'dependencies': [],
/* Converse.js's plugin mechanism will call the initialize

View File

@ -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,19 +151,12 @@
<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">
<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">
</div>
<div class="form-group">
<label for="server">Server</label>
<input type="text" name="server" class="form-control" placeholder="Server">
</div>
<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>
</div>
</div>
</div>
</div>

View File

@ -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;

View File

@ -0,0 +1,22 @@
<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>