More work on the "add chatroom" modal. Working now.
This commit is contained in:
parent
224e1eee29
commit
e143c88475
2
Makefile
2
Makefile
@ -132,7 +132,7 @@ dev: stamp-bundler stamp-npm
|
|||||||
## Builds
|
## Builds
|
||||||
|
|
||||||
.PHONY: css
|
.PHONY: css
|
||||||
css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css
|
css: dev sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css
|
||||||
|
|
||||||
css/inverse.css:: stamp-bundler sass sass/*.scss
|
css/inverse.css:: stamp-bundler sass sass/*.scss
|
||||||
$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse/inverse.scss css/inverse.css
|
$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse/inverse.scss css/inverse.css
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box; }
|
box-sizing: border-box; }
|
||||||
#conversejs.converse-embedded form.pure-form.converse-centered-form {
|
#conversejs.converse-embedded form.converse-centered-form {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30%;
|
top: 30%;
|
||||||
transform: translateY(-50%); }
|
transform: translateY(-50%); }
|
||||||
|
@ -4773,7 +4773,7 @@ body.reset {
|
|||||||
height: auto; }
|
height: auto; }
|
||||||
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
|
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
|
||||||
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
|
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
|
||||||
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
|
#conversejs fieldset, #conversejs form, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
|
||||||
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
|
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
|
||||||
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
|
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
|
||||||
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
|
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
|
||||||
@ -5016,8 +5016,6 @@ body.reset {
|
|||||||
border-radius: 25%; }
|
border-radius: 25%; }
|
||||||
#conversejs .activated {
|
#conversejs .activated {
|
||||||
display: block !important; }
|
display: block !important; }
|
||||||
#conversejs .pure-form-message {
|
|
||||||
padding: 0.5em 0; }
|
|
||||||
#conversejs .button-primary {
|
#conversejs .button-primary {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #3AA569; }
|
background-color: #3AA569; }
|
||||||
@ -5032,46 +5030,44 @@ body.reset {
|
|||||||
right: 0.2em;
|
right: 0.2em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.75rem; }
|
font-size: 0.75rem; }
|
||||||
#conversejs form.pure-form.converse-form {
|
#conversejs form.converse-form {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 1em; }
|
padding: 1em; }
|
||||||
#conversejs form.pure-form.converse-form legend {
|
#conversejs form.converse-form legend {
|
||||||
color: #777;
|
color: #777;
|
||||||
font-size: 125%;
|
font-size: 125%;
|
||||||
margin-bottom: 1.5em; }
|
margin-bottom: 1.5em; }
|
||||||
#conversejs form.pure-form.converse-form input[type=checkbox] {
|
#conversejs form.converse-form input[type=checkbox] {
|
||||||
display: block; }
|
display: block; }
|
||||||
#conversejs form.pure-form.converse-form select,
|
#conversejs form.converse-form select,
|
||||||
#conversejs form.pure-form.converse-form input[type=password],
|
#conversejs form.converse-form input[type=password],
|
||||||
#conversejs form.pure-form.converse-form input[type=number],
|
#conversejs form.converse-form input[type=number],
|
||||||
#conversejs form.pure-form.converse-form input[type=text] {
|
#conversejs form.converse-form input[type=text] {
|
||||||
min-width: 50%; }
|
min-width: 50%; }
|
||||||
#conversejs form.pure-form.converse-form label {
|
#conversejs form.converse-form input[type=text],
|
||||||
font-size: 16px; }
|
#conversejs form.converse-form input[type=password],
|
||||||
#conversejs form.pure-form.converse-form input[type=text],
|
#conversejs form.converse-form input[type=number],
|
||||||
#conversejs form.pure-form.converse-form input[type=password],
|
#conversejs form.converse-form input[type=button],
|
||||||
#conversejs form.pure-form.converse-form input[type=number],
|
#conversejs form.converse-form input[type=submit] {
|
||||||
#conversejs form.pure-form.converse-form input[type=button],
|
|
||||||
#conversejs form.pure-form.converse-form input[type=submit] {
|
|
||||||
padding: 0.5em; }
|
padding: 0.5em; }
|
||||||
#conversejs form.pure-form.converse-form input[type=button],
|
#conversejs form.converse-form input[type=button],
|
||||||
#conversejs form.pure-form.converse-form input[type=submit] {
|
#conversejs form.converse-form input[type=submit] {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
border: none; }
|
border: none; }
|
||||||
#conversejs form.pure-form.converse-form input.error {
|
#conversejs form.converse-form input.error {
|
||||||
border: 1px solid #A53214;
|
border: 1px solid #A53214;
|
||||||
color: #777; }
|
color: #777; }
|
||||||
#conversejs form.pure-form.converse-form .form-help {
|
#conversejs form.converse-form .form-help {
|
||||||
color: gray;
|
color: gray;
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
padding-top: 0.5em; }
|
padding-top: 0.5em; }
|
||||||
#conversejs form.pure-form.converse-form .form-help:hover {
|
#conversejs form.converse-form .form-help:hover {
|
||||||
color: #777; }
|
color: #777; }
|
||||||
#conversejs form.pure-form.converse-form .form-help.error {
|
#conversejs form.converse-form .form-help.error {
|
||||||
color: #A53214; }
|
color: #A53214; }
|
||||||
#conversejs form.pure-form.converse-centered-form {
|
#conversejs form.converse-centered-form {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
#conversejs .chat-textarea-chatbox-selected {
|
#conversejs .chat-textarea-chatbox-selected {
|
||||||
@ -5589,7 +5585,7 @@ body.reset {
|
|||||||
@media screen and (max-width: 767px) {
|
@media screen and (max-width: 767px) {
|
||||||
#conversejs > .row {
|
#conversejs > .row {
|
||||||
flex-direction: row-reverse; }
|
flex-direction: row-reverse; }
|
||||||
#conversejs #login-dialog .pure-form.converse-form {
|
#conversejs #login-dialog .converse-form {
|
||||||
padding: 3em 2em 3em; }
|
padding: 3em 2em 3em; }
|
||||||
#conversejs .sidebar {
|
#conversejs .sidebar {
|
||||||
display: block; }
|
display: block; }
|
||||||
|
@ -4773,7 +4773,7 @@ body.reset {
|
|||||||
height: auto; }
|
height: auto; }
|
||||||
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
|
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
|
||||||
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
|
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
|
||||||
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
|
#conversejs fieldset, #conversejs form, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
|
||||||
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
|
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
|
||||||
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
|
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
|
||||||
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
|
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
|
||||||
@ -5016,8 +5016,6 @@ body.reset {
|
|||||||
border-radius: 25%; }
|
border-radius: 25%; }
|
||||||
#conversejs .activated {
|
#conversejs .activated {
|
||||||
display: block !important; }
|
display: block !important; }
|
||||||
#conversejs .pure-form-message {
|
|
||||||
padding: 0.5em 0; }
|
|
||||||
#conversejs .button-primary {
|
#conversejs .button-primary {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #E7A151; }
|
background-color: #E7A151; }
|
||||||
@ -5032,46 +5030,44 @@ body.reset {
|
|||||||
right: 0.2em;
|
right: 0.2em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.75rem; }
|
font-size: 0.75rem; }
|
||||||
#conversejs form.pure-form.converse-form {
|
#conversejs form.converse-form {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 1em; }
|
padding: 1em; }
|
||||||
#conversejs form.pure-form.converse-form legend {
|
#conversejs form.converse-form legend {
|
||||||
color: #777;
|
color: #777;
|
||||||
font-size: 125%;
|
font-size: 125%;
|
||||||
margin-bottom: 1.5em; }
|
margin-bottom: 1.5em; }
|
||||||
#conversejs form.pure-form.converse-form input[type=checkbox] {
|
#conversejs form.converse-form input[type=checkbox] {
|
||||||
display: block; }
|
display: block; }
|
||||||
#conversejs form.pure-form.converse-form select,
|
#conversejs form.converse-form select,
|
||||||
#conversejs form.pure-form.converse-form input[type=password],
|
#conversejs form.converse-form input[type=password],
|
||||||
#conversejs form.pure-form.converse-form input[type=number],
|
#conversejs form.converse-form input[type=number],
|
||||||
#conversejs form.pure-form.converse-form input[type=text] {
|
#conversejs form.converse-form input[type=text] {
|
||||||
min-width: 50%; }
|
min-width: 50%; }
|
||||||
#conversejs form.pure-form.converse-form label {
|
#conversejs form.converse-form input[type=text],
|
||||||
font-size: 18px; }
|
#conversejs form.converse-form input[type=password],
|
||||||
#conversejs form.pure-form.converse-form input[type=text],
|
#conversejs form.converse-form input[type=number],
|
||||||
#conversejs form.pure-form.converse-form input[type=password],
|
#conversejs form.converse-form input[type=button],
|
||||||
#conversejs form.pure-form.converse-form input[type=number],
|
#conversejs form.converse-form input[type=submit] {
|
||||||
#conversejs form.pure-form.converse-form input[type=button],
|
|
||||||
#conversejs form.pure-form.converse-form input[type=submit] {
|
|
||||||
padding: 0.5em; }
|
padding: 0.5em; }
|
||||||
#conversejs form.pure-form.converse-form input[type=button],
|
#conversejs form.converse-form input[type=button],
|
||||||
#conversejs form.pure-form.converse-form input[type=submit] {
|
#conversejs form.converse-form input[type=submit] {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
border: none; }
|
border: none; }
|
||||||
#conversejs form.pure-form.converse-form input.error {
|
#conversejs form.converse-form input.error {
|
||||||
border: 1px solid #A53214;
|
border: 1px solid #A53214;
|
||||||
color: #777; }
|
color: #777; }
|
||||||
#conversejs form.pure-form.converse-form .form-help {
|
#conversejs form.converse-form .form-help {
|
||||||
color: gray;
|
color: gray;
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
padding-top: 0.5em; }
|
padding-top: 0.5em; }
|
||||||
#conversejs form.pure-form.converse-form .form-help:hover {
|
#conversejs form.converse-form .form-help:hover {
|
||||||
color: #777; }
|
color: #777; }
|
||||||
#conversejs form.pure-form.converse-form .form-help.error {
|
#conversejs form.converse-form .form-help.error {
|
||||||
color: #A53214; }
|
color: #A53214; }
|
||||||
#conversejs form.pure-form.converse-centered-form {
|
#conversejs form.converse-centered-form {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
#conversejs .chat-textarea-chatbox-selected {
|
#conversejs .chat-textarea-chatbox-selected {
|
||||||
@ -5155,20 +5151,20 @@ body {
|
|||||||
padding-right: 10%;
|
padding-right: 10%;
|
||||||
font-size: 120%; }
|
font-size: 120%; }
|
||||||
|
|
||||||
#conversejs.fullscreen form.pure-form.converse-form {
|
#conversejs.fullscreen form.converse-form {
|
||||||
margin: 1em; }
|
margin: 1em; }
|
||||||
#conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
|
#conversejs.fullscreen form.converse-form input[type=checkbox] {
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
display: inline;
|
display: inline;
|
||||||
margin-bottom: 2em; }
|
margin-bottom: 2em; }
|
||||||
#conversejs.fullscreen form.pure-form.converse-form input[type=text],
|
#conversejs.fullscreen form.converse-form input[type=text],
|
||||||
#conversejs.fullscreen form.pure-form.converse-form input[type=password],
|
#conversejs.fullscreen form.converse-form input[type=password],
|
||||||
#conversejs.fullscreen form.pure-form.converse-form input[type=number],
|
#conversejs.fullscreen form.converse-form input[type=number],
|
||||||
#conversejs.fullscreen form.pure-form.converse-form input[type=button],
|
#conversejs.fullscreen form.converse-form input[type=button],
|
||||||
#conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
|
#conversejs.fullscreen form.converse-form input[type=submit] {
|
||||||
height: 2.2em; }
|
height: 2.2em; }
|
||||||
#conversejs.fullscreen form.pure-form.converse-form input[type=button],
|
#conversejs.fullscreen form.converse-form input[type=button],
|
||||||
#conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
|
#conversejs.fullscreen form.converse-form input[type=submit] {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
margin-right: 1em; }
|
margin-right: 1em; }
|
||||||
@ -5645,7 +5641,7 @@ body {
|
|||||||
@media screen and (max-width: 767px) {
|
@media screen and (max-width: 767px) {
|
||||||
#conversejs > .row {
|
#conversejs > .row {
|
||||||
flex-direction: row-reverse; }
|
flex-direction: row-reverse; }
|
||||||
#conversejs #login-dialog .pure-form.converse-form {
|
#conversejs #login-dialog .converse-form {
|
||||||
padding: 3em 2em 3em; }
|
padding: 3em 2em 3em; }
|
||||||
#conversejs .sidebar {
|
#conversejs .sidebar {
|
||||||
display: block; }
|
display: block; }
|
||||||
|
@ -149,12 +149,16 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form class="pure-form pure-form-stacked converse-form add-chatroom">
|
<form class="converse-form add-chatroom">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="chatroom">Room address</label>
|
<label for="chatroom">Room address:</label>
|
||||||
<input type="text" name="chatroom" class="form-control" placeholder="room@conference.example.org">
|
<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>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="chatroom">Nickname:</label>
|
||||||
|
<input type="text" name="nickname" class="form-control">
|
||||||
|
</div>
|
||||||
|
<input type="submit" class="btn btn-primary" name="join" value="Join">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -494,7 +494,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#login-dialog {
|
#login-dialog {
|
||||||
.pure-form.converse-form {
|
.converse-form {
|
||||||
padding: 3em 2em 3em;
|
padding: 3em 2em 3em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -80,7 +80,7 @@ body.reset {
|
|||||||
ul li { height: auto; }
|
ul li { height: auto; }
|
||||||
div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
|
div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
|
||||||
pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
|
pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
|
||||||
fieldset, form, label, legend, table, caption, tbody,
|
fieldset, form, legend, table, caption, tbody,
|
||||||
tfoot, thead, tr, th, td, article, aside, canvas, details,
|
tfoot, thead, tr, th, td, article, aside, canvas, details,
|
||||||
embed, figure, figcaption, footer, header, hgroup, menu,
|
embed, figure, figcaption, footer, header, hgroup, menu,
|
||||||
nav, output, ruby, section, summary, time, mark, audio, video {
|
nav, output, ruby, section, summary, time, mark, audio, video {
|
||||||
@ -338,10 +338,6 @@ body.reset {
|
|||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-form-message {
|
|
||||||
padding: 0.5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-primary {
|
.button-primary {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: $primary-color;
|
background-color: $primary-color;
|
||||||
@ -363,7 +359,7 @@ body.reset {
|
|||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pure-form.converse-form {
|
&.converse-form {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
legend {
|
legend {
|
||||||
@ -380,9 +376,6 @@ body.reset {
|
|||||||
input[type=text] {
|
input[type=text] {
|
||||||
min-width: 50%;
|
min-width: 50%;
|
||||||
}
|
}
|
||||||
label {
|
|
||||||
font-size: $font-size-large;
|
|
||||||
}
|
|
||||||
input[type=text],
|
input[type=text],
|
||||||
input[type=password],
|
input[type=password],
|
||||||
input[type=number],
|
input[type=number],
|
||||||
@ -413,7 +406,7 @@ body.reset {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.pure-form.converse-centered-form {
|
&.converse-centered-form {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -13,7 +13,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
form {
|
form {
|
||||||
&.pure-form.converse-centered-form {
|
&.converse-centered-form {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30%;
|
top: 30%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
@ -37,7 +37,7 @@ body {
|
|||||||
#conversejs.fullscreen {
|
#conversejs.fullscreen {
|
||||||
|
|
||||||
form {
|
form {
|
||||||
&.pure-form.converse-form {
|
&.converse-form {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
input[type=checkbox] {
|
input[type=checkbox] {
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
|
@ -21,7 +21,6 @@
|
|||||||
"tpl!chatroom_form",
|
"tpl!chatroom_form",
|
||||||
"tpl!chatroom_head",
|
"tpl!chatroom_head",
|
||||||
"tpl!chatroom_invite",
|
"tpl!chatroom_invite",
|
||||||
"tpl!chatroom_join_form",
|
|
||||||
"tpl!chatroom_nickname_form",
|
"tpl!chatroom_nickname_form",
|
||||||
"tpl!chatroom_password_form",
|
"tpl!chatroom_password_form",
|
||||||
"tpl!chatroom_sidebar",
|
"tpl!chatroom_sidebar",
|
||||||
@ -46,7 +45,6 @@
|
|||||||
tpl_chatroom_form,
|
tpl_chatroom_form,
|
||||||
tpl_chatroom_head,
|
tpl_chatroom_head,
|
||||||
tpl_chatroom_invite,
|
tpl_chatroom_invite,
|
||||||
tpl_chatroom_join_form,
|
|
||||||
tpl_chatroom_nickname_form,
|
tpl_chatroom_nickname_form,
|
||||||
tpl_chatroom_password_form,
|
tpl_chatroom_password_form,
|
||||||
tpl_chatroom_sidebar,
|
tpl_chatroom_sidebar,
|
||||||
@ -154,6 +152,7 @@
|
|||||||
|
|
||||||
_converse.AddChatRoomModal = Backbone.VDOMView.extend({
|
_converse.AddChatRoomModal = Backbone.VDOMView.extend({
|
||||||
events: {
|
events: {
|
||||||
|
'submit form.add-chatroom': 'openChatRoom'
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize () {
|
initialize () {
|
||||||
@ -162,13 +161,44 @@
|
|||||||
backdrop: 'static',
|
backdrop: 'static',
|
||||||
keyboard: true
|
keyboard: true
|
||||||
});
|
});
|
||||||
|
this.model.on('change:muc_domain', this.render, this);
|
||||||
},
|
},
|
||||||
|
|
||||||
toHTML () {
|
toHTML () {
|
||||||
return tpl_add_chatroom_modal(_.extend(this.model.toJSON(), {
|
return tpl_add_chatroom_modal(_.extend(this.model.toJSON(), {
|
||||||
'heading_new_chatroom': __('Enter a new Chatroom'),
|
'heading_new_chatroom': __('Enter a new Chatroom'),
|
||||||
'label_room_name': __('Room'),
|
'label_room_address': __('Room address'),
|
||||||
|
'label_nickname': __('Optional nickname')
|
||||||
}));
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
insertIntoDOM () {
|
||||||
|
const container_el = _converse.chatboxviews.el.querySelector('#converse-modals');
|
||||||
|
container_el.insertAdjacentElement('beforeEnd', this.el);
|
||||||
|
},
|
||||||
|
|
||||||
|
show () {
|
||||||
|
this.render();
|
||||||
|
this.modal.show();
|
||||||
|
},
|
||||||
|
|
||||||
|
parseRoomDataFromEvent (form) {
|
||||||
|
const data = new FormData(form);
|
||||||
|
const jid = data.get('chatroom');
|
||||||
|
const server = Strophe.getDomainFromJid(jid);
|
||||||
|
this.model.save('muc_domain', server);
|
||||||
|
return {
|
||||||
|
'jid': jid,
|
||||||
|
'nick': data.get('nickname')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
openChatRoom (ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
const data = this.parseRoomDataFromEvent(ev.target);
|
||||||
|
_converse.api.rooms.open(data.jid, data);
|
||||||
|
this.modal.hide();
|
||||||
|
ev.target.reset();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -1962,25 +1992,6 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
_converse.MUCJoinForm = Backbone.VDOMView.extend({
|
|
||||||
initialize () {
|
|
||||||
this.model.on('change:muc_domain', this.render, this);
|
|
||||||
},
|
|
||||||
|
|
||||||
toHTML () {
|
|
||||||
return tpl_chatroom_join_form(_.assign(this.model.toJSON(), {
|
|
||||||
'server_input_type': _converse.hide_muc_server && 'hidden' || 'text',
|
|
||||||
'server_label_global_attr': _converse.hide_muc_server && ' hidden' || '',
|
|
||||||
'label_room_name': __('Room name'),
|
|
||||||
'label_nickname': __('Nickname'),
|
|
||||||
'label_server': __('Server'),
|
|
||||||
'label_join': __('Join Room'),
|
|
||||||
'label_show_rooms': __('Show rooms')
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
_converse.RoomsPanel = Backbone.NativeView.extend({
|
_converse.RoomsPanel = Backbone.NativeView.extend({
|
||||||
/* Backbone.NativeView which renders MUC section of the control box.
|
/* Backbone.NativeView which renders MUC section of the control box.
|
||||||
*
|
*
|
||||||
@ -1990,15 +2001,15 @@
|
|||||||
className: 'controlbox-pane',
|
className: 'controlbox-pane',
|
||||||
id: 'chatrooms',
|
id: 'chatrooms',
|
||||||
events: {
|
events: {
|
||||||
'submit form.add-chatroom': 'openChatRoom',
|
'click a.chatbox-btn.fa-users': 'showAddRoomModal',
|
||||||
'click input#show-rooms': 'showRooms',
|
'change input[name=nick]': 'setNick',
|
||||||
'click a.room-info': 'toggleRoomInfo',
|
|
||||||
'change input[name=server]': 'setDomain',
|
'change input[name=server]': 'setDomain',
|
||||||
'change input[name=nick]': 'setNick'
|
'click a.room-info': 'toggleRoomInfo',
|
||||||
|
'click input#show-rooms': 'showRooms',
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize (cfg) {
|
initialize (cfg) {
|
||||||
this.join_form = new _converse.MUCJoinForm({'model': this.model});
|
this.add_room_modal = new _converse.AddChatRoomModal({'model': this.model});
|
||||||
this.model.on('change:muc_domain', this.onDomainChange, this);
|
this.model.on('change:muc_domain', this.onDomainChange, this);
|
||||||
this.model.on('change:nick', this.onNickChange, this);
|
this.model.on('change:nick', this.onNickChange, this);
|
||||||
},
|
},
|
||||||
@ -2008,11 +2019,15 @@
|
|||||||
'heading_chatrooms': __('Chatrooms'),
|
'heading_chatrooms': __('Chatrooms'),
|
||||||
'title_new_room': __('Click to add a new room')
|
'title_new_room': __('Click to add a new room')
|
||||||
});
|
});
|
||||||
this.join_form.setElement(this.el.querySelector('.add-chatroom'));
|
|
||||||
this.join_form.render();
|
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
showAddRoomModal (ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
this.add_room_modal.show();
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
onDomainChange (model) {
|
onDomainChange (model) {
|
||||||
if (_converse.auto_list_rooms) {
|
if (_converse.auto_list_rooms) {
|
||||||
this.updateRoomsList();
|
this.updateRoomsList();
|
||||||
@ -2182,37 +2197,6 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
parseRoomDataFromEvent (ev) {
|
|
||||||
let jid;
|
|
||||||
const name_el = this.el.querySelector('input.new-chatroom-name');
|
|
||||||
const server_el= this.el.querySelector('input.new-chatroom-server');
|
|
||||||
const server = server_el.value;
|
|
||||||
const name = name_el.value.trim();
|
|
||||||
name_el.value = ''; // Clear the input
|
|
||||||
if (name && server) {
|
|
||||||
jid = Strophe.escapeNode(name.toLowerCase()) + '@' + server.toLowerCase();
|
|
||||||
name_el.classList.remove('error');
|
|
||||||
server_el.classList.remove('error');
|
|
||||||
this.model.save({muc_domain: server});
|
|
||||||
} else {
|
|
||||||
if (!name) { name_el.classList.add('error'); }
|
|
||||||
if (!server) { server_el.classList.add('error'); }
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
'jid': jid,
|
|
||||||
'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
openChatRoom (ev) {
|
|
||||||
ev.preventDefault();
|
|
||||||
const data = this.parseRoomDataFromEvent(ev);
|
|
||||||
if (!_.isUndefined(data)) {
|
|
||||||
_converse.api.rooms.open(data.jid, data);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setDomain (ev) {
|
setDomain (ev) {
|
||||||
this.model.save({muc_domain: ev.target.value});
|
this.model.save({muc_domain: ev.target.value});
|
||||||
},
|
},
|
||||||
|
@ -38,7 +38,6 @@
|
|||||||
|
|
||||||
|
|
||||||
_converse.ChatStatusModal = Backbone.VDOMView.extend({
|
_converse.ChatStatusModal = Backbone.VDOMView.extend({
|
||||||
id: "modal-status-change",
|
|
||||||
events: {
|
events: {
|
||||||
"submit form#set-xmpp-status": "onFormSubmitted",
|
"submit form#set-xmpp-status": "onFormSubmitted",
|
||||||
"click .clear-input": "clearStatusMessage"
|
"click .clear-input": "clearStatusMessage"
|
||||||
@ -126,6 +125,7 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
showStatusChangeModal (ev) {
|
showStatusChangeModal (ev) {
|
||||||
|
ev.preventDefault();
|
||||||
this.status_modal.show();
|
this.status_modal.show();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -9,10 +9,14 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form class="pure-form pure-form-stacked converse-form add-chatroom">
|
<form class="converse-form add-chatroom">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="chatroom">Room address</label>
|
<label for="chatroom">{{{o.label_room_address}}}:</label>
|
||||||
<input type="text" name="chatroom" class="form-control" placeholder="name@conference.example.org">
|
<input type="text" required="required" name="chatroom" class="form-control" placeholder="name@conference.example.org">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="chatroom">{{{o.label_nickname}}}:</label>
|
||||||
|
<input type="text" name="nickname" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
<input type="submit" class="btn btn-primary" name="join" value="Join">
|
<input type="submit" class="btn btn-primary" name="join" value="Join">
|
||||||
</form>
|
</form>
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
<div class="row no-gutters"></div>
|
<div class="row no-gutters"></div>
|
||||||
<div id="converse-modals"></div>
|
<div id="converse-modals" class="modals"></div>
|
||||||
|
@ -1,16 +0,0 @@
|
|||||||
<form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
|
|
||||||
<fieldset>
|
|
||||||
<label>{{{o.label_room_name}}}</label>
|
|
||||||
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{{o.label_room_name}}}"/>
|
|
||||||
{[ if (o.server_input_type != 'hidden') { ]}
|
|
||||||
<label{{{o.server_label_global_attr}}}>{{{o.label_server}}}</label>
|
|
||||||
{[ } ]}
|
|
||||||
<input type="{{{o.server_input_type}}}"
|
|
||||||
name="server"
|
|
||||||
class="new-chatroom-server"
|
|
||||||
placeholder="{{{o.label_server}}}"
|
|
||||||
value="{{{o.muc_domain}}}"/>
|
|
||||||
<input type="submit" class="pure-button button-primary" name="join" value="{{{o.label_join}}}"/>
|
|
||||||
<input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{{o.label_show_rooms}}}"/>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
@ -1,5 +1,4 @@
|
|||||||
<!-- <div id="chatrooms"> -->
|
<!-- <div id="chatrooms"> -->
|
||||||
<form class="add-chatroom"></form>
|
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<span class="w-100">{{{o.heading_chatrooms}}}</span>
|
<span class="w-100">{{{o.heading_chatrooms}}}</span>
|
||||||
<a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a>
|
<a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a>
|
||||||
|
Loading…
Reference in New Issue
Block a user