keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Fixup conversation page styles and functionality

Browse Source 
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.
pull/749/head
lilia 10 years ago
parent 7827c4c591
commit 8498d7ad1f
8 changed files with 134 additions and 73 deletions
Show Stats Download Patch File Download Diff File

54
conversation.html
Unescape Escape View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/send.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

2
js/conversation_panel.js
Unescape Escape View File

@ -24,7 +24,7 @@
conversation.fetch().then(function () {
new Whisper.ConversationView({
model: conversation
}).render().$el.appendTo($('#conversation-container'));
}).render().$el.prependTo($('body'));
});
};

4
js/views/conversation_view.js
Unescape Escape View File

@ -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;

2
js/views/file_input_view.js
Unescape Escape View File

@ -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() {

66
stylesheets/manifest.css
Unescape Escape View File

@ -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; }
.bottom-bar form, .bottom-bar input {
float: right;
height: 100%;
width: 100%; }
.bottom-bar input {
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%;
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 */

79
stylesheets/view/_conversation.scss
Unescape Escape View File

@ -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 {

Write Preview
Loading…
Cancel
Save