diff --git a/background.html b/background.html index 29ff71e2ca..418cb86654 100644 --- a/background.html +++ b/background.html @@ -291,6 +291,11 @@ <span class='status hide'></span> <span class='timer'></span> </div> + {{ #hoverIcon }} + <div class='hover-icon-container'> + <span class='dots-horizontal-icon'></span> + </div> + {{ /hoverIcon }} </div> </script> <script type='text/x-tmpl-mustache' id='hourglass'> diff --git a/images/dots-horizontal.svg b/images/dots-horizontal.svg new file mode 100644 index 0000000000..35e5a0ab66 --- /dev/null +++ b/images/dots-horizontal.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z" /></svg> \ No newline at end of file diff --git a/js/views/message_view.js b/js/views/message_view.js index 760d7cfe7e..824da362f3 100644 --- a/js/views/message_view.js +++ b/js/views/message_view.js @@ -468,6 +468,9 @@ }, render() { const contact = this.model.isIncoming() ? this.model.getContact() : null; + const errors = this.model.get('errors'); + const hasErrors = errors && errors.length > 0; + this.$el.html(Mustache.render(_.result(this, 'template', ''), { message: this.model.get('body'), timestamp: this.model.get('sent_at'), @@ -475,6 +478,7 @@ avatar: (contact && contact.getAvatar()), profileName: (contact && contact.getProfileName()), innerBubbleClasses: this.isImageWithoutCaption() ? '' : 'with-tail', + hoverIcon: !hasErrors, }, this.render_partials())); this.timeStampView.setElement(this.$('.timestamp')); this.timeStampView.update(); diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 16a4dfd5b4..d534832d5c 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -353,6 +353,25 @@ li.entry .error-icon-container { &:hover .error-message { display: inline-block; } } +li.entry .hover-icon-container { + position: absolute; + top: 0; + left: calc(100% + 5px); + height: 100%; + + visibility: hidden; + + .dots-horizontal-icon { + display: block; + height: 100%; + } + + cursor: pointer; +} + +li.entry:hover .hover-icon-container { + visibility: visible; +} .error-icon { display: inline-block; @@ -362,6 +381,18 @@ li.entry .error-icon-container { @include color-svg('../images/warning.svg', red); } +.dots-horizontal-icon { + display: inline-block; + width: $error-icon-size; + height: $error-icon-size; + position: relative; + @include color-svg('../images/dots-horizontal.svg', gray); + + &:hover { + @include color-svg('../images/dots-horizontal.svg', black); + } +} + .group { li.entry .unregistered-user-error { display: none; @@ -667,6 +698,10 @@ span.status { left: auto; right: calc(100% + 5px); } + .hover-icon-container { + left: auto; + right: calc(100% + 5px); + } .avatar, .bubble { float: right; diff --git a/test/index.html b/test/index.html index 2707825046..22f049276c 100644 --- a/test/index.html +++ b/test/index.html @@ -226,6 +226,11 @@ <span class='status hide'></span> <span class='timer'></span> </div> + {{ #hoverIcon }} + <div class='hover-icon-container'> + <span class='dots-horizontal-icon'></span> + </div> + {{ /hoverIcon }} </div> </script> <script type='text/x-tmpl-mustache' id='hourglass'> diff --git a/test/styleguide/legacy_templates.js b/test/styleguide/legacy_templates.js index 63e3c0e007..97a5bb6e3a 100644 --- a/test/styleguide/legacy_templates.js +++ b/test/styleguide/legacy_templates.js @@ -24,29 +24,34 @@ window.Whisper.View.Templates = { </span> `, message: ` - {{> avatar }} - <div class='bubble {{ avatar.color }}'> - <div class='sender' dir='auto'> - {{ sender }} - {{ #profileName }} - <span class='profileName'>{{ profileName }} </span> - {{ /profileName }} - </div> - <div class='tail-wrapper {{ innerBubbleClasses }}'> - <div class='inner-bubble'> - <div class='quote-wrapper'></div> - <div class='attachments'></div> - <div class='content' dir='auto'> - {{ #message }}<div class='body'>{{ message }}</div>{{ /message }} + {{> avatar }} + <div class='bubble {{ avatar.color }}'> + <div class='sender' dir='auto'> + {{ sender }} + {{ #profileName }} + <span class='profileName'>{{ profileName }} </span> + {{ /profileName }} + </div> + <div class='tail-wrapper {{ innerBubbleClasses }}'> + <div class='inner-bubble'> + <div class='quote-wrapper'></div> + <div class='attachments'></div> + <div class='content' dir='auto'> + {{ #message }}<div class='body'>{{ message }}</div>{{ /message }} + </div> </div> </div> - </div> - <div class='meta'> - <span class='timestamp' data-timestamp={{ timestamp }}></span> - <span class='status hide'></span> - <span class='timer'></span> - </div> - </div> + <div class='meta'> + <span class='timestamp' data-timestamp={{ timestamp }}></span> + <span class='status hide'></span> + <span class='timer'></span> + </div> + {{ #hoverIcon }} + <div class='hover-icon-container'> + <span class='dots-horizontal-icon'></span> + </div> + {{ /hoverIcon }} + </div> `, hourglass: ` <span class='hourglass'><span class='sand'></span></span>