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

Restyle error icons, move them outside the bubble

Browse source
This commit is contained in:
lilia 2016-04-14 16:42:42 -07:00
parent 89d3b772d5
commit b6f785737c
7 changed files with 186 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
background.html
View file

@ -304,16 +304,29 @@
<script type='text/x-tmpl-mustache' id='generic-error'> <script type='text/x-tmpl-mustache' id='generic-error'>
<p>{{ message }}</p> <p>{{ message }}</p>
</script> </script>
<script type='text/x-tmpl-mustache' id='error-icon'>
<span class='error-icon'>
</span>
{{ #message }}
<span class='error-message'>{{message}}</span>
{{ /message }}
</script>
<script type='text/x-tmpl-mustache' id='contact-detail'> <script type='text/x-tmpl-mustache' id='contact-detail'>
<div class='clearfix'> <div class='clearfix'>
{{ #errors }}
<span class='error-icon'>
<span class='error-message'>{{message}}</span>
</span>
{{ /errors }}
{{> avatar }} {{> avatar }}
<span class='name'>{{ name }} <div class='contact-details'>
</span> {{ #errors }}
<div class='error-icon-container'>
<span class='error-icon'></span>
</div>
{{ /errors }}
<span class='name'>{{ name }}</span>
{{ #errors }}
{{ #message }}
<p class='error-message'>{{message}}</p>
{{ /message }}
{{ /errors }}
</div>
</div> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='link_to_support'> <script type='text/x-tmpl-mustache' id='link_to_support'>
@ -324,11 +337,13 @@
<script type='text/x-tmpl-mustache' id='key-conflict-dialogue'> <script type='text/x-tmpl-mustache' id='key-conflict-dialogue'>
<h3 class='header'>{{ newIdentity }}</h3> <h3 class='header'>{{ newIdentity }}</h3>
<div class='content clearfix'> <div class='content clearfix'>
{{> avatar }} <div class='clearfix'>
<span class='name'>{{ name }}</span> {{> avatar }}
<button class='resolve'>{{ resolve }}</button> <span class='name'>{{ name }}</span>
<a href='#' class='hideKeys hide'> {{ hideKeys }} </a> <button class='resolve'>{{ resolve }}</button>
<a href='#' class='showKeys'> {{ showKeys }} </a> <a href='#' class='hideKeys hide'> {{ hideKeys }} </a>
<a href='#' class='showKeys'> {{ showKeys }} </a>
</div>
<div class='keys hide'> <div class='keys hide'>
<p> <p>
{{ message }} {{ message }}

1
images/warning.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 151 B

13
js/views/message_view.js
View file

@ -7,6 +7,13 @@
var URL_REGEX = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9\u00A0-\uD7FF\uE000-\uFDCF\uFDF0-\uFFFD+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi; var URL_REGEX = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9\u00A0-\uD7FF\uE000-\uFDCF\uFDF0-\uFFFD+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
var ErrorIconView = Whisper.View.extend({
templateName: 'error-icon',
className: 'error-icon-container',
render_attributes: function() {
return { message: this.model && this.model.message };
}
});
var NetworkErrorView = Whisper.View.extend({ var NetworkErrorView = Whisper.View.extend({
tagName: 'span', tagName: 'span',
className: 'hasRetry', className: 'hasRetry',
@ -33,6 +40,7 @@
}, },
events: { events: {
'click .retry': 'retryMessage', 'click .retry': 'retryMessage',
'click .error-icon': 'select',
'click .timestamp': 'select', 'click .timestamp': 'select',
'click .status': 'select', 'click .status': 'select',
'click .error': 'select' 'click .error': 'select'
@ -78,12 +86,13 @@
renderErrors: function() { renderErrors: function() {
var errors = this.model.get('errors'); var errors = this.model.get('errors');
if (_.size(errors) > 0) { if (_.size(errors) > 0) {
this.$el.addClass('error');
if (this.model.isIncoming()) { if (this.model.isIncoming()) {
this.$('.content').text(this.model.getDescription()).addClass('error-message'); this.$('.content').text(this.model.getDescription()).addClass('error-message');
} }
var view = new ErrorIconView({ model: errors[0] });
view.render().$el.appendTo(this.$('.bubble'));
} else { } else {
this.$el.removeClass('error'); this.$('.error-icon-container').remove();
} }
if (this.model.hasNetworkError()) { if (this.model.hasNetworkError()) {
this.$('.meta').prepend(new NetworkErrorView().render().el); this.$('.meta').prepend(new NetworkErrorView().render().el);

109
stylesheets/_conversation.scss
View file

@ -152,6 +152,18 @@
.contacts .contact-detail { .contacts .contact-detail {
padding: 0 36px; padding: 0 36px;
margin-bottom: 5px; margin-bottom: 5px;
.error-icon-container {
float: right;
}
.error-message {
margin: 6px 0 0;
font-size: small;
font-weight: bold;
color: red;
}
} }
h3 { h3 {
@ -159,45 +171,6 @@
padding: 5px; padding: 5px;
} }
.error-icon {
display: inline-block;
width: 18px;
height: 18px;
background: url('/images/error_red.png') no-repeat center center;
vertical-align: middle;
position: relative;
margin: 9px;
float: right;
.error-message {
display: none;
position: absolute;
background: black;
color: white;
border-radius: $border-radius;
padding: 0.5em;
font-weight: normal;
bottom: calc(100% + 16px);
left: 50%;
margin-left: -130px;
width: 180px;
z-index: 10;
&:before {
left: -10px;
display: block;
content: '';
position: absolute;
bottom: -23px;
left: calc(50% - 6px + 40px);
border: 6px solid transparent;
border-top: 18px solid #000000;
}
}
&:hover .error-message { display: block; }
}
button.conflict { button.conflict {
float: right; float: right;
background: #d00; background: #d00;
@ -208,6 +181,55 @@
border: solid 1px #ccc; border: solid 1px #ccc;
} }
} }
li.entry .error-icon-container {
position: absolute;
top: 0;
left: calc(100% + 5px);
height: 100%;
.error-icon {
cursor: pointer;
display: block;
height: 100%;
}
.error-message {
display: none;
position: absolute;
background: black;
color: white;
border-radius: $border-radius;
padding: 0.5em;
font-weight: normal;
bottom: calc(50% + 18px);
left: -84px;
width: 180px;
z-index: 10;
&:before {
display: block;
content: '';
position: absolute;
bottom: -16px;
left: 50%;
border: 6px solid transparent;
border-top: 10px solid #000000;
}
}
&:hover .error-message { display: inline-block; }
}
.error-icon {
display: inline-block;
width: $error-icon-size;
height: $error-icon-size;
position: relative;
@include color-svg('/images/warning.svg', red);
}
.group-update { .group-update {
font-size: smaller; font-size: smaller;
} }
@ -261,7 +283,7 @@
max-width: 30em; max-width: 30em;
@media(max-width: $big-avatar-min-width - 1px) { @media(max-width: $big-avatar-min-width - 1px) {
max-width: calc(100% - 45px); // avatar size + padding max-width: calc(100% - 45px - #{$error-icon-size}); // avatar size + padding + error-icon size
} }
.content { .content {
@ -282,6 +304,7 @@
font-size: smaller; font-size: smaller;
margin-top: 3px; margin-top: 3px;
float: right; float: right;
text-align: right;
line-height: 18px; line-height: 18px;
.hasRetry + .timestamp { .hasRetry + .timestamp {
@ -374,6 +397,10 @@
} }
.outgoing { .outgoing {
.error-icon-container {
left: auto;
right: calc(100% + 5px);
}
.avatar, .bubble { .avatar, .bubble {
float: right; float: right;
@ -431,7 +458,7 @@
opacity: 0.8; opacity: 0.8;
} }
.bubble .error-message { .bubble .content.error-message {
font-style: italic; font-style: italic;
} }

22
stylesheets/_global.scss
View file

@ -303,19 +303,18 @@ $avatar-size: 44px;
&:last-child::after { &:last-child::after {
display: none; display: none;
} }
}
.contact-details {
$left-margin: 8px;
.contact-details { vertical-align: middle;
$left-margin: 8px; display: inline-block;
margin: 0 0 0 $left-margin;
width: calc(100% - #{$avatar-size} - #{$left-margin} - 4px);
vertical-align: middle; p {
display: inline-block; overflow-x: hidden;
margin: 0 0 0 $left-margin; text-overflow: ellipsis;
width: calc(100% - #{$avatar-size} - #{$left-margin});
p {
overflow-x: hidden;
text-overflow: ellipsis;
}
} }
.name { .name {
@ -333,6 +332,7 @@ $avatar-size: 44px;
} }
} }
.recipients-input { .recipients-input {
position: relative; position: relative;

1
stylesheets/_variables.scss
View file

@ -42,3 +42,4 @@ $big-avatar-min-width: 900px;
$border-radius: 5px; $border-radius: 5px;
$error-icon-size: 24px;

113
stylesheets/manifest.css
View file

@ -274,22 +274,23 @@ img.emoji {
margin-top: 0; } margin-top: 0; }
.contact:last-child::after { .contact:last-child::after {
display: none; } display: none; }
.contact .contact-details {
vertical-align: middle; .contact-details {
display: inline-block; vertical-align: middle;
margin: 0 0 0 8px; display: inline-block;
width: calc(100% - 44px - 8px); } margin: 0 0 0 8px;
.contact .contact-details p { width: calc(100% - 44px - 8px - 4px); }
overflow-x: hidden; .contact-details p {
text-overflow: ellipsis; } overflow-x: hidden;
.contact .name { text-overflow: ellipsis; }
.contact-details .name {
display: block; display: block;
margin: 0; margin: 0;
font-size: 1em; font-size: 1em;
font-weight: 400; font-weight: 400;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; } overflow-x: hidden; }
.contact .number { .contact-details .number {
color: #616161; color: #616161;
font-size: small; } font-size: small; }
@ -807,42 +808,16 @@ input.search {
.message-detail .contacts .contact-detail { .message-detail .contacts .contact-detail {
padding: 0 36px; padding: 0 36px;
margin-bottom: 5px; } margin-bottom: 5px; }
.message-detail .contacts .contact-detail .error-icon-container {
float: right; }
.message-detail .contacts .contact-detail .error-message {
margin: 6px 0 0;
font-size: small;
font-weight: bold;
color: red; }
.message-detail h3 { .message-detail h3 {
font-size: 1em; font-size: 1em;
padding: 5px; } padding: 5px; }
.message-detail .error-icon {
display: inline-block;
width: 18px;
height: 18px;
background: url("/images/error_red.png") no-repeat center center;
vertical-align: middle;
position: relative;
margin: 9px;
float: right; }
.message-detail .error-icon .error-message {
display: none;
position: absolute;
background: black;
color: white;
border-radius: 5px;
padding: 0.5em;
font-weight: normal;
bottom: calc(100% + 16px);
left: 50%;
margin-left: -130px;
width: 180px;
z-index: 10; }
.message-detail .error-icon .error-message:before {
left: -10px;
display: block;
content: '';
position: absolute;
bottom: -23px;
left: calc(50% - 6px + 40px);
border: 6px solid transparent;
border-top: 18px solid #000000; }
.message-detail .error-icon:hover .error-message {
display: block; }
.message-detail button.conflict { .message-detail button.conflict {
float: right; float: right;
background: #d00; } background: #d00; }
@ -851,6 +826,47 @@ input.search {
color: #454545; color: #454545;
border: solid 1px #ccc; } border: solid 1px #ccc; }
li.entry .error-icon-container {
position: absolute;
top: 0;
left: calc(100% + 5px);
height: 100%; }
li.entry .error-icon-container .error-icon {
cursor: pointer;
display: block;
height: 100%; }
li.entry .error-icon-container .error-message {
display: none;
position: absolute;
background: black;
color: white;
border-radius: 5px;
padding: 0.5em;
font-weight: normal;
bottom: calc(50% + 18px);
left: -84px;
width: 180px;
z-index: 10; }
li.entry .error-icon-container .error-message:before {
display: block;
content: '';
position: absolute;
bottom: -16px;
left: 50%;
border: 6px solid transparent;
border-top: 10px solid #000000; }
li.entry .error-icon-container:hover .error-message {
display: inline-block; }
.error-icon {
display: inline-block;
width: 24px;
height: 24px;
position: relative;
-webkit-mask: url("/images/warning.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: red; }
.group-update { .group-update {
font-size: smaller; } font-size: smaller; }
@ -899,7 +915,7 @@ input.search {
@media (max-width: 899px) { @media (max-width: 899px) {
.message-container .bubble, .message-container .bubble,
.message-list .bubble { .message-list .bubble {
max-width: calc(100% - 45px); } } max-width: calc(100% - 45px - 24px); } }
.message-container .bubble .content, .message-container .bubble .content,
.message-list .bubble .content { .message-list .bubble .content {
-webkit-user-select: text; -webkit-user-select: text;
@ -915,6 +931,7 @@ input.search {
font-size: smaller; font-size: smaller;
margin-top: 3px; margin-top: 3px;
float: right; float: right;
text-align: right;
line-height: 18px; } line-height: 18px; }
.message-container .meta .hasRetry + .timestamp:before, .message-container .meta .hasRetry + .timestamp:before,
.message-list .meta .hasRetry + .timestamp:before { .message-list .meta .hasRetry + .timestamp:before {
@ -999,6 +1016,10 @@ input.search {
.message-list .incoming .bubble .attachments a, .message-list .incoming .bubble .attachments a,
.message-list .incoming .bubble .content a { .message-list .incoming .bubble .content a {
color: #f3f3f3; } color: #f3f3f3; }
.message-container .outgoing .error-icon-container,
.message-list .outgoing .error-icon-container {
left: auto;
right: calc(100% + 5px); }
.message-container .outgoing .avatar, .message-container .outgoing .bubble, .message-container .outgoing .avatar, .message-container .outgoing .bubble,
.message-list .outgoing .avatar, .message-list .outgoing .avatar,
.message-list .outgoing .bubble { .message-list .outgoing .bubble {
@ -1041,8 +1062,8 @@ input.search {
font: small; font: small;
font-style: italic; font-style: italic;
opacity: 0.8; } opacity: 0.8; }
.message-container .bubble .error-message, .message-container .bubble .content.error-message,
.message-list .bubble .error-message { .message-list .bubble .content.error-message {
font-style: italic; } font-style: italic; }
.message-container .key-conflict, .message-container .key-conflict,
.message-list .key-conflict { .message-list .key-conflict {