diff --git a/background.html b/background.html index 94a0e2160..37b907cff 100644 --- a/background.html +++ b/background.html @@ -187,6 +187,12 @@
+ {{ #errors }} + + + + + {{ /errors }} @@ -197,12 +203,6 @@ {{ /received_at }} - {{ #errors }} - - - - - {{ /errors }}
{{ errorLabel }} {{message}}
{{ sent }} {{ sent_at }} {{ received_at }}
{{ errorLabel }} {{message}}
{{tofrom}}
diff --git a/js/views/message_view.js b/js/views/message_view.js index 609fabde0..fb9968d28 100644 --- a/js/views/message_view.js +++ b/js/views/message_view.js @@ -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() { diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index df7099ba4..4689b04f1 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -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; + } + + .meta { + margin-top: 3px; + float: right; + cursor: pointer; + + .timestamp, .status { opacity: 0.5; + } - &:hover { + &:hover { + .timestamp, .status { opacity: 1.0; } + .timestamp { + text-decoration: underline; + } } } - .error.bubble { - cursor: pointer; - background: url('/images/error_red.png') no-repeat; + .status { + float: right; + width: 18px; + height: 1em; + } + .sent .status { + display: inline-block; + background: url('/images/check-white.png'); } - .incoming .error.bubble { - padding-right: 40px; - background-position: calc(100% - 12px) 9px; + .delivered .status { + display: inline-block; + background: url('/images/double-check-white.png'); + } + .pending .status { + display: inline-block; + background: none; + &:before { content: '...'; } } - .outgoing .error.bubble { - padding-left: 40px; - background-position: 12px 9px; + .error .status { + position: relative; + display: inline-block; + width: 18px; + height: 18px; + opacity: 1 !important; + background: url('/images/error_red.png') no-repeat; + cursor: pointer; } .incoming { diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 95bad68b8..c7c3f7718 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -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 {