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

Nicer styling for the chat room configuration form.

Browse Source
This commit is contained in:
JC Brand 2014-12-07 12:23:53 +01:00
parent 3bf5eeb4a8
commit 9f94d0f4ea
3 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
converse.js
View File

@ -2420,8 +2420,8 @@
_.each($fields, function (field) { _.each($fields, function (field) {
$form.append(utils.xForm2webForm($(field), $stanza)); $form.append(utils.xForm2webForm($(field), $stanza));
}); });
$form.append('<input type="submit" value="'+__('Save')+'"/>'); $form.append('<input type="submit" class="save-submit" value="'+__('Save')+'"/>');
$form.append('<input type="button" value="'+__('Cancel')+'"/>'); $form.append('<input type="button" class="cancel-submit" value="'+__('Cancel')+'"/>');
$form.on('submit', $.proxy(this.saveConfiguration, this)); $form.on('submit', $.proxy(this.saveConfiguration, this));
$form.find('input[type=button]').on('click', $.proxy(this.cancelConfiguration, this)); $form.find('input[type=button]').on('click', $.proxy(this.cancelConfiguration, this));
}, },

26
css/converse.css
View File

@ -923,11 +923,6 @@ dl.add-converse-contact {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
#conversejs .chatroom-form {
background: white;
font-size: 12px;
padding: 10px 5px;
}
#conversejs .chat-body p { #conversejs .chat-body p {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
@ -937,7 +932,7 @@ dl.add-converse-contact {
#conversejs .chatroom-form legend { #conversejs .chatroom-form legend {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin-bottom: 5px; margin: 5px 0;
} }
#conversejs .chatroom-form label { #conversejs .chatroom-form label {
height: 30px; height: 30px;
@ -1129,6 +1124,7 @@ dl.add-converse-contact {
#conversejs .chatroom { #conversejs .chatroom {
width: 300px; width: 300px;
} }
#conversejs .chatroom-form,
#conversejs .controlbox-pane { #conversejs .controlbox-pane {
text-align: center; text-align: center;
background-color: white; background-color: white;
@ -1164,6 +1160,10 @@ dl.add-converse-contact {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
} }
#conversejs .chatroom-form .instructions {
color: gray;
font-size: 95%;
}
#conversejs .form-help:hover, #conversejs .form-help:hover,
#conversejs #converse-register .instructions:hover { #conversejs #converse-register .instructions:hover {
color: #4f4f4f; color: #4f4f4f;
@ -1198,19 +1198,31 @@ dl.add-converse-contact {
width: 100%; width: 100%;
} }
#conversejs #converse-register .cancel, #conversejs #converse-register .cancel,
#conversejs .chatroom-form .cancel-submit,
#conversejs #converse-register .cancel-submit { #conversejs #converse-register .cancel-submit {
color: darkred; color: darkred;
} }
#conversejs .chatroom-form .save-submit,
#conversejs #converse-register .save-submit { #conversejs #converse-register .save-submit {
color: darkgreen; color: darkgreen;
} }
#conversejs .chatroom-form .save-submit,
#conversejs .chatroom-form .cancel-submit,
#conversejs #converse-register .cancel-submit, #conversejs #converse-register .cancel-submit,
#conversejs #converse-register .save-submit { #conversejs #converse-register .save-submit {
width: 45%; width: 45%;
margin: 5px 3px 0 3px; margin: 5px 3px 5px 3px;
} }
#conversejs .chatroom-form input {
width: 80%;
padding: 5px;
text-align: center;
}
#conversejs .chatroom-form label,
#conversejs #converse-register label, #conversejs #converse-register label,
#conversejs #converse-login label { #conversejs #converse-login label {
height: auto;
font-size: 14px;
margin-top: 0.5em; margin-top: 0.5em;
font-weight: bold; font-weight: bold;
} }

29
less/converse.less
View File

@ -1028,12 +1028,6 @@ dl.add-converse-contact {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
#conversejs .chatroom-form {
background: white;
font-size: 12px;
padding: 10px 5px;
}
#conversejs .chat-body p { #conversejs .chat-body p {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
@ -1044,7 +1038,7 @@ dl.add-converse-contact {
#conversejs .chatroom-form legend { #conversejs .chatroom-form legend {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin-bottom: 5px; margin: 5px 0;
} }
#conversejs .chatroom-form label { #conversejs .chatroom-form label {
@ -1274,6 +1268,7 @@ dl.add-converse-contact {
width: 300px; width: 300px;
} }
#conversejs .chatroom-form,
#conversejs .controlbox-pane { #conversejs .controlbox-pane {
text-align: center; text-align: center;
background-color: white; background-color: white;
@ -1315,6 +1310,11 @@ dl.add-converse-contact {
font-size: 85%; font-size: 85%;
} }
#conversejs .chatroom-form .instructions {
color: gray;
font-size: 95%;
}
#conversejs .form-help:hover, #conversejs .form-help:hover,
#conversejs #converse-register .instructions:hover { #conversejs #converse-register .instructions:hover {
color: #4f4f4f; color: #4f4f4f;
@ -1357,22 +1357,35 @@ dl.add-converse-contact {
} }
#conversejs #converse-register .cancel, #conversejs #converse-register .cancel,
#conversejs .chatroom-form .cancel-submit,
#conversejs #converse-register .cancel-submit { #conversejs #converse-register .cancel-submit {
color: darkred; color: darkred;
} }
#conversejs .chatroom-form .save-submit,
#conversejs #converse-register .save-submit { #conversejs #converse-register .save-submit {
color: darkgreen; color: darkgreen;
} }
#conversejs .chatroom-form .save-submit,
#conversejs .chatroom-form .cancel-submit,
#conversejs #converse-register .cancel-submit, #conversejs #converse-register .cancel-submit,
#conversejs #converse-register .save-submit { #conversejs #converse-register .save-submit {
width: 45%; width: 45%;
margin: 5px 3px 0 3px; margin: 5px 3px 5px 3px;
} }
#conversejs .chatroom-form input {
width: 80%;
padding: 5px;
text-align: center;
}
#conversejs .chatroom-form label,
#conversejs #converse-register label, #conversejs #converse-register label,
#conversejs #converse-login label { #conversejs #converse-login label {
height: auto;
font-size: 14px;
margin-top: 0.5em; margin-top: 0.5em;
font-weight: bold; font-weight: bold;
} }