thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Move error indicators on message bubbles

Browse source 
// FREEBIE
This commit is contained in:
lilia 2016-02-14 23:30:14 -08:00
parent 5340791868
commit 28c763992a
4 changed files with 92 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
background.html
View file

@ -187,6 +187,12 @@
<div class='message-container'></div>
<div class='info'>
<table>
{{ #errors }}
<tr>
<td class='label'>{{ errorLabel }}</td>
<td> <span class='error-message'>{{message}}</span> </td>
</tr>
{{ /errors }}
<tr>
<td class='label'>{{ sent }}</td>
<td> {{ sent_at }}</td>
@ -197,12 +203,6 @@
<td> {{ received_at }}</td>
</tr>
{{ /received_at }}
{{ #errors }}
<tr>
<td class='label'>{{ errorLabel }}</td>
<td> <span class='error-message'>{{message}}</span> </td>
</tr>
{{ /errors }}
<tr> <td class='tofrom label'>{{tofrom}}</td> </tr>
</table>
<div class='contacts'>

4
js/views/message_view.js
View file

@ -56,12 +56,12 @@
renderErrors: function() {
var errors = this.model.get('errors');
if (_.size(errors) > 0) {
this.$('.bubble').addClass('error');
this.$el.addClass('error');
if (this.model.isIncoming()) {
this.$('.content').text(this.model.getDescription()).addClass('error-message');
}
} else {
this.$('.bubble').removeClass('error');
this.$el.removeClass('error');
}
},
renderControl: function() {

79
stylesheets/_conversation.scss
View file

@ -257,7 +257,6 @@
border: solid 1px #ccc;
}
}
.group-update {
font-size: smaller;
}
@ -288,34 +287,12 @@
.timestamp {
font-size: smaller;
margin-right: 3px;
&:hover {
text-decoration: underline;
}
}
.outgoing.entry {
.status {
display: inline-block;
width: 18px;
height: 1em;
}
&.sent .status {
background: url('/images/check-white.png');
}
&.delivered .status {
background: url('/images/double-check-white.png');
}
&.pending .status {
background: none;
&:before { content: '...'; }
}
}
.message-detail,
.message-list {
list-style: none;
li {
max-width: 800px;
margin: 0 8px 16px;
@ -358,29 +335,53 @@
p {
margin: 0;
}
.meta {
margin-top: 3px;
float: right;
cursor: pointer;
opacity: 0.5;
}
&:hover {
.meta {
margin-top: 3px;
float: right;
cursor: pointer;
.timestamp, .status {
opacity: 0.5;
}
&:hover {
.timestamp, .status {
opacity: 1.0;
}
.timestamp {
text-decoration: underline;
}
}
}
.error.bubble {
cursor: pointer;
.status {
float: right;
width: 18px;
height: 1em;
}
.sent .status {
display: inline-block;
background: url('/images/check-white.png');
}
.delivered .status {
display: inline-block;
background: url('/images/double-check-white.png');
}
.pending .status {
display: inline-block;
background: none;
&:before { content: '...'; }
}
.error .status {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
opacity: 1 !important;
background: url('/images/error_red.png') no-repeat;
}
.incoming .error.bubble {
padding-right: 40px;
background-position: calc(100% - 12px) 9px;
}
.outgoing .error.bubble {
padding-left: 40px;
background-position: 12px 9px;
cursor: pointer;
}
.incoming {

79
stylesheets/manifest.css
View file

@ -791,21 +791,6 @@ input.search {
.timestamp {
font-size: smaller;
margin-right: 3px; }
.timestamp:hover {
text-decoration: underline; }
.outgoing.entry .status {
display: inline-block;
width: 18px;
height: 1em; }
.outgoing.entry.sent .status {
background: url("/images/check-white.png"); }
.outgoing.entry.delivered .status {
background: url("/images/double-check-white.png"); }
.outgoing.entry.pending .status {
background: none; }
.outgoing.entry.pending .status:before {
content: '...'; }
.message-detail,
.message-list {
@ -848,27 +833,51 @@ input.search {
.message-detail .bubble p,
.message-list .bubble p {
margin: 0; }
.message-detail .bubble .meta,
.message-list .bubble .meta {
margin-top: 3px;
float: right;
cursor: pointer;
.message-detail .meta,
.message-list .meta {
margin-top: 3px;
float: right;
cursor: pointer; }
.message-detail .meta .timestamp, .message-detail .meta .status,
.message-list .meta .timestamp,
.message-list .meta .status {
opacity: 0.5; }
.message-detail .bubble .meta:hover,
.message-list .bubble .meta:hover {
opacity: 1.0; }
.message-detail .error.bubble,
.message-list .error.bubble {
cursor: pointer;
background: url("/images/error_red.png") no-repeat; }
.message-detail .incoming .error.bubble,
.message-list .incoming .error.bubble {
padding-right: 40px;
background-position: calc(100% - 12px) 9px; }
.message-detail .outgoing .error.bubble,
.message-list .outgoing .error.bubble {
padding-left: 40px;
background-position: 12px 9px; }
.message-detail .meta:hover .timestamp, .message-detail .meta:hover .status,
.message-list .meta:hover .timestamp,
.message-list .meta:hover .status {
opacity: 1.0; }
.message-detail .meta:hover .timestamp,
.message-list .meta:hover .timestamp {
text-decoration: underline; }
.message-detail .status,
.message-list .status {
float: right;
width: 18px;
height: 1em; }
.message-detail .sent .status,
.message-list .sent .status {
display: inline-block;
background: url("/images/check-white.png"); }
.message-detail .delivered .status,
.message-list .delivered .status {
display: inline-block;
background: url("/images/double-check-white.png"); }
.message-detail .pending .status,
.message-list .pending .status {
display: inline-block;
background: none; }
.message-detail .pending .status:before,
.message-list .pending .status:before {
content: '...'; }
.message-detail .error .status,
.message-list .error .status {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
opacity: 1 !important;
background: url("/images/error_red.png") no-repeat;
cursor: pointer; }
.message-detail .incoming .avatar, .message-detail .incoming .bubble,
.message-list .incoming .avatar,
.message-list .incoming .bubble {