Skip to content

C
converse.js
Commit 66c029ed authored by JC Brand's avatar JC Brand
Browse files
Options

More CSS and markup fixes after looking in FF. 

Changed the icon-* selector to apply only to :before (fixes ugly font rendering in FF).
parent 80d8b897
Show whitespace changes
Inline Side-by-side
Showing with 59 additions and 103 deletions
css/converse.css
View file @ 66c029ed
......@@ -229,7 +229,7 @@
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
#conversejs [class^="icon-"], #conversejs [class*=" icon-"] {
#conversejs [class^="icon-"]:before, #conversejs [class*=" icon-"]:before {
background-position: 14px 14px;
background-image: none;
font-family: 'Converse-js';
......@@ -1026,8 +1026,6 @@
font-size: 14px;
padding: 0.25em;
min-height: 0; }
#conversejs input[type=text] {
height: 26px; }
#conversejs strong {
font-weight: 700; }
#conversejs ol, #conversejs ul {
......@@ -1235,7 +1233,7 @@
float: right;
font-size: 9px;
margin: 0 0.2em;
padding: 5px;
padding: 0.5em;
text-decoration: none; }
#conversejs .chatbox-btn:active {
position: relative;
......@@ -1656,13 +1654,11 @@
border: 1px solid #B1BFC4;
height: 25px;
border-radius: 4px;
text-align: left; }
text-align: left;
padding: 0;
padding-left: 0.3em; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status {
width: 155px; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status span {
padding-right: 5px;
padding-left: 5px;
float: left; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
text-shadow: 0 1px 0 #ffffff;
......@@ -1670,14 +1666,11 @@
text-overflow: ellipsis;
white-space: nowrap;
display: inline; }
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form span {
float: left; }
#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
float: right;
clear: right;
height: 22px;
width: 12px;
margin: 0px 5px 0 0;
margin-right: 0.3em;
color: #2A9D8F; }
#conversejs #controlbox .controlbox-pane {
background-color: white;
......
mockup/controlbox.html
View file @ 66c029ed
......@@ -82,8 +82,7 @@
<dl id="target" class="dropdown">
<dt id="fancy-xmpp-status-select" class="fancy-dropdown">
<div class="xmpp-status">
<a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
<span class="icon-online"></span>
<a class="choose-xmpp-status online icon-online" data-value="I am online" href="#" title="Click to change your chat status">
I am online
</a>
<a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
......@@ -92,24 +91,16 @@
<dd>
<ul style="display: none;" class="xmpp-status-menu">
<li>
<a href="#" class="online" data-value="online">
<span class="icon-online"></span>
Online</a>
<a href="#" class="online icon-online" data-value="online">Online</a>
</li>
<li>
<a href="#" class="dnd" data-value="dnd">
<span class="icon-dnd"></span>
Busy</a>
<a href="#" class="dnd icon-dnd" data-value="dnd">Busy</a>
</li>
<li>
<a href="#" class="away" data-value="away">
<span class="icon-away"></span>
Away</a>
<a href="#" class="away icon-away" data-value="away">Away</a>
</li>
<li>
<a href="#" class="offline" data-value="offline">
<span class="icon-offline"></span>
Offline</a>
<a href="#" class="offline icon-offline" data-value="offline">Offline</a>
</li>
</ul>
</dd>
......@@ -118,8 +109,7 @@
</form>
<dl class="add-converse-contact dropdown">
<dt id="xmpp-contact-search" class="fancy-dropdown">
<a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">
<span class="icon-plus"></span>
<a class="toggle-xmpp-contact-form icon-plus" href="#" title="Click to add new chat contacts">
Add a contact
</a>
</dt>
......@@ -127,7 +117,7 @@
<ul>
<li>
<form class="pure-form add-xmpp-contact">
<input type="text" name="identifier" class="username" placeholder="Contact username">
<input type="text" name="identifier" class="username" placeholder="e.g. user@example">
<button class="pure-button button-primary" type="submit">Add</button>
</form>
</li>
......@@ -146,7 +136,7 @@
<dl class="roster-contacts" style="display: block;">
<dt class="roster-group" style="display: block;">
<a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
<a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Colleagues</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
......@@ -170,7 +160,7 @@
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
<a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Family</a>
</dt>
<dd class="away current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
......@@ -187,7 +177,7 @@
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
<a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Friends</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
......@@ -204,7 +194,7 @@
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
<a href="#" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Ungrouped</a>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Click to chat with this contact" href="#">
......@@ -214,7 +204,7 @@
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
<a href="#" class="group-toggle" title="Click to hide these contacts"><i class="icon-opened"></i>Contact Requests</a>
</dt>
<dd class="offline requesting-xmpp-contact">
<span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>
......
mockup/index.html
View file @ 66c029ed
......@@ -43,8 +43,7 @@
<dl id="target" class="dropdown">
<dt id="fancy-xmpp-status-select" class="fancy-dropdown">
<div class="xmpp-status">
<a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
<span class="icon-online"></span>
<a class="choose-xmpp-status online icon-online" data-value="I am online" href="#" title="Click to change your chat status">
I am online
</a>
<a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
......@@ -53,23 +52,16 @@
<dd>
<ul style="display: none;" class="xmpp-status-menu">
<li>
<a href="#" class="online" data-value="online">
<span class="icon-online"></span>
Online</a>
<a href="#" class="online icon-online" data-value="online">Online</a>
</li>
<li>
<a href="#" class="dnd" data-value="dnd">
<span class="icon-dnd"></span>
Busy</a>
<a href="#" class="dnd icon-dnd" data-value="dnd">Busy</a>
</li>
<li>
<a href="#" class="away" data-value="away">
<span class="icon-away"></span>
Away</a>
<a href="#" class="away icon-away" data-value="away">Away</a>
</li>
<li>
<a href="#" class="offline" data-value="offline">
<span class="icon-offline"></span>
<a href="#" class="offline icon-offline" data-value="offline">
Offline</a>
</li>
</ul>
......@@ -79,8 +71,7 @@
</form>
<dl class="add-converse-contact dropdown">
<dt id="xmpp-contact-search" class="fancy-dropdown">
<a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">
<span class="icon-plus"></span>
<a class="toggle-xmpp-contact-form icon-plus" href="#" title="Click to add new chat contacts">
Add a contact
</a>
</dt>
......@@ -247,13 +238,13 @@
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head chat-head-chatbox">
<a class="chatbox-btn close-chatbox-button icon-close" title="Close this chat box"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus" title="Minimize this chat box"></a>
<a class="chatbox-btn toggle-chatbox-button icon-eye" title="View more information on this person"></a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn toggle-chatbox-button icon-eye"></a>
<canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title">
<a href="http://opkode.com" target="_blank" class="user">
Jan-Carel Brand
JC Brand
</a>
</div>
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
......
sass/_chatbox.scss
View file @ 66c029ed
......@@ -44,7 +44,7 @@
float: right;
font-size: $box-close-font-size;
margin: 0 0.2em;
padding: 5px;
padding: 0.5em;
text-decoration: none;
&:active {
position: relative;
......
sass/_controlbox.scss
View file @ 66c029ed
......@@ -268,15 +268,12 @@
.fancy-dropdown {
border: 1px solid $light-background-border-color;
height: $controlbox-dropdown-height;
border-radius: 4px;
border-radius: $chatbox-border-radius;
text-align: left;
padding: 0;
padding-left: 0.3em;
.choose-xmpp-status {
width: 155px;
span {
padding-right: 5px;
padding-left: 5px;
float: left;
}
}
.choose-xmpp-status,
.toggle-xmpp-contact-form {
......@@ -286,17 +283,13 @@
white-space: nowrap;
display: inline;
}
.toggle-xmpp-contact-form span {
float: left;
}
}
#fancy-xmpp-status-select {
a.change-xmpp-status-message {
float: right;
clear: right;
height: 22px;
width: 12px;
margin: 0px 5px 0 0;
margin-right: 0.3em;
color: $link-color;
}
}
......
sass/_fonts.scss
View file @ 66c029ed
......@@ -132,7 +132,7 @@
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"], [class*=" icon-"] {
[class^="icon-"]:before, [class*=" icon-"]:before {
background-position: 14px 14px;
background-image: none;
font-family: 'Converse-js';
......
sass/_normalize.scss
View file @ 66c029ed
......@@ -38,10 +38,6 @@
min-height: 0;
}
input[type=text] {
height: 26px;
}
strong {
font-weight: 700;
}
......
src/templates/add_contact_dropdown.html
View file @ 66c029ed
<dl class="add-converse-contact dropdown">
<dt id="xmpp-contact-search" class="fancy-dropdown">
<a class="toggle-xmpp-contact-form" href="#"
title="{{label_click_to_chat}}">
<span class="icon-plus"></span>{{label_add_contact}}</a>
<a class="toggle-xmpp-contact-form icon-plus" href="#" title="{{label_click_to_chat}}"> {{label_add_contact}}</a>
</dt>
<dd class="search-xmpp" style="display:none"><ul></ul></dd>
</dl>
src/templates/chat_status.html
View file @ 66c029ed
<div class="xmpp-status">
<a class="choose-xmpp-status {{chat_status}}"
data-value="{{status_message}}"
href="#" title="{{desc_change_status}}">
<span class="icon-{{chat_status}}"></span>{{status_message}}
<a class="choose-xmpp-status {{chat_status}} icon-{{chat_status}}" data-value="{{status_message}}" href="#" title="{{desc_change_status}}">
{{status_message}}
</a>
<a class="change-xmpp-status-message icon-pencil"
href="#"
title="{{desc_custom_status}}"></a>
<a class="change-xmpp-status-message icon-pencil" href="#" title="{{desc_custom_status}}"></a>
</div>
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