diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js index f34f67e4..0362c84c 100644 --- a/js/views/file_input_view.js +++ b/js/views/file_input_view.js @@ -85,7 +85,8 @@ var Whisper = Whisper || {}; this.thumb.remove(); }, - deleteFiles: function() { + deleteFiles: function(e) { + if (e) { e.stopPropagation(); } this.clearForm(); this.$input.wrap('
').parent('form').trigger('reset'); this.$input.unwrap(); diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 469f6c23..aaffcd27 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -151,13 +151,13 @@ button { background: transparent; } .bottom-bar .attachments { position: relative; + float: left; height: 100%; width: 36px; - float: left; } + margin-right: 10px; } .bottom-bar .attachments .paperclip { width: 100%; height: 100%; - opacity: 0.5; background: url("/images/paperclip.png") no-repeat; background-size: 90%; background-position: center 6px; } @@ -171,6 +171,23 @@ button { left: 0; cursor: pointer; z-index: 1; } + .bottom-bar .attachments img.preview { + max-width: 100%; } + .bottom-bar .attachments .close { + font-family: sans-serif; + color: white; + position: absolute; + top: -10px; + left: 20px; + text-align: center; + cursor: default; + border-radius: 50%; + width: 20px; + height: 20px; + padding: 0px; + background: #666; + color: #fff; + text-align: center; } .bottom-bar .send-btn { float: right; height: 100%; diff --git a/stylesheets/view/_conversation.scss b/stylesheets/view/_conversation.scss index 2d04f1ed..6e4e8f69 100644 --- a/stylesheets/view/_conversation.scss +++ b/stylesheets/view/_conversation.scss @@ -208,17 +208,19 @@ button { .attachments { position: relative; + float: left; height: 100%; width: 36px; + margin-right: 10px; .paperclip { width: 100%; height: 100%; - opacity: 0.5; background: url('/images/paperclip.png') no-repeat; background-size: 90%; background-position: center 6px; } + input[type=file] { display: none; position: absolute; @@ -231,7 +233,28 @@ button { z-index: 1; } - float: left; + img.preview { + max-width: 100%; + } + + .close { + font-family: sans-serif; + color: white; + position: absolute; + top: -10px; + left: 20px; + text-align: center; + cursor: default; + border-radius: 50%; + width: 20px; + height: 20px; + padding: 0px; + + background: #666; + color: #fff; + text-align: center; + } + } .send-btn {