Skip to content

C
converse.js
Commit 1fb18eef authored by JC Brand's avatar JC Brand
Browse files
Options

Update chatroom form for pure.css

parent 8708b685
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 160 deletions
css/converse.css
View file @ 1fb18eef
...@@ -1782,10 +1782,16 @@ ...@@ -1782,10 +1782,16 @@
text-decoration: none; text-decoration: none;
color: #436F64; color: #436F64;
text-shadow: none; } text-shadow: none; }
#conversejs form.pure-form.converse-form {
padding: 1.5em; }
#conversejs form.pure-form.converse-form label {
margin-top: 1em; }
#conversejs form.pure-form.converse-form input {
margin-bottom: 1em; }
#conversejs { #conversejs {
bottom: 0; bottom: 0;
color: #6C4C44; color: #777;
direction: ltr; direction: ltr;
display: block; display: block;
font-size: 14px; font-size: 14px;
...@@ -1925,17 +1931,18 @@ ...@@ -1925,17 +1931,18 @@
padding: 1px 0 1px 5px; } padding: 1px 0 1px 5px; }
#conversejs .activated { #conversejs .activated {
display: block !important; } display: block !important; }
#conversejs form label { #conversejs form.pure-form.converse-form {
font-size: 14px; padding: 1.5em; }
font-weight: bold; #conversejs form.pure-form.converse-form label {
height: auto; margin-top: 1em; }
margin: 4px; } #conversejs form.pure-form.converse-form input {
#conversejs form .form-help { margin-bottom: 1em; }
color: gray; #conversejs form.pure-form.converse-form .form-help {
font-size: 85%; color: gray;
padding-top: 5px; } font-size: 85%;
#conversejs form .form-help:hover { padding-top: 5px; }
color: #6C4C44; } #conversejs form.pure-form.converse-form .form-help:hover {
color: #777; }
#conversejs .chat-textarea-chatbox-selected { #conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308; border: 1px solid #578308;
margin: 0; } margin: 0; }
...@@ -2000,12 +2007,12 @@ ...@@ -2000,12 +2007,12 @@
height: -webkit-calc(100% - 44px); height: -webkit-calc(100% - 44px);
height: calc(100% - 44px); } height: calc(100% - 44px); }
#conversejs .chatbox .chat-body p { #conversejs .chatbox .chat-body p {
color: #6C4C44; color: #777;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 5px; } padding: 5px; }
#conversejs .chatbox .chat-body .chat-info { #conversejs .chatbox .chat-body .chat-info {
color: #6C4C44; color: #777;
color: #808080; color: #808080;
margin: 0.3em; } margin: 0.3em; }
#conversejs .chatbox .chat-body .chat-info.chat-event { #conversejs .chatbox .chat-body .chat-info.chat-event {
...@@ -2042,7 +2049,7 @@ ...@@ -2042,7 +2049,7 @@
position: relative; position: relative;
padding: 0.5em; padding: 0.5em;
font-size: 13px; font-size: 13px;
color: #6C4C44; color: #777;
overflow-y: auto; overflow-y: auto;
border: 0; border: 0;
background-color: #ffffff; background-color: #ffffff;
...@@ -2247,7 +2254,7 @@ ...@@ -2247,7 +2254,7 @@
color: gray; color: gray;
font-size: 85%; } font-size: 85%; }
#conversejs #controlbox #converse-register .instructions:hover { #conversejs #controlbox #converse-register .instructions:hover {
color: #6C4C44; } color: #777; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin: 2em 1em 1em 1em; margin: 2em 1em 1em 1em;
background: white; } background: white; }
...@@ -2290,14 +2297,14 @@ ...@@ -2290,14 +2297,14 @@
text-align: left; } text-align: left; }
#conversejs #controlbox #chatrooms #available-chatrooms dt { #conversejs #controlbox #chatrooms #available-chatrooms dt {
font-weight: normal; font-weight: normal;
color: #6C4C44; color: #777;
border: none; border: none;
padding: 0.5em; padding: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; } text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom { #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
border: none; border: none;
clear: both; clear: both;
color: #6C4C44; color: #777;
display: block; display: block;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
...@@ -2390,7 +2397,7 @@ ...@@ -2390,7 +2397,7 @@
border-bottom: 0; border-bottom: 0;
height: 44px; height: 44px;
cursor: default; cursor: default;
color: #6C4C44; } color: #777; }
#conversejs #controlbox #controlbox-tabs li { #conversejs #controlbox #controlbox-tabs li {
float: left; float: left;
list-style: none; list-style: none;
...@@ -2412,7 +2419,7 @@ ...@@ -2412,7 +2419,7 @@
text-align: center; text-align: center;
text-decoration: none; } text-decoration: none; }
#conversejs #controlbox #controlbox-tabs li a:hover { #conversejs #controlbox #controlbox-tabs li a:hover {
color: #6C4C44; } color: #777; }
#conversejs #controlbox .xmpp-status { #conversejs #controlbox .xmpp-status {
display: inline; } display: inline; }
#conversejs #controlbox .fancy-dropdown { #conversejs #controlbox .fancy-dropdown {
...@@ -2548,7 +2555,7 @@ ...@@ -2548,7 +2555,7 @@
overflow-y: auto; } overflow-y: auto; }
#conversejs #converse-roster .roster-contacts dt.roster-group { #conversejs #converse-roster .roster-contacts dt.roster-group {
border: none; border: none;
color: #6C4C44; color: #777;
display: none; display: none;
font-weight: normal; font-weight: normal;
padding: 0.5em; padding: 0.5em;
...@@ -2556,13 +2563,13 @@ ...@@ -2556,13 +2563,13 @@
#conversejs #converse-roster .roster-contacts dt.roster-group:hover { #conversejs #converse-roster .roster-contacts dt.roster-group:hover {
background-color: #E1E6E5; } background-color: #E1E6E5; }
#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle { #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
color: #6C4C44; color: #777;
display: block; display: block;
width: 100%; } width: 100%; }
#conversejs #converse-roster .roster-contacts dd { #conversejs #converse-roster .roster-contacts dd {
border: none; border: none;
clear: both; clear: both;
color: #6C4C44; color: #777;
display: block; display: block;
font-weight: bold; font-weight: bold;
height: 24px; height: 24px;
...@@ -2600,7 +2607,7 @@ ...@@ -2600,7 +2607,7 @@
width: 22px; width: 22px;
margin: 0; margin: 0;
display: none; display: none;
color: #6C4C44; } color: #777; }
#conversejs #converse-roster .roster-contacts dd a .open-chat { #conversejs #converse-roster .roster-contacts dd a .open-chat {
width: 80%; } width: 80%; }
#conversejs #converse-roster span.pending-contact-name { #conversejs #converse-roster span.pending-contact-name {
...@@ -2668,53 +2675,18 @@ ...@@ -2668,53 +2675,18 @@
width: 100px; } width: 100px; }
#conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator { #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator {
color: #8f2831; } color: #8f2831; }
#conversejs .chatroom .box-flyout .chatroom-body label {
display: block;
font-size: 12px;
font-style: italic;
margin-left: 2px;
margin: 0.5em; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
background-color: white; background-color: white;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border: 0; border: 0;
color: #6C4C44; color: #777;
font-size: 14px; font-size: 14px;
height: 289px; height: 289px;
height: -webkit-calc(100% - 44px); height: -webkit-calc(100% - 44px);
height: calc(100% - 44px); height: calc(100% - 44px);
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute; }
text-align: center;
width: 100%; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
padding: 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form .instructions {
color: gray;
font-size: 95%; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input {
width: 100%;
padding: 0.5em;
text-align: left; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=checkbox] {
width: auto;
margin: auto; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=submit], #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=button] {
width: 50%;
margin-top: 1em;
text-align: center; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form legend {
font-size: 16px;
font-weight: bold;
margin: 10px 0 15px 0; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label {
font-weight: bold;
display: block;
clear: both;
margin-top: 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label input, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label select {
float: right; }
#conversejs .chatroom .chat-head-chatroom { #conversejs .chatroom .chat-head-chatroom {
background-color: #346121; } background-color: #346121; }
#conversejs .chatroom .chat-textarea { #conversejs .chatroom .chat-textarea {
......
mockup/chatroom.html
View file @ 1fb18eef
...@@ -33,46 +33,59 @@ ...@@ -33,46 +33,59 @@
</div> </div>
<div class="chat-body chatroom-body"> <div class="chat-body chatroom-body">
<div class="chatroom-form-container"> <div class="chatroom-form-container">
<form class="chatroom-form"> <form class="pure-form pure-form-stacked converse-form chatroom-form">
<legend>Configuration for discuss@conference.conversejs.com</legend> <fieldset>
<p class="instructions">Complete and submit this form to configure the room.</p> <legend>Configuration for discuss@conference.conversejs.com</legend>
<input name="FORM_TYPE" type="hidden" value="http://jabber.org/protocol/muc#roomconfig"> <p class="form-help">Complete and submit this form to configure the room.</p>
<label>Name</label>
<input name="muc#roomconfig_roomname" type="textline" value="xxx"> <input name="FORM_TYPE" type="hidden" value="http://jabber.org/protocol/muc#roomconfig">
<label>Description</label> <label>Name</label>
<input name="muc#roomconfig_roomdesc" type="textline"> <input name="muc#roomconfig_roomname" type="text" value="xxx">
<div class="input-group cb-input-group">
<label>Make Room Persistent?</label> <label>Description</label>
<input name="muc#roomconfig_persistentroom" type="checkbox"> <input name="muc#roomconfig_roomdesc" type="text">
</div>
<div class="input-group cb-input-group"> <label for="foo" class="pure-checkbox">
<label>Make Room Publicly Searchable?</label> Make Room Persistent?
<input name="muc#roomconfig_publicroom" type="checkbox" checked="1"> <input id="foo" name="muc#roomconfig_persistentroom" type="checkbox">
</div> </label>
<div class="input-group cb-input-group">
<label>Allow Occupants to Change Subject?</label> <label for="bar" class="pure-checkbox">
<input name="muc#roomconfig_changesubject" type="checkbox"> Make Room Publicly Searchable?
</div> <input id="bar" name="muc#roomconfig_publicroom" type="checkbox" checked="1">
<label>Who May Discover Real JIDs?</label> </label>
<select name="muc#roomconfig_whois"><option value="moderators" selected="selected">Moderators Only</option>
<option value="anyone">Anyone</option> <label for="baz" class="pure-checkbox">
</select> Allow Occupants to Change Subject?
<input id="baz" name="muc#roomconfig_changesubject" type="checkbox">
<label>Password</label> </label>
<input name="muc#roomconfig_roomsecret" type="password">
<div class="input-group cb-input-group"> <label>Who May Discover Real JIDs?</label>
<label>Make Room Moderated?</label> <select name="muc#roomconfig_whois"><option value="moderators" selected="selected">Moderators Only</option>
<input name="muc#roomconfig_moderatedroom" type="checkbox"> <option value="anyone">Anyone</option>
</div> </select>
<div class="input-group cb-input-group">
<label>Make Room Members-Only?</label> <label>Password</label>
<input name="muc#roomconfig_membersonly" type="checkbox"> <input name="muc#roomconfig_roomsecret" type="password">
</div>
<label for="buz" class="pure-checkbox">
Make Room Moderated?
<input id="buz" name="muc#roomconfig_moderatedroom" type="checkbox">
</label>
<label for="blah" class="pure-checkbox">
Make Room Members-Only?
<input id="blah" name="muc#roomconfig_membersonly" type="checkbox">
</label>
<label>Maximum Number of History Messages Returned by Room</label> <label>Maximum Number of History Messages Returned by Room</label>
<input name="muc#roomconfig_historylength" type="textline" value="20"> <input name="muc#roomconfig_historylength" type="number" value="20">
<input type="submit" class="save-submit" value="Save"> </fieldset>
<input type="button" class="cancel-submit" value="Cancel"></form> <fieldset>
<input type="submit" class="pure-button save-submit" value="Save">
<input type="button" class="pure-button cancel-submit" value="Cancel"></form>
</fieldset>
</div> </div>
</div> </div>
</div> </div>
......
sass/_chatrooms.scss
View file @ 1fb18eef
...@@ -67,13 +67,6 @@ ...@@ -67,13 +67,6 @@
} }
} }
} }
label {
display: block;
font-size: 12px;
font-style: italic;
margin-left: 2px;
margin: 0.5em;
}
.chatroom-form-container { .chatroom-form-container {
background-color: white; background-color: white;
border-bottom-left-radius: $chatbox-border-radius; border-bottom-left-radius: $chatbox-border-radius;
...@@ -85,46 +78,6 @@ ...@@ -85,46 +78,6 @@
@include calc(height, '100% - #{$chat-head-height}'); @include calc(height, '100% - #{$chat-head-height}');
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
text-align: center;
width: 100%;
.chatroom-form {
padding: 1em;
.instructions {
color: gray;
font-size: 95%;
}
input {
width: 100%;
padding: 0.5em;
text-align: left;
}
input[type=checkbox] {
width: auto;
margin: auto;
}
input[type=submit], input[type=button] {
width: 50%;
margin-top: 1em;
text-align: center;
}
legend {
font-size: $legend-font-size;
font-weight: bold;
margin: 10px 0 15px 0;
}
label {
font-weight: bold;
display: block;
clear: both;
margin-top: 1em;
label input, label select {
float: right;
}
}
}
} }
} }
} }
......
sass/_core.scss
View file @ 1fb18eef
...@@ -165,18 +165,21 @@ ...@@ -165,18 +165,21 @@
} }
form { form {
label { &.pure-form.converse-form {
font-size: $font-size; padding: 1.5em;
font-weight: bold; label {
height: auto; margin-top: 1em;
margin: 4px; }
} input {
.form-help { margin-bottom: 1em;
color: gray; }
font-size: 85%; .form-help {
padding-top: 5px; color: gray;
&:hover { font-size: 85%;
color: $text-color; padding-top: 5px;
&:hover {
color: $text-color;
}
} }
} }
} }
......
sass/_normalize.scss
View file @ 1fb18eef
...@@ -67,4 +67,16 @@ ...@@ -67,4 +67,16 @@
text-shadow: none; text-shadow: none;
} }
form {
&.pure-form.converse-form {
padding: 1.5em;
label {
margin-top: 1em;
}
input {
margin-bottom: 1em;
}
}
}
} }
sass/_variables.scss
View file @ 1fb18eef
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
$inverse-link-color: white !default; $inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default; $link-shadow-color: #FAFAFA !default;
$text-shadow-color: #FAFAFA !default; $text-shadow-color: #FAFAFA !default;
$text-color: #6C4C44 !default; $text-color: #777 !default;
$border-color: #CCC !default; $border-color: #CCC !default;
$warning-color: #681F2C !default; $warning-color: #681F2C !default;
$light-background-border-color: #E5E9E8 !default; $light-background-border-color: #E5E9E8 !default;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7