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

Nice styling and fix sizing issue for chatrooms list and info

Browse Source
This commit is contained in:
JC Brand 2015-10-30 17:33:14 +00:00
parent c647783281
commit cd4d6a981c
5 changed files with 33 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
css/converse.css
View File

@ -1053,9 +1053,9 @@
width: auto; width: auto;
z-index: 30; } z-index: 30; }
#conversejs ::selection { #conversejs ::selection {
background-color: #E1E6E5; } background-color: #DCF9F6; }
#conversejs ::-moz-selection { #conversejs ::-moz-selection {
background-color: #E1E6E5; } background-color: #DCF9F6; }
#conversejs .no-text-select { #conversejs .no-text-select {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -1435,7 +1435,7 @@
padding: 5px; padding: 5px;
z-index: 98; } z-index: 98; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
background-color: #E1E6E5; } background-color: #DCF9F6; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li {
padding: 7px; padding: 7px;
background-color: white; background-color: white;
@ -1449,7 +1449,7 @@
padding: 1px; padding: 1px;
text-decoration: none; } text-decoration: none; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover {
background-color: #E1E6E5; } background-color: #DCF9F6; }
#conversejs .chatbox .dragresize { #conversejs .chatbox .dragresize {
background: transparent; background: transparent;
border: 0; border: 0;
@ -1552,34 +1552,28 @@
color: #818479; color: #818479;
font-weight: normal; font-weight: normal;
padding: 0; padding: 0;
padding-bottom: 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: #818479; color: #818479;
display: block; display: block;
font-weight: bold;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0.4em;
padding-top: 0.5em;
text-overflow: ellipsis;
text-shadow: 0 1px 0 #FAFAFA; text-shadow: 0 1px 0 #FAFAFA;
white-space: nowrap; } word-wrap: break-word; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover { #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover {
background-color: #E1E6E5; } background-color: #DCF9F6; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover .room-info {
display: block;
font-size: 14px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info { #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info {
width: 15px;
display: none; display: none;
clear: right; } clear: right;
display: block; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info:before {
font-size: 15px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.open-room { #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.open-room {
float: left; float: left;
overflow-x: hidden; width: 85%; }
text-overflow: ellipsis;
white-space: nowrap;
width: 150px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info { #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info {
font-size: 11px; font-size: 11px;
font-style: normal; font-style: normal;
@ -1613,7 +1607,7 @@
z-index: 21; z-index: 21;
background-color: #FCFDFD; } background-color: #FCFDFD; }
#conversejs #controlbox .dropdown dd ul li:hover { #conversejs #controlbox .dropdown dd ul li:hover {
background-color: #E1E6E5; } background-color: #DCF9F6; }
#conversejs #controlbox .dropdown dd.search-xmpp ul { #conversejs #controlbox .dropdown dd.search-xmpp ul {
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); } box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
#conversejs #controlbox .dropdown dd.search-xmpp ul li:hover { #conversejs #controlbox .dropdown dd.search-xmpp ul li:hover {
@ -1754,7 +1748,6 @@
border-top-right-radius: 4px; border-top-right-radius: 4px;
color: #0a0a0a; color: #0a0a0a;
float: right; float: right;
font-weight: bold;
height: 100%; height: 100%;
margin: 0 7px; margin: 0 7px;
padding: 10px 8px 0 8px; } padding: 10px 8px 0 8px; }
@ -1779,9 +1772,8 @@
#conversejs #converse-roster .filter-type { #conversejs #converse-roster .filter-type {
display: table-cell; display: table-cell;
float: right; float: right;
font-size: calc(14px - 2px); font-size: calc(14px - 1px);
height: 25px; height: 25px;
margin: 0 0 0.5em -1px;
padding: 0; padding: 0;
width: 84px; width: 84px;
border-radius: 0; border-radius: 0;
@ -1813,7 +1805,7 @@
padding: 0.5em; padding: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; } text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #converse-roster .roster-contacts dt.roster-group:hover { #conversejs #converse-roster .roster-contacts dt.roster-group:hover {
background-color: #E1E6E5; } background-color: #DCF9F6; }
#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle { #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
color: #818479; color: #818479;
display: block; display: block;
@ -1829,7 +1821,7 @@
padding: 4px 2px 0 4px; padding: 4px 2px 0 4px;
text-shadow: 0 1px 0 #FAFAFA; } text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #converse-roster .roster-contacts dd:hover { #conversejs #converse-roster .roster-contacts dd:hover {
background-color: #E1E6E5; } background-color: #DCF9F6; }
#conversejs #converse-roster .roster-contacts dd:hover a.remove-xmpp-contact { #conversejs #converse-roster .roster-contacts dd:hover a.remove-xmpp-contact {
display: inline-block; } display: inline-block; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact.request-actions { #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact.request-actions {

6
mockup/controlbox.html
View File

@ -271,7 +271,11 @@
<a class="room-info icon-room-info" data-room-jid="eee@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a> <a class="room-info icon-room-info" data-room-jid="eee@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a>
</dd> </dd>
<dd class="available-chatroom"> <dd class="available-chatroom">
<a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Software Development</a> <a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Software Development Techniques</a>
<a class="room-info icon-room-info" data-room-jid="hello@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a>
</dd>
<dd class="available-chatroom">
<a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Support</a>
<a class="room-info icon-room-info" data-room-jid="hello@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a> <a class="room-info icon-room-info" data-room-jid="hello@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a>
</dd> </dd>
</dl> </dl>

23
sass/_controlbox.scss
View File

@ -108,6 +108,7 @@
color: $text-color; color: $text-color;
font-weight: normal; font-weight: normal;
padding: 0; padding: 0;
padding-bottom: 0.5em;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 $text-shadow-color;
} }
dd.available-chatroom { dd.available-chatroom {
@ -115,32 +116,25 @@
clear: both; clear: both;
color: $text-color; color: $text-color;
display: block; display: block;
font-weight: bold;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0.4em;
padding-top: 0.5em;
text-overflow: ellipsis;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 $text-shadow-color;
white-space: nowrap; word-wrap: break-word;
&:hover { &:hover {
background-color: $highlight-color; background-color: $highlight-color;
.room-info {
display: block;
font-size: 14px;
}
} }
a { a {
&.room-info { &.room-info {
width: 15px;
display: none; display: none;
clear: right; clear: right;
display: block;
&:before {
font-size: 15px;
}
} }
&.open-room { &.open-room {
float: left; float: left;
overflow-x: hidden; width: 85%;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
} }
} }
.room-info { .room-info {
@ -377,7 +371,6 @@
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: $chatbox-border-radius;
color: #0a0a0a; color: #0a0a0a;
float: right; float: right;
font-weight: bold;
height: 100%; height: 100%;
margin: 0 $chat-gutter; margin: 0 $chat-gutter;
padding: 10px 8px 0 8px; padding: 10px 8px 0 8px;

3
sass/_roster.scss
View File

@ -23,9 +23,8 @@
.filter-type { .filter-type {
display: table-cell; display: table-cell;
float: right; float: right;
font-size: calc(#{$font-size} - 2px); font-size: calc(#{$font-size} - 1px);
height: $controlbox-dropdown-height; height: $controlbox-dropdown-height;
margin: 0 0 0.5em -1px;
padding: 0; padding: 0;
width: 84px; width: 84px;
border-radius: 0; border-radius: 0;

3
sass/_variables.scss
View File

@ -10,7 +10,6 @@ $text-shadow-color: #FAFAFA !default;
$text-color: #818479 !default; $text-color: #818479 !default;
$border-color: #CCC !default; $border-color: #CCC !default;
$icon-color: #114327 !default; $icon-color: #114327 !default;
$highlight-color: #E1E6E5 !default;
$chat-head-color: #F4A261 !default; $chat-head-color: #F4A261 !default;
$chatroom-head-color: #E76F51 !default; $chatroom-head-color: #E76F51 !default;
$chat-head-text-color: white !default; $chat-head-text-color: white !default;
@ -21,6 +20,8 @@ $chat-textarea-height: 70px !default;
$message-them-color: #1A9707 !default; $message-them-color: #1A9707 !default;
$roster-height: 194px !default; $roster-height: 194px !default;
$highlight-color: #DCF9F6 !default;
$controlbox-head-color: #577BDD !default; $controlbox-head-color: #577BDD !default;
$controlbox-dropdown-height: 25px !default; $controlbox-dropdown-height: 25px !default;