diff --git a/conversation.html b/conversation.html index c8f3cfb31b2f..5f5d80080b9f 100644 --- a/conversation.html +++ b/conversation.html @@ -11,38 +11,46 @@ - + + + -
- -
- - -
- -
- -
- Welcome to the settings page!! - Go Back? -
- diff --git a/images/paperclip.png b/images/paperclip.png new file mode 100644 index 000000000000..dc280a815667 Binary files /dev/null and b/images/paperclip.png differ diff --git a/images/send.png b/images/send.png new file mode 100644 index 000000000000..a25bf9ea2b0c Binary files /dev/null and b/images/send.png differ diff --git a/js/conversation_panel.js b/js/conversation_panel.js index 8bf0b8efdf52..c79a9b0ade95 100644 --- a/js/conversation_panel.js +++ b/js/conversation_panel.js @@ -24,7 +24,7 @@ conversation.fetch().then(function () { new Whisper.ConversationView({ model: conversation - }).render().$el.appendTo($('#conversation-container')); + }).render().$el.prependTo($('body')); }); }; diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 3216a9e98d8a..deebcbb9a87f 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -37,7 +37,7 @@ this.view = new Whisper.MessageListView({ collection: this.model.messageCollection }); - $('#header').after(this.view.el); + this.$el.find('.discussion-container').append(this.view.el); this.model.fetchMessages({reset: true}); }, @@ -73,7 +73,7 @@ sendMessage: function(e) { e.preventDefault(); - var input = this.$el.find('.send input'); + var input = this.$el.find('.send input.send-message'); var message = input.val(); var convo = this.model; diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js index 6b9f8709de02..2e629b550859 100644 --- a/js/views/file_input_view.js +++ b/js/views/file_input_view.js @@ -34,7 +34,7 @@ var Whisper = Whisper || {}; addThumb: function(e) { this.thumb.src = e.target.result; - this.$el.append(this.thumb.render().el); + this.$el.find('.paperclip').append(this.thumb.render().el); }, previewImages: function() { diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 61fa1efb7206..23b22d32799b 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -8,7 +8,9 @@ body { margin: 0; } .title-bar { - position: relative; + position: fixed; + top: 0; + width: 100%; z-index: 1; height: 36px; line-height: 24px; @@ -22,7 +24,6 @@ body { padding: 0; border: 0; outline: 0; - font-size: 36px; color: white; background: transparent; } @@ -53,7 +54,7 @@ button { font-size: 12px; } .message-list { - margin-bottom: 52px; + margin: 52px 0; padding: 0; list-style: none; font-size: 16px; @@ -74,7 +75,7 @@ button { left: -2px; display: inline-block; vertical-align: top; - max-width: calc(100% - 2 * 54px - 2 * 12px - 8px); + max-width: calc(100% - 54px - 2 * 12px); padding: 9px 12px; border-radius: 4px; box-shadow: 0 3px 3px -4px black; } @@ -114,11 +115,13 @@ button { .message-list .outgoing .bubble::after { right: -8px; border-left: 8px solid #2a92e7; } - .message-list img { + .message-list .attachments img { + max-width: 100%; } + .message-list img.avatar { height: 54px; width: 54px; box-sizing: border-box; - border: 27px #2a92e7 solid; + border: 27px #f3f3f3 solid; border-radius: 27px; } .message-list .timestamp { margin-top: 3px; @@ -143,22 +146,47 @@ button { outline: 0; font-size: 24px; background: transparent; } - .bottom-bar .attachments-btn { - left: 0; } + .bottom-bar .attachments { + position: relative; + height: 100%; + width: 36px; + float: left; } + .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; } + .bottom-bar .attachments input[type=file] { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + top: 0; + left: 0; + cursor: pointer; + z-index: 1; } .bottom-bar .send-btn { - right: 0; } + float: right; + height: 100%; + width: 36px; + border: none; + outline: none; + background: url("/images/send.png") no-repeat; + background-size: 90%; + background-position: center 1px; + cursor: pointer; } + .bottom-bar .send-btn::before { + content: '+'; } .bottom-bar form, .bottom-bar input { + height: 100%; } + .bottom-bar input[type=textarea] { + display: block; height: 100%; - width: 100%; } - .bottom-bar input { - height: 100%; - width: 100%; - box-sizing: border-box; - padding: 0 36px; border: 0; outline: 0; - font-size: 16px; - background: white; } + z-index: 5; } .index { color: #454545; @@ -206,8 +234,6 @@ button { width: 54px; background: #f3f3f3; border-radius: 27px; } - .index .message-list { - display: none; } .settings { height: 100%; @@ -216,5 +242,3 @@ button { display: none; } .settings-open .settings { display: block; } - -/*# sourceMappingURL=manifest.css.map */ diff --git a/stylesheets/view/_conversation.scss b/stylesheets/view/_conversation.scss index 1945f896b151..08a436eb66c8 100644 --- a/stylesheets/view/_conversation.scss +++ b/stylesheets/view/_conversation.scss @@ -12,7 +12,9 @@ body { } .title-bar { - position: relative; + position: fixed; + top: 0; + width: 100%; z-index: 1; height: 36px; line-height: 24px; @@ -27,7 +29,6 @@ body { padding: 0; border: 0; outline: 0; - font-size: 36px; color: white; background: transparent; } @@ -65,7 +66,7 @@ button { } .message-list { - margin-bottom: 36px + 16px; + margin: 36px + 16px 0; padding: 0; list-style: none; font-size: 16px; @@ -93,7 +94,7 @@ button { left: -2px; display: inline-block; vertical-align: top; - max-width: calc(100% - 2 * 54px - 2 * 12px - 8px); + max-width: calc(100% - 54px - 2 * 12px); padding: 9px 12px; border-radius: 4px; box-shadow: 0 3px 3px -4px black; @@ -163,12 +164,15 @@ button { } - img { + .attachments img { + max-width: 100%; + } + img.avatar { height: 54px; width: 54px; // delete next 2 lines box-sizing: border-box; - border: (54px / 2) $blue solid; + border: (54px / 2) $grey_l solid; border-radius: (54px / 2); } @@ -202,28 +206,59 @@ button { background: transparent; } - .attachments-btn { - left: 0; + .attachments { + position: relative; + height: 100%; + width: 36px; + + .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] { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + top: 0; + left: 0; + cursor: pointer; + z-index: 1; + } + + float: left; } .send-btn { - right: 0; + float: right; + height: 100%; + width: 36px; + border: none; + outline: none; + background: url('/images/send.png') no-repeat; + background-size: 90%; + background-position: center 1px; + cursor: pointer; + + &::before { + content: '+'; + } } form, input { height: 100%; - width: 100%; } - input { - height: 100%; - width: 100%; - box-sizing: border-box; - padding: 0 36px; - border: 0; - outline: 0; - font-size: 16px; - background: white; + input[type=textarea] { + display: block; + height: 100%; + border: 0; + outline: 0; + z-index: 5; } } @@ -295,12 +330,6 @@ button { border-radius: (54px / 2); } - // TODO: RJS - // SHAAAAAAME!!!! - .message-list { - display: none; - } - } .settings {