Fixup conversation page styles and functionality
Render the entire conversation from a template, because some parts of it must be rendered conditionally if it is a group vs private conversation. Also apply some style fixes and restore lost functionality: * Make conversation title bar fixed. * Widens message bubbles. * Unhide message list. * Restore attachment rendering. * Restore message sending and attachment file selection. * Style attachments file input as a paperclip. * Style send button like on Android and make it a submit input.
This commit is contained in:
lilia
parent
7827c4c591
commit
8498d7ad1f
8 changed files with 134 additions and 73 deletions
|
|
@ -11,38 +11,46 @@
|
|||
<link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body class='signal' data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="nacl/pnacl/{config}">
|
||||
<body class='signal'>
|
||||
<script type='text/x-tmpl-mustache' id='conversation'>
|
||||
<div class='title-bar' id='header'>
|
||||
{{#group}}
|
||||
<button class='new-group-update'>Update group</button>
|
||||
<button class='leave-group'>Leave group</button>
|
||||
{{/group}}
|
||||
{{^group}}
|
||||
<button class='end-session'>End Session</button>
|
||||
{{/group}}
|
||||
<button class='destroy'>Delete this conversation</button>
|
||||
</div>
|
||||
|
||||
<div class='title-bar' id='header'>
|
||||
<button class='settings-btn'>●</button>
|
||||
</div>
|
||||
<div class='discussion-container'></div>
|
||||
|
||||
<div class="bottom-bar">
|
||||
<form class='send'>
|
||||
<div class='attachments'>
|
||||
<div class='paperclip'></div>
|
||||
<input type='file' name='files[]' multiple class='file-input'>
|
||||
</div>
|
||||
<input class="send-btn" type='submit' value='' />
|
||||
<input class='send-message' type='textarea' placeholder="Send a message">
|
||||
</form>
|
||||
</div>
|
||||
</script>
|
||||
<script type='text/x-tmpl-mustache' id='attachment-preview'>
|
||||
<img src="{{ source }}" class="preview" />
|
||||
<div class="close">x</div>
|
||||
</script>
|
||||
<script type='text/x-tmpl-mustache' id='message'>
|
||||
|
||||
<img class="avatar" src="#" alt="">
|
||||
<div class='sender'>{{ sender }}</div>
|
||||
<img class='avatar' src='{{ contact_avatar }}'>
|
||||
<div class="bubble {{ bubble_class }}">
|
||||
<p class="content">{{ message }}</p>
|
||||
<!--<p class="sender">{{ sender }}</p>-->
|
||||
<div class='attachments'></div>
|
||||
<p class="timestamp">{{ timestamp }}</p>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<div class="bottom-bar">
|
||||
<button class="attachment-btn">●</button>
|
||||
<form class='send'>
|
||||
<input class='send-message' rows='6' type='textarea' placeholder="Send TextSecure message">
|
||||
<!--<div class='attachments'>
|
||||
<input type='file' name='files[]' multiple class='file-input'>
|
||||
</div>-->
|
||||
</form>
|
||||
<button class="send-btn">●</button>
|
||||
</div>
|
||||
|
||||
<div class="settings">
|
||||
Welcome to the settings page!!
|
||||
<a href="#" class="go-back">Go Back?</a>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/components.js"></script>
|
||||
|
||||
<script type="text/javascript" src="js/libtextsecure.js"></script>
|
||||
|
|
|
|||
BIN
images/paperclip.png
Normal file
BIN
images/paperclip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
BIN
images/send.png
Normal file
BIN
images/send.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -24,7 +24,7 @@
|
|||
conversation.fetch().then(function () {
|
||||
new Whisper.ConversationView({
|
||||
model: conversation
|
||||
}).render().$el.appendTo($('#conversation-container'));
|
||||
}).render().$el.prependTo($('body'));
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue