Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Various changes

Browse Source 
* In certain places, use native methods instead of jQuery
* Nicer rendering of registration forms
* Use CSS3 fade-in animations.
This commit is contained in:
JC Brand 2017-09-17 01:30:52 +02:00
parent 43bbae9006
commit 9cdb0dde8c
18 changed files with 469 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
css/converse.css
View File

@ -1120,6 +1120,22 @@
#conversejs {
width: 100%;
width: 100vw; } }
#converse-embedded-chat .fade-in,
#conversejs .fade-in {
opacity: 0;
/* make things invisible upon start */
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
animation-name: fadein;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease; }
#converse-embedded-chat ::-webkit-input-placeholder,
#conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
@ -1267,7 +1283,8 @@
color: #A53214; }
#converse-embedded-chat .reg-feedback,
#conversejs .reg-feedback {
font-size: 85%; }
font-size: 85%;
margin-bottom: 1em; }
#converse-embedded-chat .reg-feedback,
#converse-embedded-chat #converse-login .conn-feedback,
#conversejs .reg-feedback,
@ -1295,7 +1312,7 @@
padding: 0.5em 0; }
#converse-embedded-chat .pure-button,
#conversejs .pure-button {
border-radius: 4px; }
border-radius: 5px; }
#converse-embedded-chat .button-primary,
#conversejs .button-primary {
color: white;
@ -1316,7 +1333,7 @@
#conversejs form.pure-form.converse-form legend {
color: #777;
font-size: 125%;
margin-bottom: 2em; }
margin-bottom: 1em; }
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] {
display: block; }
@ -1885,10 +1902,9 @@
#conversejs #controlbox .controlbox-head {
border-top-left-radius: 0;
border-top-right-radius: 0; } }
#conversejs #controlbox.logged-out .controlbox-head {
background-color: white; }
#conversejs #controlbox.logged-out .controlbox-head .chatbox-btn {
color: #578EA9; }
#conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
position: relative;
overflow-y: auto; }
#conversejs #controlbox form.search-xmpp-contact {
margin: 0;
padding-left: 5px;
@ -1907,14 +1923,27 @@
padding-left: 2em;
font-weight: bold; }
#conversejs #controlbox #converse-register {
opacity: 0;
/* make things invisible upon start */
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
animation-name: fadein;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
background: white; }
#conversejs #controlbox #converse-register .title {
font-weight: bold; }
#conversejs #controlbox #converse-register .info {
font-style: italic;
color: green;
font-size: 85%;
margin: 5px 0; }
font-size: 90%;
margin: 1.5em 0; }
#conversejs #controlbox #converse-register .form-errors {
color: red;
display: none; }
@ -1952,26 +1981,30 @@
font-weight: bold; }
#conversejs #controlbox .conn-feedback p.error {
color: #A53214; }
#conversejs #controlbox .brand-heading-container {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-heading {
font-size: 150%; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: left;
font-size: 150%; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox .toggle-register-login {
font-weight: bold; }
#conversejs #controlbox .oauth-login {
margin-left: 0;
color: #777; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin: 2em 0; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto;
white-space: normal; }
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%;
margin: 1em 0; }
#conversejs #controlbox .oauth-login .icon-social:before {
font-size: 16px; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto;
white-space: normal; }
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%;
margin: 1em 0; }
#conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
display: block;
font-weight: normal;
margin: 1em 0; }
#conversejs #controlbox #users .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox #chatrooms form.add-chatroom {
@ -2194,17 +2227,23 @@
padding: 1px;
float: right; }
#conversejs #controlbox .controlbox-panes {
background-color: white; }
height: 100%;
overflow-y: scroll; }
#conversejs #controlbox .controlbox-pane {
padding: 1em;
background-color: white;
border: 0;
font-size: 14px;
position: absolute;
left: 0;
text-align: center;
width: 100%;
overflow-y: auto;
overflow-x: hidden; }
#conversejs #controlbox .controlbox-pane .switch-form {
padding-bottom: 2em; }
#conversejs #controlbox .controlbox-pane .switch-form p {
margin-top: 0.5em; }
#conversejs #controlbox .controlbox-pane label {
font-size: 14px;
font-weight: bold;
@ -2258,6 +2297,8 @@
height: 289px;
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); }
#conversejs #controlbox .brand-heading-container .brand-heading {
margin-left: 1em; }
#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
border-radius: 10%;

227
css/inverse.css
View File

@ -1120,6 +1120,22 @@
#conversejs {
width: 100%;
width: 100vw; } }
#converse-embedded-chat .fade-in,
#conversejs .fade-in {
opacity: 0;
/* make things invisible upon start */
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
animation-name: fadein;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease; }
#converse-embedded-chat ::-webkit-input-placeholder,
#conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
@ -1267,7 +1283,8 @@
color: #A53214; }
#converse-embedded-chat .reg-feedback,
#conversejs .reg-feedback {
font-size: 85%; }
font-size: 85%;
margin-bottom: 1em; }
#converse-embedded-chat .reg-feedback,
#converse-embedded-chat #converse-login .conn-feedback,
#conversejs .reg-feedback,
@ -1295,7 +1312,7 @@
padding: 0.5em 0; }
#converse-embedded-chat .pure-button,
#conversejs .pure-button {
border-radius: 7px; }
border-radius: 5px; }
#converse-embedded-chat .button-primary,
#conversejs .button-primary {
color: white;
@ -1316,7 +1333,7 @@
#conversejs form.pure-form.converse-form legend {
color: #777;
font-size: 125%;
margin-bottom: 2em; }
margin-bottom: 1em; }
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] {
display: block; }
@ -1395,6 +1412,24 @@ body {
body .brand-heading {
font-size: 600%;
margin-left: -10%; }
body .brand-heading.fade-in {
opacity: 0;
/* make things invisible upon start */
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
animation-name: fadein;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s; }
body .brand-heading .icon-conversejs {
font-size: 88%; }
body div.content {
@ -1419,7 +1454,8 @@ body {
margin: 1em; }
#conversejs form.pure-form.converse-form input[type=checkbox] {
margin-left: 1em;
display: inline; }
display: inline;
margin-bottom: 2em; }
#conversejs form.pure-form.converse-form input[type=text],
#conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number],
@ -1434,7 +1470,7 @@ body {
#converse-embedded-chat .flyout,
#conversejs .flyout {
border-radius: 7px;
border-radius: 0;
bottom: 6px;
display: block;
position: absolute; }
@ -1554,8 +1590,8 @@ body {
#converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body {
background-color: white;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top: 0;
height: 289px;
height: -webkit-calc(100% - 62px);
@ -1670,8 +1706,8 @@ body {
#conversejs .chatbox form.sendXMPPMessage {
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-clip: padding-box;
border-top: 1px solid #BBB;
border: 0;
@ -1690,8 +1726,8 @@ body {
width: 100%; } }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 0;
height: 70px;
padding: 0.5em;
@ -1898,8 +1934,8 @@ body {
min-width: auto; }
#conversejs .chatbox .chat-body {
background-color: #3AA569;
border-top-left-radius: 7px;
border-top-right-radius: 7px; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
#conversejs .chatbox .chat-body .chat-message {
line-height: 22px;
font-size: 14px;
@ -1913,8 +1949,8 @@ body {
margin-bottom: -5.5px; }
#conversejs .chatbox .chat-content {
padding: 0 1em 1em 1em;
border-top-left-radius: 7px;
border-top-right-radius: 7px; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
#conversejs .chatbox .chat-title {
font-size: 26px;
line-height: 26px; }
@ -1940,8 +1976,8 @@ body {
margin: 0; } }
#conversejs #controlbox .controlbox-head {
background-color: #578EA9;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: white;
height: 62px;
margin: 0;
@ -1954,10 +1990,9 @@ body {
#conversejs #controlbox .controlbox-head {
border-top-left-radius: 0;
border-top-right-radius: 0; } }
#conversejs #controlbox.logged-out .controlbox-head {
background-color: white; }
#conversejs #controlbox.logged-out .controlbox-head .chatbox-btn {
color: #578EA9; }
#conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
position: relative;
overflow-y: auto; }
#conversejs #controlbox form.search-xmpp-contact {
margin: 0;
padding-left: 5px;
@ -1976,14 +2011,27 @@ body {
padding-left: 2em;
font-weight: bold; }
#conversejs #controlbox #converse-register {
opacity: 0;
/* make things invisible upon start */
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
animation-name: fadein;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
background: white; }
#conversejs #controlbox #converse-register .title {
font-weight: bold; }
#conversejs #controlbox #converse-register .info {
font-style: italic;
color: green;
font-size: 85%;
margin: 5px 0; }
font-size: 90%;
margin: 1.5em 0; }
#conversejs #controlbox #converse-register .form-errors {
color: red;
display: none; }
@ -2021,26 +2069,30 @@ body {
font-weight: bold; }
#conversejs #controlbox .conn-feedback p.error {
color: #A53214; }
#conversejs #controlbox .brand-heading-container {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-heading {
font-size: 150%; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: left;
font-size: 150%; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox .toggle-register-login {
font-weight: bold; }
#conversejs #controlbox .oauth-login {
margin-left: 0;
color: #777; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin: 2em 0; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto;
white-space: normal; }
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%;
margin: 1em 0; }
#conversejs #controlbox .oauth-login .icon-social:before {
font-size: 18px; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto;
white-space: normal; }
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%;
margin: 1em 0; }
#conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
display: block;
font-weight: normal;
margin: 1em 0; }
#conversejs #controlbox #users .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox #chatrooms form.add-chatroom {
@ -2263,17 +2315,23 @@ body {
padding: 1px;
float: right; }
#conversejs #controlbox .controlbox-panes {
background-color: white; }
height: 100%;
overflow-y: scroll; }
#conversejs #controlbox .controlbox-pane {
padding: 1.2em;
background-color: white;
border: 0;
font-size: 16px;
position: absolute;
left: 0;
text-align: center;
width: 100%;
overflow-y: auto;
overflow-x: hidden; }
#conversejs #controlbox .controlbox-pane .switch-form {
padding-bottom: 2em; }
#conversejs #controlbox .controlbox-pane .switch-form p {
margin-top: 0.5em; }
#conversejs #controlbox .controlbox-pane label {
font-size: 16px;
font-weight: bold;
@ -2330,17 +2388,34 @@ body {
padding-top: 2em; }
#conversejs #controlbox .toggle-register-login {
line-height: 30px; }
#conversejs #controlbox .brand-heading-container .brand-heading {
font-size: 600%;
padding: 0.7em 0 0 0;
opacity: 0.8;
color: #387592; }
#conversejs #controlbox .brand-heading-container .brand-subtitle {
font-size: 90%; }
@media screen and (max-width: 480px) {
#conversejs #controlbox .brand-heading-container {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-heading {
font-size: 400%; } }
text-align: center;
font-size: 600%;
padding: 0.7em 0 0 0;
opacity: 0.8;
color: #387592; }
#conversejs #controlbox .brand-heading-container .brand-subtitle {
font-size: 90%; }
@media screen and (max-width: 480px) {
#conversejs #controlbox .brand-heading-container .brand-heading {
font-size: 400%; } }
#conversejs #controlbox.logged-out {
opacity: 0;
/* make things invisible upon start */
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
animation-name: fadein;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
animation-timing-function: ease;
width: 100%; }
#conversejs #controlbox.logged-out .box-flyout {
width: 100%; }
@ -2357,19 +2432,23 @@ body {
height: 63px;
padding: 6px 0 6px 0;
margin-top: 0.5em; }
#conversejs #controlbox #converse-register,
#conversejs #controlbox #converse-login {
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin: 3em 30% 3em 30%; }
#conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label {
margin: 1em 0; }
#conversejs #controlbox #converse-register input[type=submit],
#conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit],
#conversejs #controlbox #converse-login input[type=button] {
width: auto; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%;
margin: 1em 0; }
#conversejs #controlbox #converse-register input.pure-button, #conversejs #controlbox #converse-login input.pure-button {
margin: 1em 0.5em; }
@media screen and (max-width: 480px) {
#conversejs #controlbox #converse-register,
#conversejs #controlbox #converse-login {
margin: 3em 10% 3em 10%; } }
#conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label {
margin: 1em 0; }
#conversejs #controlbox #converse-register input[type=submit],
#conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit],
#conversejs #controlbox #converse-login input[type=button] {
width: auto; }
#conversejs #controlbox #controlbox-tabs {
/* single tab */ }
#conversejs #controlbox #controlbox-tabs li {
@ -2380,11 +2459,11 @@ body {
font-size: 18px; }
#conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
height: 63px; }
#conversejs #controlbox .controlbox-panes {
background-color: white; }
#conversejs #controlbox .controlbox-pane {
height: -webkit-calc(100% - 63px);
height: calc(100% - 63px);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
height: calc(100% - 63px); }
#conversejs #converse-roster {
text-align: left;
@ -2617,8 +2696,8 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body {
height: 289px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
height: -webkit-calc(100% - 62px);
height: calc(100% - 62px);
background-color: white;
@ -2664,7 +2743,7 @@ body {
vertical-align: top;
background-color: white;
border-left: 1px solid #777;
border-bottom-right-radius: 7px;
border-bottom-right-radius: 0;
width: 30%;
height: 100%;
padding: 0.5em; }
@ -2743,8 +2822,8 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
background-color: white;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 0;
color: #777;
font-size: 16px;
@ -2803,22 +2882,22 @@ body {
width: -webkit-calc(100% - 250px);
width: calc(100% - 250px); }
#conversejs .chatroom .box-flyout .chatroom-body {
border-top-left-radius: 7px;
border-top-right-radius: 7px; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
border-radius: 7px; }
border-radius: 0; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
border-top-left-radius: 7px;
border-top-left-radius: 0;
min-width: auto; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
border-top-left-radius: 7px;
border-top-left-radius: 0;
padding: 0 1em 1em 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
max-width: 100%; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
max-width: 100%; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants {
border-top-right-radius: 7px;
border-top-right-radius: 0;
padding: 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
font-size: 18px; }
@ -2842,12 +2921,12 @@ body {
background-color: #E7A151; }
#conversejs .chatbox.headlines .chat-body {
background-color: #E7A151;
border-radius: 7px; }
border-radius: 0; }
#conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
color: #D2842B; }
#conversejs .chatbox.headlines .chat-content {
height: 100%;
border-radius: 7px; }
border-radius: 0; }
#conversejs .chatbox.headlines .box-flyout {
background-color: #E7A151; }

38
sass/_controlbox.scss
View File

@ -29,10 +29,10 @@
}
&.logged-out {
.controlbox-head {
background-color: white;
.chatbox-btn {
color: $controlbox-head-color;
.box-flyout {
.controlbox-pane {
position: relative;
overflow-y: auto;
}
}
}
@ -62,15 +62,15 @@
}
#converse-register {
@include fade-in;
background: white;
.title {
font-weight: bold;
}
.info {
font-style: italic;
color: green;
font-size: 85%;
margin: 5px 0;
font-size: 90%;
margin: 1.5em 0;
}
.form-errors {
color: red;
@ -128,8 +128,8 @@
}
.brand-heading-container {
text-align: center;
.brand-heading {
text-align: left;
font-size: 150%;
}
.brand-name {
@ -140,12 +140,16 @@
.toggle-register-login {
font-weight: bold;
}
.oauth-login {
margin-left: 0;
color: $text-color;
.icon-social:before {
font-size: $font-size-large;
}
}
#converse-register, #converse-login {
margin: 2em 0;
.login-anon {
height: auto;
white-space: normal;
@ -157,6 +161,12 @@
width: 100%;
margin: 1em 0;
}
.form-url {
display: block;
font-weight: normal;
margin: 1em 0;
}
}
#users {
.add-converse-contact {
@ -442,7 +452,8 @@
}
.controlbox-panes {
background-color: white;
height: 100%;
overflow-y: scroll;
}
.controlbox-pane {
@ -451,10 +462,17 @@
border: 0;
font-size: $font-size;
position: absolute;
left: 0;
text-align: center;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
.switch-form {
padding-bottom: 2em;
p {
margin-top: 0.5em;
}
}
label {
font-size: $font-size;
font-weight: bold;

16
sass/_core.scss
View File

@ -1,3 +1,11 @@
@mixin fade-in {
opacity:0; /* make things invisible upon start */
@include animation-name(fadein);
@include animation-fill-mode(forwards);
@include animation-duration(1s);
@include animation-timing-function(ease);
}
#converse-embedded-chat,
#conversejs {
bottom: 0;
@ -20,6 +28,9 @@
width: 100vw;
}
.fade-in {
@include fade-in;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color;
@ -143,6 +154,7 @@
}
.reg-feedback {
font-size: 85%;
margin-bottom: 1em;
}
.reg-feedback,
@ -173,7 +185,7 @@
padding: 0.5em 0;
}
.pure-button {
border-radius: $chatbox-border-radius;
border-radius: $button-border-radius;
}
.button-primary {
color: white;
@ -195,7 +207,7 @@
legend {
color: $text-color;
font-size: 125%;
margin-bottom: 2em;
margin-bottom: 1em;
}
input[type=checkbox] {
display: block;

6
sass/converse/_controlbox.scss
View File

@ -6,5 +6,11 @@
height: 289px;
@include calc(height, '100% - #{$controlbox-head-height}');
}
.brand-heading-container {
.brand-heading {
margin-left: 1em;
}
}
}
}

32
sass/inverse/_controlbox.scss
View File

@ -14,7 +14,9 @@
}
.brand-heading-container {
text-align: center;
.brand-heading {
text-align: center;
font-size: 600%;
padding: 0.7em 0 0 0;
opacity: 0.8;
@ -31,6 +33,7 @@
}
&.logged-out {
@include fade-in;
width: 100%;
.box-flyout {
width: 100%;
@ -52,17 +55,8 @@
padding: 6px 0 6px 0;
margin-top: 0.5em;
}
#converse-register,
#converse-login {
margin: 3em 30% 3em 30%;
}
@media screen and (max-width: $mobile-portrait-length) {
#converse-register,
#converse-login {
margin: 3em 10% 3em 10%;
}
}
#converse-register, #converse-login {
margin: 3em 30% 3em 30%;
.title, .instructions, label {
margin: 1em 0;
}
@ -70,6 +64,19 @@
input[type=button] {
width: auto;
}
input {
width: 100%;
margin: 1em 0;
&.pure-button {
margin: 1em 0.5em;
}
}
}
@media screen and (max-width: $mobile-portrait-length) {
#converse-register,
#converse-login {
margin: 3em 10% 3em 10%;
}
}
#controlbox-tabs {
/* single tab */
@ -86,10 +93,11 @@
}
}
}
.controlbox-panes {
background-color: white;
}
.controlbox-pane {
@include calc(height, '100% - #{$controlbox-head-height}');
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}

6
sass/inverse/_core.scss
View File

@ -8,6 +8,10 @@ body {
.brand-heading {
font-size: 600%;
margin-left: -10%;
&.fade-in {
@include fade-in;
@include animation-delay(2s);
}
.icon-conversejs {
font-size: 88%;
}
@ -40,10 +44,10 @@ body {
form {
&.pure-form.converse-form {
margin: 1em;
input[type=checkbox] {
margin-left: 1em;
display: inline;
margin-bottom: 2em;
}
input[type=text],
input[type=password],

2
sass/inverse/_variables.scss
View File

@ -87,7 +87,7 @@ $online-color: $green !default;
$error-color: $darkest-red !default;
$button-border-radius: 5px !default;
$chatbox-border-radius: 7px !default;
$chatbox-border-radius: 0 !default;
$bottom-gutter-height: 35px !default;
$chatbox-hover-height: 6px !default;

29
src/converse-controlbox.js
View File

@ -202,7 +202,7 @@
_converse.ControlBoxView = _converse.ChatBoxView.extend({
tagName: 'div',
className: 'chatbox',
className: 'chatbox fade-in',
id: 'controlbox',
events: {
'click a.close-chatbox-button': 'close',
@ -273,9 +273,12 @@
},
createBrandHeadingElement () {
const div = document.createElement('div');
div.innerHTML = tpl_brand_heading();
return div.firstChild;
return tpl_brand_heading();
},
insertBrandHeading () {
const el = this.el.querySelector('.controlbox-head');
el.insertAdjacentHTML('beforeend', this.createBrandHeadingElement());
},
renderLoginPanel () {
@ -285,8 +288,7 @@
});
this.loginpanel.render();
this.el.classList.add("logged-out");
const el = document.getElementById('converse-login-panel');
el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
this.insertBrandHeading();
return this;
},
@ -343,13 +345,11 @@
},
onControlBoxToggleHidden () {
const that = this;
utils.fadeIn(this.el, function () {
_converse.controlboxtoggle.updateOnlineCount();
utils.refreshWebkit();
that.model.set('closed', false);
_converse.emit('controlBoxOpened', that);
});
_converse.controlboxtoggle.updateOnlineCount();
utils.refreshWebkit();
this.model.set('closed', false);
this.el.classList.remove('hidden');
_converse.emit('controlBoxOpened', this);
},
show () {
@ -389,7 +389,7 @@
_converse.LoginPanel = Backbone.View.extend({
tagName: 'div',
id: "converse-login-panel",
className: 'controlbox-pane',
className: 'controlbox-pane fade-in',
events: {
'submit form#converse-login': 'authenticate'
},
@ -422,7 +422,6 @@
'label_username': __('Jabber ID:'),
'label_password': __('Password:'),
'label_anon_login': __('Click here to log in anonymously'),
'label_login': __('Log In'),
'placeholder_username': (_converse.locked_domain || _converse.default_domain) && __('Username') || __('user@domain'),
'placeholder_password': __('password')
})

5
src/converse-inverse.js
View File

@ -55,6 +55,11 @@
const div = document.createElement('div');
div.innerHTML = tpl_brand_heading();
return div.firstChild;
},
insertBrandHeading () {
const el = document.getElementById('converse-login-panel');
el.parentNode.insertBefore(this.createBrandHeadingElement(), el.parentNode.firstChild);
}
},

106
src/converse-register.js
View File

@ -18,6 +18,7 @@
"tpl!register_panel",
"tpl!registration_form",
"tpl!registration_request",
"tpl!form_input",
"tpl!spinner",
"converse-controlbox"
], factory);
@ -30,6 +31,7 @@
tpl_register_panel,
tpl_registration_form,
tpl_registration_request,
tpl_form_input,
tpl_spinner
) {
@ -132,19 +134,12 @@
const { _converse } = this,
{ __ } = _converse;
// Add new templates
_converse.templates.form_username = tpl_form_username;
_converse.templates.register_panel = tpl_register_panel;
_converse.templates.registration_form = tpl_registration_form;
_converse.templates.registration_request = tpl_registration_request;
_converse.api.settings.update({
allow_registration: true,
domain_placeholder: __(" e.g. conversejs.org"), // Placeholder text shown in the domain input on the registration form
providers_link: 'https://xmpp.net/directory.php', // Link to XMPP providers shown on registration page
});
_converse.RegistrationRouter = Backbone.Router.extend({
initialize () {
@ -169,7 +164,7 @@
_converse.RegisterPanel = Backbone.View.extend({
tagName: 'div',
id: "converse-register-panel",
className: 'controlbox-pane',
className: 'controlbox-pane fade-in',
events: {
'submit form#converse-register': 'onProviderChosen'
},
@ -242,7 +237,9 @@
}
// Send an IQ stanza to get all required data fields
conn._addSysHandler(this.onRegistrationFields.bind(this), null, "iq", null, null);
conn.send($iq({type: "get"}).c("query", {xmlns: Strophe.NS.REGISTER}).tree());
const stanza = $iq({type: "get"}).c("query", {xmlns: Strophe.NS.REGISTER}).tree();
stanza.setAttribute("id", conn.getUniqueId("sendIQ"));
conn.send(stanza);
conn.connected = false;
return true;
},
@ -253,6 +250,13 @@
* Parameters:
* (XMLElement) elem - The query stanza.
*/
if (stanza.getAttribute("type") === "error") {
_converse.connection._changeConnectStatus(
Strophe.Status.REGIFAIL,
__('Something went wrong while establishing a connection with "%1$s". Are you sure it exists?', this.domain)
);
return false;
}
if (stanza.getElementsByTagName("query").length !== 1) {
_converse.connection._changeConnectStatus(Strophe.Status.REGIFAIL, "unknown");
return false;
@ -383,6 +387,40 @@
}
},
renderLegacyRegistrationForm (form) {
_.each(_.keys(this.fields), (key) => {
if (key === "username") {
form.insertAdjacentHTML(
'beforeend',
tpl_form_username({
'domain': ` @${this.domain}`,
'name': key,
'type': "text",
'label': key,
'value': '',
'required': true
})
);
} else {
form.insertAdjacentHTML(
'beforeend',
tpl_form_input({
'label': key,
'name': key,
'placeholder': key,
'required': true,
'type': (key === 'password' || key === 'email') ? key : "text",
'value': ''
})
);
}
});
// Show urls
_.each(this.urls, (url) => {
$(form).append($('<a target="blank"></a>').attr('href', url).text(url));
});
},
renderRegistrationForm (stanza) {
/* Renders the registration form based on the XForm fields
* received from the XMPP server.
@ -392,44 +430,29 @@
*/
this.model.set('registration_form_rendered', true);
const $form = this.$('form'),
$stanza = $(stanza);
let $fields, $input;
$form.empty().append(tpl_registration_form({
const form = this.el.querySelector('form'),
$form = $(form),
$stanza = $(stanza);
let $fields;
// Hide and show at the end so that we get a fade-in animation
form.classList.add('hidden');
form.innerHTML = tpl_registration_form({
'__': _converse.__,
'domain': this.domain,
'title': this.title,
'instructions': this.instructions
}));
});
if (this.form_type === 'xform') {
$fields = $stanza.find('field');
_.each($fields, (field) => {
$form.append(utils.xForm2webForm.bind(this, field, stanza));
_.each(stanza.querySelectorAll('field'), (field) => {
form.insertAdjacentHTML(
'beforeend',
utils.xForm2webForm(field, stanza, this.domain)
);
});
} else {
// Show fields
_.each(_.keys(this.fields), (key) => {
if (key === "username") {
$input = tpl_form_username({
domain: ` @${this.domain}`,
name: key,
type: "text",
label: key,
value: '',
required: 1
});
} else {
$form.append(`<label>${key}</label>`);
$input = $(`<input placeholder="${key}" name="${key}"></input>`);
if (key === 'password' || key === 'email') {
$input.attr('type', key);
}
}
$form.append($input);
});
// Show urls
_.each(this.urls, (url) => {
$form.append($('<a target="blank"></a>').attr('href', url).text(url));
});
this.renderLegacyRegistrationForm(form);
}
if (this.fields) {
$form.append(`<input type="submit" class="pure-button button-primary" value="${__('Register')}"/>`);
@ -443,6 +466,7 @@
if (_converse.registration_domain) {
$form.find('input[type=button]').hide();
}
form.classList.remove('hidden');
},
reportErrors (stanza) {

140
src/form-utils.js
View File

@ -19,7 +19,8 @@
"tpl!form_checkbox",
"tpl!form_username",
"tpl!form_input",
"tpl!form_captcha"
"tpl!form_captcha",
"tpl!form_url",
], factory);
}(this, function (
sizzle,
@ -32,7 +33,8 @@
tpl_form_checkbox,
tpl_form_username,
tpl_form_input,
tpl_form_captcha
tpl_form_captcha,
tpl_form_url
) {
"use strict";
@ -69,7 +71,7 @@
)[0];
};
u.xForm2webForm = function (field, stanza) {
u.xForm2webForm = function (field, stanza, domain) {
/* Takes a field in XMPP XForm (XEP-004: Data Forms) format
* and turns it into an HTML field.
*
@ -79,69 +81,75 @@
* Parameters:
* (XMLElement) field - the field to convert
*/
if (field.getAttribute('type') === 'list-single' ||
field.getAttribute('type') === 'list-multi') {
if (field.getAttribute('type')) {
if (field.getAttribute('type') === 'list-single' ||
field.getAttribute('type') === 'list-multi') {
const values = _.map(
u.queryChildren(field, 'value'),
_.partial(_.get, _, 'textContent')
);
const options = _.map(
u.queryChildren(field, 'option'),
function (option) {
const value = _.get(option.querySelector('value'), 'textContent');
return tpl_select_option({
'value': value,
'label': option.getAttribute('label'),
'selected': _.startsWith(values, value),
'required': _.isNil(field.querySelector('required'))
})
}
);
return tpl_form_select({
'name': field.getAttribute('var'),
'label': field.getAttribute('label'),
'options': options.join(''),
'multiple': (field.getAttribute('type') === 'list-multi'),
'required': _.isNil(field.querySelector('required'))
})
} else if (field.getAttribute('type') === 'fixed') {
const text = _.get(field.querySelector('value'), 'textContent');
const el = u.stringToDOM('<p class="form-help">');
el.textContent = text;
return el;
} else if (field.getAttribute('type') === 'jid-multi') {
return tpl_form_textarea({
'name': field.getAttribute('var'),
'label': field.getAttribute('label') || '',
'value': _.get(field.querySelector('value'), 'textContent'),
'required': _.isNil(field.querySelector('required'))
})
} else if (field.getAttribute('type') === 'boolean') {
return tpl_form_checkbox({
'name': field.getAttribute('var'),
'type': XFORM_TYPE_MAP[field.getAttribute('type')],
'label': field.getAttribute('label') || '',
'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '',
'required': _.isNil(field.querySelector('required'))
})
} else if (field.getAttribute('type') && field.getAttribute('var') === 'username') {
return tpl_form_username({
'domain': ' @'+this.domain,
'name': field.getAttribute('var'),
'type': XFORM_TYPE_MAP[field.getAttribute('type')],
'label': field.getAttribute('label') || '',
'value': _.get(field.querySelector('value'), 'textContent'),
'required': _.isNil(field.querySelector('required'))
})
} else if (field.getAttribute('type')) {
return tpl_form_input({
'name': field.getAttribute('var'),
'type': XFORM_TYPE_MAP[field.getAttribute('type')],
'label': field.getAttribute('label') || '',
'value': _.get(field.querySelector('value'), 'textContent'),
'required': _.isNil(field.querySelector('required'))
})
const values = _.map(
u.queryChildren(field, 'value'),
_.partial(_.get, _, 'textContent')
);
const options = _.map(
u.queryChildren(field, 'option'),
function (option) {
const value = _.get(option.querySelector('value'), 'textContent');
return tpl_select_option({
'value': value,
'label': option.getAttribute('label'),
'selected': _.startsWith(values, value),
'required': _.isNil(field.querySelector('required'))
})
}
);
return tpl_form_select({
'name': field.getAttribute('var'),
'label': field.getAttribute('label'),
'options': options.join(''),
'multiple': (field.getAttribute('type') === 'list-multi'),
'required': _.isNil(field.querySelector('required'))
});
} else if (field.getAttribute('type') === 'fixed') {
const text = _.get(field.querySelector('value'), 'textContent');
return '<p class="form-help">'+text+'</p>';
} else if (field.getAttribute('type') === 'jid-multi') {
return tpl_form_textarea({
'name': field.getAttribute('var'),
'label': field.getAttribute('label') || '',
'value': _.get(field.querySelector('value'), 'textContent'),
'required': _.isNil(field.querySelector('required'))
});
} else if (field.getAttribute('type') === 'boolean') {
return tpl_form_checkbox({
'name': field.getAttribute('var'),
'type': XFORM_TYPE_MAP[field.getAttribute('type')],
'label': field.getAttribute('label') || '',
'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '',
'required': _.isNil(field.querySelector('required'))
});
} else if (field.getAttribute('var') === 'url') {
return tpl_form_url({
'label': field.getAttribute('label') || '',
'value': _.get(field.querySelector('value'), 'textContent')
});
} else if (field.getAttribute('var') === 'username') {
return tpl_form_username({
'domain': ' @'+domain,
'name': field.getAttribute('var'),
'type': XFORM_TYPE_MAP[field.getAttribute('type')],
'label': field.getAttribute('label') || '',
'value': _.get(field.querySelector('value'), 'textContent'),
'required': _.isNil(field.querySelector('required'))
});
} else {
return tpl_form_input({
'label': field.getAttribute('label') || '',
'name': field.getAttribute('var'),
'placeholder': null,
'required': _.isNil(field.querySelector('required')),
'type': XFORM_TYPE_MAP[field.getAttribute('type')],
'value': _.get(field.querySelector('value'), 'textContent')
});
}
} else {
if (field.getAttribute('var') === 'ocr') { // Captcha
const uri = field.querySelector('uri');
@ -152,7 +160,7 @@
'data': _.get(el, 'textContent'),
'type': uri.getAttribute('type'),
'required': _.isNil(field.querySelector('required'))
})
});
}
}
}

2
src/templates/converse_brand_heading.html
View File

@ -3,4 +3,4 @@
<i class="icon-conversejs"></i>
<span class="brand-name">converse</span>
</div>
<span>
</span>

1
src/templates/form_input.html
View File

@ -1,6 +1,7 @@
<label>
{{{label}}}
<input name="{{{name}}}" type="{{{type}}}"
{[ if (placeholder) { ]} placeholder="{{{placeholder}}}" {[ } ]}
{[ if (value) { ]} value="{{{value}}}" {[ } ]}
{[ if (required) { ]} class="required" {[ } ]} >
</label>

4
src/templates/login_panel.html
View File

@ -12,13 +12,13 @@
{[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
<label>{{{label_username}}}</label>
<p class="form-help invalid-jid-msg error hidden">{{{_('Please enter a valid XMPP address')}}}</p>
<p class="form-help fade-in invalid-jid-msg error hidden">{{{_('Please enter a valid XMPP address')}}}</p>
<input type="text" name="jid" placeholder="{{{placeholder_username}}}">
{[ if (authentication !== EXTERNAL) { ]}
<label>{{{label_password}}}</label>
<input type="password" name="password" placeholder="{{{placeholder_password}}}">
{[ } ]}
<input class="pure-button button-primary" type="submit" value="{{{label_login}}}">
<input class="pure-button button-primary" type="submit" value="{{{__('Submit')}}}">
{[ } ]}
{[ if (authentication == ANONYMOUS) { ]}
<input class="pure-button button-primary login-anon" type="submit" value="{{{label_anon_login}}}"/>

8
src/templates/register_link.html
View File

@ -1,4 +1,4 @@
<p>{{{ __("Don't have a chat account?") }}}</p>
<p style="margin-top: 0.5em">
<a class="register-account toggle-register-login" href="#converse-register">{{{__("Register an account here")}}}</a>
</p>
<div class="switch-form">
<p>{{{ __("Don't have a chat account?") }}}</p>
<p><a class="register-account toggle-register-login" href="#converse-register">{{{__("Register an account")}}}</a></p>
</div>

12
src/templates/register_panel.html
View File

@ -2,7 +2,7 @@
<legend>{{{__("Account Registration")}}}</legend>
<span class="reg-feedback"></span>
<label>{{{__("Please enter the XMPP provider you want to register with:")}}}</label>
<label>{{{__("Please enter the XMPP provider to register with:")}}}</label>
<p class="form-help">{{{help_providers}}} <a href="{{{href_providers}}}" class="url" target="_blank" rel="noopener">{{{help_providers_link}}}</a>.</p>
{[ if (default_domain) { ]}
@ -14,7 +14,9 @@
{[ } ]}
</form>
<p style="margin-top: 1em">{{{ __("Already have a Jabber/XMPP chat account?") }}}</p>
<p style="margin-top: 0.5em">
<a class="login-here toggle-register-login" href="#converse-login">{{{__("Log in here")}}}</a>
</p>
<div class="switch-form">
<p>{{{ __("Already have a chat account?") }}}</p>
<p>
<a class="login-here toggle-register-login" href="#converse-login">{{{__("Log in here")}}}</a>
</p>
</div>

2
src/templates/registration_form.html
View File

@ -1,3 +1,3 @@
<p class="provider-title">{{{domain}}}</p>
<legend>{{{__("Account Registration:")}}} {{{domain}}}</legend>
<p class="title">{{{title}}}</p>
<p class="instructions">{{{instructions}}}</p>